Foundations
The atomic decisions everything else builds on.
Color
Paper-and-ink. Two layers: a functional palette (neutrals + brand atom + semantic states) and a category palette (11 colors mapped to compensation and personal finance concepts). Aligned with the product app's Vivid Utility palette.
Neutrals
cream-50
#F6F6F3
bg-cream-50
cream-100
#EDEDE8
bg-cream-100
cream-200
#DBDBD2
bg-cream-200
cream-300
#D0D0C8
bg-cream-300
ink-500
#747474
bg-ink-500
ink-700
#5A5A58
bg-ink-700
ink-900
#121212
bg-ink-900
Brand (indigo, brand atom)
indigo-50
#EFEFFB
bg-indigo-50
indigo-100
#D9DAF4
bg-indigo-100
indigo-200
#B5B7E9
bg-indigo-200
indigo-300
#8086D9
bg-indigo-300
indigo-500
#4D53D9
bg-indigo-500
indigo-600
#3D43B0
bg-indigo-600
indigo-700
#2D3286
bg-indigo-700
Compensation core (employer-facing)
compensation
Hue 148 · green
Salary, base pay
compensation-50
compensation-500
compensation-700
wealth
Hue 155 · mint-green
Net worth, total assets
wealth-50
wealth-500
wealth-700
benefits
Hue 188 · teal
Insurance, HSA, FSA
benefits-50
benefits-500
benefits-700
retirement
Hue 248 · blue
401(k), IRA, retirement
retirement-50
retirement-500
retirement-700
equity
Hue 295 · purple
Options, RSUs, vesting
equity-50
equity-500
equity-700
perks
Hue 25 · coral
Lifestyle benefits
perks-50
perks-500
perks-700
bonus
Hue 50 · orange
Bonus pay, commissions
bonus-50
bonus-500
bonus-700
tax
Hue 78 · amber
Tax planning, deductions
tax-50
tax-500
tax-700
Personal finance (v2)
Used for personal finance expansion. Marketing site adds these first; product app should sync when the corresponding features ship.
debt
Hue 10 · deep rose
Loans, mortgages, liabilities
debt-50
debt-500
debt-700
cash
Hue 220 · slate
Cash, savings, emergency fund
cash-50
cash-500
cash-700
credit
Hue 330 · rose-pink
Credit score, credit reports
credit-50
credit-500
credit-700
Category step 100 (hover backgrounds)
One step deeper than 50. Used for hover states, selected pills, and other emphasis on a 50-tinted surface.
compensation-100
bg-compensation-100
wealth-100
bg-wealth-100
benefits-100
bg-benefits-100
retirement-100
bg-retirement-100
equity-100
bg-equity-100
perks-100
bg-perks-100
bonus-100
bg-bonus-100
tax-100
bg-tax-100
debt-100
bg-debt-100
cash-100
bg-cash-100
credit-100
bg-credit-100
Surfaces
bg-page
#FDFCFC
literal
bg-section-alt
#F5F3F1
literal
bg-card
#FFFFFF
literal
bg-inverse
#121212
→ ink-900
bg-glass
rgba(255,255,255,0.7)
literal
Text
text-primary
#121212
→ ink-900
text-secondary
#5A5A58
→ ink-700
text-muted
#747474
→ ink-500
text-inverse
#F6F6F3
→ cream-50
Borders
border-subtle
#EFEDE9
→
border-default
#E8E5E1
→
Section tints
tint-neutral
→ cream-50
tint-compensation
→ compensation-50
tint-benefits
→ benefits-50
tint-equity
→ equity-50
tint-retirement
→ retirement-50
tint-perks
→ perks-50
tint-debt
→ debt-50
tint-cash
→ cash-50
tint-credit
→ credit-50
Semantic states
success
→ compensation-500
warning
→ tax-500
error
#B23A3A
info
→ indigo-500
Motif gradients
CSS gradients for hero moments. Two whole-product variants (soft and saturated) plus three category gradients in the v1 launch set. Available as Tailwind utilities (bg-gradient-*).
bg-gradient-soft
Whole-product wash for landing moments
bg-gradient-saturated
Whole-product hero accent
bg-gradient-compensation
Salary that grows
bg-gradient-equity
Ownership compounds
bg-gradient-benefits
Year-round coverage
Soft on full-bleed sections. Saturated on smaller cards or accent shapes. Never both gradients on the same screen.
Typography
Sentient for editorial moments, Figtree for everything functional. Display through h3 use Sentient at weight 400 with zero tracking. h4 through h6 shift to Figtree at weight 500. Sizes scale fluidly between mobile and desktop via clamp().
Each row shows the token's desktop max (live, scales with viewport) and a locked mobile reference. Resize this window to watch the desktop column track between endpoints.
--text-display
Sentient · 400
paragraph: component-level
Desktop · 64px / 70px / 0
AI native benefits and equity
Mobile · 40px / 44px / 0
AI native benefits and equity
--text-h1
Sentient · 400
paragraph: component-level
Desktop · 45px / 54px / 0
Win and keep your best people
Mobile · 32px / 38px / 0
Win and keep your best people
--text-h2
Sentient · 400
paragraph: component-level
Desktop · 38px / 49px / 0
How Journey works
Mobile · 28px / 36px / 0
How Journey works
--text-h3
Sentient · 400
paragraph: component-level
Desktop · 32px / 42px / 0
Comp made clear
Mobile · 24px / 31px / 0
Comp made clear
--text-h4
Figtree · 500
paragraph: component-level
Desktop · 27px / 35px / 0
Connect your tools
Mobile · 22px / 29px / 0
Connect your tools
--text-h5
Figtree · 500
paragraph: component-level
Desktop · 23px / 31px / 0
Drop your docs
Mobile · 20px / 27px / 0
Drop your docs
--text-h6
Figtree · 500
paragraph: component-level
Desktop · 19px / 27px / 0
Section header
Mobile · 18px / 25px / 0
Section header
--text-body-lg
Figtree · 400
paragraph: component-level
Desktop · 20px / 28px / 0
Compensation that's supposed to keep your best people stays confusing. Journey makes it clear.
Mobile · 16px / 22px / 0
Compensation that's supposed to keep your best people stays confusing. Journey makes it clear.
--text-body
Figtree · 400
paragraph: component-level
Desktop · 16px / 24px / 0
Default body copy used across most sections of the marketing site.
Mobile · 14px / 21px / 0
Default body copy used across most sections of the marketing site.
--text-body-sm
Figtree · 400
paragraph: component-level
Desktop · 14px / 20px / 0
Caption and helper text. Used for secondary information.
Mobile · 12px / 17px / 0
Caption and helper text. Used for secondary information.
--text-small
Geist Mono · 500
fixed (UI chrome)
14px / 21px / 0.25px
UI label · button text · meta
--text-eyebrow
Geist Mono · 600
fixed (UI chrome)
12px / 12px / 0.08em
EYEBROW LABEL
italic
Sentient & Figtree
used sparingly
Sentient italic
Editorial pull quotes and emphasized phrases use Sentient italic.
Figtree italic
Inline emphasis in body copy stays in Figtree italic.
Spacing
4px base unit. Section padding 96 to 128px on desktop, 64px on mobile.
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px
Radius
Seven radius tokens, from compact chip corners to full pills, following the spine in docs/design-tokens-brief.md.
--radius-xs
7px
rounded-xs
--radius-sm
10px
rounded-sm
--radius-md
12px
rounded-md
--radius-lg
14px
rounded-lg
--radius-xl
18px
rounded-xl
--radius-2xl
22px
rounded-2xl
--radius-pill
9999px
rounded-pill
Motion
Apple-feel easing curves, three durations. Defaults to 200ms with ease-standard.
Easing
--ease-standard
cubic-bezier(0.2, 0.8, 0.2, 1)
Default for hover, focus, transitions
--ease-decel
cubic-bezier(0, 0, 0.2, 1)
Entrances, reveals
--ease-accel
cubic-bezier(0.4, 0, 1, 1)
Exits, dismissals
Duration
--duration-fast
200ms
Hover, focus, micro-interactions
--duration-medium
400ms
Card reveals, modals
--duration-reveal
800ms
Section reveals on scroll
Interactive demos in a later release.