/* Plicara Labs — design tokens * * Generated companion: tokens.json. Rules and reasoning live in * docs/brand.md. Change them there first, then here, then regenerate the JSON * with `python3 build.py`. * * Two decisions shape this file. * * 1. FOUR SCHEMES, PAIRED BY AREA. Twilight/Cel carry the lab and the models; * Blueprint/Notepad carry benchmarks and tools. A reader can tell which * half of the lab they are in before reading a word. * * 2. TWO TYPE SYSTEMS. Warm serif for the lab and the models, grotesque and * mono for benchmarks and tools. JetBrains Mono is shared by both, which is * what keeps them one brand rather than two. * * Apply a scheme with data-scheme on any element; nest freely. * lab, models (dark) * lab, models (light) * benchmarks, tools (dark) * benchmarks, tools (light) */ :root { /* --- palette: cream --------------------------------------------------- */ /* Descended from the founder's pastel card, with two deliberate moves away * from Anthropic's identity (warm cream ground + terracotta accent): * the paper is COOL (cream is b* 0.0; the warm cream it replaced was +4.8 * against their +4.1 — indistinguishable), and the warm accent is RUST, * not coral. Orange, duck egg and smoke came through unchanged. */ /* Orange. The one hot colour, and a fill rather than an ink: it * holds dark text but must never set text itself — 1.86:1 on cream. It is * the fill inside every glyph outline and the accent of both dark * schemes. */ --pl-orange: #EE8B33; /* Text placed ON a orange fill: 7.1:1. This token is what makes * "orange is a fill, not an ink" mechanical rather than a thing to * remember. It stays a fill on every ground — 2.14:1 on cream. * * The orange FILL is the standing exception to "one accent per * scheme": buttons, pills and live tags stay orange in every scheme, * including Cel and Notepad, whose accent ink is rust. One accent means * one accent INK — the fill is a brand constant, one of the three * through-lines (outline, fill, mono) that keep four schemes one brand. */ --pl-on-orange: #05192B; /* Rust is NO LONGER a fill-only colour. Harbour moved it from a pale pink * to a burnt rust, which made it the accent INK on the light schemes * (9.16:1 on cream) — see Cel and Notepad below. It is still usable as a * fill, so it keeps a guard, but the guard had to flip with the value: * near-black on rust is 1.65:1, cream on rust is 9.16:1. */ --pl-rust: #6A2A12; --pl-on-rust: #FAEBD3; --pl-sumi: #05192B; /* cool near-black; every outline is drawn in it */ --pl-cream: #FAEBD3; /* cool paper white — the light ground */ --pl-white: #ffffff; --pl-warmwhite: #FFF9EF; /* raised surface on the cream ground — lighter than the paper, not whiter than it */ --pl-mist: #DEEAEE; /* raised cool surface */ --pl-duckegg: #9ABCC6; /* pale green; second series on dark */ --pl-smoke: #829AA1; /* recessive detail and rules; never body text */ --pl-teal: #31606D; /* accent ink on light; panel ground on dark */ --pl-apricot: #FFB881; /* derived: rust fired dark; series on light */ --pl-night: #05192B; /* derived: deep water; primary dark ground */ --pl-slate: #132538; /* raised surface on night */ --pl-print: #082C35; /* derived: smoked slate; dark tools ground */ --pl-drafting: #1D3E47; /* raised surface on print */ /* --- type ------------------------------------------------------------- */ /* Warm system — the lab and the models. Fraunces is built on deliberate * irregularity, which is the same argument the drawings make. */ --pl-font-display: "Fraunces", Georgia, "Times New Roman", serif; --pl-font-body: "Newsreader", Georgia, "Times New Roman", serif; /* Technical system — benchmarks and tools. */ --pl-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; /* Shared by both. The through-line. */ --pl-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --pl-tracking-label: 0.2em; --pl-tracking-display: -0.01em; --pl-step-0: 1rem; --pl-step-1: 1.125rem; --pl-step-2: 1.35rem; --pl-step-3: 1.7rem; --pl-step-4: 2.2rem; --pl-step-5: 3rem; --pl-step-6: 4.4rem; --pl-measure: 68ch; } /* --- schemes ------------------------------------------------------------- */ /* Every pairing below clears WCAG AA for body text — including the accent on * a raised surface, which the previous palette did not. Series colours clear * AA large. Ratios are in tokens.json, generated rather than asserted, and * build.py fails loudly if any sanctioned pairing slips. */ /* Twilight — primary dark. The lab and the models. Deep water: night ground, * slate tiles, and the colour arriving through PANELS — teal and rust * grounds, orange fills, rust and duck-egg series — rather than * through the base ground. Dark pages are not monotone; they are dark paper * that pastel things sit on. */ [data-scheme="twilight"] { --pl-bg: var(--pl-night); --pl-surface: var(--pl-slate); --pl-text: var(--pl-cream); --pl-text-muted: #9CB5BC; --pl-rule: #25364A; --pl-accent: var(--pl-orange); --pl-accent-on: var(--pl-sumi); --pl-series-1: var(--pl-duckegg); --pl-series-2: var(--pl-apricot); --pl-typeset: warm; } /* Cel — primary light. Cool paper, sumi ink, white surfaces, one teal * accent. */ [data-scheme="cel"] { --pl-bg: var(--pl-cream); --pl-surface: var(--pl-warmwhite); --pl-text: var(--pl-sumi); --pl-text-muted: #436974; --pl-rule: #E5D5BB; --pl-accent: var(--pl-rust); --pl-accent-on: var(--pl-cream); --pl-series-1: var(--pl-teal); --pl-series-2: var(--pl-rust); --pl-typeset: warm; } /* Blueprint — secondary dark. Benchmarks and tools, on smoked slate. */ [data-scheme="blueprint"] { --pl-bg: var(--pl-print); --pl-surface: var(--pl-drafting); --pl-text: var(--pl-white); --pl-text-muted: #9CB5BC; --pl-rule: #395760; --pl-accent: var(--pl-orange); --pl-accent-on: var(--pl-sumi); --pl-series-1: var(--pl-apricot); --pl-series-2: var(--pl-duckegg); --pl-typeset: technical; } /* Notepad — secondary light. White page, mist tiles, teal accent. * For anything read at length. */ [data-scheme="notepad"] { --pl-bg: var(--pl-white); --pl-surface: var(--pl-mist); --pl-text: var(--pl-sumi); --pl-text-muted: #436974; --pl-rule: #CADADF; --pl-accent: var(--pl-rust); --pl-accent-on: var(--pl-cream); --pl-series-1: var(--pl-teal); --pl-series-2: var(--pl-rust); --pl-typeset: technical; } /* Default, when nothing declares a scheme: the lab pair, following the OS. */ :root { --pl-bg: #05192B; --pl-surface: #132538; --pl-text: #FAEBD3; --pl-text-muted: #9CB5BC; --pl-rule: #25364A; --pl-accent: var(--pl-orange); --pl-accent-on: var(--pl-sumi); --pl-series-1: var(--pl-duckegg); --pl-series-2: var(--pl-apricot); /* The technical band's ground, exposed so page furniture that * straddles the boundary — seams, dividers — can reference it * instead of hard-coding a colour. Follows the same switch. */ --pl-band-bg: var(--pl-print); --pl-band-surface: var(--pl-drafting); --pl-band-ink: var(--pl-orange); } @media (prefers-color-scheme: light) { :root:not([data-scheme]) { --pl-bg: var(--pl-cream); --pl-surface: var(--pl-warmwhite); --pl-text: var(--pl-sumi); --pl-text-muted: #436974; --pl-rule: #E5D5BB; --pl-accent: var(--pl-rust); --pl-accent-on: var(--pl-cream); --pl-series-1: var(--pl-teal); --pl-series-2: var(--pl-rust); --pl-band-bg: var(--pl-white); --pl-band-surface: var(--pl-mist); --pl-band-ink: var(--pl-teal); } } /* A technical band that FOLLOWS the page rather than pinning itself. Hard- * coding a band to notepad leaves a full-bleed white slab in the middle of a * dark page; this resolves to blueprint at night and notepad by day, using * the same dark-first shape :root uses for twilight/cel. */ [data-scheme="technical"] { --pl-bg: var(--pl-print); --pl-surface: var(--pl-drafting); --pl-text: var(--pl-white); --pl-text-muted: #9CB5BC; --pl-rule: #395760; --pl-accent: var(--pl-orange); --pl-accent-on: var(--pl-sumi); --pl-series-1: var(--pl-apricot); --pl-series-2: var(--pl-duckegg); --pl-typeset: technical; } @media (prefers-color-scheme: light) { [data-scheme="technical"] { --pl-bg: var(--pl-white); --pl-surface: var(--pl-mist); --pl-text: var(--pl-sumi); --pl-text-muted: #436974; --pl-rule: #CADADF; --pl-accent: var(--pl-rust); --pl-accent-on: var(--pl-cream); --pl-series-1: var(--pl-teal); --pl-series-2: var(--pl-rust); } } /* --- roles --------------------------------------------------------------- */ /* Any element carrying a scheme paints its own ground, so a scheme can be * applied to or to a single
and behave the same either way. */ body, [data-scheme] { background: var(--pl-bg); color: var(--pl-text); } /* Warm typeset — the lab and the models. */ [data-scheme="twilight"], [data-scheme="cel"], :root:not([data-scheme]) { --pl-face-display: var(--pl-font-display); --pl-face-body: var(--pl-font-body); --pl-display-settings: "opsz" 96, "SOFT" 24, "WONK" 1; --pl-display-weight: 600; --pl-body-weight: 400; } /* Technical typeset — benchmarks and tools. */ [data-scheme="blueprint"], [data-scheme="notepad"], [data-scheme="technical"] { --pl-face-display: var(--pl-font-sans); --pl-face-body: var(--pl-font-sans); --pl-display-settings: "wght" 800, "wdth" 125; --pl-display-weight: 800; --pl-body-weight: 400; } /* Display is LOWERCASE in both typesets — headlines, the lab name, section * titles. Professional, with an air of levity; the transform makes it * mechanical rather than a thing to remember. Proper nouns inside running * body text keep their capitals — the transform applies to display roles * only. */ .fh-display { font-family: var(--pl-face-display); font-variation-settings: var(--pl-display-settings); font-weight: var(--pl-display-weight); letter-spacing: var(--pl-tracking-display); line-height: 1.02; text-transform: lowercase; text-wrap: balance; } .fh-body { font-family: var(--pl-face-body); font-weight: var(--pl-body-weight); line-height: 1.6; max-width: var(--pl-measure); } /* Figures are mono and tabular in BOTH systems. A flight time and an eval * score are the same kind of fact and must look like it. */ .fh-data { font-family: var(--pl-font-mono); font-variant-numeric: tabular-nums; } /* The ONLY role that is uppercase. Display roles are lowercase — uppercase is * what marks a label as a label, and it never touches identifiers: * `regexbench` is a package name and REGEXBENCH is a different string. */ .fh-label { font-family: var(--pl-font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: var(--pl-tracking-label); color: var(--pl-text-muted); } :focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }