Colors
Surface ramp and the card and text tokens built on it.
Surfaces
A warm neutral ramp. 50 is the page, wash is the card fill (wash-dark in dark mode), 950 is primary text and inverted surfaces. Reach for the semantic tokens below in component code, not the raw steps.
surface/wash
#F8F7F3
surface/50
#F7F5F1
surface/75
#F2F0EB
surface/100
#EAE8E3
surface/200
#DEDBD6
surface/300
#C5C2BD
surface/400
#ABA9A4
surface/500
#92908B
surface/600
#797772
surface/700
#605E5A
surface/800
#474542
surface/900
#2E2C2A
surface/wash-dark
#1B1A19
surface/950
#141413
surface/1000
#0E0E0D
Cards
Every card keeps its hairline outline and shares one fill. Interactive cards darken the outline on hover. Visual or animated areas, like How good is built and the Impact map, sit one step deeper than the page.
Card
surface/wash · dark surface/wash-dark
Interactive card
Hover for the dark outline
Visual or animated area
surface/75 · dark surface/1000
| Role | Utility | Light | Dark |
|---|---|---|---|
| Card fill | bg-card | surface/wash | surface/wash-dark |
| Visual or animated area | bg-card-animated | surface/75 | surface/1000 |
| Card outline | border-border | surface/950 at 10% | surface/50 at 10% |
| Interactive hover outline | hover:border-card-border-hover | surface/950 at 90% | surface/50 at 90% |
Text and icons
| Role | Utility | Light | Dark |
|---|---|---|---|
| Primary text | text-foreground | surface/950 | surface/100 |
| Secondary text | text-muted-foreground | surface/700 | surface/500 |
| Icon outline | var(--ffg-muted) | surface/700 | surface/400 |
Usage
<article className="rounded-[var(--radius)] border border-border bg-card p-5 transition-colors hover:border-card-border-hover">
<h3 className="text-foreground">Our Vetting</h3>
<p className="text-muted-foreground">Ongoing review</p>
</article>