Primary Palette
The expressive layer of the brand. Built for recognition, hierarchy, and emotional tone.
Category
Colors
Color language split into three practical layers: Primary, Neutral, and System. Each block defines why it exists, when to use it, and how to apply it in production.
Core brand authority
Royal Signal
Why: Defines identity and gives the product its recognizable signature.
When: Primary CTA, key highlights, and branded moments.
How: Use `primary.base` for action, `primary.soft` for subtle backgrounds, `primary.strong` for emphasis.
Token family: primary
Royal Signal scale
Click any shade to inspect details.
Selected shade
purple.500
HEX: #d8b4fe
RGB: 216, 180, 254
HSL: 269, 97%, 85%
CMYK: 15%, 29%, 0%, 0%
purple.500
Primary shade
Positive accent
Fresh Lift
Why: Adds lightness and optimistic momentum to support purple.
When: Secondary highlights, success-adjacent visuals, and onboarding tone.
How: Use as support layer; do not replace primary hierarchy.
Token family: accent.mint
Fresh Lift scale
Click any shade to inspect details.
Selected shade
mint.500
HEX: #99f6e4
RGB: 153, 246, 228
HSL: 168, 84%, 78%
CMYK: 38%, 0%, 7%, 4%
mint.500
Primary shade
Informational accent
Clear Depth
Why: Introduces clarity and confidence for analytical or informational touchpoints.
When: Data highlights, informative badges, and neutral-cool accents.
How: Use as tertiary accent behind primary and mint.
Token family: accent.blue
Clear Depth scale
Click any shade to inspect details.
Selected shade
blue.500
HEX: #93c5fd
RGB: 147, 197, 253
HSL: 212, 96%, 78%
CMYK: 42%, 22%, 0%, 1%
blue.500
Primary shade
Naming note: these editorial names are for narrative clarity in the manual. In implementation and team communication, always use semantic token names (e.g. primary.base, surface.card, feedback.success).
Implementation quick reference
Import semantic source:import { colorTokens } from "@career/design-system/tokens/colors"
Tailwind semantic aliases:bg-ds-surface-card text-ds-text-primary border-ds-border-subtle
Documentation behavior note:getAccessibleTextColor()in strips is a readability helper for this manual; application UI should still rely on semantic text tokens (e.g.text.onDark).