A simple design system
Principles
Typography is the interface.
Public Sans at the right size, weight, and spacing IS the design. Don’t decorate what type can communicate.
Whitespace is structural.
It’s not empty — it’s the architecture that gives content room to land. Never collapse it.
Monochrome is not monotone.
Black and white has infinite depth when you control value, contrast, opacity, and scale.
Content is the hero.
Every layout decision serves the content. If you’re reaching for a gradient, fix the content instead.
Precision over decoration.
A 4px difference in padding is more noticeable than a drop shadow. Craft lives in the grid.
01 · TYPOGRAPHY
One typeface.Four voices.
.type-display72 / 800 / -0.025em
Typography is the interface.
.type-h148 / 700 / -0.02em
Whitespace is structural.
.type-body16 / 400 / 1.6
Monochrome is not monotone. The black-and-white palette has infinite depth when you control value, contrast, and the scale at which type carries meaning.
.type-overline12 / 600 / 0.08em / uppercase
PRECISION OVER DECORATION
02 · COLOR
Monochrome is not monotone.
Primitive ramp
black#0A0A0A
gray-900#171717
gray-800#262626
gray-700#404040
gray-500#737373
gray-400#A3A3A3
gray-300#D4D4D4
gray-200#E5E5E5
gray-100#F5F5F5
white#FAFAFA
pure-white#FFFFFF
Semantic tokens
surface/primaryPage background
surface/secondarySection break, gray bands
surface/elevatedCards on secondary surfaces
surface/inverseDark sections
text/primaryBody, headings
text/mutedCaptions, metadata
text/faintDisabled, decorative marks
border/defaultHairline borders
03 · SPACING
Whitespace is structural.
xs4px
sm8px
md16px
lg24px
xl32px
2xl48px
3xl64px
4xl96px
5xl128px
section160px
04 · ELEVATION
Subtle by default.
shadow-s
shadow-m
shadow-l
shadow-xl
shadow-2xl
shadow-3xl
05 · CORNERS
Sharp by default.
none
sm
md
lg
Less, but better.
Let's chat.