Design system
Style guide
Read live from assets/tokens.css. Every value below is measured in your browser at load, so this page cannot drift from the system it documents.
1. Colour
Ground
--c-bg
…
--c-surface
…
--c-surface-alt
…
--c-border
…
Brand
--c-brand
…
--c-brand-deep
…
--c-brand-mid
…
Accent
--c-accent
…
--c-accent-hover
…
--c-accent-ink
…
--c-accent-soft
…
Ink
--c-ink
…
--c-ink-muted
…
--c-on-dark
…
--c-on-dark-mut
…
Status
--c-success
…
--c-sale
…
2. Contrast
Measured at this viewport width. Anything failing is a bug in the palette, not in this page.
| Pair | Ratio | Needs | Result |
|---|---|---|---|
| Body on page | … | 4.5:1 | … |
| Body on card | … | 4.5:1 | … |
| Muted on page | … | 4.5:1 | … |
| Brass text on page | … | 4.5:1 | … |
| Brass text on card | … | 4.5:1 | … |
| Text on brand | … | 4.5:1 | … |
| Text on deep brand | … | 4.5:1 | … |
| Muted on brand | … | 4.5:1 | … |
| Button label on brass | … | 4.5:1 | … |
| Button label, hover | … | 4.5:1 | … |
| Brass on brand (large) | … | 3.0:1 | … |
| Badge label on sale | … | 4.5:1 | … |
| Label on success | … | 4.5:1 | … |
| Sale text on page | … | 4.5:1 | … |
3. Type scale
Fluid from 360px to 1440px. Resize the window and these numbers move. The floor is 14px — nothing on the site goes below it.
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
Har cup mein ghar wali chai
4. Buttons
5. Form fields
6. Shape, depth and space
--r-sm…--r-md…--r-lg…--r-pill…--shadow-rest--shadow-raised