Visual System No. 01
Monochrome is the discipline of building complete visual hierarchy using only the relationship between light and dark. Zero hue. Infinite depth.
02 — Components
Every interactive element reduced to its essential form. Weight and space do the work that color is not allowed to do.
Primary Actions
States & Variants
03 — Color System
Nine values. Zero hue. Every shade serves a precise structural role. The entire system lives in the distance between #111111 and #ffffff.
#111111
Deep
#333333
Dark
#666666
Mid
#999999
Muted
#cccccc
Light Border
#e5e5e5
Surface
#f5f5f5
Near-white
#fafafa
Off-white
#ffffff
Pure White
Deep on White
18.1:1
WCAG AAA Compliant
Dark on White
10.4:1
WCAG AAA Compliant
Mid on White
5.7:1
WCAG AA Compliant
04 — Typography
Font weight is the sole differentiator. Six weight steps create the entire information hierarchy — all at the same gray value, same size.
Light — 300
The discipline of subtraction is harder than addition. Restraint demands more imagination than abundance.
Normal — 400
Every element earns its place or is removed. There is no decoration for decoration's sake in monochrome design.
Medium — 500
Font weight is the primary tool. Where color would speak loudly, weight whispers with equal authority.
Semibold — 600
Hierarchy emerges through contrast between light and heavy strokes — no hue required to establish dominance.
Bold — 700
The bold anchor draws the eye. Everything else recedes into supporting silence around the bold statement.
Extrabold — 800
Maximum weight for maximum gravity. Used sparingly, it commands absolute attention without spectacle.
Weight Cascade — All One Color
Extrabold Commands
Bold Establishes
Semibold Supports
Medium Participates
Normal Narrates
Light Recedes Into The Background
05 — Composition
Three compositional archetypes. Dark backgrounds reveal the purity of grayscale geometry when color is removed from the equation entirely.
Editorial Grid
Large dark rectangle dominates. Text blocks float in negative space. A single hairline divides zones.
Portfolio Spread
Three columns of varying height. Asymmetric tension. White breathing room between dark content blocks.
Minimal Card
Full bleed image simulation. Title anchored bottom-left. Weight contrast carries all narrative.
Wide Editorial — 12-column grid, two-zone layout
06 — Principles
Monochrome has strict disciplines. These boundaries are what give the system its coherence and authority.
Do
Use font-weight contrast as your primary hierarchy tool
Allow generous negative space to breathe between elements
Keep borders to a single 1px hairline at #e5e5e5
Slow down transitions to 500–700ms for deliberate elegance
Let the grid enforce alignment — no arbitrary placement
Use #111111 text on #ffffff for maximum readability
Reserve bold weight for at most one element per section
Communicate state changes through opacity, not color
Don't
Never introduce any hue — no blue links, no red errors
Never use drop shadows or box-shadows with spread
Never scale or translate elements on hover
Never use more than 3 gray values in a single component
Never add gradient backgrounds — flat surfaces only
Never use rounded-full pill shapes (rectangular only)
Never animate at speeds below 300ms or above 900ms
Never rely on color alone to convey information state
07 — Interaction
Hover over each card to observe the signature monochrome interaction: a 1px line growing at 700ms — no color change, no transform, no shadow.
Interface
A thin line grows from left to right beneath the label text on hover, marking the active selection.
Navigation
A vertical hairline appears to the left of the icon, growing from zero to full height on group hover.
Editorial
Horizontal rule expands across the full card width before text, marking the editorial section break.
Data
The line grows proportionally to represent progress or completion — no bar fill color needed.
Full-Width Reveal
The line that spans the full width of a card on hover signals completion — arrival at the end of an idea. The 700ms timing makes the reveal feel considered, not reactive.
Hover to reveal
Articles Published
284
This year
Design Systems
47
Documented
Components Built
1,200+
In production
08 — Philosophy
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
Antoine de Saint-Exupéry — Adapted for Design Systems
The power of monochrome comes from what you refuse to include. Every omission is an active choice.
Weight, size, and space create information architecture without any assistance from hue or saturation.
A system with zero color never goes out of style. It has no trend to follow and no trend to abandon.