/ field notesmarketing ink
#1E1E1Ergba(30, 30, 30, 0.86)
01 / FOUNDATIONS · MEASURED PUBLIC VALUES
Type. Color.
Space.
The product uses three typographic systems. Keep the marketing display face, the documentation sans, and the console form treatment distinct.
Typography
Decisions.
In code.
TS.AI.OS1 / 18.09.2026
A typed answer becomes one part of a larger program.
State → Question → Result
| Role | Family | Wide | Narrow | Rule |
|---|---|---|---|---|
| Marketing display | Die Grotesk C Medium · 500 | 150 / 120px | 54 / 43.2px | Normal tracking; heading content in a 1240px rail. |
| Marketing section | Die Grotesk C Medium · 500 | 64 / 57.6px | 33 / 29.7px | No blanket negative tracking. |
| Editorial body | Die Grotesk C Regular · 400 | 20–24px / 1.1–1.2 | 20–24px / 1.1–1.2 | 820px column; source route controls the final measure. |
| Metadata and window chrome | LisaTerminal Paper · 500 | 12–24px | 12–20px | Keep pixel type on short labels and metadata. |
| Docs title | Inter variable | 61.6 / 58.52px | See measured mobile recipe | Exact route-level values are retained in geometry data. |
| Docs prose | Inter variable | 18 / 28px | 16–18 / 24–28px | Code uses paperMono; never substitute the display face. |
| Console title | Inter · 500 | 36 / 34.2px | 36 / 34.2px | −2.16px tracking is specific to this heading. |
Source aliases and downloadable font files are in the font ledger. The 21MB SF Pro source file is preserved only as research evidence and is not loaded by this site.
Color fields
marketing paper
#FEFEFErgb(254, 254, 254)
saturated pink
#E551BAinline captured CSS
pink accent
#D45BB6inline captured CSS
blue-gray
#ABBAB9inline captured CSS
teal
#09AEA1inline captured CSS
Use coral for legal and selected editorial sections, saturated pink for the product narrative, teal for the manifesto, and blue-gray for articles. Color alone does not convey state. The documentation console action uses dark text on pink in this reference to meet contrast requirements.
Layout and spacing
| System | Container | Inner spacing | Narrow transformation |
|---|---|---|---|
| Marketing | 1240px content rail; source banners 1380px at 1440px | 30px outer banner gutter; 110px section rhythm; individual source sections retain their measured values | 10–30px gutters by family;150px display becomes54px |
| Editorial | 1024px title / 820px body / 600px legal | 1px reading rule;10–20px body inset; source heading and figure spacing | Normal document flow; figures scale to column; no horizontal page overflow |
| Documentation | 288px nav; 768px article at x = 336px; 288px TOC at 1440px | 48px article inset; 48px top header; 24px gap from header to breadcrumb | Navigation becomes a disclosure; search stays reachable; TOC moves out of the fixed rail |
| Console | 50/50 desktop split;384px form | 40px primary fields/actions;16px field-to-action gap | Artwork hides;24px form gutters; form shrinks with parent |
Each parent owns sibling gaps. A component owns its internal padding and borders. Avoid adding both a child margin and parent gap for the same separation. Read the geometry contract.
Motion, layers and focus
The source uses animated GIFs, media and retro window layers. This reference defaults decorative clouds to a captured still. Opt-in motion and pause controls swap the actual image resource. Reduced-motion settings always use the still. Dialogs occupy the browser top layer; a 3px focus ring remains visible above borders.
Source navigation and small text occasionally have limited contrast or semantics. Local improvements are named in the exception register; they are not represented as source observations.
Inspect state and interaction rulesCopy the local tokens
:root {
--paper: #fefefe;
--ink: #1e1e1e;
--coral: #f386a1;
--pink: #e551ba;
--founder: #d45bb6;
--teal: #09aea1;
--gray: #abbab9;
}
/* Source-specific names and font-face declarations: */
/* assets/product-recipes.css and assets/docs-recipes.css */Ready to copy.