/* OnDuty design tokens ============================================================================ One layer, --ui-*, used by the product and the public site alike. The public manual is at /brand; the kit and its reasoning are in brand/README.md. THE MATERIAL Cold paper, a cold near-black ink, and one accent, vermilion, the same token and the same value on the product and on the site. The accent marks the action you are being asked to take and the thing that is waiting for a person, and nothing else. On the product's working surface, ion marks cognition (signals, edges, links) and the three semantic colours are states, never decoration. The page is cool: cleared space, clean light, air. Relief is a cool temperature before it is a colour, and the warmth is one saturated mark. Cool ground for the order, one warm mark for the presence. FIVE RULES 1. One accent, used identically everywhere. Severity colour is a product concern and does not appear on marketing. 2. Elevation is tone, never a shadow. Nothing on the site casts one. 3. One radius family (zero on the site) and one easing curve. 4. Nothing loops. 5. One grid. Space is spent from the rhythm scale below, and a size is a step in the ramp rather than a pixel value a component picked. Both were claims this file made in prose before it had the tokens to keep them, and a claim nothing can check is a claim that drifts. ========================================================================= */ :root { /* ---- Grounds ------------------------------------------------------ Cool chalk, not warm paper. The page should feel like a room with the window open, which is a temperature before it is a colour. `sheet` is a panel laid on the canvas, `tint` is the cooler ground for reference material, `raised` is the one white surface on the site and is reserved for the board the whole front page resolves to. */ --ui-canvas: #ECEFEE; --ui-surface: #FAFBFB; --ui-raised: #FFFFFF; --ui-sunken: #E1E6E5; --ui-tint: #E2EAEE; /* pale cool blue, reference chapters */ --ui-night: #111716; /* the dark chapter */ --ui-night-2: #1A2221; /* a panel inside the dark chapter */ --ui-shell: #111716; /* the app chrome shares the night ground */ --ui-shell-hover: #1A2221; --ui-shell-active: #26302E; /* ---- Lines -------------------------------------------------------- Hairlines are for real edges. Most grouping on this site is done with ground colour and space, not with rules. */ --ui-line: #DCE2E1; --ui-line-strong: #C0C9C7; --ui-line-shell: #232C2A; --ui-night-line: #232C2A; /* ---- Ink ---------------------------------------------------------- Cool graphite, and never pure black: pure black on a light ground is a hole. */ --ui-ink: #141A19; --ui-ink-2: #4C5654; --ui-ink-3: #78827F; --ui-ink-4: #9BA4A2; --ui-ink-shell: #EDF1F0; --ui-ink-shell-2: #98A3A0; /* ---- The accent --------------------------------------------------- One colour, the same on the product and on the site: vermilion, the one saturated ink on a cold page. It marks the action you are being asked to take and the thing that is waiting for a person, and nothing else. It collides with no semantic: it is not the amber of a warning nor the red of a failure. `--ui-accent` is a fill and carries white text. `--ui-accent-ink` is the darker step for accent-coloured text on the canvas. Never use one for the other's job. */ --ui-accent: #D8401F; --ui-accent-hover: #B8321A; --ui-accent-ink: #B8321A; --ui-accent-soft: #FBE6E0; --ui-accent-line: #F2B9A9; --ui-on-accent: #FFFFFF; --ui-ion: #2C6C88; --ui-ion-hover: #1F5468; --ui-ion-soft: #E3EDF2; --ui-ion-line: #BFD4DE; /* ---- Semantics ---------------------------------------------------- Product only. The public site shows none of these: one accent means one accent, and a marketing page has no severities to encode. */ --ui-positive: #1A6A4F; --ui-positive-soft: #E4EFEA; --ui-positive-line: #BCD8CC; --ui-attention: #8A5A12; --ui-attention-soft: #F5EEE1; --ui-attention-line: #E3D0AC; --ui-critical: #A32B3C; --ui-critical-soft: #F7E8EA; --ui-critical-line: #E9C3C9; --ui-neutral: #626C6A; --ui-neutral-soft: #E9EDEC; --ui-neutral-line: #D7DEDC; /* ---- Type --------------------------------------------------------- Two families and a mono, and no serif anywhere. Display is Chivo, since 2026-09-01, when the owner chose the plate as the brand (see THE SITE SURFACE at the bottom of this file). A grotesque cut for lettering: at 700 and tight it reads as drawn rather than typed, and it is not the face every generated site reaches for. The product shares it so that a headline in the app and a headline on the site are one hand. Interface is IBM Plex Sans, kept. It is genuinely good at what a Brain view needs: forty rows on screen, tabular figures, no personality competing with the data. Changing it would have been churn. Mono is IBM Plex Mono and its job is narrow: things a machine produced. --ui-font-serif is kept as an alias only because the product's insight narratives still name it, and it now resolves to the display face. There is no serif in this system. */ --ui-font-display: var(--font-display, "Chivo"), ui-sans-serif, system-ui, sans-serif; --ui-font-sans: var(--font-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ui-font-mono: var(--font-mono, "IBM Plex Mono"), ui-monospace, "SF Mono", Consolas, monospace; --ui-font-serif: var(--ui-font-display); /* The product scale, dense on purpose: 13px base. The site has its own and much larger scale below and does not read these. */ --ui-text-3xl: 27px; --ui-text-2xl: 21px; --ui-text-xl: 17px; --ui-text-lg: 15px; --ui-text-md: 13px; --ui-text-sm: 12px; --ui-text-xs: 11px; /* The site scale, set large: a marketing page read at 15px is a page that looks like documentation. */ --site-body: 1.0625rem; /* 17px */ --site-lede: 1.375rem; /* 22px */ --site-h3: 1.5rem; /* 24px */ --site-h2: 2.75rem; /* 44px */ --site-h1: 4.5rem; /* 72px */ --site-hero: 5.75rem; /* 92px */ --ui-leading-tight: 1.25; --ui-leading-normal: 1.5; --ui-leading-relaxed: 1.65; /* ---- Geometry ----------------------------------------------------- One family, generous, documented so the shape-consistency rule can be checked rather than assumed: sheet 24px a chapter of the page card 16px a thing inside a chapter control 10px a button, an input, a chip chip 8px a small label The product keeps its own tighter radii below, because a Brain view is a different object at a different density. */ --ui-radius-sheet: 24px; --ui-radius-card: 16px; --ui-radius-control: 10px; --ui-radius-chip: 8px; --ui-radius-full: 999px; --ui-radius-xs: 4px; --ui-radius-sm: 6px; --ui-radius-md: 8px; --ui-radius-lg: 12px; --ui-radius-panel: var(--ui-radius-sheet); --ui-rail-width: 224px; --ui-topbar-height: 52px; --ui-content-max: 1520px; --ui-site-max: 1240px; --ui-read-max: 62ch; /* ---- Rhythm ------------------------------------------------------- The brand claims one grid, one optical axis, alignment before decoration. Until 2026-09-02 nothing in this file said what the grid was: every component chose its own padding (p-6 sm:p-7 here, px-5 py-5 there, py-24 sm:py-32 somewhere else) and the claim could be repeated but never checked. Nine steps on an 8px unit, each with exactly one job, so a space in a component is a decision that was already made. tick 8px the smallest space: the tick length, and the inset registration ticks sit at gutter 12px between two things in one grid step 20px between a label and the thing it labels pocket 24px the padding inside a small box: a card, the body of a panel beat 56px between two blocks inside one chapter inset 24-56 the padding inside a sheet air-tight 40-56 a chapter's own vertical air, three registers air 64-112 air-wide 88-144 The last four are fluid rather than a pair of breakpoint classes, because a page's air is one decision and a component that states it twice is a component where the two halves drift. Each interpolates from its floor at 375px to its ceiling at 1240px, which is --ui-site-max: the page stops growing exactly where the column does. */ --rhythm-unit: 0.5rem; --rhythm-tick: 0.5rem; --rhythm-gutter: 0.75rem; --rhythm-step: 1.25rem; --rhythm-pocket: 1.5rem; --rhythm-beat: 3.5rem; --rhythm-inset: clamp(1.5rem, 0.63rem + 3.7vw, 3.5rem); --rhythm-air-tight: clamp(2.5rem, 2.07rem + 1.85vw, 3.5rem); --rhythm-air: clamp(4rem, 2.7rem + 5.55vw, 7rem); --rhythm-air-wide: clamp(5.5rem, 3.98rem + 6.47vw, 9rem); /* ---- Depth -------------------------------------------------------- There are no shadows on the public site. Depth is ground colour. The three below exist for the product, where a popover genuinely does float above a panel. If a shadow appears on a marketing page it is a mistake. */ --ui-shadow-sm: 0 1px 2px rgba(20, 26, 25, 0.05); --ui-shadow-md: 0 6px 20px -4px rgba(20, 26, 25, 0.10), 0 2px 6px -2px rgba(20, 26, 25, 0.05); --ui-shadow-lg: 0 18px 48px -12px rgba(20, 26, 25, 0.18), 0 4px 12px -4px rgba(20, 26, 25, 0.07); /* The one shadow the public site is allowed, and it belongs to exactly one element: the board the settle resolves to. That board is the only thing on the site described as landing, so it is the only thing that has any business casting anything. Tinted with the ink rather than black, because a pure black shadow on a coloured ground is the tell that a system has no light source. */ --ui-shadow-float: 0 24px 60px -20px rgba(20, 26, 25, 0.20), 0 4px 12px -6px rgba(20, 26, 25, 0.10); /* An edge catching light. One line, on cards only, and the reason a card reads as an object rather than as a rectangle of a different colour. */ --ui-edge: inset 0 1px 0 rgba(255, 255, 255, 0.6); --ui-ring: 0 0 0 2px var(--ui-canvas), 0 0 0 4px var(--ui-accent); /* ---- Motion ------------------------------------------------------- One curve, cubic-bezier(0.4, 0, 0.2, 1), and nothing else. Four durations, which is the most a codebase can carry and stay consistent. `slow` is the scroll-linked exception and the only value above 500ms belongs to the one long scene on the site. */ --ui-ease: cubic-bezier(0.4, 0, 0.2, 1); --ui-ease-settle: cubic-bezier(0.4, 0, 0.2, 1); --ui-duration-fast: 150ms; --ui-duration: 200ms; --ui-duration-slow: 300ms; --ui-duration-scene: 500ms; } /* -------------------------------------------------------------------------- Dark. Not an inversion and not a second brand. Light is the cleared room in the morning; dark is the same room at night with one lamp on, which is the half of the name that the light theme cannot say. The accent lightens, because terracotta at #C2410C on a near-black ground loses its legibility as a fill and its whole job is to be the one thing you can find. -------------------------------------------------------------------------- */ .dark { --ui-canvas: #0D1211; --ui-surface: #151C1B; --ui-raised: #1B2423; --ui-sunken: #0A0F0E; --ui-tint: #131E22; --ui-night: #070A0A; --ui-night-2: #111817; --ui-shell: #0A0E0E; --ui-shell-hover: #161E1D; --ui-shell-active: #222C2A; --ui-line: #222C2A; --ui-line-strong: #35403E; --ui-line-shell: #1B2322; --ui-night-line: #1B2322; --ui-ink: #EDF1F0; --ui-ink-2: #A7B1AF; --ui-ink-3: #7C8785; --ui-ink-4: #626C6A; --ui-ink-shell: #EDF1F0; --ui-ink-shell-2: #939E9C; --ui-accent: #F0664A; --ui-accent-hover: #F4826B; --ui-accent-ink: #F4826B; --ui-accent-soft: #2E1712; --ui-accent-line: #5A2A20; --ui-on-accent: #14100D; --ui-ion: #6FA8C4; --ui-ion-hover: #8CBDD5; --ui-ion-soft: #12242C; --ui-ion-line: #26414D; --ui-positive: #4FB68F; --ui-positive-soft: #0D2019; --ui-positive-line: #1D3B30; --ui-attention: #D0A055; --ui-attention-soft: #21190C; --ui-attention-line: #3E3119; --ui-critical: #E97F8C; --ui-critical-soft: #261417; --ui-critical-line: #452229; --ui-neutral: #939E9C; --ui-neutral-soft: #151C1B; --ui-neutral-line: #2A3432; --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ui-shadow-md: 0 6px 20px -4px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.3); --ui-shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.35); --ui-shadow-float: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 4px 12px -6px rgba(0, 0, 0, 0.35); --ui-edge: inset 0 1px 0 rgba(255, 255, 255, 0.045); --ui-ring: 0 0 0 2px var(--ui-canvas), 0 0 0 4px var(--ui-accent); } /* -------------------------------------------------------------------------- Compatibility aliases for the Brain views, which were built against a --brain-* set. They resolve to the system above so the whole product moved palette at once. Nothing new should reference one. -------------------------------------------------------------------------- */ :root, .dark { --brain-bg: var(--ui-canvas); --brain-surface: var(--ui-surface); --brain-surface-raised: var(--ui-raised); --brain-border: var(--ui-line); --brain-border-strong: var(--ui-line-strong); --brain-text: var(--ui-ink); --brain-text-muted: var(--ui-ink-2); --brain-text-faint: var(--ui-ink-3); --brain-accent: var(--ui-accent); --brain-accent-ink: var(--ui-on-accent); --brain-ion: var(--ui-ion); --brain-ion-soft: var(--ui-ion-soft); --brain-mint: var(--ui-positive); --brain-mint-soft: var(--ui-positive-soft); --brain-amber: var(--ui-attention); --brain-red: var(--ui-critical); --brain-radius-sm: var(--ui-radius-sm); --brain-radius-md: var(--ui-radius-md); --brain-radius-lg: var(--ui-radius-lg); --brain-shadow-sm: var(--ui-shadow-sm); --brain-shadow-md: var(--ui-shadow-md); --brain-ring: var(--ui-ring); --brain-text-2xl: var(--ui-text-2xl); --brain-text-xl: var(--ui-text-xl); --brain-text-lg: var(--ui-text-lg); --brain-text-base: var(--ui-text-md); --brain-text-sm: var(--ui-text-sm); --brain-text-xs: var(--ui-text-xs); } /* =========================================================================== THE SITE SURFACE =========================================================================== THE PLATE A record you can check, on cold paper, in one saturated ink. An engineering drawing rather than an interface: everything registered to the same grid, every claim carrying the mark it was measured against. The opposite of a black box, which is what this product has to prove it is not. The ground is cold paper (#EDEEEA), deliberately not warm: the brand's own word for what it sells is a cool temperature before it is a colour. The ink is a cold near-black. The one colour is vermilion, and it appears on exactly two kinds of thing: the action you are being asked to take, and the mark on the one row that needs a person. A drawing in one ink does not have a second ink. Structure is drawn. Three weights of line, three jobs. --ui-rule is the drawn edge and it is the token the plate is made of; on paper it has to be darker than a divider by a clear step, because a light ground swallows a hairline faster than a dark one. SHAPE AND TYPE Radius zero, everywhere on the site. A plate has corners; on paper anything above zero reads as a sticker. The display face is Chivo at 700, tight, and it also sets the body, because a drawing is lettered in one hand. The machine voice is Martian Mono, uppercase and tracked, on every label, button, timestamp and verdict. No serif. The product's working surface keeps Plex, with Chivo for display. =========================================================================== */ [data-surface="site"] { --ui-canvas: #EDEEEA; --ui-surface: #FFFFFF; --ui-raised: #FFFFFF; --ui-sunken: #E3E5E1; --ui-tint: #E6E8E4; --ui-night: #14161A; /* the ink plate: paper and ink swap once */ --ui-night-2: #1E2126; /* Cold near-black ink, and three steps back from it. */ --ui-ink: #14161A; --ui-ink-2: #5C6167; --ui-ink-3: #84898E; --ui-ink-4: #A9ADB0; --ui-ink-shell: #EDEEEA; --ui-ink-shell-2: #9A9FA5; /* Three weights of line, and they mean different things. --ui-grid the field the page sits on, felt and not read --ui-line a divider between two things in the same group --ui-rule a drawn edge: a panel border, a spine, a section rule */ --ui-grid: #E1E3DF; --ui-line: #D3D6D0; --ui-rule: #B4B8B2; --ui-line-strong: #8F938D; --ui-line-shell: #2B2F35; --ui-night-line: #2B2F35; /* One ink. Vermilion, chosen by the owner on 2026-09-01 out of four drafting inks drawn side by side: the red pencil, what a person adds to a drawing after the machine has drawn it. Warm against cold paper, and nothing like an interface colour. It is not a status colour: the product's critical red is a different, cooler value, and on the site no severity is ever shown. */ --ui-accent: #D8401F; --ui-accent-hover: #B8321A; --ui-accent-ink: #B8321A; --ui-accent-soft: #FBE6E0; --ui-accent-line: #F2B9A9; --ui-on-accent: #FFFFFF; /* Square, all of it. ------------------------------------------------------------------ Ten tokens set to the same zero is not ten decisions, it is one: the site has no radius family, because a plate has corners and on paper anything above zero reads as a sticker. They are all listed rather than collapsed into a single token because the product's four registers (sheet, card, control, chip) are real there, and a component shared between the two surfaces has to be able to ask for its own register and get zero here without knowing which surface it is on. brand.test.ts holds four of them at zero; if one of these ever stops being 0px it is a decision, not a tidy-up. */ --ui-radius-xs: 0px; --ui-radius-sm: 0px; --ui-radius-chip: 0px; --ui-radius-control: 0px; --ui-radius-md: 0px; --ui-radius-card: 0px; --ui-radius-lg: 0px; --ui-radius-panel: 0px; --ui-radius-sheet: 0px; --ui-radius-full: 0px; /* One hand for the lettering, one for the machine. */ --ui-font-display: var(--font-display, "Chivo"), ui-sans-serif, system-ui, sans-serif; --ui-font-sans: var(--font-display, "Chivo"), ui-sans-serif, system-ui, sans-serif; --ui-font-mono: var(--font-mono-site, "Martian Mono"), ui-monospace, "SF Mono", Consolas, monospace; --ui-font-serif: var(--ui-font-display); /* The display ramp, fluid. ------------------------------------------------------------------ Each headline size is one token that already carries its whole responsive ramp, floor at 375px and ceiling at 1240px. It used to be a fixed value here plus a chain of breakpoint classes in Display (text-[2.125rem] sm:text-[3.25rem] xl:text-hero), which meant the token named only the largest of four sizes and a headline set with text-hero anywhere else got that size at every width. A size is a step in the scale, not a pixel value that happens to be true on a desktop, so the ramp lives here and Display spends one class. Tracking and leading belong to the same step and are stated once, in the Tailwind fontSize entry that reads each token. Body stays fixed: running text that changes size as a window is dragged is a page that reflows while it is being read. */ --site-body: 1rem; /* 16px */ --site-lede: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); /* 17 to 19 */ --site-h3: clamp(1.25rem, 1.2rem + 0.23vw, 1.375rem); /* 20 to 22 */ --site-h2: clamp(1.75rem, 1.43rem + 1.39vw, 2.5rem); /* 28 to 40 */ --site-h1: clamp(2.25rem, 1.6rem + 2.78vw, 3.75rem); /* 36 to 60 */ --site-hero: clamp(2.125rem, 0.88rem + 5.32vw, 5rem); /* 34 to 80 */ /* Nothing on the plate floats. */ --ui-edge: none; --ui-shadow-float: none; --ui-ring: 0 0 0 2px var(--ui-canvas), 0 0 0 4px var(--ui-accent); /* The site follows the visitor's system, not the product's toggle. */ color-scheme: light; } /* The ink plate, when the visitor's system is dark. --------------------------------------------------------------------------- The site's dark mode is the visitor's system's choice, never a toggle in the header. Paper and ink swap as a set: cold near-black ground, paper-coloured ink, the same vermilion lifted two steps so it still reads as the one colour on a dark sheet. The product's `.dark` class does not reach in here: this wrapper redefines every token it uses, so the site is dark when the OS is and only then. */ @media (prefers-color-scheme: dark) { [data-surface="site"] { color-scheme: dark; --ui-canvas: #121418; --ui-surface: #1A1D22; --ui-raised: #1A1D22; --ui-sunken: #0E1013; --ui-tint: #16191E; --ui-night: #E9EAE6; --ui-night-2: #DADCD7; --ui-ink: #E9EAE6; --ui-ink-2: #A9AEB3; --ui-ink-3: #7C8288; --ui-ink-4: #5A6066; --ui-ink-shell: #14161A; --ui-ink-shell-2: #5C6167; --ui-grid: #1D2126; --ui-line: #262B31; --ui-rule: #3A4048; --ui-line-strong: #555C64; --ui-line-shell: #C9CCC6; --ui-night-line: #C9CCC6; --ui-accent: #F0664A; --ui-accent-hover: #F98A72; --ui-accent-ink: #F98A72; --ui-accent-soft: #2A1712; --ui-accent-line: #5A2A1F; --ui-on-accent: #14161A; --ui-ring: 0 0 0 2px var(--ui-canvas), 0 0 0 4px var(--ui-accent); /* --ui-edge and --ui-shadow-float are deliberately absent. ------------------------------------------------------------------ They are set to `none` in the light site block above, and a custom property that this rule does not redeclare keeps that value: the two rules have the same specificity and the light one already applied. So nothing on the plate floats in either scheme, which is right, and it is written down here because it reads like an omission. If the plate is ever given depth, it is given depth twice. */ } } /* The semantic colours, on the site surface. --------------------------------------------------------------------------- These are not decoration and they are not a second accent. `data-surface` covers more than the marketing plate: every page that is neither the product shell nor a bare full-screen route renders inside it, which is /investors, /billing, /dashboard and anything else that has not been given a frame of its own. Those pages have real states to show, and a state has to be legible before it is tasteful. The marketing plate itself paints none of them. brand.test.ts refuses bg/text/border/ring-(ion|positive|attention|critical) anywhere in components/site or on the front page, which is where the one-accent rule is actually enforced. This block is what the pages behind that line get. Muted on paper so a notice reads as information in the page rather than as an error in it. Lifted on a dark ground, which is the half that was missing: these were declared once, in light values only, and inherited straight through the dark media block below, so an /investors link at #2C6C88 sat on a #121418 ground at a contrast ratio of about 3.2 to 1. It was invisible in the code, in a screenshot taken on a light machine, and in every test. */ [data-surface="site"] { --ui-ion: #2C6C88; --ui-ion-hover: #1F5468; --ui-ion-soft: #E3EDF2; --ui-ion-line: #BFD4DE; --ui-positive: #1A6A4F; --ui-positive-soft: #E4EFEA; --ui-positive-line: #BCD8CC; --ui-attention: #8A5A12; --ui-attention-soft: #F5EEE1; --ui-attention-line: #E3D0AC; --ui-critical: #A32B3C; --ui-critical-soft: #F7E8EA; --ui-critical-line: #E9C3C9; --ui-neutral: #626C6A; --ui-neutral-soft: #E6E8E4; --ui-neutral-line: #D3D6D0; /* The accent is the same token, and the same value, on the product and on the site, so a shared component (the Button the header uses) is in the one ink on both without knowing which surface it is on. */ } @media (prefers-color-scheme: dark) { [data-surface="site"] { --ui-ion: #6FA8C4; --ui-ion-hover: #8CBDD5; --ui-ion-soft: #12242C; --ui-ion-line: #26414D; --ui-positive: #4FB68F; --ui-positive-soft: #0D2019; --ui-positive-line: #1D3B30; --ui-attention: #D0A055; --ui-attention-soft: #21190C; --ui-attention-line: #3E3119; --ui-critical: #E97F8C; --ui-critical-soft: #261417; --ui-critical-line: #452229; --ui-neutral: #939E9C; --ui-neutral-soft: #16191E; --ui-neutral-line: #262B31; } }