Assets

Post links to custom CSS (bootstrap utilities + IBM designs), fonts, & icon libraries used

These will have to be local links (on GitHub or cPanel), for posterity

Philosophy

Mission

To create a minimal, no-fuss design system made to utilize all available space.

Principles

Minimal. Bold. Stylish. Mature. Informative.

Usable

All websites are not created equal. Unfortunately, this means many people around the world with disabilities are unable to use the websites they need to. Cleberg Design aims to narrow that gap by providing finely tuned usability settings so all users can enjoy the web.

Who I Am

Logo and Tagline

Color Palette

Core Colors

#d51e22

#ffffff

#000000

Shades of #d51e22

#d51e22

#bf1b1e

#aa181b

#951517

#7f1214

#6a0f11

#550c0d

#3f090a

#2a0606

#150303

#000000

Tints of #d51e22

#d51e22

#d93438

#dd4a4e

#e16164

#e5787a

#ea8e90

#eea5a6

#f2bbbc

#f6d2d2

#fae8e8

#ffffff

Action Colors

Display various states of page elements using a palette of bright and clear colors. When in doubt, use colors that are commonly used to display these emotions in real life. E.g. red usually means something is dangerous.

Success

#28a745

Info

#40a6ce

Warning

#f9e154

Danger

#da1e28

Dark Mode

When using a dark mode, avoid using pure black (#000000). Pure black can cause screen tearing and will disrupt the design of your site as users scroll. Instead, start with a dark grey for your background and lighten the grey for each layer above the background.

Here are the default dark mode colors used in this system:

Layer 1

#161616

Layer 2

#202020

Layer 3

#3b3b3b

Layer 4

#5b5b5b

Typography

Here are the default rulesets for CSS configuration:

font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
font-family: 'IBM Plex Serif', 'Georgia', Times, serif;

Iconography

Three styles: thin black, thin red, duo-tone

Need to find the perfect icon library to use locally

Display

Small whitespace, grids, use full webpage

Simple mobile designs

Little to no border radii

Voice and Writing

Be bold. Be brief. Send your message with energy without using an entire dictionary.