Design System Preview:
Cohere

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

Color Palette & Roles

Primary

Cohere Black
#000000
Primary headline text, maximum emphasis
Near Black
#212121
Standard body link color
Deep Dark
#17171c
Navigation and dark-section text

Secondary & Accent

Interaction Blue
#1863dc
Hover, focus states, active links
Ring Blue
#4c6ee6 @ 50%
Keyboard focus indicators
Focus Purple
#9b60aa
Input focus border color

Surface & Background

Pure White
#ffffff
Primary page background, card surface
Snow
#fafafa
Subtle elevated surfaces, light sections
Lightest Gray
#f2f2f2
Card borders, softest containment

Neutrals & Text

Muted Slate
#93939f
Footer links, tertiary text
Border Cool
#d9d9dd
Section borders, list separators
Border Light
#e5e7eb
Lighter border variant (gray-200)

Enterprise AI Platform

Deep purple hero sections create dramatic visual breaks in the white page flow

02 / Typography Scale

Typography Rules

Display Hero
Display / Hero — CohereText — 72px / 400 / 1.00 / -1.44px
Display Secondary
Display Secondary — CohereText — 60px / 400 / 1.00 / -1.2px
Section Heading
Section Heading — Unica77 — 48px / 400 / 1.20 / -0.48px
Sub-heading
Sub-heading — Unica77 — 32px / 400 / 1.20 / -0.32px
Feature Title
Feature Title — Unica77 — 24px / 400 / 1.30 / normal
Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.
Body Large — Unica77 — 18px / 400 / 1.40 / normal
Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.
Body / Button — Unica77 — 16px / 400 / 1.50 / normal
Button Medium Label
Button Medium — Unica77 — 14px / 500 / 1.71 / normal
Caption and metadata text for descriptions
Caption — Unica77 — 14px / 400 / 1.40 / normal
UPPERCASE SECTION LABEL
Uppercase Label — CohereMono — 14px / 400 / 1.40 / 0.28px / uppercase
Smallest text for footer links and fine print
Small — Unica77 — 12px / 400 / 1.40 / normal
CODE MICRO LABEL
Code Micro — CohereMono — 8px / 400 / 1.40 / 0.16px / uppercase
03 / Button Variants

Buttons

Ghost / Transparent
Dark Solid (22px)
Dark Pill (9999px)
Outlined (22px)

Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.

04 / Card Examples

Cards & Containers

STANDARD CARD

Signature 22px Radius

The distinctive Cohere card with 22px border-radius and 1px solid #f2f2f2 border. Creates cloud-like, organic softness on the white canvas.

DIALOG CARD

Dialog 8px Radius

Modal and dialog containers use a tighter 8px radius with #d9d9dd border. Functional, secondary containment for transient UI.

GENEROUS CARD

Featured 16px Radius

Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle #f2f2f2 border.

05 / Spacing Scale

Spacing System

Base unit: 8px. Scale from 2px to 60px.

2px
6px
8px
10px
12px
16px
20px
22px
24px
28px
32px
40px
56px
60px
06 / Border Radius Scale

Border Radius

4px
Sharp — nav, tags
8px
Comfortable — dialogs
16px
Generous — featured
20px
Large — feature cards
22px
Signature — THE radius
9999px
Pill — buttons, tags
07 / Elevation & Depth

Depth & Elevation

Flat
No shadow, no border. Page background and text blocks.
Level 0
Bordered (Light)
1px solid #f2f2f2. Standard cards, subtle containment.
Level 1 — Lightest Gray
Bordered (Cool)
1px solid #d9d9dd. Emphasized cards, list separators.
Level 1 — Border Cool
Purple Band
Full-width dark purple background. Hero sections, showcases.
Level 2 — Dramatic

Cohere is nearly shadow-free. Depth is communicated through background color contrast (white cards on purple bands), border containment (cool gray borders), and dramatic light-to-dark section alternation.