Inbox CardinalInbox Cardinal

Design system

Brand tokens and the shadcn/ui component set that build the Inbox Cardinal surface. Mobile-first, themeable via CSS variables, mock data only.

Color

Brand palette and the semantic tokens derived from it.

Brand

Cardinal
#C8102E
Ink
#16161D
Paper
#F7F5F0
Ash
#5D5C58
Slate
#3E6CA8

Extended

Line
#E4E1D8
Alt band
#EFEDE6
Red tint
#FBE9EC
Red tint border
#EFC2CA
Slate bg
#E7EEF7
Slate border
#C7D6EA

Semantic

background
foreground
primary
secondary
muted
accent
destructive
border

Typography

Hanken Grotesk (display), Inter (body), IBM Plex Mono (numerals).

Display · Hanken Grotesk

Never miss what matters

Body · Inter

Inbox Cardinal ranks what matters across all of your email accounts and calendars on one scale, so the important thing never hides in the account you check least.

Numerals · IBM Plex Mono

0123456789 · Cardinal Score 94/100

Buttons

Variants, sizes, and states.

Cardinal Score chip

The signature number: paper box with ink text; below ~40 drops to ash; only escalated items invert to red.

123850638194100
949494

Badges

Status and metadata labels.

Default
Secondary
Accent
Outline
Escalated
VIP
Acme Capital
Outlook

Inputs

Text fields with labels and states.

Cards

Containers and a composed priority-feed item.

Logo

The cardinal mark and the app-icon tile. Full color and mono.

Mark

Inbox CardinalInbox CardinalInbox CardinalInbox Cardinal

App icon

Inbox CardinalInbox CardinalInbox Cardinal

Mono + wordmark

Inbox Cardinalmono on ink
Inbox Cardinalmono in cardinal
Inbox CardinalInbox Cardinal