Colors

The Naluma palette is warm, low-saturation, and grounded in the “dusk” aesthetic described in the Visual Identity Direction. No clinical blues, no meditation teals — warm neutrals and earth tones that feel settled rather than demanding.

Token source: tokens/primitive/color.json, tokens/semantic/color-light.json, tokens/semantic/color-dark.json

---

Primitive Palette

These are the raw color values. They are never used directly in components — semantic tokens reference them.

Warm Spectrum

#FBFAF1 primitive.color.warm-white Primary light background

#F9DFAE primitive.color.pale-wheat Secondary background

#F2C087 primitive.color.warm-gold Borders, dividers, accent highlights

#F29567 primitive.color.warm-peach Warm mid-tone accent

#E09370 primitive.color.muted-copper Waveform elements

#D17456 primitive.color.burnt-sienna Section labels

#D6643E primitive.color.deep-terracotta Strong warm accent

#863B3D primitive.color.dark-burgundy Secondary button text

Action Colors

#A55838 primitive.color.burnt-sienna-deep Primary action button

#914D31 primitive.color.burnt-sienna-deep-hover Primary action hover

#80442B primitive.color.burnt-sienna-deep-active Primary action active

#B5603E primitive.color.burnt-sienna-hover Burnt sienna hover

#6E3032 primitive.color.dark-burgundy-hover Dark burgundy hover

Feedback and Neutrals

#98D398 primitive.color.soft-sage Success, positive indicators

#7FBF7F primitive.color.soft-sage-hover Success hover

#FFFFFF primitive.color.white Pure white

Dark Mode Surfaces and Text

#2A2220 primitive.color.warm-charcoal Dark mode primary background

#352C29 primitive.color.dark-surface Dark mode surface elevation

#3D2E2A primitive.color.warm-dark Primary text (light mode)

#7A6560 primitive.color.muted-brown Secondary text

#B09A90 primitive.color.dim-brown Tertiary text, placeholders

---

Semantic Roles — Light Mode

Semantic tokens map primitives to functional roles. Components reference these, not the primitives directly.

Surfaces

Role	Token	Resolves to	Hex
Main background	semantic.color.surface.primary	primitive.color.warm-white	#FBFAF1
Header / accent areas	semantic.color.surface.secondary	primitive.color.pale-wheat	#F9DFAE
Card background	semantic.color.surface.card	primitive.color.white	#FFFFFF
Warm highlight areas	semantic.color.surface.warm	primitive.color.pale-wheat	#F9DFAE

Text

Role	Token	Resolves to	Hex
Primary body text	semantic.color.text.primary	primitive.color.warm-dark	#3D2E2A
Secondary text, captions	semantic.color.text.secondary	primitive.color.muted-brown	#7A6560
Tertiary text, placeholders	semantic.color.text.muted	primitive.color.dim-brown	#B09A90
Text on dark backgrounds	semantic.color.text.inverse	primitive.color.warm-white	#FBFAF1

Actions

Role	Token	Resolves to	Hex
Primary button background	semantic.color.action.primary	primitive.color.burnt-sienna-deep	#A55838
Primary button hover	semantic.color.action.primary-hover	primitive.color.burnt-sienna-deep-hover	#914D31
Primary button pressed	semantic.color.action.primary-active	primitive.color.burnt-sienna-deep-active	#80442B
Secondary button border/text	semantic.color.action.secondary	primitive.color.dark-burgundy	#863B3D
Secondary button hover	semantic.color.action.secondary-hover	primitive.color.dark-burgundy-hover	#6E3032

Accents

Role	Token	Resolves to	Hex
Borders, dividers	semantic.color.accent.warm	primitive.color.warm-gold	#F2C087
Waveform elements	semantic.color.accent.copper	primitive.color.muted-copper	#E09370
Section labels	semantic.color.accent.sienna	primitive.color.burnt-sienna	#D17456

Feedback

Role	Token	Hex
Success	semantic.color.feedback.success	#98D398
Success hover	semantic.color.feedback.success-hover	#7FBF7F
Warning	semantic.color.feedback.warning	#D97706
Error	semantic.color.feedback.error	#DC2626
Info	semantic.color.feedback.info	#0284C7

Borders

Role	Token	Resolves to	Hex
Default borders	semantic.color.border.default	primitive.color.warm-gold	#F2C087
Emphasized borders	semantic.color.border.strong	primitive.color.muted-copper	#E09370
Subtle dividers	semantic.color.border.subtle	primitive.color.pale-wheat	#F9DFAE

Focus

Role	Token	Resolves to	Hex
Focus ring	semantic.color.focus.ring	primitive.color.burnt-sienna-deep	#A55838

---

Semantic Roles — Dark Mode

Dark mode uses the same warm undertone. The transition from light to dark should feel like dimming a warm lamp, not switching to a different app.

Surfaces (dark)

Role	Token	Resolves to	Hex
Main background	semantic.color-dark.surface.primary	primitive.color.warm-charcoal	#2A2220
Elevated surface	semantic.color-dark.surface.secondary	primitive.color.dark-surface	#352C29
Card background	semantic.color-dark.surface.card	primitive.color.dark-surface	#352C29
Warm accent area	semantic.color-dark.surface.warm	primitive.color.warm-dark	#3D2E2A

Text (dark)

Role	Token	Resolves to	Hex
Primary text	semantic.color-dark.text.primary	primitive.color.warm-white	#FBFAF1
Secondary text	semantic.color-dark.text.secondary	primitive.color.dim-brown	#B09A90
Muted text	semantic.color-dark.text.muted	primitive.color.muted-brown	#7A6560
Inverse text	semantic.color-dark.text.inverse	primitive.color.warm-dark	#3D2E2A

Actions (dark)

Role	Token	Resolves to	Hex
Primary button	semantic.color-dark.action.primary	primitive.color.burnt-sienna-deep	#A55838
Primary hover	semantic.color-dark.action.primary-hover	primitive.color.burnt-sienna-deep-hover	#914D31
Primary pressed	semantic.color-dark.action.primary-active	primitive.color.burnt-sienna-deep-active	#80442B
Secondary text/border	semantic.color-dark.action.secondary	primitive.color.pale-wheat	#F9DFAE
Secondary hover	semantic.color-dark.action.secondary-hover	primitive.color.warm-gold	#F2C087

Note the key dark mode difference: the secondary action color flips from dark-burgundy (light) to pale-wheat (dark) for sufficient contrast against the dark surface.

Borders (dark)

Role	Token	Resolves to	Hex
Default borders	semantic.color-dark.border.default	primitive.color.dark-surface	#352C29
Strong borders	semantic.color-dark.border.strong	primitive.color.muted-brown	#7A6560
Subtle dividers	semantic.color-dark.border.subtle	primitive.color.warm-dark	#3D2E2A

Focus (dark)

Role	Token	Resolves to	Hex
Focus ring	semantic.color-dark.focus.ring	primitive.color.warm-gold	#F2C087

Light vs Dark at a glance

Light mode

Primary text on warm-white

Secondary text (muted-brown)

Tertiary / placeholder (dim-brown)

Dark mode

Primary text on warm-charcoal

Secondary text (dim-brown)

Tertiary / placeholder (muted-brown)