Design Standard
The glph Design Standard
Every pixel on this site is governed by these tokens. This is what constraint-based design looks like in practice.
Color Tokens
glph-black
#0A0A0A
—
glph-surface
#141414
1.2:1
glph-section-alt
#111111
1.1:1
glph-border
#262626
1.7:1
glph-muted
#9CA3AF
5.9:1 AA
glph-white
#F5F5F5
18.7:1 AAA
glph-primary
#2563EB
5.1:1 AA
glph-primary-dark
#1D4ED8
4.3:1
Typography Scale
xs / 12pxDesign systems that govern themselves.
sm / 14pxDesign systems that govern themselves.
base / 16pxDesign systems that govern themselves.
lg / 18pxDesign systems that govern themselves.
xl / 20pxDesign systems that govern themselves.
2xl / 24pxDesign systems that govern themselves.
3xl / 30pxDesign systems that govern themselves.
4xl / 36pxDesign systems that govern themselves.
5xl / 48pxDesign systems that govern themselves.
Spacing Scale
Base unit: 4px. All spacing is a multiple of 4.
4px
8px
12px
16px
24px
32px
48px
64px
Five Rules
01
No arbitrary values.
02
Sharp edges. No border radius except where semantically required.
03
Dark mode native. Built dark-first.
04
Contrast verified. Every text element passes WCAG AA.
05
4px grid. All spacing is a multiple of 4.