/* ══ OCRO DESIGN TOKENS ════════════════════════════════════════════════════ Portable. Import this alone into anything — a storefront, a deck, a blog theme, a dashboard — and you have the system without the homepage. WHY THIS FILE EXISTS The vocabulary was already good: 82 tokens covering colour, type, space, radius, elevation, motion and the metal treatments. It was not portable, because 17 of them are declared twice — once in ocro.css on :root and again in a later layer scoped to .v2, .v3 or .v5. So the TRUE value of --void, --hairline, --sp-section, every radius and every surface only exists on a page that happens to carry those classes on . Copy ocro.css into a new project and you get the superseded values with no warning. Everything below is the RESOLVED value, read off the built page. One :root, no layer classes, nothing to remember. HOW TO USE IT ELSEWHERE then build with the tokens. The primitives at the bottom are the six shapes the brand actually repeats; anything past those is surface-specific and belongs to that surface, not here. THE TWO RULES THAT KEEP IT COHERENT 1. SILVER says "this is important" — display type, machined edges, rims. 2. INDIGO says "this does something" — buttons, focus, active, live. Nothing is ever both. That division is what stops either signal going stale, and it is the single thing most worth carrying into a new surface. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── GROUND & SURFACES ─────────────────────────────────────────────────── Not pure black. White display type on #000 blooms for anyone with astigmatism and the counters inside letterforms fill in; #050608 reads as black against any surrounding chrome and gives the metallic rims something to sit against. Surfaces step up in small absolute amounts — the RATIO is what separates a card from the page, not the distance. */ --void:#050608; /* page ground */ --surface-plain:#0a0b0d; /* cards, panels, the form */ --surface-lift:#0c0e12; /* hover, raised rows, the featured card */ --lift:#090b10; /* inset wells, chip fills */ /* Edges. A dark UI reads as cheap the moment card borders become visible grey rectangles, so the resting hairline is barely there and the lit one only ever appears on hover, where it is doing work. */ --hairline:#1d2023; --hairline-lit:#383d43; /* ── INK ───────────────────────────────────────────────────────────────── Five steps, each with a job. Contrast is measured against --void. ink 21.0:1 headings, figures bone 17.9:1 emphasis inside body copy smoke 10.0:1 body copy on panels ash 9.2:1 body copy, sub-headings iron 5.3:1 labels that explain a number — the floor, not a default Do not invent a sixth. If something needs to be quieter than --iron it needs to be smaller or removed, not dimmer: 5.3:1 is already the last value that clears AA at the 10–12px these labels are set at. */ --ink:#ffffff; --bone:#f0f0f0; --smoke:#abafb4; --ash:#a1a4a5; --iron:#7f838b; --charcoal:#464a4d; /* dividers and disabled marks only, never text */ /* ── ACTION ────────────────────────────────────────────────────────────── One hue. On a black ground a saturated colour reads about a fifth hotter than it measures, so --indigo-fill is pulled ~20% down in luminance from --indigo and is what actually fills a button; --indigo itself is for strokes, and --indigo-lit for text and small marks that need to survive against the ground. */ --indigo:#6366F1; --indigo-fill:#4f52d4; --indigo-lit:#8b8df6; --indigo-a12:rgba(99,102,241,0.12); --indigo-a24:rgba(99,102,241,0.24); --indigo-a45:rgba(99,102,241,0.45); /* Semantics, held in reserve. Two values, both tuned for a dark ground — a saturated red or green out of a default palette vibrates on #050608. */ --green:#3ad389; --red:#ff9592; /* ── METAL ─────────────────────────────────────────────────────────────── What makes a surface read as polished silver is a REVERSAL — a dark band where it turns away from the light and a bright one where it turns back. A single white-to-grey ramp reads as type fading out, which is the most common way a "chrome" treatment fails. The angle is near-vertical on purpose. An oblique gradient samples a different slice of itself depending on the box it is clipped to, so an oblique chrome makes a one-line heading and a two-line heading look like two different treatments. */ --grad-chrome:linear-gradient(184deg,#ffffff 0%,#eef1f7 26%,#a9b0bd 50%,#ffffff 66%,#d6dbe5 86%,#a2a9b6 100%); --grad-chrome-soft:linear-gradient(184deg,#ffffff 0%,#f2f5fa 32%,#c3c9d5 66%,#ffffff 90%,#dfe4ec 100%); /* A lit rim, not a border: it dies out at both ends, so it marks an edge without drawing a rectangle. Use as a 1px background on a ::before. */ --rim:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(143,143,143,0.67) 50%,rgba(0,0,0,0) 100%); --bloom-top:radial-gradient(41.07% 8.33% at 50% 0%,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* ── TYPE ──────────────────────────────────────────────────────────────── Three faces, three jobs, no overlap. display Bebas Neue headings and figures. Condensed caps only. body DM Sans everything a person reads in sentences. mono Space Mono data, prices, labels that annotate a number. Mono is for measurement, never as a costume for "technical". */ --font-display:'Bebas Neue',Impact,"Arial Narrow Bold",sans-serif; --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:'Space Mono',ui-monospace,"SF Mono",Menlo,monospace; /* Fluid scale, 380px → 1280px. Every step is clamp()ed against the same two bounds, so the whole page changes size together instead of one element crossing a breakpoint on its own. */ --fs-0:clamp(0.9375rem,0.911rem + 0.11vw,1rem); /* body */ --fs-1:clamp(1rem,0.947rem + 0.22vw,1.125rem); /* lead */ --fs-2:clamp(1.125rem,1.046rem + 0.33vw,1.3125rem); /* control label */ --fs-3:clamp(1.375rem,1.217rem + 0.67vw,1.75rem); /* card title */ --fs-5:clamp(2.125rem,1.5rem + 2.6vw,3.5rem); /* section heading */ --fs-6:clamp(2.875rem,1.345rem + 6.44vw,6.5rem); /* page heading */ --fs-mono:clamp(0.6875rem,0.676rem + 0.05vw,0.75rem); /* data label */ /* ── SPACE ─────────────────────────────────────────────────────────────── One section rhythm, one gutter, one page measure. --sp-tight is the everyday boundary; --sp-major is for the two or three moments where the subject genuinely changes. Using four different section paddings is how a page ends up breathing irregularly. */ --page:1200px; /* max content width incl. gutter */ --read:880px; /* prose and controls — the narrow measure */ --sp-gutter:clamp(1.25rem,0.511rem + 3.11vw,3rem); --sp-section:clamp(4.25rem,2.9rem + 5.4vw,7.25rem); --sp-tight:calc(var(--sp-section) * 0.5); --sp-major:calc(var(--sp-section) * 1.4); --pad-card:32px; /* ── SHAPE ─────────────────────────────────────────────────────────────── Four steps, deliberately tight. The character here is machined, not soft; a fully-rounded pill on anything containing words is what makes a dark page read as generated. Pair every one of these with `corner-shape:squircle` (see .ocro-squircle below). A superellipse hugs its edge much longer before turning, so at the same radius it reads squarer while still catching light on the curve. */ --r-1:6px; /* chips, tags, small controls */ --r-2:8px; /* inputs, buttons */ --r-3:10px; /* cards */ --r-4:14px; /* panels, frames, large surfaces */ --r-pill:9999px; /* status badges and bar fills ONLY */ /* ── ELEVATION ─────────────────────────────────────────────────────────── Every shadow carries an offset and a soft blur. A zero-offset coloured halo is decoration, not depth. */ --e-1:0 1px 2px rgba(0,0,0,0.55),0 6px 16px rgba(0,0,0,0.35); --e-2:0 2px 6px rgba(0,0,0,0.65),0 14px 36px rgba(0,0,0,0.48); --e-3:0 4px 12px rgba(0,0,0,0.70),0 24px 60px rgba(0,0,0,0.55); /* ── MOTION ────────────────────────────────────────────────────────────── Exponential ease-out from an already-visible default. Nothing should animate in from opacity 0 that would be lost if the script never ran. */ --dur-1:100ms; --dur-2:160ms; --dur-3:280ms; --dur-4:480ms; --ease-std:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in:cubic-bezier(0.7,0,0.84,0); } /* ══ PRIMITIVES ════════════════════════════════════════════════════════════ Six shapes the brand repeats. Anything past these belongs to the surface using them, not to this file. ═══════════════════════════════════════════════════════════════════════════ */ /* The corner. Apply alongside any --r-* radius. Degrades to the plain radius where corner-shape is unsupported, which is still squarer than a default. */ @supports (corner-shape: squircle){ .ocro-squircle{corner-shape:squircle} } /* A panel: the one surface treatment. An opaque floor so the page's ambient light cannot leak into the object, a hairline edge, and a lit rim on top. */ .ocro-panel{ position:relative; background-color:var(--surface-plain); background-image: var(--bloom-top), linear-gradient(180deg,rgba(255,255,255,0.030) 0%,rgba(255,255,255,0.008) 44%,rgba(255,255,255,0) 100%); border:1px solid var(--hairline); border-radius:var(--r-3); corner-shape:squircle; } .ocro-panel::before{ content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px; background:var(--rim);opacity:0.75;pointer-events:none; } /* Display type in metal. Only for headings and figures — never body copy, and never as a substitute for weight or size doing the work. */ .ocro-chrome{ font-family:var(--font-display);font-weight:400; text-transform:uppercase;letter-spacing:0.012em;line-height:0.9; background-image:var(--grad-chrome-soft); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .ocro-chrome--loud{background-image:var(--grad-chrome)} /* The action. One fill, one outline, same geometry. */ .ocro-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:12px 22px; font-family:var(--font-body);font-size:15px;font-weight:500; border-radius:var(--r-2);corner-shape:squircle; border:1px solid transparent;text-decoration:none;cursor:pointer; transition:background var(--dur-2) var(--ease-std),border-color var(--dur-2) var(--ease-std); } .ocro-btn--primary{background:var(--indigo-fill);color:var(--ink)} .ocro-btn--primary:hover{background:var(--indigo)} .ocro-btn--ghost{background:transparent;border-color:var(--hairline);color:var(--bone)} .ocro-btn--ghost:hover{border-color:var(--hairline-lit);background:rgba(255,255,255,0.04)} .ocro-btn:focus-visible{outline:2px solid var(--indigo-lit);outline-offset:2px} /* A data label. Mono, tracked, uppercase — the voice everything that annotates a number speaks in, so figures and their captions always look related. */ .ocro-label{ font-family:var(--font-mono);font-size:var(--fs-mono); letter-spacing:0.14em;text-transform:uppercase;color:var(--iron); } /* A chip. Not a pill. */ .ocro-chip{ display:inline-flex;align-items:center;gap:7px; padding:6px 11px;border-radius:var(--r-1);corner-shape:squircle; background:rgba(255,255,255,0.035);border:1px solid var(--hairline); font-family:var(--font-mono);font-size:12px;color:var(--smoke); } /* The page shell. Two measures and one gutter — a block is wide or narrow, there is no third. Five different left edges is what makes a page feel unresolved even when nothing is technically wrong. */ .ocro-container{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--sp-gutter)} .ocro-container--read{max-width:calc(var(--read) + var(--sp-gutter) * 2)} @media (prefers-reduced-motion:reduce){ .ocro-btn{transition:none} } /* ══ IDENTITY TOKENS ═══════════════════════════════════════════════════════ These existed only inside ocro.css's own :root, which index.html loads and no other page does. That is why inner pages had no metallic rims, no gradient headlines, no card surface and no step-4 type size. Deliberately NOT merged: --font-display / --font-body / --font-mono. In ocro.css those point at "Bebas Fallback" and "DM Fallback", @font-face families declared inside ocro.css itself; copying them here would leave every inner page falling back to Impact. The atmosphere tokens (--atmos, --lamp, --streaks, --atmos-falloff, --grain) live in site.css next to the body::before/::after that consume them. */ :root{ --grad-headline:linear-gradient(to right bottom,rgb(242,244,247) 30%,rgba(242,244,247,0.5)); --grad-silver:linear-gradient(to right bottom,rgb(255,255,255) 0%,rgb(214,235,253) 42%,rgba(178,196,214,0.55) 100%); --ring-metal:conic-gradient(from 200deg at 50% 50%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.16) 62%, rgba(255,255,255,0.05) 82%, rgba(255,255,255,0.30) 100%); --ring-metal-lit:conic-gradient(from 200deg at 50% 50%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.14) 18%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.38) 62%, rgba(255,255,255,0.12) 82%, rgba(255,255,255,0.65) 100%); --surface-card:linear-gradient(rgb(16,16,16) 0%,rgba(0,0,0,0.8) 100%); --e-0:none; --shadow-lift:var(--e-3); --fs-4:clamp(2.125rem,1.333rem + 3.33vw,4rem); --r-btn:20px; --r-card:var(--r-3); --r-panel:var(--r-4); --dur-5:800ms; --ease:var(--ease-std); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --t:var(--dur-2); } /* ══ COMPONENT SPACING SCALE ═══════════════════════════════════════════════ The scale above stops at section level (--sp-gutter / --sp-section / --sp-tight / --sp-major), so every component gap was hand-set in raw px. Measured across site.css and pages.css: 150 raw px values against 40 token-based declarations, and 59% of them landed off any 4px step — 14px and 18px being the two most common, neither on the scale. Eight steps, all multiples of 4, most on 8. Use these for anything inside a component; keep --sp-section and friends for the space between sections. The one rule that matters when picking between them: the gap SEPARATING two things must be larger than the space INSIDE either of them, or they stop reading as separate things. */ :root{ --sp-1:4px; /* hairline separation: icon to its label */ --sp-2:8px; /* bound pair: a number and its caption */ --sp-3:12px; /* related lines inside one block */ --sp-4:16px; /* default gap between sibling controls */ --sp-5:24px; /* padding inside a small card, or a group break */ --sp-6:32px; /* padding inside a standard card (= --pad-card) */ --sp-7:40px; /* gap BETWEEN cards — must exceed the padding above */ --sp-8:56px; /* gap between distinct blocks within a section */ }