System

Colors — Primitive

• --color-obsidian-amber-50#faeee1
• --color-obsidian-amber-100#f5dcc4
• --color-obsidian-amber-200#efcba6
• --color-obsidian-amber-300#e0964d
• --color-obsidian-amber-400#da852f
• --color-obsidian-amber-500#a6621d
• --color-obsidian-amber-600#885018
• --color-obsidian-amber-700#4d2d0e
• --color-obsidian-amber-800#2f1c08
• --color-obsidian-amber-900#1a0f05
• --color-obsidian-amber-950#110a03
• --color-white#ffffff
• --color-black#000000

Colors — Semantic

• --color-bg-defaultdark #110a03 · light #ededed
• --color-bg-subtledark #1a0f05 · light #e2e2e2
• --color-bg-muteddark #2f1c08 · light #d6d6d6
• --color-bg-accentdark #e0964d · light #885018
• --color-bg-accent-hoverdark #efcba6 · light #4d2d0e
• --color-bg-inversedark #faeee1 · light #110a03
• --color-bg-elevateddark #4d2d0e · light #c4c4c4
• --color-text-emphasisdark #faeee1 · light #110a03
• --color-text-primarydark #efcba6 · light #2f1c08
• --color-text-secondarydark #da852f · light #885018
• --color-text-muteddark #a6621d · light #885018
• --color-text-accentdark #e0964d · light #885018
• --color-text-on-accentdark #110a03 · light #faeee1
• --color-border-defaultdark #2f1c08 · light #dcdcdc
• --color-border-strongdark #efcba6 · light #2f1c08
• --color-border-accentdark #e0964d · light #885018
• --color-border-emphasisdark #faeee1 · light #110a03
• --color-icon-defaultdark #efcba6 · light #2f1c08
• --color-icon-muteddark #a6621d · light #885018
• --color-icon-accentdark #e0964d · light #885018
• --color-icon-on-accentdark #110a03 · light #faeee1
• --color-icon-emphasisdark #faeee1 · light #110a03

Spacing

• --spacing-xxs2px
• --spacing-xs4px
• --spacing-sm8px
• --spacing-md16px
• --spacing-lg24px
• --spacing-xl32px
• --spacing-2xl48px
• --spacing-3xl64px
• --spacing-4xl96px
• --spacing-5xl128px

Radius

• --radius-none0px
• --radius-sm4px
• --radius-md8px
• --radius-lg16px
• --radius-full9999px

Typography

--font-family-body'Manrope Variable', Manrope, sans-serif

• --font-weight-regular400
• --font-weight-medium500
• --font-weight-bold700

• Ag--font-size-xs12px / 16px line-height
• Ag--font-size-sm14px / 20px line-height
• Ag--font-size-base16px / 24px line-height
• Ag--font-size-lg18px / 28px line-height
• Ag--font-size-xl20px / 28px line-height
• Ag--font-size-2xl24px / 32px line-height
• Ag--font-size-3xl32px / 40px line-height
• Ag--font-size-4xl40px / 48px line-height
• Ag--font-size-5xl48px / 56px line-height
• Ag--font-size-6xl64px / 72px line-height
• Ag--font-size-7xl80px / 88px line-height
• Ag--font-size-8xl96px / 104px line-height
• Ag--font-size-9xl128px / 136px line-height

Motion

Durations, shown against a fixed --ease-fade:

• --duration-fast0.2s
• --duration-base0.35s
• --duration-slow0.75s

Curves, shown against a fixed --duration-base:

• --ease-revealcubic-bezier(0.19, 1, 0.22, 1)
• --ease-fadecubic-bezier(0.25, 0.46, 0.45, 0.94)