Palette

Every color below is a real variable in the Pyrokai Figma file: 119 primitives (a 15-step near-monochrome base, plus 8 hues × 13 steps) and 16 semantic tokens resolved for Dark and Light modes.

Base 15 steps

Fixed hue ~25° (warm), near-zero chroma, uniform OKLCH lightness from black to paper.

black#0d0b0a

950#151312

900#242120

850#312d2b

800#3c3836

700#524e4c

600#696463

500#807c7a

400#999593

300#b4afad

200#cdc9c7

150#d8d4d3

100#e4e0de

50#f0edec

paper#faf6f5

Accents 8 hues × 13 steps

Fixed hue and chroma per family, gamut-clipped at the extremes.

red

50#ffeaed

100#ffd2d9

150#ffbfc9

200#ffaab9

300#fa8099

400#ec6785

500#d45774

600#b84963

700#943c50

800#722d3d

850#612734

900#4f202a

950#3b161e

orange

50#ffece3

100#ffd6c2

150#ffc3a7

200#ffb08b

300#f88b54

400#ea7332

500#d36221

600#b65318

700#924417

800#713411

850#612c0f

900#4e240e

950#3a1a09

yellow

50#fcf0cf

100#f3dea7

150#ead189

200#e2c369

300#d0a70e

400#bb9500

500#a58300

600#8e7100

700#735a00

800#594500

850#4c3b00

900#3e3000

950#2e2200

green

50#e6f7d8

100#cfeab6

150#bde09e

200#acd585

300#8bbf53

400#75ad2f

500#659a1b

600#568413

700#456a13

800#35520f

850#2d460e

900#24390d

950#1a2908

cyan

50#cefaff

100#a3eff8

150#81e5f1

200#58dbea

300#00c3d3

400#00aebd

500#009aa7

600#008490

700#006a74

800#00525a

850#00464d

900#00393f

950#002a2e

blue

50#e5f2ff

100#c7e3ff

150#aed8ff

200#95ccff

300#5bb3ff

400#2aa0f9

500#128de2

600#0979c4

700#0f619d

800#0c4b79

850#0c4067

900#0c3454

950#08263e

purple

50#f0eeff

100#dfdbff

150#d2cbff

200#c5bbff

300#ad9bff

400#9b84f7

500#8972e0

600#7662c2

700#5f4f9b

800#483c78

850#3e3366

900#322a53

950#241e3e

magenta

50#ffeaf0

100#ffd1df

150#ffbdd2

200#ffa8c5

300#f681ac

400#e76899

500#d05787

600#b44a74

700#913c5d

800#702e47

850#5f273d

900#4e2031

950#3a1724

Semantic tokens 16 × 2 modes

8 neutral roles + 8 accent aliases, resolved per mode.

Dark

bg#151312

bg-elevated#242120

surface#312d2b

border#3c3836

border-strong#524e4c

text-subtle#696463

text-muted#999593

text#faf6f5

re#ec6785

or#ea7332

ye#bb9500

gr#75ad2f

cy#00aebd

bl#2aa0f9

pu#9b84f7

ma#e76899

Light

bg#faf6f5

bg-elevated#f0edec

surface#e4e0de

border#cdc9c7

border-strong#b4afad

text-subtle#999593

text-muted#807c7a

text#242120

re#b84963

or#b65318

ye#8e7100

gr#568413

cy#008490

bl#0979c4

pu#7662c2

ma#b44a74