Design Tokens

Colors, typography, spacing, radii, and shadows that power every APPEM component.

Color Palette

Brand

50
#f0f7ff
100
#e0efff
200
#b8dcff
300
#7ac0ff
400
#3aa0ff
500
#0a7fff
600
#0062d6
700
#004dab
800
#00418d
900
#003874
950
#00234d

Ink

50
#f6f7f9
100
#eceef2
200
#d5d9e2
300
#b0b8c9
400
#8591ab
500
#667391
600
#515c78
700
#434b62
800
#3a4153
900
#333947
950
#0f1117

Accent

warm
#ff6b35
electric
#00d4aa
subtle
#e8f4f0

Typography

Display — Instrument Serif

font-display
Heading 1 — 3rem
Heading 2 — 2.25rem
Heading 3 — 1.875rem
Heading 4 — 1.5rem
Heading 5 — 1.25rem
Italic variant — 1.125rem

Body — DM Sans

font-body
Light (300)The quick brown fox jumps over the lazy dog
Regular (400)The quick brown fox jumps over the lazy dog
Medium (500)The quick brown fox jumps over the lazy dog
Semi-bold (600)The quick brown fox jumps over the lazy dog
Bold (700)The quick brown fox jumps over the lazy dog

Mono — JetBrains Mono

font-mono
const tokens = {
brand: "#0a7fff",
ink: "#0f1117",
radius: "0.625rem",
};

Spacing Scale

10.25rem
20.5rem
30.75rem
41rem
61.5rem
82rem
123rem
164rem
246rem

Border Radius

sm
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
full
9999px

Shadows

sm
DEFAULT
md
lg
xl