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
To create a minimal, no-fuss design system made to utilize all available space.
Minimal. Bold. Stylish. Mature. Informative.
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
Shades of #d51e22
Tints of #d51e22
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.
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:
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;
Three styles: thin black, thin red, duo-tone
Need to find the perfect icon library to use locally
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.