Color
The Sitka palette is built around a spruce green brand identity with a full neutral scale. All colors are tokenized and adapt to light and dark mode.
Brand
The core palette. brand.cyan is the primary alert and reminder color.
Neutral
True neutral grays — no color cast. Matches Sitka Design System standards.
Semantic
Status colors with consistent meaning across the system.
#22c55e#f59e0b#ef4444#3b82f6Dark Mode Adaptation
Sitka does not simply invert colors in dark mode. Each semantic token maps to a different step in the palette — lighter backgrounds become deeper darks, not their inverse. This preserves contrast ratios and the overall hierarchy.
| Token | Light | Dark |
|---|---|---|
--background | neutral.50 (#fafafa) | neutral.950 (#0a0a0a) |
--surface | neutral.0 (#ffffff) | neutral.900 (#171717) |
--border | neutral.200 (#e5e5e5) | neutral.800 (#282828) |
--text-primary | neutral.800 (#282828) | neutral.50 (#fafafa) |
--text-secondary | neutral.500 (#747474) | neutral.400 (#a7a7ac) |
--accent | brand.cyan (#00C0E8) | brand.cyan (#00C0E8) |
Colour Roles in Context
The same token set rendered in both modes. Surface values step up in increments of roughly 5–10 lightness points so depth reads clearly without harsh contrast.
Dark mode
--backgroundPage canvas--surfaceCards, panels--surface-raisedDropdowns, popovers--surface-hoverHover state fill--text-primary
Headings, body
--text-secondary
Labels, captions
--text-tertiary
Placeholders, hints
--nav-active-color
Interactive, brand
Light mode
--backgroundPage canvas--surfaceCards, panels--surface-raisedDropdowns, popovers--surface-hoverHover state fill--text-primary
Headings, body
--text-secondary
Labels, captions
--text-tertiary
Placeholders, hints
--nav-active-color
Interactive, brand
Patterns in Dark Mode
How the palette behaves across the two most common patterns — onboarding and settings. Notice that accent fills remain readable at full opacity in both contexts.
Onboarding — dark
Step 2 of 4
Connect your workspace
Link your existing tools so Sitka can pull in your data automatically.
Settings — dark
Appearance
Notifications
Never use pure black
Pure #000000 backgrounds create harsh contrast. Sitka dark uses #09090c — a near-black with a cool tint that reads as black while being easier on the eyes.
Elevation through value, not shadows
In dark mode, shadows don't read. Use surface stepping (background → surface → surface-raised) to communicate elevation instead.
Accent stays green
The brand green (#219653 light, #34a865 dark) maintains sufficient contrast in both modes. Don't replace it with a lighter tint just because you're in dark mode.