/* brand-supabase-dark.css — a Lattice BRAND (token swap). * * Loaded BEFORE the library (library.css). It sets the whole variable contract the * library reads (SiteForge names) to a Supabase-style dark palette, so every atom and * molecule renders dark + green with zero component changes. This is the theme model: * same components, different token file. */ :root { /* ---- Fonts ---- */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---- Type scale ---- */ --text-xs: .75rem; --text-sm: .8125rem; --text-base: .9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-display: 2.25rem; --text-hero: 3rem; /* ---- Spacing ---- */ --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ---- Motion ---- */ --dur-fast: 150ms; --dur-normal: 200ms; --ease-out: cubic-bezier(0,0,.2,1); /* ---- Colour: brand + semantics (Supabase dark) ---- */ --color-bg: #1c1c1c; --color-surface: #1f1f1f; --color-text: #ededed; --color-text-muted: #8b8b8b; --color-primary: #3ecf8e; --color-primary-text:#08130d; /* dark text on the light-green primary (readable) */ --color-accent: #3ecf8e; --primary-400: #5ed99f; --primary-500: #3ecf8e; --primary-600: #24b47e; --primary-700: #24b47e; /* ---- Neutral scale mapped to dark (by how the library uses each step) ---- 100 = subtle/hover bg + table head; 200/700 = borders + dividers; 800 = surfaces/code bg; 900/950 = darkest (tooltip, code). */ --neutral-50: #fafafa; --neutral-100: #242424; --neutral-200: #2e2e2e; --neutral-300: #3a3a3a; --neutral-400: #8b8b8b; --neutral-500: #a0a0a0; --neutral-600: #b4b4b4; --neutral-700: #2e2e2e; --neutral-800: #1f1f1f; --neutral-900: #181818; --neutral-950: #121212; /* ---- Phone-baseline / effect tokens the library falls back on ---- */ --tap-min: 40px; --shadow-md: 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); --focus-ring: 0 0 0 2px rgba(62,207,142,.5); } /* atoms.css — canonical ATOM layer for SiteForge (the web implementation of the * Galvan design-system spec). Implements the atoms in * ~/projects/design-system/catalog.json using SiteForge's existing CSS-variable * contract (so rebrand-over-wire keeps working) plus phone-baseline fallbacks * (--tap-min etc.) so every atom is touch-correct even where the harness doesn't * inject them. * * RULE: sections compose THESE classes. A section must never re-declare an atom's * colour/radius/typography — only layout. See ATOMIZATION.md. * * Var contract: --color-primary/accent/surface/text/text-muted, --primary-*, * --neutral-*, --font-display/body, --text-*, --space-*, --radius-*. * Baseline fallbacks: --tap-min(44px) --dur-fast(150ms) --ease-out. */ /* ==================== Muted text floor ==================== * Muted text is derived from the palette's own ink and ground rather than shipped as a * fixed grey, so it follows a bound site palette, follows the light/dark ground, and * still clears WCAG AA on the tinted panels sections actually put it on. * * Measured (WCAG 2.x, sRGB). The greys this replaces, against the worst light ground * in the library, --neutral-200 (#e5e7eb): * #64748b, the value the preview :root ships 3.84:1 FAIL * #6b7280 (--neutral-500) 3.90:1 FAIL * On --neutral-100 (#f3f4f6) those are 4.32 and 4.39, also under the 4.5:1 bar. That * one grey is the whole of the low-contrast worklist on nine sections. * * 70% ink over ground resolves to #575d6a on a white page and #b2b6bd on a #0f172a * page. Worst case each way: * #575d6a on #e5e7eb 5.34:1 #b2b6bd on #374151 5.06:1 * #575d6a on #f3f4f6 6.00:1 #b2b6bd on #1e293b 7.19:1 * A flat --neutral-600 also clears the light side (6.10:1 on #e5e7eb) but it is a * light-ground value: on a dark page it lands at 1.9:1 inside a --color-surface card. * Deriving it is what keeps both grounds correct from one declaration. * Dark SECTIONS on a light page are handled by .on-dark just below. */ :root { --color-text-muted: color-mix(in srgb, var(--color-text, #0f172a) 70%, var(--color-background, #ffffff)); } /* ==================== Tinted chip ground ==================== * SHARED CAUSE, fixed here rather than in the 24 sections that tripped over it. * A badge, chip, tag, avatar, kbd, menu hover row or table head is a small tinted * patch of the PAGE, and every one of them printed --color-text (ground-relative) on * --neutral-100 / --neutral-200 (absolute, always near-white). On a light page that * reads; on a dark page it is #f8fafc on #e5e7eb, measured at 1.2:1. --neutral-* never * flips, so the ink and its ground were resolving against different theories of where * the component sits. * * Derived the same way --color-text-muted above is: a percentage of the page's own ink * over the ground the chip actually sits on, so the tint follows whichever ground it * lands on and the ink stays correct by construction. * * Mixed over --color-SURFACE, not --color-background, and that distinction was found by * looking at the rendered dark preview rather than at the numbers. Mixing over the page * ground passes the contrast gate, because the ink is still correct, but a chip inside a * card then resolves to almost exactly the card's own colour: the price pills in * app-store-grid, the role badge in card-user and the key caps in search-command all * lost their pill and read as bare text on dark. --color-surface is the raised ground a * chip is normally on, and it is one step off the page either way, so the chip stays * visible whether it sits on a card or directly on the page. * light 7% #0f172a over #f8fafc -> #e7eaed 10% -> #e0e3e7 (was #f3f4f6 / #e5e7eb) * dark 7% #f8fafc over #1e293b -> #2d3748 10% -> #343e4e * Contrast on the dark step: ink #f8fafc 12.2:1, muted #b2b6bd 6.0:1. * 7 and not 5, because two separate reads of the dark previews said the same thing: at * 5% the price pills and the role badge were legible but their pill had almost no fill * against the card. The same delta reads weaker light-on-dark than dark-on-light, so * the number that looked right on the light ground was not enough on the dark one. * .on-dark needs no special case: it sets --color-surface itself, so the same * declaration resolves against --neutral-800 there. */ :root { --color-chip: color-mix(in srgb, var(--color-text, #0f172a) 7%, var(--color-surface, var(--color-background, #ffffff))); --color-chip-strong: color-mix(in srgb, var(--color-text, #0f172a) 10%, var(--color-surface, var(--color-background, #ffffff))); } /* ==================== Brand-tinted patch ==================== * --color-chip one step further in: the patch a section tints with the BRAND rather * than with its own ink. A promo band, an unread row, a featured plan, a quote block. * Every one of them painted --primary-50, which is the brand mixed into WHITE and so * is absolute in exactly the way --neutral-100 was, while the ink on it stayed * ground-relative. Measured on the dark preview: #f8fafc on #eef3fd is 1.1:1 and * #b2b6bd on #eef3fd is 1.8:1. * * Deriving the tint over --color-surface fixes the ink. It also introduces a second * failure, which is why this is a token and not a per-section edit: on the dark ground * --color-surface is already a slate (#1e293b, chroma 29) and 10% of the brand lifts it * to chroma 46, past the detector's 40 threshold, so the patch counts as a COLOURED * background and the page's grey muted step (#b2b6bd, chroma 11) fires gray-on-color. * That was a REGRESSION introduced with the ground-relative tint, not an old bug: * dropdown-notification and modal-pricing measured clean while the tint was absolute. * * So the patch carries its own muted step instead of borrowing the page's. Mixing ink * with the BRAND rather than with the ground keeps the patch's hue in the text, which * is what the rule actually asks for ("use a darker shade of the background colour"), * and it still clears contrast comfortably because it is 70% ink either way: * blue light #162e64 on #e3ebfa 11.1:1 dark #b9cdf7 on #1f2f4d 8.5:1 * lime light #445c1d on #f3fae3 7.0:1 dark #e8fbb0 on #2e3e35 10.2:1 * The muted step measures chroma 62 to 78, so it is never read as grey. Full * --color-text needs no swap: gray-on-color only looks at text between 0.05 and 0.85 * relative luminance, and ink sits outside that on both grounds (0.009 and 0.954). * * --color-tint is exposed separately so a section that already publishes its own * background hook can keep it and still opt into the text context via the class. */ :root { --color-tint: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface, var(--color-background, #ffffff))); } .surface-tint { background: var(--color-tint); --color-text-muted: color-mix(in srgb, var(--color-text, #0f172a) 70%, var(--color-primary)); } /* ==================== Surface context (local token swap) ==================== * Put on any dark section so every atom inside inverts automatically — no * per-section text-colour overrides. This is theme-swap applied locally. */ .on-dark, .surface-dark { --color-text: #fff; --color-text-muted: rgba(255,255,255,.72); --color-surface: var(--neutral-800, #1f2937); color: var(--color-text); /* The derived tints have to be RE-declared here, not just inherited. A custom property containing var() is substituted on the element that declares it, so the --color-chip on :root resolves against the PAGE's ink and surface and descendants inherit that finished colour. Overriding --color-text and --color-surface below it does nothing to a token already resolved above it. The previous pass assumed the opposite ("`.on-dark` needs no special case: it sets --color-surface itself"), and the gate found it the moment a plain .badge landed inside a dark player: chip #e8eaed under #ffffff text, 1.2:1, which is the same absolute-patch-under-relative-ink defect one level further in. Re-declaring makes the tints resolve against this element's swapped values instead. */ --color-chip: color-mix(in srgb, var(--color-text, #0f172a) 7%, var(--color-surface, var(--color-background, #ffffff))); --color-chip-strong: color-mix(in srgb, var(--color-text, #0f172a) 10%, var(--color-surface, var(--color-background, #ffffff))); --color-tint: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface, var(--color-background, #ffffff))); } /* Brand colour used as TEXT steps to --primary-400 on a dark ground, which is what the library's own dark/light usage table already specifies for tags and labels. A mid brand colour on near-black does not clear body contrast: the default #2563eb measures 3.43:1 on --neutral-900 (#111827), its --primary-400 step (#6b95f1) measures 6.08:1. Fills and buttons keep the base primary. Carried on a token rather than a `.on-dark .text--accent` descendant selector, so the atoms keep their single-class weight and a section's own overrides still win. */ .on-dark, .surface-dark { --color-accent-text: var(--primary-400, var(--color-primary)); } /* The fallback when NOTHING resolves the token is INK, not the raw brand. A section that paints no ground of its own carries neither .on-dark nor a dark surface, so --color-accent-text is unset on BOTH grounds and the old `var(--color-primary)` fallback wrote the raw brand as text. Measured: #2563eb on #0f172a is 3.5:1 and #c1fe00 on #ffffff is 1.2:1, against a 4.5:1 bar. --color-text follows the ground (#0f172a light, #f8fafc dark), so ink clears it either way: 16.9:1 and 16.4:1. The fallback has to be a LITERAL colour. Every derived CSS colour (color-mix, oklch, rgb(from ...)) serialises in the detector's Chrome 151 as `color(srgb ...)` or `oklch(...)`, and detect-antipatterns-browser.js parseRgb matches `rgb()` only. So --primary-900 here would clear the gate by making the text UNMEASURABLE rather than by making it readable, which is a false pass. Ink is the fallback, not the answer. The answer is a resolved --color-accent-text: rivet-server injects design.accent_text_on (the brand darkened by the least amount that clears 4.5:1) and this declaration then never applies. See EDITORIAL-STANDARD rule 22. SiteForge's own preview :root does not emit the token yet, which is why the standalone preview renders accent text as ink. */ /* ==================== Motion vocabulary ==================== * Measured off linear.app (LINEAR-DECONSTRUCTION.md, "Motion vocabulary"). The * headline finding is what is ABSENT: across 180 downloaded JS chunks, framer-motion * 0, gsap 0, three 0, WebGL 0, `.animate(` 0 (no WAAPI), getAnimations 0, * startViewTransition 0, useInView 0; and in 351KB of CSS, animation-timeline 0, * view-timeline 0, scroll-timeline 0. The whole motion system is CSS transitions on * state plus CSS keyframe loops, which means almost all of it is reproducible in a * static section with scoped CSS and no JS. * * The 18 curves are a complete Penner set, copied verbatim. Counted in their CSS, * --ease-out-quad dominates by an order of magnitude; in-out-quint, in-out-expo, * in-out-circ, in-circ and in-expo are declared and never used on those pages. The * house style is EASE-OUT, ALWAYS, and --ease-out-quad is the house curve. The set * ships whole anyway because it is 18 inert declarations and it stops the next * author inventing a nineteenth cubic-bezier by hand. * * NOT a second vocabulary: ~/projects/design-system/tokens/tokens-motion.css already * defines --ease-standard / --ease-in / --ease-out / --ease-emphasized / * --ease-linear, --dur-instant/fast/normal/slow/signal and --press-scale. Those names * are left alone and are still what the atoms below consume; these are 18 NEW names * that do not exist upstream. */ :root { --ease-in-quad: cubic-bezier(.55,.085,.68,.53); --ease-out-quad: cubic-bezier(.25,.46,.45,.94); --ease-in-cubic: cubic-bezier(.55,.055,.675,.19); --ease-out-cubic: cubic-bezier(.215,.61,.355,1); --ease-in-quart: cubic-bezier(.895,.03,.685,.22); --ease-out-quart: cubic-bezier(.165,.84,.44,1); --ease-in-quint: cubic-bezier(.755,.05,.855,.06); --ease-out-quint: cubic-bezier(.23,1,.32,1); --ease-in-expo: cubic-bezier(.95,.05,.795,.035); --ease-out-expo: cubic-bezier(.19,1,.22,1); --ease-in-circ: cubic-bezier(.6,.04,.98,.335); --ease-out-circ: cubic-bezier(.075,.82,.165,1); --ease-in-out-quad: cubic-bezier(.455,.03,.515,.955); --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1); --ease-in-out-quart: cubic-bezier(.77,0,.175,1); --ease-in-out-quint: cubic-bezier(.86,0,.07,1); --ease-in-out-expo: cubic-bezier(1,0,0,1); --ease-in-out-circ: cubic-bezier(.785,.135,.15,.86); } /* ==================== The house hover ==================== * 0.16s with --ease-out-quad is their default interaction transition: of 79 * transition declarations, 26 are 0.16s, more than twice the next duration. The * canonical pattern, repeated verbatim across their components: * * transition: filter .16s var(--ease-out-quad), transform .16s var(--ease-out-quad); * :hover { filter: brightness(1.4); } * :active { transform: scale(.97); } * * They change BRIGHTNESS, not colour. There is no hover colour swap anywhere in the * sampled CSS, which means one declaration replaces a per-variant hover colour for * every brand and both grounds. * * Applied here to the FILLED atoms only, and that is a deliberate deviation with a * reason. Brightening a fill lifts it on any ground. Brightening dark ink on paper * does not: it washes the text toward the page and REMOVES the affordance instead of * adding one. linear.app is an all-dark site, so the question never came up there. * The transparent variants (.btn--secondary, .btn--ghost) therefore keep their * background tint on hover, which is the same "no hover colour on the ink" idea * expressed the way a light ground needs. * * The :active scale sits inside prefers-reduced-motion: no-preference, per the * inversion below. * * KNOWN, and verified by hovering the real button rather than reasoning about it: * brightness multiplies and then CLAMPS per channel, so a brand that already sits at * a channel ceiling shifts hue instead of just lifting. Galvan's lime #c1fe00 has * green at 254, so x1.4 lands on (255,255,0), pure yellow. It reads unmistakably as * "lit" and the dark button text stays at 18.9:1, but it is a hue shift, not a * brightening. linear.app's indigo #5e6ad2 has no channel near the ceiling and never * shows this. If the yellow is unwanted, the document also measures 1.3 and 110% in * their CSS; at 110% the lime lifts to (212,255,0) and stays lime. 1.4 is the * canonical value of the 26 uses, so it is what ships until someone decides * otherwise. */ .hover-bright { transition: filter .16s var(--ease-out-quad), transform .16s var(--ease-out-quad); } .hover-bright:hover { filter: brightness(1.4); } @media (prefers-reduced-motion: no-preference) { .hover-bright:active { transform: scale(var(--press-scale, .97)); } } /* ============================ Button ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm, .5rem); min-height: var(--tap-min, 44px); padding: var(--space-sm, .5rem) calc(var(--space-lg, 1.5rem) + .25rem); font-family: var(--font-body); font-size: var(--text-base, 1rem); font-weight: 600; line-height: 1.2; border: 1px solid transparent; border-radius: var(--radius-md, 12px); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast, 150ms) var(--ease-out, ease), border-color var(--dur-fast, 150ms) var(--ease-out, ease), transform var(--dur-instant, 100ms) var(--ease-out, ease); } .btn:active { transform: scale(var(--press-scale, .97)); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent); } /* The house hover: brightness, not a colour swap. --primary-700 was a second brand step maintained purely so a filled button had somewhere to go on hover. */ .btn--primary { background: var(--color-primary); color: var(--color-primary-text, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); transition: filter .16s var(--ease-out-quad), transform var(--dur-instant, 100ms) var(--ease-out, ease); } .btn--primary:hover { filter: brightness(1.4); } /* The RING takes the resolved accent too. A saturated 1px brand outline on paper is the neon look: lime at 1.15:1 against the ground is not a visible edge, it is a glow. The fill keeps the true brand; an outline is closer to text than to a fill. */ .btn--secondary { background: transparent; color: var(--color-accent-text, var(--color-primary)); border-color: var(--color-accent-text, var(--color-primary)); } .btn--secondary:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .btn--ghost { background: transparent; color: var(--color-text); } .btn--ghost:hover { background: var(--neutral-100, rgba(0,0,0,.05)); } .btn--destructive { background: #dc2626; color: #fff; } .btn--destructive:hover { background: #b91c1c; } .btn--icon { padding: var(--space-sm, .5rem); min-width: var(--tap-min, 44px); border-radius: var(--radius-full, 9999px); } .btn--sm { min-height: 36px; padding: var(--space-xs, .25rem) var(--space-md, 1rem); font-size: var(--text-sm, .875rem); } .btn--lg { min-height: var(--tap-primary, 56px); padding: var(--space-md, 1rem) var(--space-xl, 2rem); font-size: var(--text-lg, 1.125rem); } .btn--block { display: flex; width: 100%; } /* ======================== Icon button ========================= */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min, 44px); height: var(--tap-min, 44px); border: none; background: transparent; color: var(--color-text); border-radius: var(--radius-full, 9999px); cursor: pointer; transition: background var(--dur-fast, 150ms) var(--ease-out, ease); } .icon-btn:hover { background: var(--neutral-100, rgba(0,0,0,.05)); } .icon-btn--danger { color: #dc2626; } /* ========================== Inputs =========================== */ .input, .textarea, .select { width: 100%; min-height: var(--tap-min, 44px); padding: var(--space-sm, .5rem) var(--space-md, 1rem); font-family: var(--font-body); font-size: var(--text-base, 1rem); color: var(--color-text); background: var(--color-surface, #fff); border: 1px solid var(--neutral-200, #e5e7eb); border-radius: var(--radius-md, 8px); transition: border-color var(--dur-fast, 150ms) var(--ease-out, ease); } .input::placeholder, .textarea::placeholder { color: var(--color-text-muted); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); } .textarea { min-height: calc(var(--tap-min, 44px) * 2); resize: vertical; line-height: 1.5; } .select { appearance: none; padding-right: var(--space-xl, 2rem); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1rem center, right .75rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #dc2626; } /* ==================== Checkbox / radio / switch ==================== */ .checkbox, .radio { width: 20px; height: 20px; min-width: 20px; accent-color: var(--color-primary); cursor: pointer; } .switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 26px; cursor: pointer; } .switch input { position: absolute; opacity: 0; } .switch .switch__track { width: 44px; height: 26px; background: var(--neutral-200, #e5e7eb); border-radius: var(--radius-full, 9999px); transition: background var(--dur-fast, 150ms) var(--ease-out, ease); } .switch .switch__thumb { position: absolute; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--dur-fast, 150ms) var(--ease-out, ease); } .switch input:checked + .switch__track { background: var(--color-primary); } .switch input:checked ~ .switch__thumb { transform: translateX(18px); } /* ========================== Badge / chip / tag ========================== */ .badge { display: inline-flex; align-items: center; gap: var(--space-xs, .25rem); padding: 2px var(--space-sm, .5rem); font-size: var(--text-xs, .75rem); font-weight: 600; line-height: 1.4; border-radius: var(--radius-full, 9999px); background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text); } .badge--primary { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-accent-text, var(--color-text, #0f172a)); } .badge--success { background: #dcfce7; color: #166534; } .badge--warning { background: #fef3c7; color: #92400e; } .badge--danger { background: #fee2e2; color: #991b1b; } .chip { display: inline-flex; align-items: center; gap: var(--space-xs, .25rem); min-height: 32px; padding: var(--space-xs, .25rem) var(--space-md, 1rem); font-size: var(--text-sm, .875rem); border-radius: var(--radius-full, 9999px); background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text); cursor: pointer; border: 1px solid transparent; transition: all var(--dur-fast, 150ms) var(--ease-out, ease); } /* The other brand FILL in the atom layer, so it takes the same house hover. */ .chip--selected { background: var(--color-primary); color: var(--color-primary-text, #0b0b0b); transition: filter .16s var(--ease-out-quad); } .chip--selected:hover { filter: brightness(1.4); } .chip__remove { display: inline-flex; cursor: pointer; opacity: .7; } .tag { display: inline-block; padding: 1px var(--space-sm, .5rem); font-size: var(--text-xs, .75rem); border-radius: var(--radius-sm, 4px); background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text-muted); } /* ========================== Avatar ========================== */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full, 9999px); overflow: hidden; background: var(--color-chip-strong, var(--neutral-200, #e5e7eb)); color: var(--color-text); font-size: var(--text-sm, .875rem); font-weight: 600; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs, .75rem); } .avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg, 1.125rem); } /* ==================== Tracking as a function of SIZE ==================== * Letter-spacing is a computed function of font size, not a per-element guess. * Measured off linear.app and verified against RENDERED values, not read off their * token list (see LINEAR-DECONSTRUCTION.md, "Type scale"): * 72px renders -1.584px (72 x -0.022) 48px -1.056px 32px -0.704px * 24px renders -0.288px (24 x -0.012) * 15px renders -0.165px (-0.011) 14px -0.182px (-0.013) 13px -0.13px (-0.010) * Shape of the rule: * >= 32px -0.022em * 20px to 24px -0.012em * 13px to 15px -0.010em to -0.013em * 12px and 17px 0 * So tracking tightens as size climbs and relaxes back to zero at the smallest UI * sizes. The old declaration ran a flat -0.02em on .heading with -0.03em on h1 and * -0.025em on h2, so a 20px .heading--h4 (1058 uses, the most-used heading in the * library) inherited DISPLAY tracking: -0.4px per gap on a size Linear sets at * -0.24px, and nothing anywhere on their site is tighter than -0.022em. -0.03em is * off the top of the measured range entirely. * Exposed as tokens so a section that sizes its own heading can pick the band that * matches the size it actually rendered, instead of guessing a new number. */ :root { --track-display: -0.022em; /* >= 32px */ --track-title: -0.012em; /* 20px to 24px */ --track-body: -0.011em; /* 13px to 16px; measured at 15px */ } /* ========================== Typography atoms ========================== */ .text { font-family: var(--font-body); font-size: var(--text-base, 1rem); color: var(--color-text); line-height: 1.6; } .text--muted { color: var(--color-text-muted); } .text--lead { font-size: var(--text-lg, 1.125rem); line-height: 1.6; } .text--caption { font-size: var(--text-sm, .875rem); color: var(--color-text-muted); } /* Premium type: tight, confident headings (negative tracking + tight leading). The BASE carries the body band, not the display band, because a bare `.heading` with no size modifier is whatever size the section gave it and in this library that is 18px. Every size modifier below restates its own band at equal specificity and later in the file, so the modifier always wins. */ .heading { font-family: var(--font-display); color: var(--color-text); line-height: 1.1; letter-spacing: var(--track-body); font-weight: 700; } /* Leading tightens as size grows: the measured reference build runs 0.94 on its 150px hero, Klim runs 1.0 on 218px. At 1.05 a large heading reads loose and timid. */ .heading--h1 { font-size: var(--text-display, 3rem); line-height: 0.95; letter-spacing: var(--track-display); font-weight: 800; } .heading--h2 { font-size: var(--text-3xl, 2rem); line-height: 1.02; letter-spacing: var(--track-display); } .heading--h3 { font-size: var(--text-2xl, 1.5rem); font-weight: 700; letter-spacing: var(--track-title); } .heading--h4 { font-size: var(--text-xl, 1.25rem); font-weight: 700; letter-spacing: var(--track-title); } .link { color: var(--color-accent-text, var(--color-primary)); text-decoration: none; } .link:hover { text-decoration: underline; } .link--muted { color: var(--color-text-muted); } /* ========================== Divider ========================== */ .divider { border: none; border-top: 1px solid var(--neutral-200, #e5e7eb); margin: var(--space-lg, 1.5rem) 0; } .divider--vertical { border-top: none; border-left: 1px solid var(--neutral-200, #e5e7eb); margin: 0 var(--space-lg, 1.5rem); align-self: stretch; } /* ==================== Spinner / progress / skeleton ==================== */ .spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--neutral-200, #e5e7eb); border-top-color: var(--color-primary); border-radius: 50%; } @keyframes sf-spin { to { transform: rotate(360deg); } } /* Reduced motion by INVERSION. Every keyframe on linear.app sits inside prefers-reduced-motion: no-preference rather than being switched off inside `reduce`, so the DEFAULT is the end state and reduced motion needs no override at all. That is the whole trick: a rule that has to be remembered somewhere else is a rule that gets forgotten, and the failure is silent. The ring keeps its brand- coloured top border either way, so it still reads as "working" when it is still. */ @media (prefers-reduced-motion: no-preference) { .spinner { animation: sf-spin .8s linear infinite; } } .progress { width: 100%; height: 8px; background: var(--neutral-200, #e5e7eb); border-radius: var(--radius-full, 9999px); overflow: hidden; } /* No transition on width: the library ships no JS and fills are server-rendered, so it never animated anything, while animating width causes layout thrash (the impeccable layout-transition rule flagged it on 100% of the library). A consumer that does animate a fill should do it with transform: scaleX() instead. */ .progress__fill { height: 100%; background: var(--color-primary); border-radius: inherit; } .skeleton { position: relative; overflow: hidden; background: var(--neutral-100, #f3f4f6); border-radius: var(--radius-md, 8px); } .skeleton--text { height: 1em; border-radius: var(--radius-sm, 4px); } .skeleton--circle { border-radius: 50%; } /* ========================== Tooltip ========================== */ .tooltip { position: relative; display: inline-flex; } .tooltip__bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: var(--space-xs, .25rem) var(--space-sm, .5rem); font-size: var(--text-xs, .75rem); color: #fff; background: var(--neutral-900, #111827); border-radius: var(--radius-sm, 4px); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast, 150ms) var(--ease-out, ease); } .tooltip:hover .tooltip__bubble, .tooltip:focus-within .tooltip__bubble { opacity: 1; } /* ========================== Overline / eyebrow ========================== */ /* Uppercase letter-spaced label above titles. Add .text--accent for brand colour. */ .text--overline { font-size: var(--text-xs, .75rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .text--accent { color: var(--color-accent-text, var(--color-text, #0f172a)); } .text--unit { font-size: .7em; font-weight: 500; color: var(--color-text-muted); } /* ========================== Blockquote (large light quote) ========================== */ /* --font-accent, not --font-display: a pull-quote IS the "rare editorial statement" the accent face exists for. --font-accent falls back to --font-display, so a site that sets no accent face is unchanged. */ .blockquote { font-family: var(--font-accent, var(--font-display)); font-size: var(--text-2xl, 1.5rem); font-weight: 400; font-style: italic; line-height: 1.4; color: var(--color-text); } /* ========================== Extra atom variants ========================== */ .chip--outline { background: transparent; border-color: var(--color-chip-strong, var(--neutral-200, #e5e7eb)); } .chip--outline.chip--selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text, #0b0b0b); } .avatar--square { border-radius: var(--radius-md, 8px); } /* ========================== More atoms (backlog consolidation) ========================== */ .text--strong { font-weight: 600; } .heading--h5 { font-size: var(--text-base, 1rem); font-weight: 700; line-height: 1.3; letter-spacing: var(--track-body); } .text--overline-lg { font-size: var(--text-sm, .875rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 1px var(--space-xs, .25rem); font-family: var(--font-mono, monospace); font-size: var(--text-xs, .75rem); color: var(--color-text); background: var(--color-chip, var(--neutral-100, #f3f4f6)); border: 1px solid var(--color-chip-strong, var(--neutral-200, #e5e7eb)); border-bottom-width: 2px; border-radius: var(--radius-sm, 4px); } /* Range / slider */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--radius-full, 9999px); background: var(--neutral-200, #e5e7eb); outline: none; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--color-primary); cursor: pointer; } .range::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--color-primary); cursor: pointer; } /* Status glyph (check/cross in a tinted round holder) */ .status-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; } .status-dot > svg { width: 60%; height: 60%; } .status-dot--success { background: #dcfce7; color: #166534; } .status-dot--danger { background: #fee2e2; color: #991b1b; } .status-dot--muted { background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text-muted); } /* Circular / radial progress (drive with --value: 0..100) */ .progress-ring { --value: 0; display: inline-grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--color-primary) calc(var(--value) * 1%), var(--neutral-200, #e5e7eb) 0); } .progress-ring::before { content: ""; grid-area: 1 / 1; width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--color-surface, #fff); } .progress-ring__label { grid-area: 1 / 1; font-weight: 700; font-size: var(--text-sm, .875rem); } /* ========================== More variants (admin gaps) ========================== */ .badge--info { background: #dbeafe; color: #1e40af; } .link--danger { color: #ef4444; } .link--danger:hover { color: #dc2626; } .text--warning { color: #f59e0b; } .text--danger { color: #ef4444; } /* molecules.css — canonical MOLECULE layer. Composes atoms; adds layout + minimal glue * only, never restyles the atoms inside it. Implements the molecules in * ~/projects/design-system/catalog.json. Load after atoms.css. See ATOMIZATION.md. */ /* ========================== Field ========================== */ .field { display: flex; flex-direction: column; gap: var(--space-xs, .25rem); } .field__label { font-size: var(--text-sm, .875rem); font-weight: 600; color: var(--color-text); } .field__label .req { color: #dc2626; } .field__help { font-size: var(--text-xs, .75rem); color: var(--color-text-muted); } .field__error { font-size: var(--text-xs, .75rem); color: #dc2626; } /* ========================== Card ========================== */ .card { display: flex; flex-direction: column; background: var(--color-surface, #fff); border: 1px solid var(--color-chip-strong, var(--neutral-200, #e5e7eb)); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-md, 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -6px rgba(0,0,0,.10)); overflow: hidden; } .card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .card__body { display: flex; flex-direction: column; gap: var(--space-sm, .5rem); padding: var(--space-lg, 1.5rem); } .card__actions { display: flex; gap: var(--space-sm, .5rem); padding: 0 var(--space-lg, 1.5rem) var(--space-lg, 1.5rem); margin-top: auto; } .card--feature { text-align: center; align-items: center; } .card--horizontal { flex-direction: row; } .card--horizontal .card__media { width: 40%; aspect-ratio: auto; } .card--overlay { position: relative; color: #fff; } .card--overlay .card__body { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); } /* Clickable card: whole card is an affordance (pair with an wrap or onclick) */ .card--link { cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--dur-fast, 150ms) var(--ease-out, ease), transform var(--dur-fast, 150ms) var(--ease-out, ease); } .card--link:hover { border-color: var(--color-primary); } .card--link:active { transform: scale(.995); } /* ========================== List item ========================== */ .list-item { display: flex; align-items: center; gap: var(--space-md, 1rem); min-height: var(--tap-min, 44px); padding: var(--space-sm, .5rem) var(--space-md, 1rem); } .list-item__leading { flex-shrink: 0; } .list-item__content { display: flex; flex-direction: column; min-width: 0; flex: 1; } .list-item__title { font-weight: 600; color: var(--color-text); } .list-item__subtitle { font-size: var(--text-sm, .875rem); color: var(--color-text-muted); } .list-item__trailing { flex-shrink: 0; margin-left: auto; color: var(--color-text-muted); } /* ========================== Menu item ========================== */ /* Atoms and molecules that are legitimately applied to a