*
* Put `data-surface` on the element that paints the background. Never on : the root already
* carries the page surface, and a second declaration there would fight the theme switch.
*
* ---------------------------------------------------------------------------------------------
* THEMES
*
* Light is the default and needs no attribute. Dark is `html[data-theme="dark"]`, set before first
* paint by the boot script in entry-server.tsx (lib/theme.ts): the reader's choice from the theme
* toggle when they have made one, and the system's `prefers-color-scheme` until they have.
*
* Every ratio quoted below was computed against the surface the token is used on, sRGB relative
* luminance, WCAG 2.1 formula.
*/
:root {
color-scheme: light;
--color-white: #ffffff;
--color-black: #000000;
/* ---- surfaces ---------------------------------------------------------------------------- */
--surface: hsl(0, 20%, 99%); /* the page */
--surface-raised: #ffffff; /* cards, menus, the header tray */
--surface-sunken: hsl(0, 8%, 96%); /* wells, table headers, code blocks */
--surface-sunken-hover: hsl(0, 8%, 93%);
--surface-accent: hsl(62, 84%, 88%); /* the lime highlight and selection */
--surface-accent-weak: hsl(64, 74%, 95%);
--surface-inverted: hsl(0, 5%, 12%); /* the near-black block and its buttons */
--surface-inverted-hover: hsl(0, 5%, 18%);
/* ---- ink --------------------------------------------------------------------------------- */
/*
* The documentation's ink, so a reader moving between a console page and a docs page reads the
* same greys. These were a warm neutral (hsl(0, …)) here and a navy-cast grey there
* (packages/web/src/styles/custom.css), and the pricing and enterprise pages drew a third scale
* of their own, so body copy changed colour from page to page. One scale now, pulled toward the
* brand navy, and the brand scale below is a view on it.
*/
--ink: hsl(226, 26%, 9%); /* 18.4:1 */
--ink-body: hsl(222, 10%, 26%); /* 10.4:1 */
--ink-muted: hsl(222, 7%, 44%); /* 5.1:1 */
--ink-subtle: hsl(222, 6%, 55%); /* 3.4:1 — large text and decoration only */
--ink-faint: hsl(222, 5%, 63%); /* 2.6:1 — decoration; never text that must be read */
--ink-on-accent: hsl(0, 5%, 11%); /* fixed: the lime chip is light in both themes */
--ink-on-inverted: hsl(0, 20%, 99%);
--ink-success: hsl(140, 90%, 26%); /* 5.2:1 */
--ink-danger: hsl(352, 80%, 42%); /* 6.2:1 */
--ink-warning: hsl(36, 100%, 27%); /* 6.4:1 — the amber fill below is unreadable as text */
/* ---- lines ------------------------------------------------------------------------------- */
--line: hsl(0, 3%, 82%); /* 2.2:1 — a rule, not a control */
--line-strong: hsl(0, 3%, 55%); /* 3.3:1 — the edge of something you can operate */
/* ---- the marketing brand scale ------------------------------------------------------------
*
* The pricing page and the enterprise page are drawn in the indigo/violet brand rather than the
* console's neutrals. They each carried the whole scale under a prefix of their own — `--pc-*`
* and `--e-*` — with the same values in both, except where they had drifted: the dark page ground
* was `#0f0719` on one and `#0b0a16` on the other, the dark card `#170c26` against `#13122a`, the
* dark ink `#f4efff` against `#eef0ff`. One scale now, and both prefixes are views on it.
*
* Where they disagreed the master layout's value won: `--surface` is the dark the header and
* footer sit on, so a page that chose its own black showed a seam against its own chrome.
*/
--brand-surface: #ffffff; /* the card */
--brand-surface-2: #f4f5fb; /* the well */
/* The inks are the page's, so a heading on /pricing is the same colour as one on /download. */
--brand-ink: var(--ink);
--brand-text: var(--ink-body);
--brand-soft: var(--ink-muted);
--brand-line: #e1e4f0; /* hairline */
--brand-line-strong: #848cb0; /* 3.3:1 — control edges */
--brand-accent: #5b3df5; /* 6.1:1 */
--brand-on-accent: #ffffff; /* 6.1:1 on --brand-accent */
--brand-accent-2: #e8457f;
--brand-accent-3: #f59e0b;
--brand-deep: #16256b; /* the solid button */
--brand-deep-hover: #22348a;
--brand-on-deep: #ffffff; /* 13.1:1 on --brand-deep */
--brand-success: #0c7a3d; /* 5.4:1 */
--brand-success-bg: #e6f6ec;
--brand-held: #8a5200; /* 6.4:1 */
--brand-held-bg: #fff3dc;
--brand-focus: #5b3df5;
/* ---- signals as fills (never as text; use --ink-* above for that) ------------------------- */
/*
* One accent for the whole product. The workspace screens used to use iOS blue (#007aff, 3.6:1 on
* white — it failed AA as a link colour), the marketing pages used hsl(234, 90%, 60%) and the
* pricing and enterprise pages used #5b3df5. This is the marketing indigo, and now it is the only
* one: 5.8:1 on white.
*/
--color-accent: hsl(234, 90%, 60%);
--color-accent-hover: hsl(234, 80%, 50%);
--color-accent-active: hsl(234, 78%, 42%);
--color-accent-alpha: hsl(234 90% 60% / 0.24);
--color-success: hsl(140, 90%, 26%);
--color-warning: #b26f00;
--color-danger: #c62234;
--color-primary: var(--color-accent);
--color-primary-hover: var(--color-accent-hover);
--color-primary-active: var(--color-accent-active);
--color-primary-text: #ffffff;
--color-danger-hover: #a3182a;
--color-danger-active: #7d1120;
--color-danger-text: #ffffff;
--color-warning-hover: #8f5900;
--color-warning-active: #6d4400;
--color-warning-text: #ffffff;
}
:root[data-theme="dark"] {
color-scheme: dark;
/* ---- surfaces ---------------------------------------------------------------------------- */
/*
* The dark page is #0f0719, the master layout's surface (component/site-layout.css). The home,
* changelog, legal and brand pages used to paint themselves hsl(0, 9%, 7%), a warm black, while
* the header and footer above and below them stayed on this purple black — a seam across every
* one of those pages. One value, and it is the layout's.
*/
--surface: #0f0719;
--surface-raised: #17102a;
--surface-sunken: #0a0412;
--surface-sunken-hover: #140d24;
--surface-accent: hsl(62, 100%, 90%);
--surface-accent-weak: hsl(60, 20%, 12%);
--surface-inverted: hsl(0, 15%, 94%);
--surface-inverted-hover: hsl(0, 15%, 97%);
/* ---- ink --------------------------------------------------------------------------------- */
--ink: hsl(266, 40%, 97%); /* 18.1:1 */
--ink-body: hsl(260, 12%, 80%); /* 11.6:1 */
--ink-muted: hsl(262, 10%, 64%); /* 7.0:1 */
--ink-subtle: hsl(262, 7%, 50%); /* 4.4:1 */
--ink-faint: hsl(262, 6%, 38%); /* 2.9:1 — decoration; never text that must be read */
--ink-on-accent: hsl(0, 5%, 11%); /* fixed: the lime chip is light in both themes */
--ink-on-inverted: hsl(0, 9%, 7%);
--ink-success: hsl(140, 60%, 62%); /* 10.9:1 */
--ink-danger: hsl(352, 90%, 72%); /* 8.0:1 */
--ink-warning: hsl(38, 100%, 70%); /* 10.2:1 */
/* ---- lines ------------------------------------------------------------------------------- */
--line: hsl(0, 5%, 22%); /* 2.1:1 */
--line-strong: hsl(0, 5%, 40%); /* 3.2:1 */
/* ---- the marketing brand scale, dark ------------------------------------------------------ */
--brand-surface: #170c26;
--brand-surface-2: #1e1231;
--brand-line: #2e1f47;
--brand-line-strong: #6a5a8c; /* 3.2:1 on --surface */
--brand-accent: #a58bff;
--brand-on-accent: #1a0b33; /* 6.6:1 on --brand-accent */
--brand-accent-2: #ff6fa7;
--brand-accent-3: #ffbc3d;
--brand-deep: #f4efff;
--brand-deep-hover: #ffffff;
--brand-on-deep: #1a0b33;
--brand-success: #5fe096;
--brand-success-bg: #10281c;
--brand-held: #ffc769;
--brand-held-bg: #2c1f10;
--brand-focus: #b9a6ff;
/* ---- signals as fills -------------------------------------------------------------------- */
--color-accent: hsl(234, 100%, 76%);
--color-accent-hover: hsl(234, 100%, 84%);
--color-accent-active: hsl(234, 100%, 90%);
--color-accent-alpha: hsl(234 100% 76% / 0.3);
--color-success: hsl(140, 60%, 45%);
--color-warning: #d9901f;
--color-danger: #e05a5a;
--color-primary: var(--color-accent);
--color-primary-hover: var(--color-accent-hover);
--color-primary-active: var(--color-accent-active);
--color-primary-text: #0f0719;
--color-danger-hover: #ef7a7a;
--color-danger-active: #f79999;
--color-danger-text: #0f0719;
--color-warning-hover: #eaa844;
--color-warning-active: #f2bd69;
--color-warning-text: #0f0719;
}
/*
* ---- the surface contract --------------------------------------------------------------------
*
* Five surfaces. Each one paints its background and re-declares the ink and line names that are
* legible on it, so anything placed inside inverts without knowing where it is.
*
* `raised` and `sunken` sit within a few percent of the page, so they keep the page's ink and only
* move the background. `accent` and `inverted` flip, and they flip the same way in both themes
* because the chip is light in both and the block is dark in light mode / light in dark mode — the
* ink they declare is chosen against their own fill, not against the theme.
*/
[data-surface] {
background-color: var(--surface);
color: var(--ink-body);
}
/* `page` needs no overrides: the root already carries the page surface and its ink. */
[data-surface="raised"] {
--surface: var(--surface-raised);
}
[data-surface="sunken"] {
--surface: var(--surface-sunken);
}
[data-surface="accent"] {
--surface: var(--surface-accent);
--ink: var(--ink-on-accent);
--ink-body: hsl(0, 5%, 11%); /* 15.4:1 on the lime chip */
--ink-muted: hsl(0, 4%, 32%); /* 7.0:1 */
--ink-subtle: hsl(0, 4%, 45%); /* 4.2:1 */
--line: hsl(62, 40%, 72%);
--line-strong: hsl(62, 30%, 42%); /* 3.4:1 */
}
[data-surface="inverted"] {
--surface: var(--surface-inverted);
--ink: var(--ink-on-inverted);
--ink-body: var(--ink-on-inverted);
--ink-muted: color-mix(in srgb, var(--ink-on-inverted) 74%, var(--surface-inverted));
--ink-subtle: color-mix(in srgb, var(--ink-on-inverted) 56%, var(--surface-inverted));
--line: color-mix(in srgb, var(--ink-on-inverted) 22%, var(--surface-inverted));
--line-strong: color-mix(in srgb, var(--ink-on-inverted) 48%, var(--surface-inverted));
}
/*
* ---- the names components already write ------------------------------------------------------
*
* Every `--color-*` name the console uses resolves through the scale above, so a component written
* years ago inverts correctly on a surface invented today. Nothing below carries a value of its own.
*
* The selector list matters and is not decoration. A custom property is substituted where it is
* DECLARED, not where it is read: `--color-text: var(--ink-body)` written only on `:root` would
* resolve once, against the root's ink, and every descendant would inherit that finished colour —
* so a component inside `data-surface="inverted"` would keep the page's dark ink on the dark block
* and the whole promise would be a no-op. Repeating the list on every element that redeclares the
* ink makes each of them re-resolve against its own, and its descendants inherit the right answer.
*
* Anything that declares its own `--ink-*` must therefore appear here. Two do today: the root and
* any `[data-surface]`. `[data-page]` stays listed so a page can declare its own ink through the
* page attribute, as the all-black page did before it was removed. A new surface joins this list on
* the day it is written.
*/
:root,
[data-surface],
[data-page] {
/* page family — was declared five times, once per page stylesheet */
--color-background: var(--surface);
--color-background-weak: var(--surface-sunken);
--color-background-weak-hover: var(--surface-sunken-hover);
--color-background-strong: var(--surface-inverted);
--color-background-strong-hover: var(--surface-inverted-hover);
--color-background-interactive: var(--surface-accent);
--color-background-interactive-weaker: var(--surface-accent-weak);
--color-text: var(--ink-body);
--color-text-strong: var(--ink);
--color-text-weak: var(--ink-muted);
--color-text-weaker: var(--ink-subtle);
--color-text-inverted: var(--ink-on-inverted);
--color-text-success: var(--ink-success);
--color-text-error: var(--ink-danger);
--color-icon: var(--ink-muted);
/* console family — the workspace screens */
--color-bg: var(--surface);
--color-bg-surface: var(--surface-sunken);
--color-bg-elevated: var(--surface-raised);
--color-bg-hover: var(--surface-sunken-hover);
--color-bg-secondary: var(--surface-sunken);
--color-bg-tertiary: var(--surface-sunken-hover);
--color-text-secondary: var(--ink-muted);
--color-text-muted: var(--ink-muted);
--color-text-disabled: var(--ink-subtle);
/*
* `--color-border` draws the edge of a card, an input, a dropdown trigger — things a reader has to
* see in order to operate them — so it is the 3:1 line. `--color-border-weak` and
* `--color-border-muted` are the decorative hairline: rules between table rows, a divider.
*/
/*
* The one place the five copies genuinely disagreed. Four of them declared
* `--color-border-weak: hsl(0, 1%, 85%)`, an opaque grey; the home page declared
* `hsla(0, 100%, 3%, 0.12)`, a translucent black, which is the same grey on white and a different
* one on every other background it met — including its own `--color-background-weak`, where it
* came out darker than the four. The opaque grey wins, because a rule between two rows should not
* change colour with what is behind it, and it is now `--line` for the whole product.
*/
--color-border: var(--line-strong);
--color-border-hover: var(--ink-muted);
--color-border-weak: var(--line);
--color-border-muted: var(--line);
--color-surface: var(--surface-sunken);
--color-surface-hover: var(--surface-sunken-hover);
--color-surface-border: var(--line);
}
body {
--font-size-2xs: 0.6875rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.8125rem;
--font-size-md: 0.9375rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 3.75rem;
--font-size-7xl: 4.5rem;
--font-size-8xl: 6rem;
--font-size-9xl: 8rem;
/*
* Two faces and one rule. Everything a reader reads -- headings, body copy, navigation, buttons,
* labels, the footer -- is IBM Plex Sans. IBM Plex Mono is for what a reader would copy or compare
* character by character: code, commands, file names, version numbers and file sizes. Nothing
* else is set in mono.
*
* `--font-sans` used to be `var(--font-mono)`, so every page that did not override it read as a
* terminal, while the download, pricing and enterprise pages each declared IBM Plex Sans for
* themselves -- and the header above all of them stayed mono. The documentation site states the
* same pair in packages/web/src/styles/font.css.
*/
--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono:
"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
/*
* Two title sizes for the whole site, and nothing in between. A product page opens with a hero
* headline (home, download, pricing, enterprise); every other page -- the account screens, the
* legal documents, the changelog, the brand page, the 404 page and the documentation -- opens
* with a page title. They were set eight different ways, from 17px to 39px of cap height, in
* navy, black, purple and a gradient. The documentation repeats the page title in
* packages/web/src/styles/custom.css and the hero in packages/web/src/components/Lander.astro.
*/
--title-hero-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
--title-page-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.375rem);
/* A section's heading inside a page: "Choose your plan", "Desktop app", the questions. */
--title-section-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
--title-weight: 650;
--title-tracking: -0.02em;
}
body {
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-0-75: 0.1875rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-4-5: 1.125rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-17: 4.25rem;
--space-18: 4.5rem;
--space-19: 4.75rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
--space-36: 9rem;
--space-40: 10rem;
--space-44: 11rem;
--space-48: 12rem;
--space-52: 13rem;
--space-56: 14rem;
--space-60: 15rem;
--space-64: 16rem;
--space-72: 18rem;
--space-80: 20rem;
--space-96: 24rem;
/* `--border-radius-xs` was read by routes/workspace/[id]/usage/graph-section.module.css and
declared nowhere, so that corner was simply square. */
/*
* The stacking order, written down. These were bare numbers scattered across six files — 9999,
* 1000, 100, 60, 50, 40, 10 — with no way to tell whether a new one was above or below the header
* without reading all of them. Nothing changes layer here; the numbers are the ones already
* shipping, given names so the next layer has an obvious place to go.
*/
--z-raised: 1; /* a card lifted above the page's own decoration */
--z-sticky: 10; /* a sticky table head inside a panel */
--z-header: 50; /* the fixed site header */
--z-skip-link: 60; /* above the header, because it targets it */
--z-menu: 1000; /* a dropdown, inside whatever context opened it */
--z-modal: 9999; /* the dialog overlay: above everything */
--border-radius-xs: 0.125rem;
--border-radius-sm: 0.1875rem;
--border-radius-md: 0.3125rem;
--border-radius-lg: 0.5rem;
}
/*
* The button.
*
* One definition. There were three: this file's `[data-component="button"]`, which nothing in the
* product rendered — grep the .tsx files, the attribute appears nowhere — and two live copies of the
* same thing that had quietly drifted apart, `[data-page="workspace"] button` in routes/workspace.css
* and `[data-slot="content"] button` in component/modal.css. The workspace copy had no `danger`
* colour and the modal copy had no `:active` nudge, so the same button behaved differently depending
* on whether you opened it in a dialog.
*
* The selector list below is the whole of it. The markup writes a bare `