03 / Foundations

Foundations

Exact color, type, spacing, motion, and layer rules

Color is a role

page surface

#ffffff

ink and primary filled action

#111111

metadata and subdued navigation

#6f6a60

general token; input observes rgba black 20%

#d8d3ca

homepage announcement link and focus outline

#3f42ab

Source token	Exact value	Use
`color.background`	`#ffffff`	page surface
`color.foreground`	`#111111`	ink and primary filled action
`color.muted`	`#6f6a60`	metadata and subdued navigation
`color.border`	`#d8d3ca`	general token; input observes rgba black 20%
`color.indigo-link`	`#3f42ab`	homepage announcement link and focus outline

The production footer uses unusually low-opacity muted text. The guide raises supporting-text contrast to #69665f. This is a labeled accessibility repair, not a measured production token. Indigo #3f42ab remains reserved for links and visible focus.

Typography

Cursor Gothic is loaded from the exact first-party WOFF2 responses. Regular, italic, bold, and bold italic are retained. The fallback stack is system UI, Helvetica Neue, Helvetica, Arial. Font display uses swap. No variable axis was declared in the delivered font rules.

Homepage display · 40 / 46 · regular · mobile 26 / 29.9

Datasets of real work.

Editorial title · 34 / 39.1 · regular · mobile 28 / 33.6

Research with a clear measure.

Body · 16 / 28 · regular · mobile 14 / 24

Describe the work, the context, and the next step. Keep one idea per paragraph and make the action specific.

Role	Size / line box	Content contract
Lead title	56 / 58.24 desktop; 36 / 38.88 mobile	Allow intentional wrapping. Never clamp a value, qualification, or task title.
Eyebrow	11 / 16.5; 2.2 px tracking; uppercase	A short page category, not the only heading.
Action	14 / 20 desktop; 13 / 19.5 compact	Sentence case. Label the next action. Keep at least the observed 40–44 px hit area.
Label / metadata	11–13 px, role-dependent	Use labels above fields. Never substitute a placeholder for a label.
Tabular data	Compact type; align numeric values consistently	Keep unit and metric direction visible. Missing values use “Not reported”, never zero.

Spacing, containers, and breakpoints

Rule	Value	Condition
`space.unit`	`4px`	--spacing:.25rem
`container.3xl`	`768px`	--container-3xl:48rem
`container.6xl`	`1152px`	--container-6xl:72rem
`breakpoint.400`	`400px`	two-column document count choice
`breakpoint.sm`	`640px`	gutter, type, grid changes
`breakpoint.lg`	`1024px`	lead form two-column shell

The 4 px source unit does not erase exceptions. The wordmark is 72.3125 px wide at desktop, and the homepage action is 113.75 px wide with its observed label. Parent gutters change from 20 to 48 px at the source small breakpoint. Guide navigation adds a separate 760 px breakpoint.

Motion, layers, and modes

Pattern	Source contract	Reference contract
Fade-up	600 ms ease-out; translateY 12 px to 0	Use only for entrance. Content remains visible if scripts fail. Reduced motion removes transform and animation.
ASCII background	Canvas animation with pointer response; source reduced-motion static branch	The guide homepage and homepage recipe use animated ASCII with pointer response. Reduced motion renders one still frame. The background pauses in hidden tabs and never intercepts clicks. Other specimens retain the captured image.
Focus	Observed link color #3f42ab	2 px outline with 4 px offset. Never rely on hover alone.
Popover	Tool picker in form; checkbox choices	Local popover stays in DOM order; Escape closes and restores focus to trigger.
Themes	Most pages use the light editorial system; /documents uses a distinct dark valuation layout.	The document page uses system sans-serif, bold centered type, an inverse mark, dark navy controls, and rounded corners. Do not apply its local rules to the primary company pages.

The document-page exception

The document valuation recipe uses a 620px centered column and the system font stack rather than Cursor Gothic. Its dark background is #0c0c12, text is #f5f5f7, and highlighted estimates use pale indigo. The recovered inverse logo belongs on this dark background. This is an observed page family, not a user-selectable dark mode.

Copyable primary-site tokens

:root {
  --ink: #111111;
  --link: #3f42ab;
  --paper: #ffffff;
  --muted: #6f6a60;
  --content: 768px;
  --lead-content: 1152px;
}

Use the linked CSS file for the complete local contract.

Base product CSS · Measured corrections, load second · Measured source-token inventory