Styleguide

Tokens from Figma version 2420563425040360362. Sizes marked fluid shrink below 1440 px; their mobile values are provisional until the mobile design is delivered.

Colors

--color-brand #e1272e
--color-action #c8281c
--color-action-on-dark #e5483b
--color-copper #c97857
--color-ink #141518
--color-text-strong #2b2d31
--color-text #62646b
--color-text-muted #a3a5ab
--color-page #f4f3f0
--color-surface #ffffff
--color-surface-dark #17181a
--color-surface-darker #0b0c0e
--color-border #e2e0db
--color-border-strong #dcdad5
--color-border-subtle #e9e7e2

Text contrast (WCAG 2.2)

Text	Background	Ratio	Level
`--color-ink` #141518	`--color-page` #f4f3f0	16.45:1	AA
`--color-text-strong` #2b2d31	`--color-page` #f4f3f0	12.43:1	AA
`--color-text` #62646b	`--color-page` #f4f3f0	5.32:1	AA
`--color-text` #62646b	`--color-surface` #ffffff	5.91:1	AA
`--color-text-muted` #a3a5ab	`--color-page` #f4f3f0	2.22:1	fails
`--color-text-muted` #a3a5ab	`--color-surface` #ffffff	2.46:1	fails
`--color-action` #c8281c	`--color-page` #f4f3f0	5.01:1	AA
`white on --color-action` #ffffff	`--color-action` #c8281c	5.56:1	AA
`--color-on-dark` #f4f3f0	`--color-surface-dark` #17181a	16.01:1	AA
`--color-action-on-dark` #e5483b	`--color-surface-dark` #17181a	4.50:1	AA
`--color-brand` #e1272e	`--color-page` #f4f3f0	4.18:1	AA large only

Type scale (Geist)

--fs-184 Clarity on ASI risks
--fs-160 Clarity on ASI risks
--fs-62 Clarity on ASI risks
--fs-56 Clarity on ASI risks
--fs-48 Clarity on ASI risks
--fs-44 Clarity on ASI risks
--fs-32 Clarity on ASI risks
--fs-24 Clarity on ASI risks
--fs-22 Clarity on ASI risks
--fs-20 Clarity on ASI risks
--fs-17 Clarity on ASI risks
--fs-16 Clarity on ASI risks
--fs-15 Clarity on ASI risks
--fs-14 Clarity on ASI risks
--fs-13 Clarity on ASI risks
--fs-12 Clarity on ASI risks
--fs-11 Clarity on ASI risks

Geist Mono: 2024 2025 2026 / 18% / 1.9x

Spacing

--space-2
--space-4
--space-6
--space-8
--space-10
--space-12
--space-14
--space-16
--space-18
--space-20
--space-24
--space-28
--space-32
--space-36
--space-40
--space-48
--space-56
--space-64
--space-72
--space-80
--space-120

Radii

--radius-sm --radius-card --radius-pill