/* ============================================================================ Hearth design tokens - the single source of truth for colour, type, space, radius, elevation and motion. Nothing else in the codebase may hardcode a colour or a pixel spacing value; it references a token from here. FIVE LOOKS, set with data-theme on , each in a light and a dark variant selected by data-scheme: saffron aubergine chrome against a white workspace enterprise a navy-spined operations ledger, ruled like paper precision a dark machined instrument editorial a printed page: one ink, bone paper, no radii at all swiss monochrome on a strict grid with one orange data-theme is the LOOK and data-scheme is the resolved light/dark. They are separate because they are separate questions, and because sidebar colours are a SEPARATE token set from surface colours - saffron puts a dark sidebar next to a light message list, and a single palette cannot express that. Naming: --c-* colour, --s-* space, --r-* radius, --e-* elevation, --t-* type, --z-* z-index, --m-* motion. ========================================================================= */ :root { /* ---------------------------------------------------------------- space A 4px base scale. Every margin, padding and gap comes from here so vertical rhythm stays consistent across surfaces built by different hands. */ --s-0: 0; --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10: 40px; --s-11: 48px; --s-12: 64px; /* --------------------------------------------------- safe area (override hook) env() insets are only exposed to the top-level document, so inside an embed frame these resolve to 0 and the host pushes real values onto :root (directly or over the bridge). */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* Keyboard inset, embed frames only. An iframe's VisualViewport always equals the layout viewport, so the on-screen keyboard is invisible inside the frame; only the host can measure it. Hosts push the covered height here over the bridge (setTokens({'--kb': '336px'})) and the composer clears it. Standalone never sets it - env() already handles notched devices. */ --kb: 0px; /* ---------------------------------------------------------------- radius */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 999px; /* ------------------------------------------------------------ border weight There was no token for this and 98 declarations wrote the width out as a literal, which meant a theme could restate every colour in the app and still not change the one thing that decides whether a surface reads as a ruled page or a stack of filled cards. The values below are the old literal, so introducing them changes nothing until a theme says otherwise. */ --bw: 1px; --bw-strong: 1px; /* ---------------------------------------------------------------- tracking Also absent, while 36 sites set letter-spacing by hand - and tracking is most of what separates a didone masthead from a tight machined UI. Named by ROLE, not by value, so a theme can retune them together. */ --t-track-tight: -0.01em; /* large headings, where the default is too loose */ --t-track-normal: 0; /* body and UI text */ --t-track-caps: 0.07em; /* the small tracked uppercase labels */ --t-track-display: 0; /* names and titles set in --t-display */ /* ---------------------------------------------------------------- type Slack's readability comes from a compact scale with generous line height on body copy and tight line height on UI chrome. */ --t-font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --t-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The face for people's names, channel titles and headings. It defaults to the interface face, which is what every theme did implicitly until now; a theme that wants a didone for names and a grotesque for chrome sets them apart. */ --t-display: var(--t-font); --t-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; --t-2xs: 10.5px; --t-xs: 11.5px; --t-sm: 12.5px; --t-base: 14px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 30px; --t-tight: 1.25; --t-snug: 1.4; --t-body: 1.52; --t-loose: 1.65; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 800; /* ---------------------------------------------------------------- motion Short and eased. Anything longer than 200ms on a hover feels laggy; the spring is reserved for things that travel across the screen. */ --m-fast: 90ms; --m-base: 140ms; --m-slow: 220ms; --m-ease: cubic-bezier(0.4, 0, 0.2, 1); --m-out: cubic-bezier(0.16, 1, 0.3, 1); --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------------- z-index Named so nothing invents its own number and ends up under a modal. */ --z-nav: 20; --z-sticky: 30; --z-drawer: 60; --z-panel: 70; --z-dropdown: 140; --z-modal: 150; --z-popover: 160; --z-lightbox: 200; --z-toast: 300; /* ---------------------------------------------------------------- layout */ --rail-w: 68px; --sidebar-w: 260px; --panel-w: 400px; --gutter: 44px; /* avatar column in the message list */ --header-h: 52px; /* The measure. On a 27 inch monitor an unconstrained message list runs the full 1900px, and reading it means physically turning your head from one side of the screen to the other. Typography caps a comfortable line at roughly 90 characters; this is that, plus the avatar gutter. The column is centred, so the conversation sits in front of you instead of smeared across the desk. It was a flat 1080px, which is narrower than the pane on any monitor wider than about 1450px. Measured on a 1920 window: a 1080px column inside a 1572px pane, left-aligned, so 492px - 31% of the conversation pane - was dead grey with the messages ending in a hard vertical edge three quarters of the way across the screen. That is what both organisations reported as "the chat is not centered, it is abruptly cut off, we have to zoom to get the UI right": zooming in shrinks the pane until the column fills it again. A cap that only engages beyond 1920 keeps the long-line protection for the 27 inch case and gives every laptop the whole pane. */ --reading-max: min(1600px, 100%); } /* ============================================================================ THE FIVE LOOKS Each look defines the complete token set TWICE - once for light, once for dark - because a look is a design language, not a palette, and "Bone at night" has to still be Bone. The selector shape is deliberate: :root[data-theme=""] the light block, and the fallback if data-scheme is somehow missing :root[data-theme=""][data-scheme="dark"] the dark block Every block declares all 78 tokens plus color-scheme. That is not tidiness: a custom property left out of a block does not fall back to a default, it inherits whatever the previous matching block set, which is ANOTHER LOOK. The old prefers-color-scheme fallback removed below is exactly that bug - it declared 19 of the 44 colour tokens and let the other 25 come from dark, so light-mode users got near-black drop shadows and a dark brown mention row. Verified: all ten blocks complete, no duplicates, and every text-on-ground pair measured - --c-text at or above 7:1, every other text token at or above 4.5:1, on every surface it can actually land on. ========================================================================= */ /* ---------------------------------------------------------------- saffron Saffron: Aubergine chrome, white ledger, kesar on the org mark The aubergine chrome carries the whole brand and the white work surface carries none of it. This is what the old "colorful" theme was reaching for, so anyone who had chosen colorful arrives here. */ :root, :root[data-theme="saffron"] { color-scheme: light; --c-bg: #FFFFFF; --c-surface: #FBF9FC; --c-surface-2: #F7F3F9; --c-surface-3: #EFE7F2; --c-overlay: #FFFFFF; --c-text: #190B1D; --c-text-2: #574961; --c-text-3: #6B5D74; --c-text-inverse: #FFFFFF; --c-border: #E6DEEA; --c-border-strong: #D6C9DC; --c-border-subtle: #F0EAF3; --c-accent: #552057; --c-accent-hover: #6A2C6C; --c-accent-quiet: #55205714; --c-accent-text: #FFFFFF; --c-success: #1B8560; --c-success-quiet: #1B856014; --c-warn: #92560F; --c-warn-quiet: #92560F14; --c-danger: #B02233; --c-danger-quiet: #B0223314; --c-mention: #F3E9F7; --c-mention-edge: #552057; --c-own: transparent; --c-hover: #FAF6FB; --c-selected: #EFE2F2; --c-nav-bg: #341237; --c-nav-bg-2: #140717; --c-nav-text: #D8C9DE; --c-nav-text-2: #AF9BB7; --c-nav-text-active: #FFFFFF; --c-nav-hover: #431846; --c-nav-active: #552057; --c-nav-border: #4A2150; --c-nav-brand: #E8A02A; --e-1: 0 1px 1px rgba(25, 11, 29, 0.05), 0 0 0 1px rgba(25, 11, 29, 0.04); --e-2: 0 2px 6px rgba(25, 11, 29, 0.07), 0 0 0 1px rgba(25, 11, 29, 0.05); --e-3: 0 10px 26px rgba(25, 11, 29, 0.12), 0 0 0 1px rgba(25, 11, 29, 0.06); --e-4: 0 26px 64px rgba(25, 11, 29, 0.18), 0 0 0 1px rgba(25, 11, 29, 0.07); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); --c-scrim: rgba(25, 11, 29, 0.5); --c-code-bg: #F5F0F8; --c-skeleton: linear-gradient(90deg, #F0EAF3 25%, #FAF7FB 50%, #F0EAF3 75%); --t-font: 'Instrument Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; --t-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 29px; --t-tight: 1.2; --t-snug: 1.38; --t-body: 1.62; --t-loose: 1.78; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 800; --t-track-tight: -0.035em; --t-track-normal: -0.005em; --t-track-caps: 0.16em; --t-track-display: -0.025em; --r-xs: 4px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-full: 999px; --bw: 1px; --bw-strong: 2px; } :root[data-theme="saffron"][data-scheme="dark"] { color-scheme: dark; --c-bg: #14111A; --c-surface: #1A171E; --c-surface-2: #211D26; --c-surface-3: #2A2531; --c-overlay: #211D26; --c-text: #F4EEF6; --c-text-2: #BBAFC2; --c-text-3: #9A8DA2; --c-text-inverse: #09030B; --c-border: #2E2833; --c-border-strong: #3F3648; --c-border-subtle: #241F2A; --c-accent: #A758AD; --c-accent-hover: #C79ACE; --c-accent-quiet: #A758AD24; --c-accent-text: #FFFFFF; --c-success: #188563; --c-success-quiet: #18856324; --c-warn: #DFA05C; --c-warn-quiet: #DFA05C24; --c-danger: #EE8578; --c-danger-quiet: #EE857824; --c-mention: #2A1D33; --c-mention-edge: #A97CB4; --c-own: transparent; --c-hover: #221E27; --c-selected: #33223A; --c-nav-bg: #150818; --c-nav-bg-2: #09030B; --c-nav-text: #CDBCD4; --c-nav-text-2: #9C88A5; --c-nav-text-active: #FFFFFF; --c-nav-hover: #241028; --c-nav-active: #2F1436; --c-nav-border: #331539; --c-nav-brand: #F0AE3C; --e-1: 0 1px 2px rgba(9, 3, 11, 0.5), 0 0 0 1px rgba(214, 174, 221, 0.05); --e-2: 0 3px 8px rgba(9, 3, 11, 0.55), 0 0 0 1px rgba(214, 174, 221, 0.06); --e-3: 0 12px 30px rgba(9, 3, 11, 0.62), 0 0 0 1px rgba(214, 174, 221, 0.07); --e-4: 0 28px 68px rgba(9, 3, 11, 0.72), 0 0 0 1px rgba(214, 174, 221, 0.08); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); --c-scrim: rgba(9, 3, 11, 0.72); --c-code-bg: #120E17; --c-skeleton: linear-gradient(90deg, #262130 25%, #342C3C 50%, #262130 75%); --t-font: 'Instrument Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; --t-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 29px; --t-tight: 1.2; --t-snug: 1.38; --t-body: 1.62; --t-loose: 1.78; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 800; --t-track-tight: -0.035em; --t-track-normal: -0.005em; --t-track-caps: 0.16em; --t-track-display: -0.025em; --r-xs: 4px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-full: 999px; --bw: 1px; --bw-strong: 2px; } /* ---------------------------------------------------------------- enterprise Dispatch Ledger: Navy-spined ops ledger, ruled square, one signal blue A navy-spined operations ledger, ruled like paper. Built for somebody who is in it for eight hours, so density and unambiguous hierarchy beat flourish. */ :root[data-theme="enterprise"] { color-scheme: light; --c-bg: #FFFFFF; --c-surface: #F2F5F9; --c-surface-2: #E7EDF5; --c-surface-3: #E2E9F2; --c-overlay: #FFFFFF; --c-text: #111A26; --c-text-2: #3C4959; --c-text-3: #5A6A7D; --c-text-inverse: #FFFFFF; --c-border: #D7DFE9; --c-border-strong: #BFCBDA; --c-border-subtle: #E9EEF4; --c-accent: #14539E; --c-accent-hover: #0E3E79; --c-accent-quiet: #14539E1A; --c-accent-text: #FFFFFF; --c-success: #0B7A5B; --c-success-quiet: #0B7A5B1A; --c-warn: #8A5A18; --c-warn-quiet: #8A5A181A; --c-danger: #B32318; --c-danger-quiet: #B323181A; --c-mention: #FBF4E7; --c-mention-edge: #8A5A18; --c-own: transparent; --c-hover: #F6F8FC; --c-selected: #E7EFFA; --c-nav-bg: #123156; --c-nav-bg-2: #0C2340; --c-nav-text: #A9BFD9; --c-nav-text-2: #90A6C0; --c-nav-text-active: #FFFFFF; --c-nav-hover: #1A3A62; --c-nav-active: #0A1E38; --c-nav-border: #1C3E68; --c-nav-brand: #FFFFFF; --e-1: 0 0 0 1px var(--c-border); --e-2: 0 0 0 1px var(--c-border-strong); --e-3: 0 0 0 1px var(--c-border-strong), 0 3px 0 rgba(12, 35, 64, 0.07); --e-4: 0 0 0 1px var(--c-border-strong), 0 5px 0 rgba(12, 35, 64, 0.10); --e-ring: 0 0 0 1px var(--c-bg), 0 0 0 3px var(--c-accent); --c-scrim: rgba(12, 35, 64, 0.55); --c-code-bg: #E7EDF5; --c-skeleton: linear-gradient(90deg, #E7EDF5 25%, #F6F8FC 50%, #E7EDF5 75%); --t-font: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; --t-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Segoe UI", Arial, sans-serif; --t-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 22px; --t-3xl: 28px; --t-tight: 1.2; --t-snug: 1.35; --t-body: 1.5; --t-loose: 1.6; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 700; --t-track-tight: -0.012em; --t-track-normal: 0em; --t-track-caps: 0.14em; --t-track-display: -0.005em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-full: 999px; --bw: 1px; --bw-strong: 3px; } :root[data-theme="enterprise"][data-scheme="dark"] { color-scheme: dark; --c-bg: #0D131C; --c-surface: #121926; --c-surface-2: #1B2432; --c-surface-3: #232E3E; --c-overlay: #121926; --c-text: #E8EDF4; --c-text-2: #B6C1D0; --c-text-3: #8A98AA; --c-text-inverse: #06101C; --c-border: #26313F; --c-border-strong: #3A4759; --c-border-subtle: #1E2836; --c-accent: #4A8FE3; --c-accent-hover: #7DB1EE; --c-accent-quiet: #4A8FE324; --c-accent-text: #06101C; --c-success: #22A281; --c-success-quiet: #22A28124; --c-warn: #C08C34; --c-warn-quiet: #C08C3424; --c-danger: #E4635A; --c-danger-quiet: #E4635A24; --c-mention: #2E2513; --c-mention-edge: #C08C34; --c-own: transparent; --c-hover: #151E2B; --c-selected: #152740; --c-nav-bg: #121926; --c-nav-bg-2: #060B13; --c-nav-text: #93A9C4; --c-nav-text-2: #7A8FAB; --c-nav-text-active: #FFFFFF; --c-nav-hover: #16233A; --c-nav-active: #0C2244; --c-nav-border: #1A2941; --c-nav-brand: #FFFFFF; --e-1: 0 0 0 1px var(--c-border); --e-2: 0 0 0 1px var(--c-border-strong); --e-3: 0 0 0 1px var(--c-border-strong), 0 3px 0 rgba(0, 0, 0, 0.45); --e-4: 0 0 0 1px var(--c-border-strong), 0 5px 0 rgba(0, 0, 0, 0.60); --e-ring: 0 0 0 1px var(--c-bg), 0 0 0 3px var(--c-accent); --c-scrim: rgba(2, 5, 10, 0.72); --c-code-bg: #161F2C; --c-skeleton: linear-gradient(90deg, #1B2432 25%, #26313F 50%, #1B2432 75%); --t-font: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; --t-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Segoe UI", Arial, sans-serif; --t-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 22px; --t-3xl: 28px; --t-tight: 1.2; --t-snug: 1.35; --t-body: 1.5; --t-loose: 1.6; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 700; --t-track-tight: -0.012em; --t-track-normal: 0em; --t-track-caps: 0.14em; --t-track-display: -0.005em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-full: 999px; --bw: 1px; --bw-strong: 3px; } /* ---------------------------------------------------------------- precision Graphite Caliper: Black chassis, four milled rungs, one Leica red A black chassis milled in four elevation rungs. Dark-first: its light block exists and is correct, but the design is happiest at night. */ :root[data-theme="precision"] { color-scheme: light; --c-bg: #fbfcfd; --c-surface: #ffffff; --c-surface-2: #f2f4f8; --c-surface-3: #e7ebf0; --c-overlay: #ffffff; --c-text: #0b0e13; --c-text-2: #4e5661; --c-text-3: #5f6773; --c-text-inverse: #ffffff; --c-border: #dee2e8; --c-border-strong: #858c98; --c-border-subtle: #ebeef2; --c-accent: #cd2616; --c-accent-hover: #bb2410; --c-accent-quiet: #cd26160e; --c-accent-text: #ffffff; --c-success: #0f7a50; --c-success-quiet: #0f7a5014; --c-warn: #8a5d0a; --c-warn-quiet: #8a5d0a14; --c-danger: #c5230f; --c-danger-quiet: #c5230f14; --c-mention: #e7ebf0; --c-mention-edge: #cd2616; --c-own: transparent; --c-hover: #f0f2f5; --c-selected: #e1e7ef; --c-nav-bg: #0b0d10; --c-nav-bg-2: #08090b; --c-nav-text: #a8b0bc; --c-nav-text-2: #838b97; --c-nav-text-active: #edeff3; --c-nav-hover: #15171a; --c-nav-active: #1e2228; --c-nav-border: #1c1f24; --c-nav-brand: #edeff3; --e-1: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(9, 12, 18, 0.045); --e-2: inset 0 1px 0 #ffffff, 0 1px 0 rgba(9, 12, 18, 0.14); --e-3: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(9, 12, 18, 0.06), 0 10px 24px -16px rgba(9, 12, 18, 0.34); --e-4: 0 0 0 1px rgba(9, 12, 18, 0.08), 0 20px 44px -22px rgba(9, 12, 18, 0.4); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-accent-hover); --c-scrim: rgba(9, 12, 18, 0.46); --c-code-bg: #e8ebef; --c-skeleton: linear-gradient(90deg, #e7ebf0 25%, #f5f7fa 50%, #e7ebf0 75%); --t-font: Inter, "Inter var", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --t-display: var(--t-font); --t-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 28px; --t-tight: 1.2; --t-snug: 1.35; --t-body: 1.46; --t-loose: 1.6; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 700; --t-track-tight: -0.012em; --t-track-normal: 0; --t-track-caps: 0.18em; --t-track-display: -0.012em; --r-xs: 1px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-2xl: 10px; --r-full: 999px; --bw: 1px; --bw-strong: 1px; } :root[data-theme="precision"][data-scheme="dark"] { color-scheme: dark; --c-bg: #111317; --c-surface: #171a1f; --c-surface-2: #1e2228; --c-surface-3: #272c34; --c-overlay: #1e2228; --c-text: #edeff3; --c-text-2: #a0a8b4; --c-text-3: #8d95a1; --c-text-inverse: #ffffff; --c-border: #23272d; --c-border-strong: #656d79; --c-border-subtle: #1a1d21; --c-accent: #e0301f; --c-accent-hover: #ff4a38; --c-accent-quiet: #e0301f1f; --c-accent-text: #ffffff; --c-success: #34b27c; --c-success-quiet: #34b27c1f; --c-warn: #ce9430; --c-warn-quiet: #ce94301f; --c-danger: #ee3e2b; --c-danger-quiet: #ee3e2b1f; --c-mention: #1e2228; --c-mention-edge: #e0301f; --c-own: transparent; --c-hover: #191c21; --c-selected: #212630; --c-nav-bg: #0b0d10; --c-nav-bg-2: #08090b; --c-nav-text: #a8b0bc; --c-nav-text-2: #838b97; --c-nav-text-active: #edeff3; --c-nav-hover: #15171a; --c-nav-active: #1e2228; --c-nav-border: #1c1f24; --c-nav-brand: #edeff3; --e-1: inset 0 1px 0 rgba(255, 255, 255, 0.055); --e-2: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.6); --e-3: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.72); --e-4: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 20px 44px -20px rgba(0, 0, 0, 0.75); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-accent-hover); --c-scrim: rgba(4, 5, 7, 0.74); --c-code-bg: #08090c; --c-skeleton: linear-gradient(90deg, #1e2228 25%, #31373f 50%, #1e2228 75%); --t-font: Inter, "Inter var", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --t-display: var(--t-font); --t-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 28px; --t-tight: 1.2; --t-snug: 1.35; --t-body: 1.46; --t-loose: 1.6; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 700; --t-track-tight: -0.012em; --t-track-normal: 0; --t-track-caps: 0.18em; --t-track-display: -0.012em; --r-xs: 1px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-2xl: 10px; --r-full: 999px; --bw: 1px; --bw-strong: 1px; } /* ---------------------------------------------------------------- editorial Bone and Rule: One ink, three bone papers, a single vermilion numeral A printed page rather than an app. One ink, three bone papers, hairline rules instead of filled panels, a didone for names, and a single vermilion numeral as the only colour on screen. Every radius is 0 - that is the thesis. */ :root[data-theme="editorial"] { color-scheme: light; --c-bg: #FBFAF6; --c-surface: #F5F3EC; --c-surface-2: #EAE7DE; --c-surface-3: #E3DFD5; --c-overlay: #FBFAF6; --c-text: #14120E; --c-text-2: #312D26; --c-text-3: #605A4B; --c-text-inverse: #FBFAF6; --c-border: #DDD9CE; --c-border-strong: #BCB5A6; --c-border-subtle: #E9E5DB; --c-accent: #14120E; --c-accent-hover: #312D26; --c-accent-quiet: #14120E14; --c-accent-text: #FBFAF6; --c-success: #35603C; --c-success-quiet: #35603C14; --c-warn: #7E5C12; --c-warn-quiet: #7E5C1214; --c-danger: #A6320F; --c-danger-quiet: #A6320F14; --c-mention: #F8ECE6; --c-mention-edge: #A6320F; --c-own: transparent; --c-hover: #F4F1E9; --c-selected: #E3DFD5; --c-nav-bg: #F5F3EC; --c-nav-bg-2: #EAE7DE; --c-nav-text: #312D26; --c-nav-text-2: #605A4B; --c-nav-text-active: #14120E; --c-nav-hover: #E6E2D9; --c-nav-active: #DDD9CE; --c-nav-border: #DDD9CE; --c-nav-brand: #14120E; --e-1: 0 1px 0 rgba(20, 18, 14, 0.07); --e-2: 0 0 0 1px var(--c-border), 0 2px 6px rgba(20, 18, 14, 0.06); --e-3: 0 0 0 1px var(--c-border), 0 10px 24px rgba(20, 18, 14, 0.09); --e-4: 0 0 0 1px var(--c-border-strong), 0 24px 56px rgba(20, 18, 14, 0.14); --e-ring: 0 0 0 3px var(--c-bg), 0 0 0 4px var(--c-accent); --c-scrim: rgba(20, 18, 14, 0.42); --c-code-bg: #F1EEE3; --c-skeleton: linear-gradient(90deg, #EAE7DE 25%, #F8F6F0 50%, #EAE7DE 75%); --t-font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-display: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", Times, serif; --t-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --t-2xs: 9.5px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 32px; --t-tight: 1.12; --t-snug: 1.38; --t-body: 1.66; --t-loose: 1.8; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 650; --t-black: 700; --t-track-tight: -0.012em; --t-track-normal: 0.01em; --t-track-caps: 0.22em; --t-track-display: -0.008em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-full: 0; --bw: 1px; --bw-strong: 2px; } :root[data-theme="editorial"][data-scheme="dark"] { color-scheme: dark; --c-bg: #100F0D; --c-surface: #161513; --c-surface-2: #1C1B18; --c-surface-3: #262420; --c-overlay: #1C1B18; --c-text: #F2EFE8; --c-text-2: #CDC8BD; --c-text-3: #A39C8D; --c-text-inverse: #100F0D; --c-border: #2C2A26; --c-border-strong: #413D37; --c-border-subtle: #211F1C; --c-accent: #F2EFE8; --c-accent-hover: #FFFDF7; --c-accent-quiet: #F2EFE81F; --c-accent-text: #100F0D; --c-success: #6FA37E; --c-success-quiet: #6FA37E1F; --c-warn: #C89A4A; --c-warn-quiet: #C89A4A1F; --c-danger: #E4744A; --c-danger-quiet: #E4744A1F; --c-mention: #291711; --c-mention-edge: #E4744A; --c-own: transparent; --c-hover: #191816; --c-selected: #2E2B26; --c-nav-bg: #161513; --c-nav-bg-2: #1C1B18; --c-nav-text: #CDC8BD; --c-nav-text-2: #9A9281; --c-nav-text-active: #F2EFE8; --c-nav-hover: #232120; --c-nav-active: #2C2A26; --c-nav-border: #2C2A26; --c-nav-brand: #F2EFE8; --e-1: 0 1px 0 rgba(0, 0, 0, 0.5); --e-2: 0 0 0 1px var(--c-border), 0 2px 6px rgba(0, 0, 0, 0.45); --e-3: 0 0 0 1px var(--c-border), 0 10px 24px rgba(0, 0, 0, 0.55); --e-4: 0 0 0 1px var(--c-border-strong), 0 24px 56px rgba(0, 0, 0, 0.66); --e-ring: 0 0 0 3px var(--c-bg), 0 0 0 4px var(--c-accent); --c-scrim: rgba(6, 5, 4, 0.68); --c-code-bg: #0A0908; --c-skeleton: linear-gradient(90deg, #262420 25%, #34312B 50%, #262420 75%); --t-font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-display: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", Times, serif; --t-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --t-2xs: 9.5px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 32px; --t-tight: 1.12; --t-snug: 1.38; --t-body: 1.66; --t-loose: 1.8; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 650; --t-black: 700; --t-track-tight: -0.012em; --t-track-normal: 0.01em; --t-track-caps: 0.22em; --t-track-display: -0.008em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-full: 0; --bw: 1px; --bw-strong: 2px; } /* ---------------------------------------------------------------- swiss Signal Grid: Ruled ledger, hairlines, one industrial orange Monochrome on an eight-pixel module, held together by hairlines, with one industrial orange doing all the signalling. */ :root[data-theme="swiss"] { color-scheme: light; --c-bg: #ffffff; --c-surface: #f7f6f3; --c-surface-2: #f3f2ee; --c-surface-3: #eae8e2; --c-overlay: #ffffff; --c-text: #111110; --c-text-2: #3b3a35; --c-text-3: #63615a; --c-text-inverse: #ffffff; --c-border: #cfccc3; --c-border-strong: #111110; --c-border-subtle: #e4e2db; --c-accent: #c42d00; --c-accent-hover: #a02400; --c-accent-quiet: #eb3b0016; --c-accent-text: #ffffff; --c-success: #3a6b33; --c-success-quiet: #3a6b3316; --c-warn: #7d5a00; --c-warn-quiet: #7d5a0016; --c-danger: #a81f1a; --c-danger-quiet: #a81f1a16; --c-mention: #fdf0ea; --c-mention-edge: #eb3b00; --c-own: transparent; --c-hover: #faf9f6; --c-selected: #f7e6de; --c-nav-bg: #f3f2ee; --c-nav-bg-2: #ffffff; --c-nav-text: #3b3a35; --c-nav-text-2: #63615a; --c-nav-text-active: #111110; --c-nav-hover: #eae8e2; --c-nav-active: #eb3b00; --c-nav-border: #111110; --c-nav-brand: #111110; --e-1: 0 0 0 1px rgba(17, 17, 16, 0.16); --e-2: 0 0 0 1px #111110; --e-3: 0 0 0 1px #111110, 3px 3px 0 rgba(17, 17, 16, 0.08); --e-4: 0 0 0 1px #111110, 6px 6px 0 rgba(17, 17, 16, 0.1); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px #eb3b00; --c-scrim: rgba(17, 17, 16, 0.52); --c-code-bg: #eae8e2; --c-skeleton: linear-gradient(90deg, #eae8e2 25%, #f3f2ee 50%, #eae8e2 75%); --t-font: "Archivo", "Noto Sans Devanagari", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-display: "Archivo", "Noto Sans Devanagari", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --t-2xs: 9px; --t-xs: 10px; --t-sm: 11px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 29px; --t-tight: 1.1; --t-snug: 1.3; --t-body: 1.55; --t-loose: 1.7; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 700; --t-track-tight: -0.02em; --t-track-normal: -0.008em; --t-track-caps: 0.16em; --t-track-display: -0.014em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-full: 0; --bw: 1px; --bw-strong: 2px; } :root[data-theme="swiss"][data-scheme="dark"] { color-scheme: dark; --c-bg: #0c0c0b; --c-surface: #141413; --c-surface-2: #1c1c1a; --c-surface-3: #272522; --c-overlay: #1a1a18; --c-text: #f4f3ef; --c-text-2: #c2c0b8; --c-text-3: #a3a19a; --c-text-inverse: #0c0c0b; --c-border: #3a3934; --c-border-strong: #66635b; --c-border-subtle: #232320; --c-accent: #ff5c2e; --c-accent-hover: #ff7043; --c-accent-quiet: #ff4d1a1c; --c-accent-text: #0c0c0b; --c-success: #74b064; --c-success-quiet: #74b0641c; --c-warn: #d9a441; --c-warn-quiet: #d9a4411c; --c-danger: #ff6f60; --c-danger-quiet: #ff6f601c; --c-mention: #2a1c12; --c-mention-edge: #ff4d1a; --c-own: transparent; --c-hover: #161615; --c-selected: #33201a; --c-nav-bg: #141413; --c-nav-bg-2: #0d0d0c; --c-nav-text: #c2c0b8; --c-nav-text-2: #a3a19a; --c-nav-text-active: #ffffff; --c-nav-hover: #1e1e1c; --c-nav-active: #33322e; --c-nav-border: #3a3934; --c-nav-brand: #f4f3ef; --e-1: 0 0 0 1px #232320; --e-2: 0 0 0 1px #3a3934; --e-3: 0 0 0 1px #4c4a43, 3px 3px 0 rgba(0, 0, 0, 0.55); --e-4: 0 0 0 1px #4c4a43, 6px 6px 0 rgba(0, 0, 0, 0.65); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px #ff4d1a; --c-scrim: rgba(6, 6, 5, 0.7); --c-code-bg: #272522; --c-skeleton: linear-gradient(90deg, #232320 25%, #33322e 50%, #232320 75%); --t-font: "Archivo", "Noto Sans Devanagari", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-display: "Archivo", "Noto Sans Devanagari", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --t-2xs: 9px; --t-xs: 10px; --t-sm: 11px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 29px; --t-tight: 1.1; --t-snug: 1.3; --t-body: 1.55; --t-loose: 1.7; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 700; --t-track-tight: -0.02em; --t-track-normal: -0.008em; --t-track-caps: 0.16em; --t-track-display: -0.014em; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-full: 0; --bw: 1px; --bw-strong: 2px; } /* A client whose pre-paint snippet threw has no data-scheme yet. Honour the OS so the first frame is not a white flash on a dark device. Complete block, for the reason given at the top of this section. */ @media (prefers-color-scheme: dark) { :root:not([data-scheme]) { color-scheme: dark; --c-bg: #14111A; --c-surface: #1A171E; --c-surface-2: #211D26; --c-surface-3: #2A2531; --c-overlay: #211D26; --c-text: #F4EEF6; --c-text-2: #BBAFC2; --c-text-3: #9A8DA2; --c-text-inverse: #09030B; --c-border: #2E2833; --c-border-strong: #3F3648; --c-border-subtle: #241F2A; --c-accent: #A758AD; --c-accent-hover: #C79ACE; --c-accent-quiet: #A758AD24; --c-accent-text: #FFFFFF; --c-success: #188563; --c-success-quiet: #18856324; --c-warn: #DFA05C; --c-warn-quiet: #DFA05C24; --c-danger: #EE8578; --c-danger-quiet: #EE857824; --c-mention: #2A1D33; --c-mention-edge: #A97CB4; --c-own: transparent; --c-hover: #221E27; --c-selected: #33223A; --c-nav-bg: #150818; --c-nav-bg-2: #09030B; --c-nav-text: #CDBCD4; --c-nav-text-2: #9C88A5; --c-nav-text-active: #FFFFFF; --c-nav-hover: #241028; --c-nav-active: #2F1436; --c-nav-border: #331539; --c-nav-brand: #F0AE3C; --e-1: 0 1px 2px rgba(9, 3, 11, 0.5), 0 0 0 1px rgba(214, 174, 221, 0.05); --e-2: 0 3px 8px rgba(9, 3, 11, 0.55), 0 0 0 1px rgba(214, 174, 221, 0.06); --e-3: 0 12px 30px rgba(9, 3, 11, 0.62), 0 0 0 1px rgba(214, 174, 221, 0.07); --e-4: 0 28px 68px rgba(9, 3, 11, 0.72), 0 0 0 1px rgba(214, 174, 221, 0.08); --e-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); --c-scrim: rgba(9, 3, 11, 0.72); --c-code-bg: #120E17; --c-skeleton: linear-gradient(90deg, #262130 25%, #342C3C 50%, #262130 75%); --t-font: 'Instrument Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; --t-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 23px; --t-3xl: 29px; --t-tight: 1.2; --t-snug: 1.38; --t-body: 1.62; --t-loose: 1.78; --t-normal: 400; --t-medium: 500; --t-semibold: 600; --t-bold: 700; --t-black: 800; --t-track-tight: -0.035em; --t-track-normal: -0.005em; --t-track-caps: 0.16em; --t-track-display: -0.025em; --r-xs: 4px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-full: 999px; --bw: 1px; --bw-strong: 2px; } } /* People who ask the OS for less motion get none of the decorative kind. */ @media (prefers-reduced-motion: reduce) { :root { --m-fast: 1ms; --m-base: 1ms; --m-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* Higher contrast for users who ask for it: firm up the hairlines. */ @media (prefers-contrast: more) { :root { --c-border: var(--c-border-strong); --c-text-2: var(--c-text); } }