tokens.css (18578B)
1 /* ============================================================================ 2 DÆMON//SEC — design tokens 3 Matches the main DÆMON site: Rosé Pine Dawn (cream, DEFAULT) ⇄ Rosé Pine 4 (night). Type is Archivo + IBM Plex Mono, with an EB Garamond lockup for 5 the wordmark. Palette values are the contrast-tuned DÆMON dawn/night tokens. 6 The theme attribute is set on <html> by an inline head script before paint. 7 8 ── Form language ── 9 The site is an editorial-brutalist paper archive, not a glass UI. Three 10 rules follow from that and everything here serves them: 11 12 1. Zero radius. Corners are square, everywhere, including images and 13 inputs. `--radius*` survive only so that consumers written against 14 them keep compiling; they all resolve to 0. 15 2. No blur, no glow, no drop shadow. Structure is carried by 1px ink 16 rules (`--rule`), flat panels (`.slab`), and the grain film. 17 3. Colour separates by *value*, not by translucency. A panel differs 18 from its page because it is a different ink, not because it is 19 frosted. 20 21 Alpha still belongs on borders and washes. It does NOT belong on text: 22 use the ink / subtle / muted ramp, which is tuned to stay legible at 23 every step in both modes. 24 ========================================================================== */ 25 26 /* ---- Fonts (self-hosted, base-aware via Vite) ---------------------------- */ 27 @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/archivo-400.woff2') format('woff2'); } 28 @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/archivo-500.woff2') format('woff2'); } 29 @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/archivo-600.woff2') format('woff2'); } 30 @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/archivo-700.woff2') format('woff2'); } 31 @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/eb-garamond-600.woff2') format('woff2'); } 32 @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); } 33 @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2'); } 34 /* DM Mono — the site mono, matching daemon-sec.xyz (labels, eyebrows, meta, 35 the redesigned homepage). Self-hosted latin subsets; no external request. */ 36 @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/dm-mono-300.woff2') format('woff2'); } 37 @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-400.woff2') format('woff2'); } 38 @font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-400-italic.woff2') format('woff2'); } 39 @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-mono-500.woff2') format('woff2'); } 40 /* Noto Sans Display — variable cut, the wordmark/display face: heavy, 41 compressed, uppercase. */ 42 @font-face { font-family: 'Noto Sans Display'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url('../fonts/noto-sans-display-var-latin.woff2') format('woff2'); } 43 /* JetBrains Mono — terminal accents: code captions, status-bar segments, 44 prompt lines. */ 45 @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2'); } 46 @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400-italic-latin.woff2') format('woff2'); } 47 @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-700-latin.woff2') format('woff2'); } 48 /* Old Standard TT — wordmark cut, for stylised glyph lockups. Optional 49 garnish, used sparingly. */ 50 @font-face { font-family: 'Old Standard TT'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/old-standard-tt-700-wordmark.woff2') format('woff2'); } 51 52 /* ---- Light = Rosé Pine Dawn (DEFAULT, cream) ---------------------------- */ 53 :root, 54 :root[data-theme='light'] { 55 --base: #faf4ed; 56 --surface: #fffaf3; 57 --overlay: #f2e9e1; 58 --muted: #6e6a86; /* 4.73:1 */ 59 --subtle: #635f7c; /* 5.56:1 */ 60 --text: #575279; /* 6.66:1 */ 61 /* accents tuned to clear 4.5:1 as ink on cream */ 62 --love: #af416c; 63 --gold: #9b5800; 64 --rose: #b4423d; 65 --pine: #017194; 66 --foam: #00747b; 67 --iris: #795aa2; 68 --hl-low: #f4ede8; 69 --hl-med: #dfdad9; 70 --hl-high: #cecacd; 71 72 /* The published Rosé Pine Dawn pastels, kept for decoration — washes, 73 rules, noise bands, anything that is a shape rather than a word. On 74 cream they run from gold at 2.05:1 to love at 3.84:1, all under the 75 4.5:1 floor, so never put text in them here. They are what the theme 76 actually looks like: use them as ground and put ink on top. */ 77 --pine-soft: #286983; 78 --foam-soft: #56949f; 79 --gold-soft: #ea9d34; 80 --love-soft: #b4637a; 81 --iris-soft: #907aa9; 82 --rose-soft: #d7827e; 83 84 /* semantic */ 85 --bg: var(--base); 86 --fg: var(--text); 87 --fg-dim: var(--subtle); 88 --fg-faint: var(--muted); 89 --accent: var(--iris); 90 --accent-2: var(--pine); 91 92 /* Structure. `--rule` is the hairline every edge on the site is drawn 93 with; `--rule-hi` is the same ink at the weight a hovered or active 94 edge takes. `--wash` is the one permitted fill that is not a flat 95 colour — a paper tint for table stripes and hover grounds. */ 96 --rule: rgba(87, 82, 121, 0.22); 97 --rule-hi: rgba(87, 82, 121, 0.48); 98 --rule-faint: rgba(87, 82, 121, 0.12); 99 --wash: rgba(242, 233, 225, 0.6); 100 --wash-strong: #f2e9e1; 101 102 --code-bg: #f2e9e1; 103 --selection: rgba(121, 90, 162, 0.22); 104 105 /* The grain film's weight on paper. Multiply, because on a light ground 106 noise has to be laid *into* the page — added to it, it is invisible. */ 107 --grain-blend: multiply; 108 --grain-opacity: 0.1; 109 110 /* The banners' signal field, resolved from CSS at draw time so the 111 canvas follows the mode. On paper there is no light to add, so the 112 bands are multiplied in at lower gain (multiply bites harder than 113 `lighter` at the same alpha) using the published dawn hues. */ 114 --fuzz-blend: multiply; 115 --fuzz-gain: 0.55; 116 --fuzz-band-1: 144 122 169; /* iris-soft */ 117 --fuzz-band-2: 86 148 159; /* foam-soft */ 118 --fuzz-band-3: 180 99 122; /* love-soft */ 119 --fuzz-fil-1: 87 82 121; /* ink */ 120 --fuzz-fil-2: 86 148 159; 121 --fuzz-fil-3: 144 122 169; 122 } 123 124 /* ---- Dark = Rosé Pine (night) ------------------------------------------- */ 125 :root[data-theme='dark'] { 126 --base: #191724; 127 --surface: #1f1d2e; 128 --overlay: #26233a; 129 --muted: #8b87a3; /* 5.12:1 */ 130 --subtle: #908caa; /* 5.48:1 */ 131 --text: #e0def4; /* 13.39:1 */ 132 --love: #eb6f92; 133 --gold: #f6c177; 134 --rose: #ebbcba; 135 --pine: #3e8fb0; /* 4.84:1 — lifted from #31748f */ 136 --foam: #9ccfd8; 137 --iris: #c4a7e7; 138 --hl-low: #21202e; 139 --hl-med: #403d52; 140 --hl-high: #524f67; 141 142 /* On the dark side the published accents already clear their floors as 143 text, so `-soft` is the same value rather than a separate pastel. */ 144 --pine-soft: #3e8fb0; 145 --foam-soft: #9ccfd8; 146 --gold-soft: #f6c177; 147 --love-soft: #eb6f92; 148 --iris-soft: #c4a7e7; 149 --rose-soft: #ebbcba; 150 151 --bg: var(--base); 152 --fg: var(--text); 153 --fg-dim: var(--subtle); 154 --fg-faint: var(--muted); 155 --accent: var(--iris); 156 --accent-2: var(--foam); 157 158 --rule: rgba(224, 222, 244, 0.16); 159 --rule-hi: rgba(224, 222, 244, 0.38); 160 --rule-faint: rgba(224, 222, 244, 0.08); 161 --wash: rgba(224, 222, 244, 0.05); 162 --wash-strong: #26233a; 163 164 --code-bg: #131019; 165 --selection: rgba(196, 167, 231, 0.30); 166 167 /* Screen, not multiply: on ink, noise has to be added or it vanishes. */ 168 --grain-blend: screen; 169 --grain-opacity: 0.07; 170 171 --fuzz-blend: lighter; 172 --fuzz-gain: 1; 173 --fuzz-band-1: 196 167 231; 174 --fuzz-band-2: 156 207 216; 175 --fuzz-band-3: 235 111 146; 176 --fuzz-fil-1: 224 222 244; 177 --fuzz-fil-2: 156 207 216; 178 --fuzz-fil-3: 196 167 231; 179 } 180 181 /* ---- Bands: grounds, not accents ---------------------------------------- */ 182 /* A full-bleed band has to carry text on top of it, and an accent at 183 reading weight cannot also be a ground: at the accent's lightness the 184 night palette stops reading on it. So a band is an accent walked down 185 its own hue until the night accents all clear their floors on it. 186 187 Two bands, two tokens — they shared one for a while on the main site 188 and retuning the marquee silently repainted the ledger halfway down 189 the page. These sit outside the theme blocks because a band is the 190 same ink in both modes: it is the page's constant. */ 191 :root { 192 /* The marquee. Iris, because iris is the signature accent — the hero 193 rule, the section eyebrows — so the one saturated stripe near the 194 top of the page belongs to the family around it. Published iris 195 (#795aa2, hue 266) walked down to ground weight at the same hue. 196 Cream on it: 9.10:1. */ 197 --band: #4e3969; 198 /* The ledger band, far enough down the page that the two never share a 199 sightline. Cream on it: 7.04:1. */ 200 --band-ledger: #015a77; 201 /* InternalAllTheThings is the Payloads mirror's companion, not a second 202 copy of it. A pine ground keeps the pair related while giving each 203 reference a distinct address on the homepage. Cream on it: 7.33:1. */ 204 --band-internal: #28594f; 205 /* The plate ground the section banners and code blocks are drawn on, 206 and its scrim channels — the canvas reads these to erase its own 207 edges under the title. */ 208 --plate: #171322; 209 --plate-scrim: 23 19 34; 210 } 211 212 /* ---- Fonts + scale ------------------------------------------------------ */ 213 :root { 214 --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; 215 --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; 216 --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; 217 --font-lockup: 'EB Garamond', Georgia, 'Times New Roman', serif; 218 /* Noto Sans Display — the daemon-sec signature display face: heavy, 219 compressed, uppercase. Wordmarks, banner titles, segbar wordmark. */ 220 --font-wordmark: 'Noto Sans Display', 'Archivo', 'Helvetica Neue', sans-serif; 221 /* JetBrains Mono — terminal chrome: status-bar segments, code captions, 222 prompt lines. Distinct from `--font-mono`, which stays IBM Plex Mono 223 for micro labels. */ 224 --font-term: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; 225 226 /* The corner-bracket ink. Defaults to `--love`, the accent the brackets 227 are drawn in everywhere; consumers may override it per element via 228 `var(--bracket, var(--love))` fallbacks. */ 229 --bracket: var(--love); 230 231 --step--1: clamp(0.79rem, 0.77rem + 0.1vw, 0.85rem); 232 --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem); 233 --step-1: clamp(1.14rem, 1.05rem + 0.4vw, 1.35rem); 234 --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); 235 --step-3: clamp(1.85rem, 1.4rem + 2vw, 2.9rem); 236 --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); 237 238 /* The micro label — 10px mono, uppercase, widely tracked. This is the 239 site's signature type object: every eyebrow, kind mark, stat label, 240 tab and code-block caption is set in it. Fixed in px on purpose; it 241 is furniture, and furniture does not scale with the headline. */ 242 --step-micro: 10px; 243 --track-micro: 0.18em; 244 --track-wide: 0.24em; 245 246 /* Square corners, everywhere. Kept as tokens so existing consumers keep 247 compiling — they all resolve to nothing. */ 248 --radius: 0; 249 --radius-sm: 0; 250 251 /* The archive measure. Wider than the old glass build's 1180px because 252 the page is now built out of full-bleed bands and ruled tables rather 253 than out of floating cards, and those want the room. */ 254 --maxw: 1440px; 255 --rail: 240px; 256 --ease: cubic-bezier(0.22, 1, 0.36, 1); 257 /* The site's entrance curve — slower out, hard landing. Distinct from 258 `--ease`, which is for hover-scale transitions. */ 259 --ease-in: cubic-bezier(0.2, 0.7, 0.2, 1); 260 /* The entrance vocabulary shared with daemon-sec.xyz. */ 261 --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); 262 --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); 263 --dur-reveal: 1000ms; 264 } 265 266 /* ---- Plate: the DÆMON signature — an inverse (night) panel on the cream 267 page. Pins the Rosé Pine palette for its whole subtree, like the main 268 site's dark hero band / terminals / footer. On the night theme it stays 269 dark, so plates read as dark in both modes. -------------------------- */ 270 .plate { 271 --base: #191724; 272 --surface: #1f1d2e; 273 --overlay: #26233a; 274 --muted: #8b87a3; 275 --subtle: #908caa; 276 --text: #e0def4; 277 --love: #eb6f92; --gold: #f6c177; --rose: #ebbcba; 278 --pine: #3e8fb0; --foam: #9ccfd8; --iris: #c4a7e7; 279 --pine-soft: #3e8fb0; --foam-soft: #9ccfd8; --gold-soft: #f6c177; 280 --love-soft: #eb6f92; --iris-soft: #c4a7e7; --rose-soft: #ebbcba; 281 --hl-low: #21202e; --hl-med: #403d52; --hl-high: #524f67; 282 --bg: var(--base); 283 --fg: var(--text); 284 --fg-dim: var(--subtle); 285 --fg-faint: var(--muted); 286 --accent: var(--iris); 287 --accent-2: var(--foam); 288 --rule: rgba(224, 222, 244, 0.16); 289 --rule-hi: rgba(224, 222, 244, 0.38); 290 --rule-faint: rgba(224, 222, 244, 0.08); 291 --wash: rgba(224, 222, 244, 0.05); 292 --wash-strong: #26233a; 293 --code-bg: #131019; 294 --grain-blend: screen; 295 --grain-opacity: 0.07; 296 --fuzz-blend: lighter; 297 --fuzz-gain: 1; 298 --fuzz-band-1: 196 167 231; 299 --fuzz-band-2: 156 207 216; 300 --fuzz-band-3: 235 111 146; 301 --fuzz-fil-1: 224 222 244; 302 --fuzz-fil-2: 156 207 216; 303 --fuzz-fil-3: 196 167 231; 304 color: var(--fg); 305 } 306 307 /* ---- Plate-dawn: the inverse of `.plate` — a Dawn (cream) panel on the 308 night page. Pins the full Rosé Pine Dawn palette for its whole subtree, 309 exactly as `.plate` pins night. The cross-theme rule runs in both 310 directions: in light mode code panes and callouts stay dark via 311 `.plate`; in dark mode callouts, the TOC rail and the hero card stay 312 cream via `.plate-dawn` — paper panels floating on the night page. In 313 light mode it is a no-op look (the page is already cream) but harmless. 314 --------------------------------------------------------------------- */ 315 .plate-dawn { 316 --base: #faf4ed; 317 --surface: #fffaf3; 318 --overlay: #f2e9e1; 319 --muted: #6e6a86; 320 --subtle: #635f7c; 321 --text: #575279; 322 --love: #af416c; --gold: #9b5800; --rose: #b4423d; 323 --pine: #017194; --foam: #00747b; --iris: #795aa2; 324 --pine-soft: #286983; --foam-soft: #56949f; --gold-soft: #ea9d34; 325 --love-soft: #b4637a; --iris-soft: #907aa9; --rose-soft: #d7827e; 326 --hl-low: #f4ede8; --hl-med: #dfdad9; --hl-high: #cecacd; 327 --bg: var(--base); 328 --fg: var(--text); 329 --fg-dim: var(--subtle); 330 --fg-faint: var(--muted); 331 --accent: var(--iris); 332 --accent-2: var(--pine); 333 --rule: rgba(87, 82, 121, 0.22); 334 --rule-hi: rgba(87, 82, 121, 0.48); 335 --rule-faint: rgba(87, 82, 121, 0.12); 336 --wash: rgba(242, 233, 225, 0.6); 337 --wash-strong: #f2e9e1; 338 --code-bg: #f2e9e1; 339 --grain-blend: multiply; 340 --grain-opacity: 0.1; 341 --fuzz-blend: multiply; 342 --fuzz-gain: 0.55; 343 --fuzz-band-1: 144 122 169; 344 --fuzz-band-2: 86 148 159; 345 --fuzz-band-3: 180 99 122; 346 --fuzz-fil-1: 87 82 121; 347 --fuzz-fil-2: 86 148 159; 348 --fuzz-fil-3: 144 122 169; 349 color: var(--fg); 350 } 351 352 353 /* ============================================================================ 354 DÆMON main-site palette — the fixed, absolute Rosé Pine token set the 355 redesigned homepage and shared chrome are authored against, extracted 356 verbatim from daemon-sec.xyz's compiled @theme. These do NOT flip with the 357 mode: `dawn` is always the cream family, `night` always the ink family, 358 `signal` the dark plate chrome. The page's *ground* follows the mode through 359 the theme-relative tokens above (--base / --text / --pine …); the tokens 360 below name the two poles the homepage inverts between — see the hero's P/Q 361 and .plate / .plate-dawn. 362 ========================================================================== */ 363 :root { 364 /* Paper (Rosé Pine Dawn) */ 365 --color-dawn-base: #faf4ed; --color-dawn-surface: #fffaf3; --color-dawn-panel: #fdf8f1; --color-dawn-overlay: #f2e9e1; 366 --color-dawn-ink: #575279; --color-dawn-subtle: #635f7c; --color-dawn-muted: #6e6a86; 367 --color-dawn-pine: #017194; --color-dawn-foam: #00747b; --color-dawn-gold: #9b5800; 368 --color-dawn-love: #af416c; --color-dawn-iris: #795aa2; --color-dawn-rose: #b4423d; 369 --color-dawn-band: #4e3969; --color-dawn-band-ledger: #015a77; 370 371 /* Plates (Rosé Pine night) */ 372 --color-night-base: #191724; --color-night-surface: #1f1d2e; --color-night-text: #e0def4; 373 --color-night-subtle: #908caa; --color-night-muted: #8b87a3; 374 --color-night-pine: #3e8fb0; --color-night-foam: #9ccfd8; --color-night-gold: #f6c177; 375 --color-night-love: #eb6f92; --color-night-love-lift: #ee85a2; 376 --color-night-iris: #c4a7e7; --color-night-rose: #ebbcba; 377 378 /* Signal / plate chrome */ 379 --color-signal-plate: #171322; --color-signal-meta: #c9c3e0; --color-signal-dim: #9a91c4; 380 --color-signal-pine: #31a3c4; --color-plate-ink: #faf4ed; 381 382 /* Type — DM Mono is now the site mono, matching daemon-sec.xyz. `--font-mono` 383 is re-pointed here so every existing eyebrow/label picks it up too. */ 384 --font-plex: 'DM Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; 385 --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; 386 --font-archivo: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; 387 388 /* The redesigned homepage's measure — wider than --maxw for the band grids. */ 389 --container-archive: 1560px; 390 } 391 392 /* Theme-relative surfaces the paper homepage sections use, so they invert with 393 the mode. --line is ink@16% and rides --text automatically. */ 394 :root, :root[data-theme='light'] { --panel: #fdf8f1; --line: color-mix(in srgb, var(--text) 16%, transparent); } 395 :root[data-theme='dark'] { --panel: #1f1d2e; } 396 .plate { --panel: #1f1d2e; } 397 .plate-dawn { --panel: #fdf8f1; }