Colors
Amethyst Foundations — 10 color scales + semantic aliases. All values from the Figma DTCG canonical source.
neutral
25 #FCFCFC
50 #FAFAFA
100 #F4F4F5
200 #E4E4E7
300 #D1D1D6
400 #A0A0AB
500 #70707B
600 #51525C
700 #3F3F46
800 #26272B
900 #18181B
primary
25 #FBF9FF
50 #F7F2FF
100 #F0E5FF
200 #E2CCFF
300 #CAABFC
400 #A37CF7
500 #885FEC
600 #683FD3
700 #522CBD
800 #3F278F
900 #31226B
magic
25 #F6F2FF
50 #EDE4FF
100 #DFCFFF
200 #BF9EFF
300 #8E56FF
400 #6E25FF
500 #5E0DFF
600 #5100F1
700 #3F00BC
800 #24006B
900 #120036
info
25 #F5F8FF
50 #EFF4FF
100 #D1E0FF
200 #B2CCFF
300 #84ADFF
400 #528BFF
500 #2970FF
600 #155EEF
700 #004EEB
800 #0040C1
900 #00359E
success
25 #F6FEF9
50 #ECFDF3
100 #D1FADF
200 #A6F4C5
300 #85E9B3
400 #79D5A7
500 #2AB775
600 #039855
700 #027A48
800 #05603A
900 #054F31
warning
25 #FFFCF5
50 #FFFAEB
100 #FEF0C7
200 #FEDF89
300 #FEC84B
400 #FDB022
500 #F79009
600 #DC6803
700 #B54708
800 #93370D
900 #7A2E0E
critical
25 #FFFBFA
50 #FEF3F2
100 #FEE4E2
200 #FECDCA
300 #FDA29B
400 #F97066
500 #F04438
600 #D92D20
700 #B42318
800 #912018
900 #7A271A
accent-1
25 #F6FEFC
50 #F0FDF9
100 #CCFBEF
200 #99F6E0
300 #5FE9D0
400 #2ED3B7
500 #15B79E
600 #0E9384
700 #107569
800 #125D56
900 #134E48
accent-2
25 #F5FEFF
50 #ECFDFF
100 #CFF9FE
200 #A5F0FC
300 #A5F0FC
400 #22CCEE
500 #06AED4
600 #088AB2
700 #0E7090
800 #155B75
900 #164C63
accent-3
25 #FEFAF5
50 #FEF6EE
100 #FDEAD7
200 #F9DBAF
300 #F7B27A
400 #F38744
500 #EF6820
600 #E04F16
700 #B93815
800 #932F19
900 #772917
Typography
Inter variable — single font family, 5 role-based scales. Sizes and line-heights confirmed against the Figma variant inspector.
display · Bold 700
.display-lg · 57/64 The quick brown fox jumps over the lazy dog
.display-md · 45/52 The quick brown fox jumps over the lazy dog
.display-sm · 34/44 The quick brown fox jumps over the lazy dog
headline · Bold 700
.headline-xl · 36/46 The quick brown fox jumps over the lazy dog
.headline-lg · 32/40 The quick brown fox jumps over the lazy dog
.headline-md · 28/36 The quick brown fox jumps over the lazy dog
.headline-sm · 24/32 The quick brown fox jumps over the lazy dog
title · Bold 700
.title-xl · 26/34 The quick brown fox jumps over the lazy dog
.title-lg · 22/28 The quick brown fox jumps over the lazy dog
.title-md · 18/24 The quick brown fox jumps over the lazy dog
.title-sm · 16/20 The quick brown fox jumps over the lazy dog
label · Medium 500
.label-2xl · 26/32 The quick brown fox jumps over the lazy dog
.label-xl · 22/26 The quick brown fox jumps over the lazy dog
.label-lg · 16/20 The quick brown fox jumps over the lazy dog
.label-md · 14/20 The quick brown fox jumps over the lazy dog
.label-sm · 12/16 The quick brown fox jumps over the lazy dog
body · Regular 400
.body-xl · 18/28 The quick brown fox jumps over the lazy dog
.body-lg · 16/24 The quick brown fox jumps over the lazy dog
.body-md · 14/20 The quick brown fox jumps over the lazy dog
.body-sm · 12/16 The quick brown fox jumps over the lazy dog
Weights
Regular 400 The quick brown fox jumps over the lazy dog
Medium 500 The quick brown fox jumps over the lazy dog
SemiBold 600 The quick brown fox jumps over the lazy dog
Bold 700 The quick brown fox jumps over the lazy dog
Spacing
15-token scale from /Spacing-and-Grids. 4 px base, strict multiples.
| Token | Value | CSS variable |
|---|---|---|
| 0 | 0 | --ds-spacing-0 |
| xs | 4px | --ds-spacing-xs |
| sm | 8px | --ds-spacing-sm |
| md | 12px | --ds-spacing-md |
| lg | 16px | --ds-spacing-lg |
| xl | 24px | --ds-spacing-xl |
| 2xl | 32px | --ds-spacing-2xl |
| 3xl | 40px | --ds-spacing-3xl |
| huge | 56px | --ds-spacing-huge |
Corner Radius
4 canonical tokens from /Corner-Radius.
xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 12px
pill · 200px
Elevation
5 levels + background blur. Shadow values from Untitled UI scale.
elevation‑1
elevation‑2
elevation‑3
elevation‑4
elevation‑5
elevation‑focus
elevation‑floating
Motion
Duration + easing tokens.
| Token | Value |
|---|---|
| --ds-motion-duration-fast | 120ms |
| --ds-motion-duration-base | 200ms |
| --ds-motion-duration-slow | 320ms |
| --ds-motion-easing-standard | cubic-bezier(0.2, 0, 0, 1) |
| --ds-motion-easing-emphasized | cubic-bezier(0.2, 0, 0, 1) |