Foundations
Color 18
Canvas and text
--bg#0B0D10
--surface#111318
--surface-2#16181F
--hairline-softrgba(255, 255, 255, .06)
--hairlinergba(255, 255, 255, .08)
--hairline-strongrgba(255, 255, 255, .16)
--text-1#F4F5F7
--text-2#9CA3AF
--text-3#7A818E
Accent
--accent#E8352E
--accent-hover#EF5A54
--accent-ink#1A0605
--focus#E8352E
--accent-2transparent
--highlighttransparent
--accent-oncolor-mix(in srgb, var(--accent) 55%, white)
--accent-bloomradial-gradient(120% 150% at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, transparent) 42%, color-mix(in srgb, var(--accent) 10%, transparent) 70%, transparent 100%)
--accent-active-glownone
Status 6
Status
--success#8FCEA8
--success-bgrgba(133, 199, 161, .10)
--warn#E3B95F
--warn-bgrgba(227, 185, 95, .10)
--danger#F2ABA0
--danger-bgrgba(242, 171, 160, .10)
Data 7
Data
--data-0color-mix(in srgb, var(--text-1) 8%, transparent)
--data-1color-mix(in srgb, var(--accent) 36%, transparent)
--data-2color-mix(in srgb, var(--accent) 64%, transparent)
--data-3var(--accent)
--data-alt#3B82C4
--chart-gridvar(--hairline)
--chart-labelvar(--text-3)
Material 11
Material and elevation
--e-10 1px 2px rgba(0, 0, 0, .24)
--e-20 6px 20px -6px rgba(0, 0, 0, .28)
--e-30 20px 48px -12px rgba(0, 0, 0, .36)
--glass-fill-3rgba(15, 17, 22, .70)
--glass-borderrgba(255, 255, 255, .10)
--glass-blur26px
--glass-sat1.45
--glass-shadow0 1px 2px -1px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .6), 0 24px 60px -26px rgba(0, 0, 0, .8)
--glass-glow0 0 0 1px rgba(255, 255, 255, .055), 0 8px 40px -18px rgba(255, 255, 255, .11)
--glass-insetinset 0 1px 0 0 rgba(255, 255, 255, .34), inset 1px 0 0 0 rgba(255, 255, 255, .08), inset 0 -1px 0 0 rgba(0, 0, 0, .30), inset 0 10px 26px -16px rgba(255, 255, 255, .20)
--surface-bodylinear-gradient(168deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .022) 26%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .06) 100%)
Radius and spacing 22
Radius
--r-sm10px
--r-md14px
--r-lg22px
--r-pill999px
--r-btnvar(--r-md)
Spacing
--s-14px
--s-28px
--s-312px
--s-416px
--s-524px
--s-632px
--s-748px
--s-864px
--s-996px
--s-10128px
Layout
--container-prose65ch
--container-content72rem
--container-wide80rem
--nav-gap6px
--nav-framergba(255, 255, 255, .11)
--nav-mainrgba(8, 10, 13, .62)
--nav-pill-insetinset 0 1px 0 0 rgba(255, 255, 255, .10), inset 0 -1px 0 0 rgba(0, 0, 0, .35), 0 2px 8px -3px rgba(0, 0, 0, .5)
Type 6
Type
--font-sans'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--font-display'Archivo', var(--font-sans)
--font-mono'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace
--display-weight650
--heading-weight620
--btn-weight600
Motion 10
Duration
--dur-1120ms
--dur-2200ms
--dur-3320ms
--dur-4480ms
Motion curves
--ease-standardcubic-bezier(.2, 0, 0, 1)
--ease-emphcubic-bezier(.3, 0, .1, 1)
--ease-springcubic-bezier(.22, 1, .36, 1)
--ease-entrancecubic-bezier(.16, 1, .3, 1)
--ease-exitcubic-bezier(.3, 0, 1, 1)
--ease-backcubic-bezier(.34, 1.56, .64, 1)
Contrast 22
Pairs
| Pair | Ratio | Floor | Status |
|---|---|---|---|
| text-1 on bg | 4.5 | ||
| text-1 on surface | 4.5 | ||
| text-1 on surface-2 | 4.5 | ||
| text-2 on bg | 4.5 | ||
| text-2 on surface | 4.5 | ||
| text-2 on surface-2 | 4.5 | ||
| text-3 on bg | 4.5 | ||
| text-3 on surface | 4.5 | ||
| text-3 on surface-2 | 4.5 | ||
| accent-ink on accent | 4.5 | ||
| accent-ink on accent-hover | 4.5 | ||
| accent on bg | 3 | ||
| accent on surface | 3 | ||
| focus on bg | 3 | ||
| success on success-bg+surface | 4.5 | ||
| warn on warn-bg+surface | 4.5 | ||
| danger on danger-bg+surface | 4.5 | ||
| danger on surface | 4.5 | ||
| text-1 on accent*0.14+surface | 4.5 | ||
| text-1 on accent*0.14+bg | 4.5 | ||
| data-alt on bg | 3 | ||
| data-alt on surface | 3 |