v5 substrate & voice

Axes

Four DOM attributes describe what a subtree varies along. Each axis is independent — they compose without conflict.

data-theme

Color palette. Today: default. Rebrand & expressive themes drop in as additional values.

data-domain

Type + spacing register. xds (the XDS hub voice) and jobs-need-people (Indeed-brand voice) for hot display / landing surfaces, longform for editorial / docs / chrome.

data-locale

Typography tuning per script. en is the no-op default; CJK ramps land alongside the locale work.

Color cascade

Color is four primitives plus five derived tokens. Any element that wants a different palette sets the primitives on itself. The derivation block reads them and recomputes for the subtree.

.section--accent {
  --color-fg:        #ffffff;
  --color-bg:        #003a9b;
  --color-accent:    #ffffff;
  --color-accent-fg: #003a9b;

  --color-fg-muted:  color-mix(in srgb, var(--color-fg) 62%, transparent);
  --color-hairline:  color-mix(in srgb, var(--color-fg) 14%, transparent);
  --color-surface-1: color-mix(in srgb, var(--color-fg) 6%,  var(--color-bg));
  --color-surface-2: color-mix(in srgb, var(--color-fg) 12%, var(--color-bg));
  --color-border:    var(--color-fg);

  color: var(--color-fg);
  background-color: var(--color-bg);
}

Inside, .fg-muted, .bg-surface-1, and hairline rules all read the section's primitives via the cascade — components stop caring which surface they sit on.

Composition principles

Six rules that keep blocks portable across pages.

1. Tokens over literals. Reach for a substrate variable before writing a hex code or rem value. If the variable doesn't exist yet, that's a finding, not an excuse.
2. Read primitives, never replace them. A block consumes var(--color-fg); it doesn't ship its own dark-mode rebind. The page or section above provides the palette.
3. Prose over flex-gap for type rhythm. Margin collapses the way readers expect; flex-gap stacks and double-counts. Use .prose on text containers.
4. Register swaps via the domain axis. Don't ship per-block tightening overrides. The domain cells in v5/domain/ own the values; blocks read them.
5. One declaration, one variable. Utilities are thin projections of substrate tokens — one CSS property each, no compound surface treatments.
6. If three pages need it, promote it. Two pages = page-local. Three pages = substrate. Logged findings feed the next consolidation pass.

Block families

Section

A surface-bearing container that fills its parent. Owns padding-block, an optional palette rebind, and the divider rules that separate it from neighbouring sections.

• Read var(--color-bg) for the surface so the cascade can recolor the section without per-modifier rules.
• Apply padding-block: var(--pad-section) at the outer level; in-section rhythm comes from .prose.

Hero

A first-screen section that pairs a display register with a lede and a CTA row. Marketing domain reaches for .display-1 + .ff-2; longform domain stays on .heading-1 / .ff-1.

Card

A bordered, self-contained block. Reads var(--color-surface-2) for its background so it steps up cleanly when sitting on a soft-tinted parent section. Radius is var(--radius-md).

Pullquote

Editorial face (.ff-3), italic, accent left-bar, tight measure. Longform-only — hot domains (xds, jobs-need-people) reach for a full stat callout instead.

Repository layout

Substrate files live under src/styles/v5/. Each file owns one concern; the entry point composes them in cascade order.

• color.css — theme primitives + color-mix derived tokens.
• radius.css — four-step radius scale.
• domain/ — domain matrix:
  • xds.css — the XDS hub's hot register.
  • jobs-need-people.css — Indeed-brand marketing voice; same shape as xds, separate file so the two brands can diverge.
  • longform.css — editorial, docs, chrome.
• type.css — font slots + html element bindings + <code> / <pre> baselines.
• spacing.css — logical-property spacing utilities reading the per-domain numeric scale.
• utilities.css — hand-rolled utility kit; .prose, .eyebrow, color and family utilities all live here.

Core voice principle

We help people — not resumes or robots — get jobs.

Everything Indeed says flows from this. The voice is human-first — job seekers are people, not applicants or data points.

Voice attributes

Writing principles

• Speak in a way people understand and relate to.
• Ensure people from all backgrounds feel welcomed.
• Lead with empathy — job searching and hiring are high-stakes, emotional processes.
• Avoid recruiter jargon, HR-speak, and corporate filler.
• The product serves two audiences: language must work for both seekers and employers.

Audience awareness

Indeed's copy always navigates a two-sided marketplace.

Legal copy context

Indeed is heavy on legally approved copy. Each product and sub-feature has its own approved language. See approved-copy/ folder for product-specific approved claims, disclaimers, and language rules.

Job types

Indexed Jobs

Jobs pulled into Indeed from an employer's ATS or career site. The employer has not posted directly on Indeed and does not use Indeed Apply. Candidates click through to the employer's external application flow.

Organic Jobs

Free job listings posted directly on Indeed. Basic visibility in search results.

Sponsored Jobs

Paid job listings with priority placement. Pay-per-click or pay-per-application model.

Premium Sponsored Jobs

Top-tier paid listings with AI-powered targeting, dynamic budgeting, Matched Candidates, Urgently Hiring label, and employer branding features.

Features & labels

Matched Candidates

Premium feature that automatically delivers quality candidates to the employer's inbox based on job criteria.

Urgently Hiring

Label applied to Premium jobs flagging them as time-sensitive. Claimed to drive increased application volume.

Indeed Apply

Indeed's native application flow — candidates apply without leaving Indeed. Jobs without Indeed Apply send candidates to an external site.

Smart Fit Score

0–100 numerical fit score from Smart Screening, based on employer-defined criteria.

AI Recruiter

Smart Screening feature — natural-language screening conversation with candidates post-application.

Lifecycle stages

Onboarding

Lifecycle stage — a new employer being introduced to the platform for the first time.

Upsell

Lifecycle stage — an employer already spending on Sponsored Jobs, being shown the value of upgrading to Premium.

Reactivation

Lifecycle stage — a lapsed employer being re-engaged with new product or feature messaging.