Skip to content
Hypermedia Components

Color palette

These are the primitive color ramps — the bottom layer of the four-layer token model. Every semantic, component, and theme token ultimately resolves to one of the shades below.

Each ramp runs the standard Tailwind 50–950 scale. The gray ramp is the project’s default neutral; slate / zinc / neutral / stone are the alternative neutrals offered by the Theme builder. The accent / status hues back the built-in data-color themes and the fixed semantic info / success / warning / error colors.

white #ffffffblack #000000

Neutrals

color.gray
50#f9fafb
100#f3f4f6
200#e5e7eb
300#d0d5dd
400#9ca3af
500#6b7280
600#4b5563
700#374151
800#1f2937
900#111827
950#030712
color.slate
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617
color.zinc
50#fafafa
100#f4f4f5
200#e4e4e7
300#d4d4d8
400#a1a1aa
500#71717a
600#52525b
700#3f3f46
800#27272a
900#18181b
950#09090b
color.neutral
50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a3a3a3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a
color.stone
50#fafaf9
100#f5f5f4
200#e7e5e4
300#d6d3d1
400#a8a29e
500#78716c
600#57534e
700#44403c
800#292524
900#1c1917
950#0c0a09

Accent & status hues

color.blue
50#eff6ff
100#dbeafe
200#bfdbfe
300#93c5fd
400#60a5fa
500#3b82f6
600#2563eb
700#1d4ed8
800#1e40af
900#1e3a8a
950#172554
color.indigo
50#eef2ff
100#e0e7ff
200#c7d2fe
300#a5b4fc
400#818cf8
500#6366f1
600#4f46e5
700#4338ca
800#3730a3
900#312e81
950#1e1b4b
color.violet
50#f5f3ff
100#ede9fe
200#ddd6fe
300#c4b5fd
400#a78bfa
500#8b5cf6
600#7c3aed
700#6d28d9
800#5b21b6
900#4c1d95
950#2e1065
color.rose
50#fff1f2
100#ffe4e6
200#fecdd3
300#fda4af
400#fb7185
500#f43f5e
600#e11d48
700#be123c
800#9f1239
900#881337
950#4c0519
color.red
50#fef2f2
100#fee2e2
200#fecaca
300#fca5a5
400#f87171
500#ef4444
600#dc2626
700#b91c1c
800#991b1b
900#7f1d1d
950#450a0a
color.amber
50#fffbeb
100#fef3c7
200#fde68a
300#fcd34d
400#fbbf24
500#f59e0b
600#d97706
700#b45309
800#92400e
900#78350f
950#451a03
color.green
50#ecfdf5
100#d1fae5
200#a7f3d0
300#6ee7b7
400#34d399
500#10b981
600#059669
700#047857
800#065f46
900#064e3b
950#022c22

Referencing a shade

Section titled “Referencing a shade”

When you author a custom theme (see Authoring your own theme), point a DTCG token at a primitive by its path:

{
  "color": {
    "action": {
      "primary": {
        "bg": { "$type": "color", "$value": "{primitive.color.violet.600}" }
      }
    }
  }
}

Hover any swatch above to see its exact {primitive.color.*} path and hex. The build resolves the reference to the concrete value; the primitive itself is never emitted.

Section titled “Related”