Reference
Machine Relations design system
Live documentation pulled from production CSS. Use this page to review typography, color, and component patterns — then tell us what to keep, tighten, or change. Light and dark themes follow the site toggle in the nav.
Philosophy
Jony Ive minimalism for a category-defining reference site: subtract chrome, let type and whitespace carry hierarchy. Teal (--accent) signals system truth; gold (--gold) marks brand voice and quoted authority.
Three-font budget: Lora for display and emotional moments, DM Sans for reading and UI headings, IBM Plex Mono for buttons, metadata labels, and system chrome. Section titles stay DM Sans 400 — not serif.
Interactive surfaces use a quiet control treatment — transparent fill, neutral hairline border, subtle hover — same family as the theme toggle. Body links inherit DM Sans from surrounding text.
Color
Semantic tokens in :root. Light mode shifts accent and gold warmer/darker; toggle theme to compare.
| Token | Dark | Light | Role |
|---|---|---|---|
--accent | #7EACB5 | #4d8a93 | Primary interactive |
--gold | #EDDCC6 | #7a6c5f | Brand / quotes |
--bg | #0a0a0b | #fafaf9 | Canvas |
--text-muted | #a8aab6 | #4a4a58 | Body copy |
Typography
Roles
| Utility | Family | Weight | Use |
|---|---|---|---|
.type-display | Lora | 400 | Page hero h1, primary headline |
.type-display-sm | Lora | 400 | Research article titles |
.type-section-title | DM Sans | 400 | Section h2 — e.g. Origin |
.type-body | DM Sans | 400 | Default paragraphs |
.type-body-md | DM Sans | 400 | Hero definition, research dek |
.type-stat | Lora | 400 | Metric numbers, KPIs |
.type-eyebrow | IBM Plex Mono | 500 | Section labels, category tags |
.type-ui | IBM Plex Mono | 500 | Buttons, metadata labels, detail labels (not body links) |
.type-meta | IBM Plex Mono | 400 | Dates, file paths, back nav |
Live specimens
Eyebrow · Machine Relations
Display — PR convinced humans. MR convinces machines.
Display sm — The Evolution of PR for the AI Era
Section title — Origin
Body md — Machine Relations is the discipline of earning AI engine citations and recommendations for a brand.
Body — Coined by Jaxon Parrott in 2024. AuthorityTech is the first agency to practice Machine Relations.
847 citations
Primary button label
“The audience for brand authority is shifting from human journalists to AI systems.”
Scale
| Token | Size | Sample |
|---|---|---|
--text-2xs | 10px | System label |
--text-xs | 11px | Eyebrow |
--text-sm | 13px | Small UI |
--text-base | 16px | Body (html base) |
--text-lead | 16px | Hero subheader / dek |
--text-md | 16px | Alias of --text-lead |
--text-lg | 18px | Stat headline |
--text-xl | 24px | Section title |
--text-display-sm | fluid | Research title |
--text-display | fluid | Page hero |
Spacing & layout
| Token | Value | Use |
|---|---|---|
--nav-height | 3.25rem | Fixed header height |
--space-page | nav + 3rem | Top page padding below header |
--space-section | 4.5rem | Section vertical rhythm |
--measure | 42rem | Prose width |
--layout-max | 960px | Nav, main, CTA, footer content column |
--layout-wide | 1080px | Data-heavy pages (MRI, design system) |
--layout-gutter | 1.75rem | Horizontal page padding |
--measure-prose | 36rem | Long-form intro copy inside the column |
--shell-max | var(--layout-wide) | Wide shell alias |
--shell-gutter | var(--layout-gutter) | Wide shell gutter alias |
--measure-content | 960px | Alias of layout max |
--measure-wide | 1080px | Wide data pages |
--measure-article | 760px | Research article posts |
--radius-sm / --radius-md | 4px / 6px | Buttons, inputs |
Elevation strategy: flat. Depth from border color and background steps, not shadows.
Components
Production classes rendered in context — not mocks.
Brand mark
Buttons & links
Metadata labels
Stat grid
400+
Syndication outlets
5
Stack layers
Layer header
Earned Authority
Press coverage machines can verify
Validation quote
“Machine Relations names what every CMO is already feeling — the gatekeepers changed.”External validation pattern
Detail card
Why it matters
LLMs cite entities with corroborated third-party evidence.
Example
Yahoo Finance syndication resolving as a verifiable source.