Design Tokens

W3C DTCG token system — preview resolved values per OEM brand

Colors (11)

primary

#1086a4

secondary

#303030

accent

#e07a5f

surface

#ffffff

surface-muted

#f5f5f5

border

#e3e3e3

text-primary

#303030

text-secondary

#909090

success

#10b981

error

#ef4444

warning

#f59e0b

Typography

headingInter

The quick brown fox jumps over the lazy dog

bodyInter

The quick brown fox jumps over the lazy dog

monoJetBrains Mono

The quick brown fox jumps over the lazy dog

Size Scale

xsAa0.625rem
smAa0.75rem
baseAa0.875rem
lgAa1.125rem
xlAa1.5rem
2xlAa2rem
3xlAa2.5rem
4xlAa3.5rem

Spacing

0
0px
1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px
24
96px

Border Radius

none

sm

md

lg

xl

full

Shadows

sm

md

lg

Generated CSS

:root {
  --ea-color-primary: #1086a4;
  --ea-color-secondary: #303030;
  --ea-color-accent: #e07a5f;
  --ea-color-surface: #ffffff;
  --ea-color-surface-muted: #f5f5f5;
  --ea-color-border: #e3e3e3;
  --ea-color-text-primary: #303030;
  --ea-color-text-secondary: #909090;
  --ea-color-success: #10b981;
  --ea-color-error: #ef4444;
  --ea-color-warning: #f59e0b;
  --ea-fontFamily-heading: Inter;
  --ea-fontFamily-body: Inter;
  --ea-fontFamily-mono: JetBrains Mono;
  --ea-fontSize-xs: 0.625rem;
  --ea-fontSize-sm: 0.75rem;
  --ea-fontSize-base: 0.875rem;
  --ea-fontSize-lg: 1.125rem;
  --ea-fontSize-xl: 1.5rem;
  --ea-fontSize-2xl: 2rem;
  --ea-fontSize-3xl: 2.5rem;
  --ea-fontSize-4xl: 3.5rem;
  --ea-fontWeight-light: 300;
  --ea-fontWeight-regular: 400;
  --ea-fontWeight-medium: 500;
  --ea-fontWeight-semibold: 600;
  --ea-fontWeight-bold: 700;
  --ea-fontWeight-extrabold: 800;
  --ea-lineHeight-tight: 1.1;
  --ea-lineHeight-snug: 1.3;
  --ea-lineHeight-normal: 1.5;
  --ea-lineHeight-relaxed: 1.75;
  --ea-spacing-0: 0px;
  --ea-spacing-1: 4px;
  --ea-spacing-2: 8px;
  --ea-spacing-3: 12px;
  --ea-spacing-4: 16px;
  --ea-spacing-6: 24px;
  --ea-spacing-8: 32px;
  --ea-spacing-12: 48px;
  --ea-spacing-16: 64px;
  --ea-spacing-24: 96px;
  --ea-borderRadius-none: 0px;
  --ea-borderRadius-sm: 4px;
  --ea-borderRadius-md: 8px;
  --ea-borderRadius-lg: 12px;
  --ea-borderRadius-xl: 16px;
  --ea-borderRadius-full: 9999px;
  --ea-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --ea-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --ea-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}