Design System

Enterprise AI,
made approachable.

Clean intelligence with crisp white surfaces, a bold indigo accent, and generous whitespace that balances technical authority with approachability.

16 color tokens 20+ type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a singular bold indigo accent. 16 tokens across surfaces, text hierarchy, interaction, and semantic states.

Pure White
#ffffff
Primary background, card surfaces
Arctic Frost
#f8f9fb
Secondary sections, alternating areas
Cloud Gray
#f1f3f5
Code blocks, inset panels
Border Light
#e5e7eb
Borders, dividers, card outlines
Border Medium
#d1d5db
Input borders, active containers
Slate
#6b7280
Placeholders, secondary icons
Iron
#374151
Secondary text, body copy
Navy
#111827
Primary text, headings
Cohere Blue
#3959ff
Primary accent, links, buttons
Cohere Blue Hover
#2d47d9
Hover/pressed states
Cohere Blue Light
#eef1ff
Selected backgrounds, emphasis
Emerald
#059669
Success states, confirmations
Amber
#d97706
Warning states, caution
Crimson
#dc2626
Error states, destructive actions

Gradients

gradient-blue-fade
Hero backgrounds, feature highlights, abstract decorations
gradient-soft-wash
Section fade-outs, subtle depth transitions
Typography

Type Scale

DM Sans as primary typeface (substitute for Cohere Text). Clean geometric sans with excellent readability. JetBrains Mono for code.

Display-lg Enterprise AI 56px / 1.1 / −0.025em
Display Build what matters 48px / 1.1 / −0.025em
Heading-xl Ship faster 40px / 1.15 / −0.025px
Heading-lg Section heading 32px / 1.2 / −0.02px
Heading Subsection heading 24px / 1.3 / −0.02px
Body Default body text for readable content 16px / 1.6 / 0
Body-sm Dense data, comparison rows, tables 14px / 1.6 / 0
Caption Meta info · Badges · Labels 13px / 1.5 / 0.02px

Fonts

Primary DM Sans 400–700 · 13–56px
Mono JetBrains Mono 400–500 · Code only
Fallback system-ui System default sans-serif
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. 15-step spacing scale, 4 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
8080px
128128px

Border Radius

sm 6px
default 8px
cards 12px
pill 9999px

Shadows

Subtle 1px border
Elevated cards on hover
Medium dropdowns
High modals
Elevation

Depth & Surfaces

Borders over shadows. Background color differentiation over heavy elevation. 4 distinct surface levels on a white canvas.

Depth Levels

Pure White
Base page background — the canvas
Level 0
Arctic Frost
Secondary sections, alternating content areas
Level 1
Cloud Gray
Code blocks, inset panels, tertiary surfaces
Level 2
Cohere Blue Light
Selected states, active items, emphasis
Level 3

Surface System

Pure White #ffffff
Arctic Frost #f8f9fb
Cloud Gray #f1f3f5
Blue Light #eef1ff
Components

Button Variants

Primary action (Cohere Blue), outlined secondary, and ghost variants for a clear interaction hierarchy.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Cohere Blue (#3959ff) background, Pure White text, 8px radius. Use exclusively for the single most important action.
Secondary Button
Secondary interactive actions
.btn-secondary
Cohere Blue text, Cohere Blue border. Clear interactive target without competing with primary.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Navy text, Border Light border. For less prominent actions that still need visual presence.
Text Link
Inline text links
.text-link
Read the documentation Hover state
Cohere Blue text, underline on hover. No background. For inline text references.
Card
Content containers, feature blocks
.card
Enterprise RAG
Build retrieval-augmented generation pipelines with production-ready accuracy.
Pure White background, 12px radius, 1px Border Light border, 24px padding. Clean container for content blocks.
Input Field
User text input
input
Pure White background, Border Light border, 8px radius. Focus state uses Cohere Blue border.
Badge
Labels, categories, status indicators
.badge
New Active Beta
Cohere Blue Light background, Cohere Blue text, pill shape. For labels and status indicators.
Code Block
Code snippets, technical content
.code-block
import cohere

client = cohere.Client("API_KEY")
response = client.generate(
  model="command-r-plus"
)
Cloud Gray background, 8px radius, 16px padding, JetBrains Mono. Clean inset appearance.
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as primary background
  • Navy (#111827) for all primary text
  • Cohere Blue (#3959ff) for primary CTAs and links only
  • Cohere Blue Light (#eef1ff) for selected backgrounds
  • 8px radius for buttons, 12px for cards
  • 4px-based spacing with generous breathing room
  • Borders over shadows for visual separation
Don't — Avoid
  • Dark backgrounds for primary content
  • Multiple accent colors for interactive elements
  • Hard sharp corners on cards or buttons
  • Heavy drop shadows or dark overlays
  • Dense packing without breathing room
  • Mono fonts for non-code content
  • Cohere Blue for non-interactive decoration