Color System

Colors

All colors are authored in OKLCH for perceptual consistency. Hex equivalents are provided for design-tool use only.

Orange — The Spark

10 #fde7e3

20 #ffd4cc

30 #ffb6a8

40 #ff816a

Brand

50 #ff2800

60 #c91d00

70 #931200

80 #650900

90 #470500

100 #330300

Gray — The Blueprint

10 #ededed

20 #dfdfdf

30 #cccccc

40 #afafaf

50 #8d8d8d

60 #6d6d6d

70 #4e4e4e

80 #343434

90 #232323

100 #171717

Additional — Feedback States

Reserved exclusively for system feedback (success, warning, info). Not for decorative use.

Green Strong Success foreground #3aa85b

Green Subtle Success background #021c09

Yellow Strong Warning foreground #dfa11a

Yellow Subtle Warning background #221300

Blue Strong Info foreground #2784d5

Blue Subtle Info background #03172c

Background

color.background-default Primary canvas

#000000

color.background-hover Hover state

#171717

color.background-active Active state

#232323

color.background-brand Brand orange

#ff2800

color.background-inverse Inverted surface

#ffffff

Layer

color.layer-01 First surface layer

#171717

color.layer-hover-01 Layer 01 hover

#232323

color.layer-02 Second surface layer

#232323

color.layer-hover-02 Layer 02 hover

#343434

color.layer-accent Accent surface

#343434

Text

color.text-primary Default text

#ffffff

color.text-secondary Supporting text

#cccccc

color.text-placeholder Placeholder text

#6d6d6d

color.text-helper Helper text

#8d8d8d

color.text-disabled Disabled text

#4e4e4e

color.text-on-color Text on colored bg

#000000

color.text-error Error messages

#c91d00

color.text-success Success messages

#3aa85b

color.text-warning Warning messages

#dfa11a

color.text-info Info messages

#2784d5

Border

color.border-subtle Blueprint grid line

#232323

color.border-strong High-contrast divider

#6d6d6d

color.border-interactive Active input border

#ff2800

color.border-disabled Disabled border

#343434

Button

color.button-primary Primary default

#ff2800

color.button-primary-hover Primary hover

#ffffff

color.button-secondary Secondary default

#343434

color.button-tertiary Ghost default

transparent

color.button-danger Danger default

#931200

color.button-disabled Any disabled button

#232323

Support

color.support-error Error foreground

#c91d00

color.support-error-subtle Error background

#470500

color.support-success Success foreground

#3aa85b

color.support-success-subtle Success background

#021c09

color.support-warning Warning foreground

#dfa11a

color.support-warning-subtle Warning background

#221300

color.support-info Info foreground

#2784d5

color.support-info-subtle Info background

#03172c

Focus

color.focus-default Outer focus ring

#ff2800

color.focus-inset Inner separator ring

#000000