Foundation

Tokens

Semantic tokens: colors, typography, layout, motion, z-index, and borders. The single source of truth—don’t use ad-hoc values.

Colors

Brand, system states (score, feedback), surfaces and text.

Brand & CTA

primary

Primary CTA

#d8b4fe

accent.mint

Calm / success

#99f6e4

accent.blue

Analytics / info

#93c5fd

Score (Traffic Lights)

score.high

High Match

#34d399

score.medium

Potential Risk

#fbbf24

score.low

Low Match

#f43f55

Surfaces

surface.base

App background

#f8f7ff

surface.card

Card

#ffffff

surface.darkCard

Hero block

#1a1625

Color scales (full palette)

Every shade for each brand and system color. Prefer semantic tokens (above) when a role exists; use these when you need a specific step (e.g. soft background, border, or a shade not yet mapped to a token).

Purple (primary brand)

50–200: very light backgrounds, inactive/ghost states. 500: main CTA, primary actions. 600–700: hover, pressed, links. 800–900: text or strong accent on light backgrounds.

50
100
200
300
400
500
600
700
800
900

Mint (calm / success accent)

50–200: soft success backgrounds, “ready” states. 500: accent for success/calm. 600–700: hover, active success. 800–900: strong teal for text or emphasis.

50
100
200
300
400
500
600
700
800
900

Blue (info / analytics)

50–200: light info backgrounds, charts. 500: analytics accent, secondary CTAs. 600–700: hover, links. 800–900: text or strong accent on light.

50
100
200
300
400
500
600
700
800
900

System: red, green, yellow

100: soft background for toasts/alerts. 500–700: score badges (Traffic Lights), buttons, icons. 900: dark text on light when you need maximum contrast. Use for feedback (success, warning, error) and Fit/Growth score.

red

100
500
700
900

green

100
500
700
900

yellow

100
500
700
900

Typography

Figtree. Role: hero, page title, section, body, button, caption, badge.

Hero heading

Heading 1 / Hero

48 / 56 · 700
Page title

Heading 2 / Page title

32 / 40 · 700
Section: Fit Score

Heading 3 / Section title

24 / 32 · 600
Block: Hard skills

Heading 4 / Block title

20 / 28 · 600
Body text.

Body L / Default text

16 / 24 · 400
Button label

Button

16 / 16 · 600
Meta: 2d ago

Caption / Meta

12 / 16 · 400
BADGE

Label Tiny / Badge

12 / 12 · 700

Layout

Spacing (4px base), radius, elevation, shadows.

Spacing

1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 20px, 6: 24px, 8: 32px, 10: 40px, 12: 48px, 16: 64px

Radius

sm 8px, md 12px, lg 16px, xl 24px, pill

Elevation

none, card, cardHover, modal

Shadows (diffuse)

Large blur, low opacity — soft and visible. For inputs, floating elements.

Motion

Duration: fast (hover, feedback), normal (dropdown, modal open), slow (sidebar/drawer). Easing: ease-out-expo for smooth arrivals—cards and overlays don’t snap linearly.

Duration

  • fast 150ms — button hover, focus
  • normal 250ms — dropdown open, modal
  • slow 400ms — sidebar / drawer slide-out

Easing

  • outExpo cubic-bezier(0.16, 1, 0.3, 1)
  • out cubic-bezier(0, 0, 0.2, 1)
  • linear — progress, indeterminate

CSS: var(--duration-ds-fast), var(--ease-ds-out-expo)

Z-Index

One z-index scale across the app. Overlay sits under modals, toasts stay on top.

  • z-ds-base 0 — Base layer
  • z-ds-above 10 — Above content (sticky)
  • z-ds-overlay 40 — Overlay (drawer backdrop)
  • z-ds-dropdown 50 — Dropdown, popover
  • z-ds-modal 100 — Modal, dialog
  • z-ds-toast 200 — Toast notifications
  • z-ds-max 9999 — Max (tooltips; ensure on top)

CSS: var(--z-ds-overlay), var(--z-ds-modal)

Stroke / Border width

Border thickness for dividers and focus rings.

none0
thin1px
default1px
medium2px
thick4px

CSS: var(--border-width-ds-thin), var(--border-width-ds-medium)