/* Hallmark · macrostructure: Manifesto (own structure) · genre: modern-minimal (technical) * theme: custom · vibe: "a capture, not a poster" * paper oklch(16% 0.004 110) · signal oklch(66% 0.19 38) vermilion · IBM Plex Mono + Sans * nav: N8-derived status bar · footer: Ft5 statement · enrichment: none * pre-emit critique: P5 H5 E5 S5 R5 V5 * * This replaced a build that studied the Manifesto theme and then shipped a recolour of * its demo — its exact warm black, its exact fire red, its display face, its slab. The * verdict was the right one: that is cloning, not studying. What a study is for is the * structure underneath, and the structure a page should have comes from the product, not * from the reference. * * So the system comes from what J0 does. It sends a captured request again as a * different account and compares what came back. That is a diff — so the page is one, * and the display face is MONOSPACE because a diff only reads if the two lines align * character for character. The typeface is not a mood here; it is the only family in * which the hero can be true. Everything measured in `ch` follows from the same fact: * three characters of a monospace are exactly 3ch, which is why the opening can move a * glyph by an exact distance instead of a tuned guess. * * ONE SIGNAL, and it is a mark rather than a fill: vermilion on the token that changed. * In the product the thing that matters is never the whole response, it is the one value * that should not have come back — so on the page the colour never floods a surface, it * marks a word. Verdict states are neutrals, because "the control held" is not a success * to congratulate and "never measured" must never read as clean. * * Every value measured against paper, paper-2 and the mark before use: ink on the mark * reads 10.57:1, the signal 5.76:1, faint 4.92:1, and the control-boundary rule 3.53:1. */ :root { color-scheme: dark; /* ---- a lab dark: near-neutral, a trace warm, no blue cast ---------------------- */ --color-paper: oklch(16% 0.004 110); --color-paper-2: oklch(20.5% 0.005 110); --color-paper-3: oklch(25% 0.006 110); --color-ink: oklch(95% 0.006 100); --color-ink-2: oklch(82% 0.007 100); --color-muted: oklch(66% 0.008 100); --color-faint: oklch(60% 0.008 100); --color-rule: oklch(30% 0.005 110); --color-rule-strong: oklch(52% 0.006 110); /* ---- the signal: vermilion, and it marks rather than fills --------------------- */ --color-signal: oklch(66% 0.19 38); --color-signal-deep: oklch(56% 0.18 38); /* There is no highlight token. The signal is a word or a rule under one, never a filled block — at display size a highlight stops being a mark and becomes a surface. */ /* ---- verdicts: neutrals, deliberately ------------------------------------------ */ --color-held: oklch(80% 0.007 100); --color-scoped: oklch(70% 0.008 100); --color-unmeasured: oklch(62% 0.008 100); --color-focus: oklch(95% 0.006 100); /* ---- type: two families. Mono carries structure, sans carries argument --------- */ --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --text-2xs: 0.6875rem; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-lead: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); --text-section: clamp(1.5rem, 1.6vw + 0.9rem, 2.4rem); --tracking-display: -0.045em; /* mono sets wide; pull it in hard at display size */ --lh-tight: 1.06; --lh-snug: 1.35; --lh-body: 1.62; /* ---- 4pt space ------------------------------------------------------------------ */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --radius: 0; --rule-hair: 1px; --rule-bar: 2px; --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-intro: 600; --nav-h: 60px; --page: 1280px; --measure: 64ch; --gutter: clamp(1.25rem, 3.5vw, 3rem); } /* ---- two families, self-hosted, latin subset ---------------------------- The Content-Security-Policy is `default-src 'none'`, so a face fetched from a CDN would not load at all. IBM Plex, SIL Open Font Licence 1.1 — see fonts/OFL.txt. Mono carries display and data, sans carries prose. ------------------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }