SuperMinimalCSS
This article was originally written by Mike Mai, the creator of SuperMinimalCSS.
Read the original article on the original page.
Retrieved on September 3, 2025
Table of Contents
About
SuperMinimalCSS is pure black & white CSS awesomeness with nice typography (for both English and Chinese). Less is more
is the main principle of this mini design system.
| Colors |
| Classes |
| Gradients |
| Animations |
| Breakpoints |
| Custom fonts |
| Auto dark mode |
| Hover & focus styles |
| Auto high contrast mode |
| Fluid typography & spacing |
| Under 15KB minified file size |
| Browser zoom & font-size compatibility |
⚠ Fair warning: this pen is constantly being updated and using logical CSS that might not have good browser support.
Foundations
The system is built on a small set of design tokens.
Color (or lack thereof)
| Token | Light Mode Value | Dark Mode Value | Description |
|---|---|---|---|
| --color-text | #202020 | #f0f0f0 | The page text color. |
| --color-bg | #f4f4f4 | #090909 | The page background color. |
Everything is black and white. Actually, off-black and off-white because the strong contrast of true black and white will hurt your eyes. You are welcome.
There are only 2 tokens: page text color and page background color. The two colors are basically the opposite of each other, which means high contrast. Each element is colored with considerations to that relationship.
Spacing
| Token | Value | Description |
|---|---|---|
| --gutter | Scale from 1ch to 3ch | The inline spacing base and the grid gutter. |
| --stack | Scale from 1.25ex to 1.75ex | The block spacing base and the default paragraph spacing. |
| --line-length | 70ch | The optimal line length for reading. |
| --page-padding-inline | Scale from 10vw to whatever is available after subtracting the optimal line length of 70ch from 100% viewpoint width | The inline inset spacing of a single-column page layout. |
Spacing is fluid. It scales with viewport and character width horizontally; it scales with viewport and x-height vertically. This approach allows any System UI font to have unique spacing.
There is no range of spacing tokens, only the base ones. For each use case, spacing is calculated using the base tokens.
Typography
| Token | Value | Description |
|---|---|---|
| --font | System UI Sans | The sans-serif font for heading and body text. |
| --font-italic | Georgia | The classic font is used solely for blockquotes and italic text (because italic sans-serif is ugly). |
| --font-code | System UI Monospace | The monospace font for code text. |
| --font-size | 100% | The root font-size of a page. |
System UI fonts are applied to optimize performance and the heading hierarchy is defined by the browser defaults.
The root font-size is fluid, which allows all text to scale with viewport.
Elements
Some of the most used html elements designed in black & white.
Inline Text
There are various ways to style text: emphasis (italic), strong emphasis (bold), link, abbr, code, key, superscript, subscript, small, and quote
.
Details and Summary
You are looking at it. This is the details
and you just clicked summary
to expand it.
Blockquote
Simplicity is the ultimate sophistication.
Code Block
// This is a block of code.
pre { display: block; }Description List
- Beast of Bodmin
- A large feline inhabiting Bodmin Moor.
- Morgawr
- A sea serpent.
- Owlman
- A giant owl-like creature.
Un-ordered List
- This is a list item.
- This is 1st level.
- This is 2nd level.
- This is 3rd level.
- This is 3rd level.
- This is 2nd level.
- This is 2nd level.
- This is a list item.
Ordered List
- This is a list item.
- This is 1st level.
- This is 2nd level.
- This is 3rd level.
- This is 3rd level.
- This is 2nd level.
- This is 2nd level.
- This is a list item.
Figure
Table
| Top Heading | Top Heading | Top Heading | Top Heading | Top Heading | Top Heading | |
|---|---|---|---|---|---|---|
| Side Heading | Cell | Cell | Cell | Cell | Cell | Cell |
| Side Heading | Cell | Cell | Cell | Cell | Cell | Cell |
| Footer Side Heading | Footer cell | Footer cell | Footer cell | Footer cell | Footer cell | Footer cell |
Form Elements
Headings
This is H2
This is H3
This is H4
This is H5
This is H6
Skip link
Hard refresh the page and hit the tab key. Skip link must be the first child of the <body> element.
Add-ons
The add-ons contain the most common layouts. Data attributes are required for styling.
You may say, Isn’t this cheating? Using attributes for styling is not so different than using classes.
Well, yes. That’s why I call these add-ons
. They are optional.
Flag
Flag: image on the left and text on the right
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae cupiditate, praesentium ducimus necessitatibus tenetur molestias est fuga consequuntur maiores.
Grid
Page layout
The current page is a single column page layout with header and footer. Header and footer are pushed against the top and bottom of the page respectively, regardless of how tall the main content is. Page content has a max width of 75 characters, which is the optimal line length.