Foundations
Color and semantic tokens
Use roles such as canvas, ink, surface, and project identity rather than picking a new hex value for each screen.
On this page
Palette structure
The source defines canvas and surfaces, three text strengths, a line color, action accents, shadow colors, folder colors, and five project identities. The dark theme changes the underlying values while preserving their roles. The same token name is the contract between the component and its theme.
The downloaded JSON mirrors the CSS variables. It does not introduce a new token naming scheme or claim DTCG interoperability. A portable token package would require an explicit mapping, build pipeline, and validation.
Usage roles
| Tokens | Use | Constraint |
|---|---|---|
| --canvas, --surface, --surface-muted, --page-hero | Page, panel, secondary surface, and hero backgrounds | Do not substitute project fills for the page canvas. |
| --ink, --ink-soft, --ink-faint | Primary, secondary, and muted content | Muted is a visual role, not a guarantee of adequate small-text contrast. |
| --accent, --accent-strong, --accent-soft, --accent-ink | Actions, emphasized controls, subtle emphasis, and action labels | Use accent-ink on accent actions; check text uses of accent-strong. |
| --line | Dividers and component boundaries | A faint divider should not be the only indicator of an interactive control. |
| --project-{color}, --project-{color}-border | Project fill and border | Choose one of teal, blue, plum, sand, or coral. |
| --project-text, --project-muted | Text on project fills | Use paired project roles when changing theme. |
| --away-* | Time-away composition | Derived mixes stay linked to the base palette. |
| --folder-body, --folder-tab, --folder-border | Folder illustrations | Keep resource imagery visually connected to the document area. |
Exceptions already present
Status dots use hard-coded amber, brown, and green in ProjectStatusMenu. Event filter icons and schedule warning surfaces also include literal colors. These are documented implementation exceptions, not newly standardized semantic status tokens. A future standardization pass should define status roles and verify them in both themes.
Application rules
- Pair text and background roles deliberately; a palette swatch by itself says nothing about contrast.
- Keep project identity separate from completion or error status. A blue project is not a success state.
- Never communicate a project’s meaning using color alone. Retain its title, task label, and relevant icons.
- Use the exact source values in specimens. The portfolio documentation shell uses its own site palette.
Source palette
- --canvas
- #f4f3ef
- --surface
- #ffffff
- --surface-muted
- #ebeae5
- --page-hero
- #e8eeeb
- --ink
- #1b2427
- --ink-soft
- #536064
- --ink-faint
- #7c8788
- --line
- #dcdedb
- --accent
- #08bec3
- --accent-strong
- #078f94
- --accent-soft
- #d8f5f4
- --accent-ink
- #072f31
- --avatar
- #795eaa
- --menu-shadow
- rgba(29, 39, 40, 0.17)
- --calendar-shadow
- rgba(39, 49, 49, 0.09)
- --block-shadow
- rgba(39, 49, 49, 0.08)
- --block-shadow-hover
- rgba(39, 49, 49, 0.14)
- --folder-body
- #23676a
- --folder-tab
- #2f777a
- --folder-border
- #164c4e
- --project-text
- #213033
- --project-muted
- #5a696b
- --project-teal
- #a9e8e5
- --project-teal-border
- #73cbc8
- --project-blue
- #c7dff4
- --project-blue-border
- #9fc3e2
- --project-plum
- #e1d4ef
- --project-plum-border
- #c3addb
- --project-sand
- #eee2bd
- --project-sand-border
- #d8c78e
- --project-coral
- #f2d2c6
- --project-coral-border
- #dfa999
- --away-bg
- color-mix(in srgb, var(--surface-muted) 52%, transparent)
- --away-border
- color-mix(in srgb, var(--ink-faint) 42%, transparent)
- --away-stripe
- color-mix(in srgb, var(--ink-faint) 8%, transparent)
- --away-strip
- color-mix(in srgb, var(--ink-faint) 44%, var(--surface))
- --away-strip-ink
- var(--canvas)
- --away-ink
- color-mix(in srgb, var(--ink) 72%, transparent)
- --away-muted
- color-mix(in srgb, var(--ink) 48%, transparent)
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1