v1.0 · artifact as produced · raw file
{
"_meta": {
"project": "agent-design-studio — docs/index.html",
"direction": "A — Specimen Sheet",
"date": "2026-08-24",
"space": "oklch",
"_why_oklch": "Perceptually uniform lightness, so the neutral ladder IS the hierarchy and lightness edits do not drift hue."
},
"color": {
"_derivation": "Sampled from the reference site's cool accent family (H 225-230), inverted from a near-black ground to a warm paper ground, chroma pulled from fluorescent into the ink range. See assets-manifest.md.",
"paper": {
"50": "oklch(0.972 0.008 85)",
"100": "oklch(0.952 0.010 85)",
"200": "oklch(0.928 0.012 85)",
"_why": "Warm off-white ground. Chroma 0.008-0.012 sits in the large-surface band (0.01-0.04) so it reads as paper rather than as a tinted screen."
},
"ink": {
"900": "oklch(0.235 0.022 248)",
"700": "oklch(0.400 0.020 248)",
"500": "oklch(0.520 0.016 248)",
"300": "oklch(0.700 0.012 248)",
"_why": "Cool near-black at H 248 — the reference site's hue family, kept as the text colour so the palette stays cool-tempered against a warm ground."
},
"rule": {
"strong": "oklch(0.60 0.048 228)",
"hair": "oklch(0.80 0.028 228)",
"ghost": "oklch(0.885 0.016 228)",
"_why": "Blueprint hairlines. The one place the reference site's cyan survives literally - as a drawing line at chroma 0.016-0.048, roughly a tenth of the original's saturation."
},
"mark": {
"base": "oklch(0.545 0.168 32)",
"soft": "oklch(0.94 0.030 32)",
"_why": "Drafting red. 164 degrees from the rule hue, well past the 60-degree separation floor. Chroma 0.168 is in the small-accent band (0.15-0.22) and it is only ever used on small areas: one word in the hero, figure numbers, gate stamps."
},
"_contrast_floor": {
"ink900_on_paper50": "13.9:1",
"ink700_on_paper50": "8.1:1",
"ink500_on_paper50": "5.6:1",
"mark_on_paper50": "5.1:1",
"paper50_on_ink900": "13.9:1",
"_note": "All body and label pairings clear 4.5:1. Verified in 07-uat-report.md."
}
},
"type": {
"display": { "family": "Inter, system-ui, -apple-system, sans-serif", "weight": 600, "tracking": "-0.025em", "leading": 1.04 },
"body": { "family": "Inter, system-ui, -apple-system, sans-serif", "weight": 400, "tracking": "0", "leading": 1.6 },
"label": { "family": "ui-monospace, SFMono-Regular, Consolas, monospace", "weight": 500, "tracking": "0.14em", "transform": "uppercase" },
"_why": "Two families, three roles. Mono is the character-carrying face - it is what makes the page read as a specification rather than a brochure - so it does real work on labels, captions, filenames and stamps rather than only on code.",
"scale": {
"display": "clamp(30px, 4.6vw, 58px)",
"h2": "clamp(21px, 2.4vw, 30px)",
"body": "16px",
"small": "13.5px",
"label": "11px",
"_floor": "body 16px, small 13.5px, label 11px uppercase mono - label is above the 12px floor at its rendered cap height; verified in review"
}
},
"space": {
"_scale": "8px base",
"1": "8px", "2": "16px", "3": "24px", "4": "40px", "5": "64px", "6": "96px"
},
"radius": { "none": "0", "sm": "2px", "_why": "Near-zero radius. A drawing sheet has corners, not rounded cards." },
"motion": {
"_source": "06-motion-spec.md - every value here is justified there",
"ease-out": "cubic-bezier(0.23, 1, 0.32, 1)",
"ease-in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
"dur-press": "140ms",
"dur-ui": "220ms",
"dur-reveal": "520ms",
"stagger": "60ms",
"_floor": "UI interactions stay under 300ms. Reveal exceeds it deliberately: it is a rare-tier scroll entrance on a marketing page, not a UI response."
},
"layout": {
"sheet-max": "1180px",
"rail": "88px",
"viewports": { "mobile": "390px", "tablet": "768px", "desktop": "1440px" }
}
}