Cela — Design Tokens

Finalized palette · Plus Jakarta Sans · Light & warm + premium

Backgrounds

page bg
background
#F9F8F5
Page background
cards
surface
#FFFFFF
Cards, panels
sidebar
surface-alt
#F3F1ED
Sidebars, secondary areas

Text

Aa
foreground
#0D0425
Primary text, headings
Aa
muted
#6E6882
Descriptions, labels
Aa
subtle
#9B96AB
Placeholders, hints

Accent

accent
accent
#7C3AED
Interactive, AI moments
hover
accent-hover
#6D28D9
Hover state
soft
accent-soft
#EDE9FE
Accent backgrounds

Borders

default
border
#E8E5DF
Default dividers
strong
border-strong
#D4D0C9
Emphasized borders

Status

success
success
#2D8A56
soft
success-soft
#E8F5EE
warning
warning
#D4820C
soft
warning-soft
#FEF3E2
destructive
destructive
#D1344B
soft
destructive-soft
#FDE8EC

Component Demos

Typography

Heading — foreground

Body text in foreground color — the main content your users read.

Secondary text in muted — descriptions, timestamps, labels.

Subtle text — placeholders, hints, metadata.

Accent link → interactive text

Buttons
Badges
3 threadsConnectedSyncingDisconnectedArchived
Input
Progress
65%
Status toasts
Slack connected successfully
Syncing 247 messages...
GitHub token expired
Work Thread Card
Auth migration to OAuth2
6 signals · last activity 2h ago
PR #1423 Slack threads
Deploy pipeline fix
2 signals · resolved today
Resolved
Avatars
C
M
JD

Layout Preview

C
Cela

Your Work Today

Friday, March 21 · 4 active threads

Auth migration to OAuth2
6 signals · last activity 2h ago
Payment webhook failures
3 signals · needs attention
Onboarding redesign
8 signals · on track

Cela Design System · Accent #7C3AED · Plus Jakarta Sans · Warm off-white canvas