Colors

Primary palette

The two primary accent colors used throughout the system.

Blue — Primary accent

#EEF6FF

--blue-50 Surface tint

#CFE6FE

--blue-100 Soft bg / white-native

#A3CFFD

--blue-200 Muted accent

#6FB4FB

--blue-300 Light interactive

#3E98FA

--blue-400 Dark mode accent

#2186EB

--blue-500 Primary accent

#1970D2

--blue-600 Hover state

#1259AF

--blue-700 Strong/pressed

#0C438A

--blue-800 Deep text on light

#082D60

--blue-900 Dark mode low accent

#041735

--blue-950 Near-black tint

Vermilion — Action / highlight

#FFF2EE

--vermilion-50 Surface tint

#FFE6DF

--vermilion-100 Soft bg

#FFC9BC

--vermilion-200 Muted highlight

#FFA494

--vermilion-300 Light interactive

#FF7461 action

--vermilion-400 Dark mode action

#F03A17 action

--vermilion-500 Primary action

#CC3010

--vermilion-600 Hover

#A6260B

--vermilion-700 Pressed

#821D07

--vermilion-800 Deep text

#5A1304

--vermilion-900 Near-black

#300A02

--vermilion-950 Deepest

---

Extended palette

The extended palette is available for data visualisation, thematic variation, and future brand expressions. Use sparingly in UI — prefer blue and vermilion.

Teal — Field Notes theme

#F0FAF7

--teal-50

#D6F2EC

--teal-100

#ACE4D9

--teal-200

#7DD4C5

--teal-300

#52C0AF

--teal-400

#2F9E8F

--teal-500 Field Notes accent

#27857A

--teal-600

#1E6C62

--teal-700

#165249

--teal-800

#0D3831

--teal-900

#061E1A

--teal-950

Orange

#FFF4F0

--orange-50

#FFE1D8

--orange-100

#FFC3B0

--orange-200

#FFA287

--orange-300

#FF825E

--orange-400

#ED582A

--orange-500 Warm accent

#D04C23

--orange-600

#B13F1C

--orange-700

#933215

--orange-800

#6C240E

--orange-900

#3A1307

--orange-950

Green

#EDFCF3

--green-50

#D3FCE1

--green-100

#A5F7C2

--green-200

#70EFA0

--green-300

#44E27E

--green-400

#36D35E

--green-500 Success / positive

#28B24D

--green-600

#1D8F3C

--green-700

#136C2C

--green-800

#0A481D

--green-900

#042410

--green-950

Purple

#F8F4FD

--purple-50

#F1EAF9

--purple-100

#E0D3F4

--purple-200

#C9B4EC

--purple-300

#AF8FE2

--purple-400

#7F56C2

--purple-500 Creative / lateral

#6C47A8

--purple-600

#57388E

--purple-700

#412A72

--purple-800

#2C1B52

--purple-900

#160D2C

--purple-950

Rose

#FFF1F1

--rose-50

#FFE0E0

--rose-100

#FFC0C0

--rose-200

#FF9898

--rose-300

#FF6B6B

--rose-400

#E63946

--rose-500 Error / critical

#C92D3A

--rose-600

#A8222E

--rose-700

#861722

--rose-800

#5F1018

--rose-900

#33080D

--rose-950

---

Neutrals

Cool gray — default neutral

#F6F8FB

--cool-50 Page bg

#EEF2F6

--cool-100 Surface

#D8E0EB

--cool-200 Border

#BAC8D8

--cool-300

#99AABF

--cool-400

#88919A

--cool-500 Muted text

#6E7880

--cool-600

#565E65

--cool-700

#3E444A

--cool-800

#282D30

--cool-900

#131619

--cool-950 Dark bg

Neutral gray — pure

#F9F9F9

--neutral-50

#F3F3F3

--neutral-100

#E4E4E4

--neutral-200

#CACACA

--neutral-300

#ABABAB

--neutral-400

#888888

--neutral-500 Mid gray

#6C6C6C

--neutral-600

#525252

--neutral-700

#3B3B3B

--neutral-800

#252525

--neutral-900

#111111

--neutral-950

---

Semantic color mapping

Starlight theme tokens → hs108 values

Token	Value	Usage
--sl-color-accent-low ⎘	#CFE6FE / #082D60	Subtle accent background (light/dark)
--sl-color-accent ⎘	#2186EB / #3E98FA	Primary interactive accent (light/dark)
--sl-color-accent-high ⎘	#1259AF / #A3CFFD	Strong accent, pressed states (light/dark)
--sl-color-gray-5 ⎘	#D8E0EB	Border default — cool-200
--sl-color-gray-6 ⎘	#EEF2F6	Surface elevated — cool-100
--sl-color-gray-7 ⎘	#F6F8FB	Page background — cool-50
--hs-highlight ⎘	#F03A17 / #FF7461	Action color — vermilion (light/dark)
--hs-highlight-soft ⎘	#FFE6DF / #300A02	Soft action bg (light/dark)