Stylesheet
The system this site is built from. Every value below is read from the live stylesheet at runtime and every contrast ratio is computed on the spot, so this page can’t drift from what the site actually renders.
Color
ink
ground
surface
muted
muted-2
meta
rule
accent
ink-fixed
surface-fixed
Contrast
Computed live with the WCAG 2.1 relative-luminance formula. Normal text needs 4.5:1, large text 3:1.
| Pair | Used for | Ratio | Verdict |
|---|---|---|---|
| Body and headings on the page | · | ||
| Secondary body copy | · | ||
| Small uppercase labels | · | ||
| Prose bullet dots | · | ||
| Photograph captions/scrims | · | ||
| Buttons and pills; footer card body text | · | ||
| Footer card group labels | · | ||
| Focus ring | · | ||
| Dark bands: titles and body | · | ||
| Dark bands: secondary copy | · | ||
| Dark bands: labels, secondary pill borders | · | ||
| Dark bands: card outcome lines | · | ||
| Dark bands: card labels | · |
Typography
Product Design
Design that holds up
Discovery
Align on business context, user needs, and organizational constraints.
Let's connect
Type scale
- 2xs
- xs
- sm
- base
- md
- lg
- xl
- 2xl
Motion
One easing curve, one duration. Scroll reveals are progressive enhancement: content is visible by default and only animates when JavaScript and motion preferences both allow it.