Design System
This system is built from a clear constraint: two colors, sharp borders, and typography with a stable hierarchy. By reducing visual choices, content takes priority and every page keeps the same language.
Accessibility is built into the design: readable contrast, visible focus, semantic structure, and straightforward navigation. If you want to review criteria and scope in detail, read the Accessibility Statement.
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
Contrast ratio
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.
colorful: #FAFFF8
contrasty: #03185D
colorful: #E3FCBD
contrasty: #1F178A
colorful: #EFFF00
contrasty: #2F1F90
colorful: #94F9E5
contrasty: #0A0422
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.”
“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
Core interaction building block. This section shows states, visual hierarchy, and action variants.
Project Cards
Compact content container focused on quick scanning, clear linking, and consistent structure.
Keyboard Keys
Visual representation of shortcuts and system keys for documentation and contextual help.
Showcase
Seven Segment Display
Segment-based digit system for numeric readouts. Used in status and metrics to keep readability and visual rhythm.
Visual Elements
Lower-priority decorative resources that reinforce identity without competing with content.
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.