/* Sereno design tokens * * Usage: * operator pages: * public pages: (day unless the visitor prefers dark) * * Components should read semantic tokens (--ground, --text, --status-*), * never the palette primitives directly. * * DK (2026-09-24) applied the Q21 contrast fixes (DS-design-system.md * section 4.6) and D1's day maintenance tint, and added --text-on-plane, * --brand-on-plane and the P1-P5 priority chip tokens (Q14). Every older * variable name is kept. tools/contrast-check.py checks every pair the kit * uses and runs in tools/check.sh. */ /* ------------------------------------------------------------------ */ /* Fonts (self-hosted; served from the binary; see design-system.md) */ /* ------------------------------------------------------------------ */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var-eb2486760f75.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic-var-701ae03b5183.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-var-c501f578bf3f.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400-79936b18df9f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500-b1c8a895f5fd.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ */ /* Palette primitives (mode-stable; do not use directly in components) */ /* ------------------------------------------------------------------ */ :root { /* night */ --night-950: #0E1626; --night-900: #16213A; --night-800: #22304F; --night-700: #2C3B5E; --night-600: #3A4A70; --night-500: #536AA1; /* Q21: strong borders on night */ --paper-100: #EDE6D6; --paper-300: #C9C1B0; --mist-400: #9AA6BF; /* day */ --plaster-100: #F5EFE3; --plaster-50: #FFFDF8; --plaster-300: #DDD3C0; --ink-900: #1A2238; --ink-600: #5A6278; /* brand */ --lantern-400: #F2C66D; /* on night */ --lantern-600: #B2812A; /* on day; Q21, was #B8862B */ --indigo-50: #ECEDF8; /* D1: day maintenance tint */ --indigo-300: #AEB5F2; --indigo-400: #656DC2; /* Q21 and D1: night maintenance fill (Q21 proposed #5A63BE; D1 lightened it so the dashed edge passes on its night tint too) */ --indigo-500: #4B55B8; --indigo-700: #3B44A0; --indigo-900: #1E2350; /* status: operational */ --green-400: #4FB286; --green-600: #1E8559; /* Q21, was #1F8A5C */ --green-700: #17704A; --green-bg-night: #12291F; --green-bg-day: #E3F1E9; /* status: degraded */ --amber-400: #F0883A; --amber-600: #B95B18; /* Q21, was #C8621A */ --amber-700: #A9520E; /* Q21, was #B0550F */ --amber-bg-night: #3A2414; --amber-bg-day: #FBE8D8; /* status: down (the only red in the system) */ --red-300: #EB7477; /* Q21: night down text */ --red-400: #E5484D; --red-600: #C9302C; --red-700: #B3261E; --red-bg-night: #3A1618; --red-bg-day: #F9E0DE; /* status: unknown */ --slate-400: #7C8799; --slate-600: #6B7385; --slate-700: #606778; /* Q21: day unknown text */ --slate-bg-night: #1E2536; --slate-bg-day: #E8E6E0; } /* ------------------------------------------------------------------ */ /* Semantic tokens: day (default) */ /* ------------------------------------------------------------------ */ :root, [data-theme="day"], [data-theme="auto"] { color-scheme: light; --ground: var(--plaster-100); --surface: var(--plaster-50); --raised: var(--plaster-50); --border: var(--plaster-300); --border-strong: var(--ink-900); --text: var(--ink-900); --text-muted: var(--ink-600); --text-voice: var(--ink-600); /* Fraunces italic voice lines */ --text-on-fill: var(--plaster-50); --text-on-plane: var(--plaster-50); /* Q21: text on indigo */ --brand-on-plane: var(--lantern-400); /* DK: the lantern on an indigo plane */ --brand: var(--lantern-600); --plane: var(--indigo-700); --link: var(--indigo-700); --link-hover: var(--ink-900); --focus: var(--lantern-600); --status-ok: var(--green-600); --status-ok-text: var(--green-700); --status-ok-bg: var(--green-bg-day); --status-degraded: var(--amber-600); --status-degraded-text: var(--amber-700); --status-degraded-bg: var(--amber-bg-day); --status-down: var(--red-600); --status-down-text: var(--red-700); --status-down-bg: var(--red-bg-day); --status-unknown: var(--slate-600); --status-unknown-text: var(--slate-700); /* Q21 */ --status-unknown-bg: var(--slate-bg-day); --status-maint: var(--indigo-700); --status-maint-text: var(--indigo-700); --status-maint-bg: var(--indigo-50); /* D1 */ /* Priority chips (Q14, UF): P1 is a solid down fill, and only while active; an inactive P1 the ink solid with a 2 px ring, so it reads at least as heavy as P2; P2 an ink solid; P3 the indigo outline; P4 a muted outline and P5 a fainter solid one (dashes mean maintenance). */ --priority-p1-text: var(--text-on-fill); --priority-p1-bg: var(--status-down); --priority-p1-idle-text: var(--surface); --priority-p1-idle-bg: var(--text); --priority-p1-idle-ring: var(--text); --priority-p2-text: var(--surface); --priority-p2-bg: var(--text); --priority-p3-text: var(--indigo-700); --priority-p3-bg: var(--plaster-50); --priority-p3-border: var(--indigo-700); --priority-p4-text: var(--text-muted); --priority-p4-border: var(--border-strong); --priority-p5-text: var(--text-muted); --priority-p5-border: var(--border); --field-error-border: var(--indigo-700); /* never red */ } /* ------------------------------------------------------------------ */ /* Semantic tokens: night */ /* ------------------------------------------------------------------ */ [data-theme="night"] { color-scheme: dark; --ground: var(--night-950); --surface: var(--night-900); --raised: var(--night-800); --border: var(--night-800); --border-strong: var(--night-500); /* Q21 */ --text: var(--paper-100); --text-muted: var(--mist-400); --text-voice: var(--paper-300); --text-on-fill: var(--night-950); --text-on-plane: var(--paper-100); /* Q21: text on indigo */ --brand-on-plane: var(--lantern-400); /* DK: the lantern on an indigo plane */ --brand: var(--lantern-400); --plane: var(--indigo-500); --link: var(--indigo-300); --link-hover: var(--paper-100); --focus: var(--lantern-400); --status-ok: var(--green-400); --status-ok-text: var(--green-400); --status-ok-bg: var(--green-bg-night); --status-degraded: var(--amber-400); --status-degraded-text: var(--amber-400); --status-degraded-bg: var(--amber-bg-night); --status-down: var(--red-400); --status-down-text: var(--red-300); /* Q21 */ --status-down-bg: var(--red-bg-night); --status-unknown: var(--slate-400); --status-unknown-text: var(--mist-400); --status-unknown-bg: var(--slate-bg-night); --status-maint: var(--indigo-400); /* Q21 */ --status-maint-text: var(--indigo-300); --status-maint-bg: var(--indigo-900); --priority-p1-text: var(--text-on-fill); --priority-p1-bg: var(--status-down); --priority-p1-idle-text: var(--surface); --priority-p1-idle-bg: var(--text); --priority-p1-idle-ring: var(--text); --priority-p2-text: var(--surface); --priority-p2-bg: var(--text); --priority-p3-text: var(--indigo-300); --priority-p3-bg: var(--indigo-900); --priority-p3-border: var(--indigo-300); /* Q21 */ --priority-p4-text: var(--text-muted); --priority-p4-border: var(--border-strong); --priority-p5-text: var(--text-muted); --priority-p5-border: var(--border); --field-error-border: var(--indigo-300); /* Q21 */ } /* Public pages follow the visitor's system preference. Keep this block in sync with [data-theme="night"] above. */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --ground: var(--night-950); --surface: var(--night-900); --raised: var(--night-800); --border: var(--night-800); --border-strong: var(--night-500); /* Q21 */ --text: var(--paper-100); --text-muted: var(--mist-400); --text-voice: var(--paper-300); --text-on-fill: var(--night-950); --text-on-plane: var(--paper-100); /* Q21: text on indigo */ --brand-on-plane: var(--lantern-400); /* DK: the lantern on an indigo plane */ --brand: var(--lantern-400); --plane: var(--indigo-500); --link: var(--indigo-300); --link-hover: var(--paper-100); --focus: var(--lantern-400); --status-ok: var(--green-400); --status-ok-text: var(--green-400); --status-ok-bg: var(--green-bg-night); --status-degraded: var(--amber-400); --status-degraded-text: var(--amber-400); --status-degraded-bg: var(--amber-bg-night); --status-down: var(--red-400); --status-down-text: var(--red-300); /* Q21 */ --status-down-bg: var(--red-bg-night); --status-unknown: var(--slate-400); --status-unknown-text: var(--mist-400); --status-unknown-bg: var(--slate-bg-night); --status-maint: var(--indigo-400); /* Q21 */ --status-maint-text: var(--indigo-300); --status-maint-bg: var(--indigo-900); --priority-p1-text: var(--text-on-fill); --priority-p1-bg: var(--status-down); --priority-p1-idle-text: var(--surface); --priority-p1-idle-bg: var(--text); --priority-p1-idle-ring: var(--text); --priority-p2-text: var(--surface); --priority-p2-bg: var(--text); --priority-p3-text: var(--indigo-300); --priority-p3-bg: var(--indigo-900); --priority-p3-border: var(--indigo-300); /* Q21 */ --priority-p4-text: var(--text-muted); --priority-p4-border: var(--border-strong); --priority-p5-text: var(--text-muted); --priority-p5-border: var(--border); --field-error-border: var(--indigo-300); /* Q21 */ } } /* ------------------------------------------------------------------ */ /* Type, space, shape, motion (theme-independent) */ /* ------------------------------------------------------------------ */ :root { --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* type scale (px equivalents at 16px root) */ --fs-display: 2.75rem; /* 44 page status headline */ --fs-display-narrow: 1.875rem; /* 30 the same headline under 46rem */ --fs-h2: 1.75rem; /* 28 section and incident titles */ --fs-h2-narrow: 1.5rem; /* 24 the same titles under 46rem */ --fs-h3: 1.3125rem; /* 21 sub-sections */ --fs-voice: 1.3125rem; /* 21 Fraunces italic voice lines; never larger */ --fs-lede: 1.25rem; /* 20 a public page's lede sentence */ --fs-body: 1rem; /* 16 */ --fs-ui: 1.0625rem; /* 17 tile names, row titles */ --fs-small: 0.875rem; /* 14 */ --fs-data: 0.875rem; /* 14 Plex Mono values */ --fs-micro: 0.75rem; /* 12 Plex Mono only: axis labels, column heads; the smallest size anywhere, charts included */ --lh-tight: 1.15; --lh-ui: 1.4; --lh-body: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-strong: 600; /* spacing (4px base) */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2.5rem; /* 40 */ --space-10: 4rem; /* 64 */ /* shape: crisp, Judd-like. No large radii. */ --radius: 4px; --radius-bar: 1px; /* uptime and SLA grid cells */ --radius-dot: 50%; /* status dots only */ --border-width: 1px; --border-width-strong: 1.5px; /* the only shadow: a hard-edged indigo offset, used sparingly */ --shadow-offset: 6px 6px 0 var(--plane); /* motion */ --dur-fast: 120ms; --dur-base: 200ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --touch-min: 44px; --measure: 70ch; } /* ------------------------------------------------------------------ */ /* Minimal base */ /* ------------------------------------------------------------------ */ body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); } a { color: var(--link); } a:hover { color: var(--link-hover); } /* Q21: a two-tone ring (2px lantern plus an ink edge) passes on any ground */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--text); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }