/* ============================================================ Lara Kroeker Interactive — Design Tokens ============================================================ Reference for all LKI-branded work. Source of truth: - Figma "Unser Interface" brand definition frame - Primary logo: assets-logo/lki-logo.svg ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;500;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ----------------------------------------------------------- SURFACES — the core trio that anchors every layout. Near-black on soft neutral is the default page. Pure white is reserved for cards, surfaces, and pull-quotes. ----------------------------------------------------------- */ --lki-dark: #101E2A; /* near-black, primary text + surfaces */ --lki-white: #FFFFFF; /* pure white, cards + contrast */ --lki-neutral: #F6F6F5; /* off-white, default page canvas */ /* ----------------------------------------------------------- BRAND COLOURS — the green "signal" palette. Mint is the hero accent used on the logo pencil and in illustrations. Secondary/lime are supporting. Text green is reserved for editorial accents. ----------------------------------------------------------- */ /* --lki-green-secondary (apple, #A6D67C) retired August 16, 2026. It was H92 against lime's H94, two degrees apart, so it read as a slightly duller lime rather than a colour of its own. It was defined but never used. */ --lki-green-primary: #7FD099; /* mint, hero accent */ --lki-green-lime: #BBF490; /* soft lime, background wash */ /* Pale lime retained as a reserved tint. A general-purpose accent section was tested and rejected in favour of the theme's deliberate full-lime statement band, so the public site does not currently consume this. */ --lki-green-light: #E4FBD3; /* reserved pale lime tint */ --lki-green-deep: #00AB8B; /* teal-green, icon strokes and editorial accents */ /* --lki-green-text (#2F4858) retired August 16, 2026. It was H203 against Grey 1's H208, five degrees apart, so it was a second name for the slate rather than a colour. Its replacement turned out to be --lki-teal, which already existed at #00778C. Never used. */ /* ----------------------------------------------------------- GREYS — a five-step scale, numbered dark to light. Tinted toward the brand hue (~208°) rather than neutral, and desaturating as they lighten. That is what makes them read as LKI greys rather than as default grey. Renumbered August 16, 2026, 139 references across 25 files. The scale previously ran 1, 2, 3 with a 55-point lightness gap between 1 and 2 and nothing usable for body text in between. Values reset the same day to an even ramp interpolated from Grey 1. The hand-picked set had a 0°-hue final step and a half-size last interval; these hold 208° throughout and step evenly in perceptual lightness (L*): L* 23.9 → 40.6 → 56.3 → 71.6 → 86.0 steps +16.7 +15.7 +15.3 +14.4 ⚠️ Contrast is against white and governs text use. Grey 4 and 5 are surfaces and borders. Never set text in them. ----------------------------------------------------------- */ --lki-grey-1: #203B53; /* any text — 11.59:1 on white */ /* L*24 · 11.6:1 · any text */ --lki-grey-2: #4D6275; /* body text — 6.33:1 on white */ /* L*41 · 6.3:1 · body text, passes AA */ --lki-grey-3: #798998; /* LARGE TEXT ONLY — 3.59:1: passes AA large (3.0), fails body (4.5) */ /* L*56 · 3.6:1 · large text only */ --lki-grey-4: #A6B1BA; /* fills and dividers — 2.18:1, never text */ /* L*72 · 2.2:1 · fills and dividers, no text */ --lki-grey-5: #D2D8DD; /* hairline borders — 1.44:1, never text */ /* L*86 · 1.4:1 · hairline borders */ /* ----------------------------------------------------------- PINK / CTA — the attention palette. Regular marks links, arrows, and button interaction; Dark is pressed; Light is a reserved wash. ----------------------------------------------------------- */ --lki-cta: #FF6B9D; /* links, arrows, and button interaction */ --lki-cta-dark: #FC2E7C; /* CTA hover/pressed */ --lki-cta-light: #F8E3E9; /* reserved pink wash */ /* ----------------------------------------------------------- ADDITIONAL COLOURS — used sparingly for illustration, editorial graphics, restrained social work, or product-tier distinctions. They support the brand palette but do not replace it and are not everyday interface colours. ----------------------------------------------------------- */ --lki-yellow: #FEE181; /* warm yellow */ --lki-teal: #00778C; /* deep teal */ --lki-apricot: #FC9D5D; /* apricot, illustration only */ /* ----------------------------------------------------------- SEMANTIC COLOURS — colour used as meaning, not as style. Red says something failed. Blue says this is information. The person reads the meaning before they read the design, which is why these stay conventional rather than expressive. A purple error is a design decision paid for in comprehension. Not brand colours. They do not change when the brand changes, and they are the one group that carries across a client build more or less as-is. ----------------------------------------------------------- */ --lki-error: #C13515; /* 5.54:1 on white — failure / destructive feedback */ --lki-success: #18794E; /* 5.41:1 on white — completed / confirmed */ --lki-warning: #8A5A00; /* 5.93:1 on white — caution / needs attention */ --lki-info: #428BFF; /* 5.13:1 on dark; 3.30:1 on white — icon/large text only on white */ /* ----------------------------------------------------------- SEMANTIC ALIASES — a colour's job, not its value. ⚠️ Different idea from SEMANTIC COLOURS above, despite sharing the word. That group is about meaning. This one is about indirection. Everything above this line is a primitive: --lki-grey-5 is a value, and the name says only what it looks like. Everything below is a role: --border says what the colour is FOR, and points at a primitive to get it. This is the layer that makes the file a template. Product code references roles only, so rebranding is one block of edits at the top and nothing at all in the theme. Names stay identical across clients; only the values they point at move. Rule: if you are writing a colour in a template or stylesheet and a role name exists for it, use the role. Reach for a primitive only when no role fits, which usually means a role is missing. ----------------------------------------------------------- */ --bg: var(--lki-neutral); --bg-raised: var(--lki-white); --bg-inverse: var(--lki-dark); /* Reserved counterpart to --lki-green-light. No current public-site component consumes this role. */ --bg-accent: var(--lki-green-light); --fg: var(--lki-dark); --fg-muted: var(--lki-grey-1); /* ⚠️ Pointed at Grey 4 until August 16, 2026, which the GREYS block above forbids for text ("Grey 4 and 5 are surfaces and borders. Never set text in them"). A foreground role has to resolve to a text-safe grey, so this is Grey 2, the lightest step that still passes AA. Nothing referenced it at the time, so the move cost nothing. */ --fg-subtle: var(--lki-grey-2); --fg-on-dark: var(--lki-neutral); /* full-opacity text on dark surfaces */ --fg-on-dark-muted: rgba(246, 246, 245, 0.65); /* body text on dark surfaces */ --fg-on-dark-subtle: rgba(246, 246, 245, 0.45); /* secondary / caption on dark */ --accent: var(--lki-green-primary); --accent-deep: var(--lki-green-deep); /* Added August 24, 2026. A link on a dark surface (guidelines page hero meta) was reaching for --lki-green-lime directly on hover because no role existed for it — same gap --cta-hover already closes for pink. */ --accent-hover: var(--lki-green-lime); --cta: var(--lki-cta); --cta-hover: var(--lki-cta-dark); --border: var(--lki-grey-5); --border-strong: var(--lki-grey-4); /* Fills — a surface that is neither the page nor a raised card. Image wells before the image loads, tinted callouts, placeholder blocks. */ --fill-subtle: var(--lki-grey-5); /* pale block fill */ --fill: var(--lki-grey-4); /* a step deeper, so a pair reads as a pair */ --fill-strong: var(--lki-grey-1); /* dark backdrop behind a photo */ /* On-dark counterparts. A dark section cannot use --border or --bg-raised: a solid pale hairline reads as a drawn line rather than as an edge. These are the inverse set, translucent so they pick up whatever sits behind them. Added August 16, 2026. Before this the theme carried ten hand-picked opacities of the neutral, .07 through .75, none of them named, which is how one edge ended up three different strengths on three sections. */ --border-on-dark: rgba(246, 246, 245, 0.16); /* hairline on dark */ --border-on-dark-strong: rgba(246, 246, 245, 0.28); /* outlined pill on dark */ --bg-raised-on-dark: rgba(255, 255, 255, 0.10); /* raised fill on dark */ --bg-raised-on-dark-hover: rgba(255, 255, 255, 0.18); /* Reserved dark hairline for a future pale accent surface. */ --border-on-accent: rgba(16, 30, 42, 0.18); /* Scrims — a translucent surface laid over content, for the sticky nav and the mobile drawer. */ --bg-scrim: rgba(246, 246, 245, 0.93); --bg-scrim-solid: rgba(246, 246, 245, 0.97); --bg-hover-tint: rgba( 16, 30, 42, 0.04); /* hover wash on a light surface */ /* Hero scrim — the three-stop wash that keeps headline text legible over a photograph. Was pasted into seven templates as a literal rgba() triple, so a change to the dark meant seven edits. Consumed via .hero__bg--photo. */ --scrim-hero-strong: rgba(16, 30, 42, 0.97); /* bottom, under the text */ --scrim-hero-mid: rgba(16, 30, 42, 0.55); /* midpoint */ --scrim-hero-soft: rgba(16, 30, 42, 0.20); /* top, image reads through */ --scrim-hero-dense: rgba(16, 30, 42, 0.78); /* denser midpoint, for a busy image */ /* ----------------------------------------------------------- TYPE — Inter Light (300), Medium (500) and Black (900); Instrument Serif italic is the editorial accent. JetBrains Mono substitutes for Menlo in code/annotations. ⚠️ 500 added August 16, 2026. The scale was 300 and 900 only, and the jump between them is deliberate: it is most of why the type reads sharp rather than generic, and nothing should erode it. 500 exists for one narrow job, a callout that sits above body copy but below a heading, where 300 disappeared and 900 shouted. Reach for 300 or 900 first. If a third weight starts showing up in ordinary prose, the ladder has drifted and this note is the thing being ignored. ----------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: "Instrument Serif", "Georgia", serif; --font-mono: "JetBrains Mono", "Menlo", ui-monospace, monospace; /* Weight scale. Six names, three real weights: 300, 500, 900. Medium and semibold both resolve to 500, light and regular to 300, bold and black to 900. The duplicate names exist so a template written against a conventional six-step ladder still lands on this one. Before August 16, 2026 medium and semibold resolved to 300 and 900, so the ladder had no middle at all. Both were unreferenced at the time of the change, so repointing them altered nothing already built. */ /* Inter is loaded at 300, 500 and 900 only (see the @import above), so these three ARE the type system's weights. --fw-regular (300), --fw-semibold (500) and --fw-bold (900) existed as conventional-name aliases onto the same three values, had zero call sites, and are removed Aug 30, 2026 — two names for one weight is how a system starts disagreeing with itself. */ --fw-light: 300; --fw-medium: 500; --fw-black: 900; /* ----------------------------------------------------------- TYPE SCALE — ten steps. Headings are fluid, UI text is fixed. ⚠️ Rewritten August 16, 2026. The previous scale was ten fixed px sizes that nothing in the theme referenced: the site ran on its own hand-written sizes, thirty-three distinct values against a ten-step spec, so the scale documented an intention rather than the site. These values are the site's real design, rationalised and named. Two rules decide fluid vs fixed: Headings are fluid, because a hero that works at 1440 is oversized on a phone. They interpolate between 480px and 1440px viewports. UI text is fixed, because body copy that grows with the window gets harder to read, not easier. The reader's own font-size setting is what should move it, and rem does that. ⚠️ Every fluid step carries a rem term, never bare vw. `3.2vw` alone ignores the browser's font-size setting entirely, which fails WCAG 1.4.4: a reader who sets 200% text sees no change. The rem term is what keeps the step responsive to both viewport and user. The old hand-written clamps in the theme were all bare vw. Line heights are unitless so they scale with the size. The old ones were px, which silently breaks the moment a size becomes fluid. */ --type-display: clamp(3rem, 1.4rem + 5.3333vw, 6.2rem); /* 48 → 99 hero */ --type-h1: clamp(2.6rem, 1.5rem + 3.6667vw, 4.8rem); /* 42 → 77 page titles */ --type-h2: clamp(1.9rem, 1.4rem + 1.6667vw, 2.9rem); /* 30 → 46 sections */ --type-h3: clamp(1.375rem, 1.1875rem + 0.625vw, 1.75rem); /* 22 → 28 prose h2 */ --type-h4: clamp(1.125rem, 1.0625rem + 0.2083vw, 1.25rem); /* 18 → 20 components */ --type-lead: clamp(1.25rem, 1.1875rem + 0.2083vw, 1.375rem);/* 20 → 22 big leads */ --type-body: 1rem; /* 16 — default prose */ --type-small: 0.875rem; /* 14 — captions, buttons, list items */ --type-micro: 0.75rem; /* 12 — uppercase labels and meta */ --type-display-lh: 1.02; --type-h1-lh: 1.06; --type-h2-lh: 1.08; --type-h3-lh: 1.25; --type-h4-lh: 1.35; --type-lead-lh: 1.55; --type-body-lh: 1.75; /* generous: this carries long-form reading */ --type-small-lh: 1.6; --type-micro-lh: 1.4; /* Optical tracking. Large type needs negative tracking to stop looking loose; uppercase micro labels need positive or they set as a block. */ --track-display: -0.028em; --track-heading: -0.02em; --track-tight: -0.01em; --track-micro: 0.18em; /* ----------------------------------------------------------- SPACING — a 4px grid, fine at the small end and widening late. ⚠️ Rewritten August 16, 2026. The previous ladder was ten steps (4, 8, 12, 16, 24, 32, 48, 64, 80, 120) and nothing referenced it. The theme used 39 distinct values, and the jumps the scale left out were the ones real layout needs most: there was nothing between 16 and 24, nothing between 32 and 48, and no step at 20, 40 or 56, all of which the site used heavily. A scale that a working layout has to step outside of is not a constraint, it is a suggestion. Named by value, not by index. --sp-24 is 24px and needs no lookup; --sp-5 meant 24px only if you had the file open. That matters more than usual here, because these files get handed to clients and read by tooling as often as by a person. Steps double early and widen late, so component padding stays fine-grained while the space between sections stays generous. ----------------------------------------------------------- */ --sp-2: 2px; /* hairline gaps, optical nudges */ --sp-4: 4px; --sp-8: 8px; /* inside components */ --sp-12: 12px; /* label to field */ --sp-16: 16px; /* paragraph rhythm */ --sp-20: 20px; --sp-24: 24px; /* card padding */ --sp-32: 32px; /* grid gutters */ --sp-40: 40px; --sp-48: 48px; /* between blocks */ --sp-56: 56px; --sp-64: 64px; /* large card padding */ --sp-80: 80px; /* section padding */ --sp-96: 96px; --sp-120: 120px; /* section breaks */ /* ----------------------------------------------------------- RADII — capsule buttons (999) are a core signature. ----------------------------------------------------------- */ --radius-none: 0; --radius-sm: 6px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px; /* ----------------------------------------------------------- ELEVATION — low, soft, warm. Shadows are quiet. ----------------------------------------------------------- */ /* Elevation is flat-first. xs is the lift used by the public theme; the inset hairline remains available for pale specimen and control edges. Do not invent md/lg. */ --shadow-xs: 0 1px 2px rgba(13, 10, 44, 0.04); --shadow-inset-hairline: inset 0 -1px 0 rgba(16, 30, 42, 0.08); /* ----------------------------------------------------------- MOTION — calm, confident, never bouncy. ----------------------------------------------------------- */ --ease-standard: cubic-bezier(0.32, 0.72, 0.24, 1); --ease-out: cubic-bezier(0.22, 0.8, 0.36, 1); --dur-fast: 140ms; --dur-std: 220ms; --dur-slow: 400ms; } /* ============================================================ SEMANTIC TYPE STYLES — drop on any element. ============================================================ These and the theme's own classes (.display-h2, .body-copy…) read the same tokens, so the two cannot drift. Use these on a new build; an existing theme keeps its own names and still lands on this scale. ============================================================ */ .lki-display, .lki-h1, .lki-h2, .lki-h3, .lki-h4, .lki-lead, .lki-body-lg, .lki-body, .lki-small, .lki-micro, .lki-accent, .lki-mono { font-family: var(--font-sans); color: var(--fg); margin: 0; } .lki-display { font-size: var(--type-display); line-height: var(--type-display-lh); letter-spacing: var(--track-display); font-weight: var(--fw-black); } .lki-h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); letter-spacing: var(--track-display); font-weight: var(--fw-black); } .lki-h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); letter-spacing: var(--track-display); font-weight: var(--fw-black); } .lki-h3 { font-size: var(--type-h3); line-height: var(--type-h3-lh); letter-spacing: var(--track-heading); font-weight: var(--fw-black); } .lki-h4 { font-size: var(--type-h4); line-height: var(--type-h4-lh); letter-spacing: var(--track-tight); font-weight: var(--fw-black); } .lki-lead { font-size: var(--type-lead); line-height: var(--type-lead-lh); font-weight: var(--fw-light); } /* Kept under its original name so existing content keeps working; it now resolves to --type-lead. body-lg was merged into lead Aug 30, 2026. */ .lki-body-lg { font-size: var(--type-lead); line-height: var(--type-lead-lh); font-weight: var(--fw-light); } .lki-body { font-size: var(--type-body); line-height: var(--type-body-lh); font-weight: var(--fw-light); } .lki-small { font-size: var(--type-small); line-height: var(--type-small-lh); font-weight: var(--fw-light); } .lki-body-bold { font-size: var(--type-body); line-height: var(--type-body-lh); font-weight: var(--fw-black); } .lki-micro { font-size: var(--type-micro); line-height: var(--type-micro-lh); font-weight: var(--fw-black); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-muted); } /* Editorial accent — used inline inside headlines. Pattern: "Your creative work made clear…" */ .lki-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0.01em; } .lki-mono { font-family: var(--font-mono); font-size: var(--type-micro); line-height: 1.6; color: var(--fg-muted); }