prism·mdthe design press

EXTRACTED · 10 SECTIONS · 26 COLORS · GRADE B 86/100

cohere.com

26 colours · Unica77 Cohere Web woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json

Color — roles, semantics & the full census

26 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#17171c

AAA 17.86:1

Line

#2e2e2e

AAA 13.58:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

26 colors mined from the live renderexpand

Type — the ladder, in the real face

7 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl96px · 400

display md

display-md48px · 400 · ×2.00

headline

headline32px · 400 · ×1.50

body

body12px · 400 · ×2.67

body sm

body-sm14px · 400 · ×0.86

button

button16px · 700 · ×0.88

eyebrow

eyebrow14px · 400 · ×1.14

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 8px

sm · 12px

md · 16px

base · 20px

lg · 24px

xl · 40px

2xl · 60px

3xl · 72px

Radius

none
0px

xs
4px

sm
8px

md
12px

lg
16px

xl
50px

full
999px

Depth — elevation is extracted, not invented

2 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

Motion — easings, transitions & live keyframes

2 easing curves · 12 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

transition-3ease-in-out

12 keyframe animations extracted

fadeInDown

bounceLogo

cuts

dance

fadeInSpot

fadeInUp

marquee

pulse

rain

scroll2

scroll

callout_arrowWiggle__oLamD

Components — the closed vocabulary

13 component families · 54 variants counted on the live DOM

Component	Variants found
accordion	×10
buttons	×8
nav Links	×6
heading H3	×6
links	×6
footer Links	×4
eyebrow Labels	×4
cards	×3
inputs	×2
heading H2	×2
heading H1	×1
heading H4	×1
heading H5	×1

Component style specs (§4)expand

Buttons

Pill

Background: #ffffff {colors.on-primary}
Text: #212121 {colors.ink-subtle}
Padding: 8px 16px
Radius: 999px
Border: 1px solid rgb(46, 46, 46)
Font: 14px weight 500
Use: Status pills, tags, chips

Pill

Background: #17171c {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 8px 16px
Radius: 999px
Border: 2px solid rgba(176, 92, 92, 0)
Font: 14px weight 500
Use: Status pills, tags, chips

Cards & Containers

Standard Card

Background: transparent
Padding: 0px
Radius: 22px
Use: Content containers, listing items

Inputs & Forms

Text Input

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 0px
Radius: 0px
Border: 0px none rgb(255, 255, 255)
Font: 14px weight 400
Use: Text fields, search inputs

Navigation

Main Nav

Background: #ffffff {colors.on-primary}
Padding: 16px 40px
Radius: none
Font: 16px weight 400
Use: Fixed/sticky flex nav — N/A items

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

29 media-query stops read from the live CSS

336px

352px

410px

425px

440px

460px

480px

510px

530px

550px

576px

640px

660px

767px

768px

845px

918px

919px

1023px

1024px

1100px

1101px

1250px

1251px

1280px

1440px

1536px

1600px

2560px

Do's & Don'ts

23 enforceable rules pulled verbatim from the spec

Use Unica77 Cohere Web as the primary typeface — it defines the brand personality

Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy

Use negative letter-spacing (-1.92px) at display sizes for compressed, editorial headlines

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Near-Black (`#17171c`) as the primary accent — it's the brand's signature interactive color

Use pill-shaped radius (999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs

Use 22px border-radius on cards — consistent with the grid card corners

Keep navigation fixed to the top — the design uses a persistent navigation pattern

Maintain nav height at 75.5938px — consistent vertical space for the navigation bar

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Make the navigation fixed — it stays visible during scroll, signaling content depth

Each card includes a top image — imagery is part of the card identity, not optional

Repeat the primary CTA across 3 banner sections — conversion paths are layered, not single

Include a newsletter signup in the footer — email capture is part of the conversion funnel

Don't

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't use weight 700 (bold) or above — 500 is the maximum weight in this system

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the cohere.com design system. Canvas #ffffff · ink #111111 · accent #17171c. Type: Unica77 Cohere Web — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add cohere

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press