Design System
I wanted something simple yet bold. I’m not a designer, so I chose coherence through constraints: two colors that invert, sharp borders, and clear typography. Fewer choices make every decision intentional and keep content first.
This system uses opacity for nuance (e.g., main/10 or secondary/10), preserves contrast in light/dark, and limits motion to what’s functional. Accessibility is the backbone: contrast, legibility, focus, and semantic structure.
Color System
The heart of the system. Limiting to just two colors forces thinking about hierarchy, contrast, and accessibility from the start. No intermediate grays, no accents, no escape hatches.
--color-main
Text, borders, primary elements
--color-secondary
Backgrounds, alternate text
Opacity Variations
The only "additional colors" allowed: opacity. Using transparency creates subtlety and depth without breaking the two-color rule.
Opacity introduces nuance without adding new hues. Use it for states, subtle backgrounds, and separators.
Main over Secondary
Secondary over Main
Theme System
Each theme defines two colors: colorful (vibrant/accent color) and contrasty (dark/background color). In light mode, colorful becomes --color-main (text/borders) and contrasty becomes --color-secondary (backgrounds). In dark mode they swap: contrasty becomes --color-main and colorful becomes --color-secondary. This way the system maintains high contrast in both modes using only two colors per theme.
Command line interface
colorful: #e5e5e6
contrasty: #000000
Potassium-powered meme energy
colorful: #D4B340
contrasty: #020123
Monochrome LCD legend
colorful: #A4D110
contrasty: #044F27
Blue screen computing legend
colorful: #BFDDF5
contrasty: #0A0A1C
Flow Kuromi
colorful: #FA7FB5
contrasty: #0A0A0A
Typography
Two type families with clear roles. The constraint continues.
“The quick little fox joyfully went down to the river singing a warm tune.”
“The quick little fox joyfully went down to the river singing a warm tune.”
“The quick little fox joyfully went down to the river singing a warm tune.”
“The quick little fox joyfully went down to the river singing a warm tune.”
Body copy should read calmly and effortlessly. Short lines, high contrast, and a steady vertical rhythm guide the eye without distraction.
Body copy should read calmly and effortlessly. Short lines, high contrast, and a steady vertical rhythm guide the eye without distraction.
const theme = "brutalist";
UI · LABEL · SYSTEM
Buttons
Project Cards
Visual Elements
Utility pattern to separate sections and emphasize areas without adding new colors. It actually motivated adding opacities: transparency instead of new hues. It respects the two‑color system and adapts to themes.
Decorative separator that uses a wavy shape to split sections without introducing new colors. It leverages opacity to add nuance while following the current theme contrast.