Typography
Base Font · InterRegular / Unica77 Cohere Web
Cohere
Enterprise AI — private, secure, and customizable for your organization's needs.
Regular · 400
Medium · 500
Bold · 700
Mono Font · CohereMono
CohereMono
model.generate(prompt="Tell me about enterprise AI", max_tokens=256)
Regular · 400
Medium · 500
Enterprise AI
Display · 72px · Bold · line-height: 72px · letter-spacing: −1.44px
Private, Secure, Customizable
Heading 5XL · 60px · Bold · line-height: 60px
AI built for the enterprise
Heading 4XL · 48px · Bold · line-height: 57.6px
Deploy LLMs on your own infrastructure
Heading 3XL · 32px · Medium · line-height: 38.4px
Powerful language models for your team
Heading 2XL · 24px · Medium · line-height: 31.2px
Cohere provides secure, private AI models that you can run on your own cloud or on-premises infrastructure.
Body Default · 16px · Regular · line-height: 24px
Last response generated in 0.34s · 512 tokens · Command R+ model
Body Small · 14px · Regular · line-height: 19.6px
COMMAND · EMBED · RERANK · RAG
Caption / Label · 12px · Medium · line-height: 16.8px · letter-spacing: 0.28px
Letter Spacing
Enterprise AI
Tight
−1.44px · hero headings
Command R+
Normal
−1.2px · large headings
Private & Secure
Wide
−0.48px · subheadings
COMMAND · EMBED
Widest +
0.16px – 0.28px · labels
Spacing
Spacing Scale
23 tokens — 2px → 176px
Borders
Border Widths
The single border width used throughout the system — cards, inputs, dividers, table rows — via --border-width-hairline: 1px.
Shadows / Elevation
Shadow Tokens
3 tokens
Small
×1
rgba(172,171,171,0.3) upward −1px 10px · top edge highlight, sticky bars
Medium
×1
rgba(0,0,0,0.3) 32px 68px · modals, overlays, deep panels
Large
×1
rgba(0,0,0,0.1) 2px 2px · subtle card lift
Z-Index
| Layer | Value | Usage |
|---|
| Background | -10 | Decorative background elements, canvas underlays |
| Base | 1 | Default content stacking context |
| Navigation | 10 | Sticky headers, nav bars |
| Popover | 20 | Dropdowns, tooltips, hover cards |
| Overlay | 99 | Side panels, drawers, backdrop overlays |
| Dialog | 100 | Modals, dialog boxes |
| Toast | 101 | Toast notifications, snackbars |
| Max | 102 | Critical alerts, global banners |
Breakpoints
📱
--breakpoint-xs
336px
XS mobile
📱
--breakpoint-sm
352px
SM mobile
📲
--breakpoint-md
410px
MD mobile
📲
--breakpoint-bp-12
640px
SM tablet
💻
--breakpoint-bp-15
768px
Tablet
🖥
--breakpoint-bp-20
1024px
Desktop
🖥️
--breakpoint-bp-22
1280px
Large desktop
📺
--breakpoint-bp-23
1440px
Wide desktop
🖼
--breakpoint-bp-25
1600px
Ultra-wide
🌐
--breakpoint-bp-26
2560px
4K / TV
26 total breakpoints defined — showing key milestones above. Cohere uses a granular mobile-first responsive system with breakpoints from 336px to 2560px.
Opacity
Opacity Tokens
5 tokens — 0.01 → 0.5
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Gray (#212121) | White (#FFFFFF) | 16.1:1 | AAA |
| Dark Gray (#212121) | Light Gray 2 (#F2F2F2) | 14.38:1 | AAA |
| Dark Gray (#212121) | Red (#FF7759) | 6.16:1 | AA |
| Dark Gray (#212121) | Black (#000000) | 1.3:1 | Fail |
| Dark Gray (#212121) | Dark Gray 2 (#17171C) | 1.11:1 | Fail |
| White 2 (#FAFAFA) | Black (#000000) | 20.12:1 | AAA |
| White 2 (#FAFAFA) | Dark Gray 2 (#17171C) | 17.11:1 | AAA |
| White 2 (#FAFAFA) | White (#FFFFFF) | 1.04:1 | Fail |
| White 2 (#FAFAFA) | Red (#FF7759) | 2.5:1 | Fail |
| Blue (#75758A) | Black (#000000) | 4.67:1 | AA |
| Blue (#75758A) | White (#FFFFFF) | 4.5:1 | AA |
| Blue (#75758A) | Dark Gray 2 (#17171C) | 3.97:1 | AA Large |
| Blue (#75758A) | Light Gray 2 (#F2F2F2) | 4.02:1 | AA Large |
| Mid Gray 2 (#A4A4A4) | Black (#000000) | 8.42:1 | AAA |
| Mid Gray 2 (#A4A4A4) | Dark Gray 2 (#17171C) | 7.17:1 | AAA |
| Mid Gray 2 (#A4A4A4) | White (#FFFFFF) | 2.49:1 | Fail |
CSS Variables Reference
Black--color-black#000000
White--color-white#FFFFFF
Dark Gray 2--color-dark-gray-2#17171C
Light Gray 2--color-light-gray-2#F2F2F2
Red (Coral)--color-red#FF7759
Blue 2--color-blue-2#4C6EE6
Light Purple--color-light-purple#D18EE2
Light Pink--color-light-pink#F0DFF3
Light Gray 4--color-light-gray-4#F0EEE9
Dark Gray 9--color-dark-gray-9#2E2E2E
Purple--color-purple#9B60AA
Dark Gray--color-dark-gray#212121
White 2--color-white-2#FAFAFA
Dark Gray 8--color-dark-gray-8#616161
Mid Gray 2--color-mid-gray-2#A4A4A4
Mid Gray 3--color-mid-gray-3#93939F
Light Gray 5--color-light-gray-5#BDBDBD
Light Gray--color-light-gray#E5E7EB
Light Gray 3--color-light-gray-3#D9D9DD
Base Font--font-family-baseInterRegular
Display Font--font-family-2Unica77 Cohere Web
Mono Font--font-family-3CohereMono
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
XS--font-size-xs8px
SM--font-size-sm12px
Base--font-size-base14px
LG--font-size-lg16px
XL--font-size-xl18px
2XL--font-size-2xl24px
3XL--font-size-3xl32px
4XL--font-size-4xl48px
5XL--font-size-5xl60px
6XL--font-size-6xl72px
Tight--letter-spacing-tight−1.44px
Normal--letter-spacing-normal−1.2px
Wide--letter-spacing-wide−0.48px
Wider--letter-spacing-wider−0.32px
Widest--letter-spacing-widest0.16px
LS-6--letter-spacing-ls-60.28px
Space 160--space-160128px
Space 192--space-192144px
Space 256--space-256160px
Hairline--border-width-hairline1px
SM (right edge)--radius-sm0 2 2 0px
MD (bottom)--radius-md0 0 22 22px
Instant--duration-instant0.15s
Fast--duration-fast0.2s
Normal--duration-normal0.3s
Slow--duration-slow0.5s
Slower--duration-slower0.7s
Duration 6--duration-duration-60.8s
Ease In-Out--easing-ease-in-outease-in-out
Background--z-1-10
Base--z-21
Navigation--z-310
Popover--z-420
Overlay--z-599
Dialog--z-6100
Toast--z-7101
Max Layer--z-8102
Design System Preview · Cohere (Dark) · Generated 15/04/2026 · 39 color tokens · 11 font-size · 4 font-family · 3 font-weight · 12 line-height · 6 letter-spacing · 23 spacing · 14 radius · 1 border-width · 3 shadow · 6 duration · 1 easing · 8 z-index · 26 breakpoints · 5 opacity