Design System — Cohere Design System

01

Visual Theme & Atmosphere

Cohere's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.

What makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.

Key Characteristics:

Monumental display headlines with very tight line height and negative tracking.
...

Live Visual Theme Representation:

Visual Theme Example

02

Color Palette & Roles

Brand & Accent

Cohere Black (#000000): Announcement bar, highest-contrast text, and the global brand anchor.
Near-Black Primary (#17171c): Primary CTA buttons, dark footer, and deep UI cards.
...

Surface & Background

Canvas White (#ffffff): Dominant page background and form/card surface.
Soft Stone (#eeece7): Product cards, testimonial placeholders, and warm neutral surface blocks.
...

Text & Rules

Ink (#212121): Default body text and most link text on light backgrounds.
Muted Slate (#93939f): Footer links, dates, metadata, and de-emphasized labels.
...

Semantic

Focus Blue (#4c6ee6): Keyboard focus and ring color.
Form Focus Violet (#9b60aa): Focus border for text inputs.
...

Gradient System

Cohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.

primary

#17171c

cohere-black

#000000

ink

#212121

deep-green

#003c33

dark-navy

#071829

canvas

#ffffff

soft-stone

#eeece7

pale-green

#edfce9

pale-blue

#f1f5ff

hairline

#d9d9dd

border-light

#e5e7eb

card-border

#f2f2f2

muted

#93939f

slate

#75758a

body-muted

#616161

action-blue

#1863dc

focus-blue

#4c6ee6

coral

#ff7759

coral-soft

#ffad9b

form-focus

#9b60aa

on-primary

#ffffff

on-dark

#ffffff

error

#b30000

03

Typography Rules

Font Family

Display: CohereText, falling back to Space Grotesk, Inter, ui-sans-serif, and system-ui.
Body/UI: Unica77 Cohere Web, falling back to Inter, Arial, ui-sans-serif, and system-ui.
...

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
...	...	...	...	...	...	...

Principles

Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.
Keep display type tight. Hero copy should feel compact and carved, not airy.
...

Dynamic Preview:

hero-display size: 96px | weight: 400 | height: 1 | spacing: -1.92px

The quick brown fox jumps over the lazy dog

product-display size: 72px | weight: 400 | height: 1 | spacing: -1.44px

The quick brown fox jumps over the lazy dog

section-display size: 60px | weight: 400 | height: 1 | spacing: -1.2px

The quick brown fox jumps over the lazy dog

section-heading size: 48px | weight: 400 | height: 1.2 | spacing: -0.48px

The quick brown fox jumps over the lazy dog

card-heading size: 32px | weight: 400 | height: 1.2 | spacing: -0.32px

The quick brown fox jumps over the lazy dog

feature-heading size: 24px | weight: 400 | height: 1.3 | spacing: 0

The quick brown fox jumps over the lazy dog

body-large size: 18px | weight: 400 | height: 1.4 | spacing: 0

The quick brown fox jumps over the lazy dog

body size: 16px | weight: 400 | height: 1.5 | spacing: 0

The quick brown fox jumps over the lazy dog

button size: 14px | weight: 500 | height: 1.71 | spacing: 0

The quick brown fox jumps over the lazy dog

caption size: 14px | weight: 400 | height: 1.4 | spacing: 0

The quick brown fox jumps over the lazy dog

mono-label size: 14px | weight: 400 | height: 1.4 | spacing: 0.28px

The quick brown fox jumps over the lazy dog

micro size: 12px | weight: 400 | height: 1.4 | spacing: 0

The quick brown fox jumps over the lazy dog

04

Layout Principles

Spacing System

The system uses an 8px base with many one-off alignment values: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px, 64px, and 80px.

Large sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.

Grid & Container

Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.
Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.
...

Whitespace Philosophy

...

Grid Layout Wireframe Mockup:

Layout Grid Example

Layout Wireframe blueprint

1

2

3

4

5

6

7

8

9

10

11

12

Gutter spacing: 16px / 24px

Side Margins: 24px (Mobile) / 48px (Desktop)

Max Container Width: 1200px

05

Depth & Elevation

Cohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.

Level	Treatment	Use

| ... | ... | ... |

Elevation Level Showcase:

Elevation Level Example

Flat Surface (Level 0)

Used for background layers, sidebar headers, or baseline borders.

Low Elevation (Level 1 / Card)

Used for floating product elements, cards, and hover states.

High Elevation (Level 2 / Popover & Dropdown)

Used for modals, select menus, code editor tooltips, and overlay headers.

Border Radius & Shape Scale:

radius-sm 4px

radius-md 6px

radius-lg 8px

radius-pill Pill / Tag

06

Component Stylings

Radius Scale

Token	Value	Role
...	...	...

Image Treatment

Images are not decorative backdrops for text except in CTA bands. Most imagery sits as rounded cards with visible corners: product videos, enterprise photography, article thumbnails, and abstract 3D renders. The dominant radii are 8px and 22px.

`button-primary`

Near-black or white pill CTA, depending on surface contrast. Uses 14px-16px Unica77, 12px 24px padding, and a 32px pill radius. This is the primary action style for "Request a demo", "Submit", and hero CTAs.

`button-secondary`

...

`button-pill-outline`

`announcement-bar`

`hero-photo-card`

`agent-console-card`

`trust-logo-strip`

`capability-card`

`dark-feature-band`

`product-card`

`blog-filter-chip`

`research-table`

`contact-form-card`

`footer-newsletter`

Interactive Component Demonstrations:

Component Interactive Example

07

Do's and Don'ts

Do

Use white canvas as the default surface; introduce dark green or navy as full-width product bands.
Keep primary CTAs pill-shaped and near-black on light surfaces.
Use 22px radius on major media cards and placeholders.
Use coral for editorial taxonomy and small warm accents, not as the main CTA system.
Use monochrome trust logos with wide spacing.
Use thin-line geometric illustrations for research and capability icons.
Let photography and product mockups carry color, while the UI shell stays restrained.

Don't

Do not turn coral or blue into broad decorative surface colors.
Do not add heavy drop shadows to cards.
Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.
Do not use rounded cards below 8px for major media.
Do not replace the display/body type split with one generic sans-serif voice.
Do not render undocumented interaction variants in documentation or previews.
Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.

✅ Recommended / Do

Use white canvas as the default surface; introduce dark green or navy as full-width product bands.
Keep primary CTAs pill-shaped and near-black on light surfaces.
Use 22px radius on major media cards and placeholders.
Use coral for editorial taxonomy and small warm accents, not as the main CTA system.
Use monochrome trust logos with wide spacing.
Use thin-line geometric illustrations for research and capability icons.
Let photography and product mockups carry color, while the UI shell stays restrained.

❌ Discouraged / Don't

Do not turn coral or blue into broad decorative surface colors.
Do not add heavy drop shadows to cards.
Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.
Do not use rounded cards below 8px for major media.
Do not replace the display/body type split with one generic sans-serif voice.
Do not render undocumented interaction variants in documentation or previews.
Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.

08

Responsive Behavior

Breakpoints

Name	Width	Key Changes
...	...	...

Touch Targets

Primary CTAs and pills meet comfortable touch sizing through 12px-24px padding and pill radii. Research filter chips and blog category chips are larger than standard tags, making dense taxonomy surfaces usable on touch devices.

Collapsing Strategy

Nav collapses from full horizontal links to a compact mobile menu.
Hero media moves from split cards to stacked cards.
...

Responsive Adaptation Note:

Responsive Behavior Example

Interactive Viewport Simulator

Width: 800px (Desktop Mode) Grid Container

Primary Column

Adjusts layout width

Secondary Column

Folds on viewport change

Sidebar Column

Stacks to bottom on mobile

09

Agent Prompt Guide

1. Start from a white canvas or a full-width dark green/navy band; avoid mid-tone page backgrounds unless the screenshot shows a specific CTA/form section. 2. Use button-primary for the single highest-priority action and button-secondary for the companion action.

...

Copyable Agent Integration Prompt:

Prompt Guide Copy Box

10

Full System Design Tokens

The parsed design tokens extracted from the core stylesheet of this design system:

Design Token	Hex Value	System Palette Role
--primary	#17171c	System color representation for primary
--cohere-black	#000000	System color representation for cohere-black
--ink	#212121	System color representation for ink
--deep-green	#003c33	System color representation for deep-green
--dark-navy	#071829	System color representation for dark-navy
--canvas	#ffffff	System color representation for canvas
--soft-stone	#eeece7	System color representation for soft-stone
--pale-green	#edfce9	System color representation for pale-green
--pale-blue	#f1f5ff	System color representation for pale-blue
--hairline	#d9d9dd	System color representation for hairline
--border-light	#e5e7eb	System color representation for border-light
--card-border	#f2f2f2	System color representation for card-border
--muted	#93939f	System color representation for muted
--slate	#75758a	System color representation for slate
--body-muted	#616161	System color representation for body-muted
--action-blue	#1863dc	System color representation for action-blue
--focus-blue	#4c6ee6	System color representation for focus-blue
--coral	#ff7759	System color representation for coral
--coral-soft	#ffad9b	System color representation for coral-soft
--form-focus	#9b60aa	System color representation for form-focus
--on-primary	#ffffff	System color representation for on-primary
--on-dark	#ffffff	System color representation for on-dark
--error	#b30000	System color representation for error

## Overview

Cohere's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.

What makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.

**Key Characteristics:**
- Monumental display headlines with very tight line height and negative tracking.
- White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.
- Rounded media cards and product cards, usually 8px to 22px.
- Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.
- Trust-logo strips with monochrome partner marks and very wide vertical spacing.
- Agent-console mockups using dark panels, small status chips, and product integration badges.
- Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.

## Colors

### Brand & Accent

- **Cohere Black** (`#000000`): Announcement bar, highest-contrast text, and the global brand anchor.
- **Near-Black Primary** (`#17171c`): Primary CTA buttons, dark footer, and deep UI cards.
- **Deep Enterprise Green** (`#003c33`): Product hero bands for North and Command-style dark sections.
- **Dark Navy** (`#071829`): Financial-services and security-oriented solution bands.
- **Action Blue** (`#1863dc`): Editorial links, pagination, and secondary action emphasis.
- **Coral** (`#ff7759`): Blog category chips, taxonomy outlines, and warm product markers.
- **Soft Coral** (`#ffad9b`): Pale chip borders and segmented article-label details.

### Surface & Background

- **Canvas White** (`#ffffff`): Dominant page background and form/card surface.
- **Soft Stone** (`#eeece7`): Product cards, testimonial placeholders, and warm neutral surface blocks.
- **Pale Green Wash** (`#edfce9`): North page section backdrop behind stacked dark capability panels.
- **Pale Blue Wash** (`#f1f5ff`): Blog CTA surface behind abstract 3D imagery.
- **Card Border** (`#f2f2f2`): Softest card containment line.

### Text & Rules

- **Ink** (`#212121`): Default body text and most link text on light backgrounds.
- **Muted Slate** (`#93939f`): Footer links, dates, metadata, and de-emphasized labels.
- **Slate** (`#75758a`): Research separators and tertiary text.
- **Hairline** (`#d9d9dd`): Standard list rules and section dividers.
- **Border Light** (`#e5e7eb`): Secondary divider and utility rule.

### Semantic

- **Focus Blue** (`#4c6ee6`): Keyboard focus and ring color.
- **Form Focus Violet** (`#9b60aa`): Focus border for text inputs.
- **Error Red** (`#b30000`): Extracted ring/shadow color associated with validation-like states.

### Gradient System

Cohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.

## Typography

### Font Family

- **Display**: `CohereText`, falling back to `Space Grotesk`, `Inter`, `ui-sans-serif`, and `system-ui`.
- **Body/UI**: `Unica77 Cohere Web`, falling back to `Inter`, `Arial`, `ui-sans-serif`, and `system-ui`.
- **Technical labels**: `CohereMono`, falling back to `Arial`, `ui-sans-serif`, and `system-ui`.
- **Icons**: Cohere uses custom icon fonts and thin-line geometric illustrations.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---:|---:|---:|---:|---|
| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |
| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |
| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |
| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |
| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |
| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |
| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |
| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |
| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |
| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |
| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |
| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |

### Principles

- Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.
- Keep display type tight. Hero copy should feel compact and carved, not airy.
- Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.
- Use uppercase mono labels for category and system markers, especially on product and research pages.
- Editorial pages can use coral chips and blue links, but the base typography remains black and measured.

## Layout

### Spacing System

The system uses an 8px base with many one-off alignment values: `2px`, `6px`, `8px`, `10px`, `12px`, `16px`, `20px`, `22px`, `24px`, `28px`, `32px`, `36px`, `40px`, `56px`, `60px`, `64px`, and `80px`.

Large sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.

### Grid & Container

- Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.
- Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.
- Feature sections commonly use 3-column cards on desktop.
- Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.
- Research pages use full-width lists with date and chip columns instead of decorative cards.
- Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.

### Whitespace Philosophy

Cohere uses whitespace as a trust signal. Large empty intervals separate the brand claim, customer proof, product proof, and CTA. Dense content appears only where it serves the information architecture: research paper rows, blog card grids, and contact form fields.

## Elevation & Depth

Cohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, white or dark field | Hero copy, research lists, editorial surfaces |
| Bordered | 1px `#d9d9dd`, `#e5e7eb`, or dark translucent rules | Research rows, forms, pale cards, footer inputs |
| Media Lift | Rounded image or video over contrasting section color | Hero photo cards, product videos, CTA imagery |
| Dark Product Field | Deep green or navy full-width band | Command, North, financial services, security sections |

## Shapes

### Radius Scale

| Token | Value | Role |
|---|---:|---|
| `xs` | 4px | Small images, search fields, article thumbnails, utility elements |
| `sm` | 8px | Blog chips, cards, small media, dialogs |
| `md` | 16px | Medium product cards and grouped blocks |
| `lg` | 22px | Signature media-card and soft placeholder radius |
| `xl` | 30px | Research/topic filter pills |
| `pill` | 32px | Primary CTA buttons |
| `full` | 9999px | Round status elements and fully pill-shaped controls |

### Image Treatment

Images are not decorative backdrops for text except in CTA bands. Most imagery sits as rounded cards with visible corners: product videos, enterprise photography, article thumbnails, and abstract 3D renders. The dominant radii are 8px and 22px.

## Components

### **`button-primary`**

Near-black or white pill CTA, depending on surface contrast. Uses 14px-16px Unica77, 12px 24px padding, and a 32px pill radius. This is the primary action style for "Request a demo", "Submit", and hero CTAs.

### **`button-secondary`**

Text-only action link, usually underlined or rule-aligned, with no filled background. Used for "Explore products", "Try the Playground", newsletter signup, and secondary hero actions.

### **`button-pill-outline`**

Outlined pill control with transparent fill, 1px dark border, and 30px radius. Used for research filters, topic tags, and lightweight taxonomy controls.

### **`announcement-bar`**

Full-width black strip above the nav, 36px tall, centered microcopy with an underlined "Learn more" link and a close control at the far right.

### **`hero-photo-card`**

Rounded media card used in the home hero and solution pages. It combines photography or abstract imagery with an overlaid dark agent-console module. Radius is usually 22px on large cards and 8px on smaller thumbnails.

### **`agent-console-card`**

Dark product mockup panel showing agent names, status chips, integration badges, prompt fields, and generated response cards. Background is near-black, text is white or muted, and small accent chips use product colors.

### **`trust-logo-strip`**

Centered copy above a row of monochrome customer logos. It is intentionally quiet: no cards, no borders, just large horizontal spacing and black or white logos depending on the background.

### **`capability-card`**

Content block with thin-line geometric illustration, 24px heading, body copy, and a text link. On light backgrounds, cards often have only a top rule or a subtle image/card relationship rather than full boxing.

### **`dark-feature-band`**

Deep green or navy full-width section used for product capabilities, security claims, and feature breakdowns. Text turns white; cards use darker translucent surfaces, pale borders, and abstract line illustrations.

### **`product-card`**

Warm stone card used for product/model summaries. Typically 3-column on desktop, with 8px radius, generous padding, a small pill button, a divider line, and checkmark bullet rows.

### **`blog-filter-chip`**

Large coral taxonomy chip used on the blog index. Active chips invert to coral fill with dark text; inactive chips use coral outline and pale fill. Typography is oversized relative to typical filters, making the taxonomy a hero-level control.

### **`research-table`**

Rule-separated publication list with title left, topic pills centered, and date right. Rows are tall, white, and border-driven; filters above use many compact outlined pills.

### **`contact-form-card`**

Rounded white form panel set against dark green or warm stone sections. Inputs are rectangular with thin gray borders, 12px-16px padding, and compact labels/placeholders. Submit uses the same near-black pill style as primary CTAs.

### **`footer-newsletter`**

Dark footer subscription block with coral "AI moves fast" label, white headline, muted legal microcopy, a single-line email field, and arrow submit marker. Footer columns use white section labels and muted links.

## Do's and Don'ts

### Do

- Use white canvas as the default surface; introduce dark green or navy as full-width product bands.
- Keep primary CTAs pill-shaped and near-black on light surfaces.
- Use 22px radius on major media cards and placeholders.
- Use coral for editorial taxonomy and small warm accents, not as the main CTA system.
- Use monochrome trust logos with wide spacing.
- Use thin-line geometric illustrations for research and capability icons.
- Let photography and product mockups carry color, while the UI shell stays restrained.

### Don't

- Do not turn coral or blue into broad decorative surface colors.
- Do not add heavy drop shadows to cards.
- Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.
- Do not use rounded cards below 8px for major media.
- Do not replace the display/body type split with one generic sans-serif voice.
- Do not render undocumented interaction variants in documentation or previews.
- Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---:|---|
| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |
| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |
| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |
| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |
| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |
| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |

### Touch Targets

Primary CTAs and pills meet comfortable touch sizing through 12px-24px padding and pill radii. Research filter chips and blog category chips are larger than standard tags, making dense taxonomy surfaces usable on touch devices.

### Collapsing Strategy

- Nav collapses from full horizontal links to a compact mobile menu.
- Hero media moves from split cards to stacked cards.
- Product and capability grids collapse from 3 columns to 2 and then 1.
- Form fields collapse from paired rows to a single column.
- Research rows preserve their rule-separated structure but stack metadata below titles on smaller widths.

## Iteration Guide

1. Start from a white canvas or a full-width dark green/navy band; avoid mid-tone page backgrounds unless the screenshot shows a specific CTA/form section.
2. Use `button-primary` for the single highest-priority action and `button-secondary` for the companion action.
3. Use `hero-photo-card` or `agent-console-card` when a page needs visual energy; avoid invented dashboard data.
4. For editorial pages, combine `blog-filter-chip`, `button-pill-outline`, and `research-table` instead of generic marketing cards.
5. Keep component examples structurally honest: placeholder product frames are better than invented product content.

## Known Gaps

- Exact proprietary font files are not bundled; use the documented fallbacks when implementing externally.
- Mobile screenshots were not regenerated in this public update, so mobile behavior is documented from the desktop system and existing responsive patterns.
- Some live pages lazy-load content blocks late; blank testimonial placeholders are documented as placeholder skeleton surfaces rather than filled testimonial cards.