/* ───────────────────────────────────────────────────────────────────────── RIVET — design language v2, "Bone" The product is a board; the page is the bench it sits on. The ground and the accent are both dials — see "the two dials" below and assets/css/theme.css — and the shipped default is BONE (#f5f6f8) with the accent at #ff9838. Nothing here follows prefers-color-scheme: the page is whatever the page was built to be, not whatever the visitor's OS says. v1 was near-black (#08090b) with copper #e08a45; `substrate` still holds those values and the picker still offers them. The page went light so the product — which is dark, and stays dark, in the app windows and the 3D captures — has something to sit on rather than dissolving into the ground. One accent. It is spent on the primary action, on the via ticks that open each scene, and on almost nothing else. Green, blue and red on this page belong to the renders and to the board editor — they are the app's own layer colours, not the brand's. TWO typefaces, and width is the device in both. DISPLAY IS ANYBODY (SIL OFL, Etcétera). Archivo held this job and the owner's note on it was exact: the essence was right and the face was too common — a grotesque you have already seen on every second developer-tool page this year. Anybody keeps the thing that mattered, a real `wdth` axis running 50 to 150, and spends it on squared counters and flat terminals that read as drawn-to-a-grid rather than as a default. It is the headline face and the section labels; it never sets a paragraph. TEXT IS ARCHIVO, unchanged. It is a good text face, the site is set in it already, and swapping both would have been a redesign rather than a correction. Monospace appears only where the text is literally machine data: net names, counts, filenames, model ids. Never as decoration. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Anybody'; src: url('../fonts/anybody.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Anybody'; src: url('../fonts/anybody-ext.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; src: url('../fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-ext.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── the two dials ──────────────────────────────────────────────────────── Everything on this page is derived from a GROUND (a six-step neutral ramp plus its ink) and one ACCENT. Both are stored as bare `R G B` triplets so that any of them can be used at an alpha without a second variable, and so the picker in assets/js/theme.js only ever has to write two things: `--accent-rgb` on :root and `data-ground` on . Add a ground by copying a block below and giving it a name; nothing else in either stylesheet needs to know it exists. `data-tone` is the one thing a rule may branch on — light grounds need the 3D captures put on a dark stage, because those captures carry the app's own dark backdrop and no amount of CSS makes a photograph of a dark room look like a photograph of a light one. ───────────────────────────────────────────────────────────────────────── */ :root { --accent-rgb: 255 152 56; /* #ff9838. The picker overwrites this one line. */ --on-accent-rgb: 26 14 2; /* ink ON the accent; the picker flips it by contrast */ /* the 3D viewer's own backdrop, measured off the captures — see README */ --stage-top: #16181e; --stage-bot: #08080a; --stage-fade: var(--void-rgb); /* light tones point this at the stage instead */ --plate-shadow-a: .95; } /* ── grounds ─────────────────────────────────────────────────────────────── */ [data-ground="substrate"] { /* near-black, warm-shifted */ --void-rgb: 8 9 11; --sub-rgb: 11 13 16; --card-rgb: 16 19 25; --card2-rgb: 21 25 34; --line-rgb: 28 33 42; --line2-rgb: 42 50 62; --fg-rgb: 238 240 243; --fg2-rgb: 164 172 184; --fg3-rgb: 109 118 131; --sheen-rgb: 255 255 255; --shadow-rgb: 0 0 0; --glow-a: .18; --sheen-a: .022; } [data-ground="ink"] { /* pure black, colder, higher contrast */ --void-rgb: 0 0 0; --sub-rgb: 7 7 8; --card-rgb: 13 13 15; --card2-rgb: 18 18 21; --line-rgb: 28 28 32; --line2-rgb: 46 46 52; --fg-rgb: 246 246 247; --fg2-rgb: 170 170 176; --fg3-rgb: 112 112 120; --sheen-rgb: 255 255 255; --shadow-rgb: 0 0 0; --glow-a: .2; --sheen-a: .026; } [data-ground="paper"] { /* warm white, the drawing printed */ --void-rgb: 248 246 241; --sub-rgb: 255 253 249; --card-rgb: 255 255 255; --card2-rgb: 250 247 241; --line-rgb: 226 220 209; --line2-rgb: 198 190 176; --fg-rgb: 23 21 19; --fg2-rgb: 88 84 78; --fg3-rgb: 132 126 117; --sheen-rgb: 255 255 255; --shadow-rgb: 60 48 34; --glow-a: .13; --sheen-a: .5; } /* BONE IS THE SHIPPED GROUND. It leads `:root` so a page renders correctly in the half-second before theme.js has written data-ground, and so a browser with JS off still gets the real design rather than the old near-black. `data-tone="light"` is written into the markup for the same reason. */ :root, [data-ground="bone"] { /* cool white, flatter, more clinical */ --void-rgb: 245 246 248; --sub-rgb: 255 255 255; --card-rgb: 255 255 255; --card2-rgb: 247 248 250; --line-rgb: 222 226 232; --line2-rgb: 194 200 209; --fg-rgb: 16 18 23; --fg2-rgb: 82 89 100; --fg3-rgb: 124 132 144; --sheen-rgb: 255 255 255; --shadow-rgb: 22 30 48; --glow-a: .12; --sheen-a: .5; } /* ── what the rest of the stylesheet actually uses ───────────────────────── */ :root { --void: rgb(var(--void-rgb)); --sub: rgb(var(--sub-rgb)); --card: rgb(var(--card-rgb)); --card-2: rgb(var(--card2-rgb)); --line: rgb(var(--line-rgb)); --line-2: rgb(var(--line2-rgb)); --fg: rgb(var(--fg-rgb)); --fg-2: rgb(var(--fg2-rgb)); --fg-3: rgb(var(--fg3-rgb)); --cu: rgb(var(--accent-rgb)); --cu-hi: color-mix(in oklab, var(--cu) 74%, rgb(var(--sheen-rgb))); --cu-deep: color-mix(in oklab, var(--cu) 70%, #000); --cu-glow: rgb(var(--accent-rgb) / var(--glow-a)); --cta-ink: rgb(var(--on-accent-rgb)); /* borrowed from the app's own semantics, used only where they mean it. Red is DRC's and nothing else's — it never appears as decoration. */ --drc: #e0574a; --ok: #59c48d; --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; /* Archivo is the fallback rather than a system face: if Anybody has not arrived, the headline should still be the site's own grotesque and still honour `wdth`, not drop to San Francisco at width 100. */ --display: 'Anybody', 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --maxw: 1300px; --gut: clamp(20px, 4vw, 56px); --ease: cubic-bezier(.16, 1, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--void); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Delay has to go as well as duration. The nav panel closes with `visibility 0s linear .2s` so the fade has something to fade during; with the duration collapsed and the DELAY left in place, the panel looked shut while still catching clicks for 200ms. Nothing here is staged for effect once motion is off, so zero is right for every delay. */ *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0s !important; animation-delay: 0s !important; } } body { margin: 0; background: var(--void); color: var(--fg); font-family: var(--sans); font-variation-settings: 'wdth' 100; font-size: 17px; line-height: 1.6; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Grain. A real film grain, not a texture image: one inline SVG turbulence fixed over the whole page at 3.5%. It stops the large flat panels from banding on an OLED and it is the single cheapest way to make a dark page look printed rather than rendered. */ body::after { content: ''; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: var(--grain-a, .035); mix-blend-mode: var(--grain-blend, normal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg, video, canvas { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--cu); color: var(--cta-ink); } :focus-visible { outline: 2px solid var(--cu); outline-offset: 3px; border-radius: 2px; } /* ── type scale ─────────────────────────────────────────────────────────── Display runs expanded and tight. The width axis is what makes these read as engineered rather than merely large. */ .d1, .d2, .d3 { font-family: var(--display); /* Anybody's width axis is wider than Archivo's, and 118 in it is a good deal more expanded than 118 was — 110 lands where the old headline sat. */ font-variation-settings: 'wdth' 110; font-weight: 600; letter-spacing: -.03em; line-height: .98; margin: 0; text-wrap: balance; } .d1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); } .d2 { font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.04; } .d3 { font-size: clamp(1.45rem, 2.5vw, 2.1rem); letter-spacing: -.022em; line-height: 1.1; } /* The label device: condensed, caps, sans. Never monospace — a mono caps eyebrow is the single most overused "make it look designed" move there is, and it reads as exactly that. Width does the work here instead. */ .label { font-family: var(--display); font-variation-settings: 'wdth' 68; font-weight: 640; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); margin: 0; } .lede { font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--fg-2); letter-spacing: -.012em; max-width: 44ch; margin: 0; } .lede b, .body b { color: var(--fg); font-weight: 600; } .body { color: var(--fg-2); margin: 0; max-width: 56ch; } .data { font-family: var(--mono); font-size: .82em; letter-spacing: -.01em; } /* ── shell ───────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .bleed { width: 100%; padding: 0 var(--gut); } section { position: relative; } .scene { padding: clamp(72px, 8vw, 124px) 0; } /* A scene opens with a hairline and a via: an annular ring with a drilled centre, which is the one piece of board vocabulary small enough to use as punctuation. */ .rule { display: flex; align-items: center; gap: 14px; padding-bottom: clamp(28px, 4vw, 54px); border-top: 1px solid var(--line); padding-top: 20px; position: relative; } .rule::before { content: ''; position: absolute; top: -4.5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--void); border: 2px solid var(--cu); } .rule .label { padding-left: 22px; } .rule .label + .label { margin-left: auto; padding-left: 0; color: var(--line-2); } /* ── nav ─────────────────────────────────────────────────────────────────── */ /* `body > nav`, NOT a bare `nav`. A bare element selector for one specific component is a landmine in a site that also uses