# Lara Kroeker Interactive — Design Guidelines (machine-readable)

Generated live from colors_and_type.css, last changed August 31, 2026.
Human version: https://larakroekerinteractive.com/design-guidelines/

## Voice

Direct, confident, warm, never corporate. First person singular. No unexplained
jargon, no filler.

## Colour usage

Green is accent and background wash only — never on buttons or CTAs.
Pink is for CTAs and links only — never decorative.
Reference semantic roles, never primitives, directly in code
(e.g. var(--cta), not var(--lki-pink-500)).

## Layout

Flat by default. Minimal shadow, minimal decoration. Mobile-first.

## Tokens

Full token set below, generated from colors_and_type.css — the single source of
truth. Do not use any colour, font, weight, size, or spacing value that isn't
listed here.

```json
{
    "colours": {
        "lki-dark": {
            "hex": "#101E2A",
            "rgb": "16, 30, 42",
            "note": "near-black, primary text + surfaces"
        },
        "lki-white": {
            "hex": "#FFFFFF",
            "rgb": "255, 255, 255",
            "note": "pure white, cards + contrast"
        },
        "lki-neutral": {
            "hex": "#F6F6F5",
            "rgb": "246, 246, 245",
            "note": "off-white, default page canvas"
        },
        "lki-green-primary": {
            "hex": "#7FD099",
            "rgb": "127, 208, 153",
            "note": "mint, hero accent"
        },
        "lki-green-lime": {
            "hex": "#BBF490",
            "rgb": "187, 244, 144",
            "note": "soft lime, background wash"
        },
        "lki-green-light": {
            "hex": "#E4FBD3",
            "rgb": "228, 251, 211",
            "note": "pale lime, tinted section bands"
        },
        "lki-green-deep": {
            "hex": "#00AB8B",
            "rgb": "0, 171, 139",
            "note": "teal-green, icon strokes and editorial accents"
        },
        "lki-grey-1": {
            "hex": "#203B53",
            "rgb": "32, 59, 83",
            "note": "L*24 · 11.6:1 · any text"
        },
        "lki-grey-2": {
            "hex": "#4D6275",
            "rgb": "77, 98, 117",
            "note": "L*41 ·  6.3:1 · body text, passes AA"
        },
        "lki-grey-3": {
            "hex": "#798998",
            "rgb": "121, 137, 152",
            "note": "L*56 ·  3.6:1 · large text only"
        },
        "lki-grey-4": {
            "hex": "#A6B1BA",
            "rgb": "166, 177, 186",
            "note": "L*72 ·  2.2:1 · fills and dividers, no text"
        },
        "lki-grey-5": {
            "hex": "#D2D8DD",
            "rgb": "210, 216, 221",
            "note": "L*86 ·  1.4:1 · hairline borders"
        },
        "lki-cta": {
            "hex": "#FF6B9D",
            "rgb": "255, 107, 157",
            "note": "CTA regular"
        },
        "lki-cta-dark": {
            "hex": "#FC2E7C",
            "rgb": "252, 46, 124",
            "note": "CTA hover/pressed"
        },
        "lki-cta-light": {
            "hex": "#F8E3E9",
            "rgb": "248, 227, 233",
            "note": "pink wash background"
        },
        "lki-yellow": {
            "hex": "#FEE181",
            "rgb": "254, 225, 129",
            "note": "warm yellow"
        },
        "lki-teal": {
            "hex": "#00778C",
            "rgb": "0, 119, 140",
            "note": "deep teal"
        },
        "lki-apricot": {
            "hex": "#FC9D5D",
            "rgb": "252, 157, 93",
            "note": "apricot, illustration only"
        },
        "lki-error": {
            "hex": "#C13515",
            "rgb": "193, 53, 21",
            "note": ""
        },
        "lki-info": {
            "hex": "#428BFF",
            "rgb": "66, 139, 255",
            "note": ""
        }
    },
    "type": {
        "font-sans": {
            "value": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
            "note": ""
        },
        "font-serif": {
            "value": "\"Instrument Serif\", \"Georgia\", serif",
            "note": ""
        },
        "font-mono": {
            "value": "\"JetBrains Mono\", \"Menlo\", ui-monospace, monospace",
            "note": ""
        },
        "fw-light": {
            "value": "300",
            "note": ""
        },
        "fw-medium": {
            "value": "500",
            "note": ""
        },
        "fw-black": {
            "value": "900",
            "note": ""
        },
        "type-display": {
            "value": "clamp(3rem,      1.4rem   + 5.3333vw, 6.2rem)",
            "note": "48 → 99  hero"
        },
        "type-h1": {
            "value": "clamp(2.6rem,    1.5rem   + 3.6667vw, 4.8rem)",
            "note": "42 → 77  page titles"
        },
        "type-h2": {
            "value": "clamp(1.9rem,    1.4rem   + 1.6667vw, 2.9rem)",
            "note": "30 → 46  sections"
        },
        "type-h3": {
            "value": "clamp(1.375rem,  1.1875rem + 0.625vw, 1.75rem)",
            "note": "22 → 28  prose h2"
        },
        "type-h4": {
            "value": "clamp(1.125rem,  1.0625rem + 0.2083vw, 1.25rem)",
            "note": "18 → 20  components"
        },
        "type-lead": {
            "value": "clamp(1.25rem,   1.1875rem + 0.2083vw, 1.375rem)",
            "note": "20 → 22  big leads"
        },
        "type-body": {
            "value": "1rem",
            "note": "16 — default prose"
        },
        "type-small": {
            "value": "0.875rem",
            "note": "14 — captions, buttons, list items"
        },
        "type-micro": {
            "value": "0.75rem",
            "note": "12 — uppercase labels and meta"
        },
        "type-display-lh": {
            "value": "1.02",
            "note": ""
        },
        "type-h1-lh": {
            "value": "1.06",
            "note": ""
        },
        "type-h2-lh": {
            "value": "1.08",
            "note": ""
        },
        "type-h3-lh": {
            "value": "1.25",
            "note": ""
        },
        "type-h4-lh": {
            "value": "1.35",
            "note": ""
        },
        "type-lead-lh": {
            "value": "1.55",
            "note": ""
        },
        "type-body-lh": {
            "value": "1.75",
            "note": "generous: this carries long-form reading"
        },
        "type-small-lh": {
            "value": "1.6",
            "note": ""
        },
        "type-micro-lh": {
            "value": "1.4",
            "note": ""
        },
        "track-display": {
            "value": "-0.028em",
            "note": ""
        },
        "track-heading": {
            "value": "-0.02em",
            "note": ""
        },
        "track-tight": {
            "value": "-0.01em",
            "note": ""
        },
        "track-micro": {
            "value": "0.18em",
            "note": ""
        }
    },
    "spacing": {
        "sp-2": {
            "value": "2px",
            "note": "hairline gaps, optical nudges"
        },
        "sp-4": {
            "value": "4px",
            "note": ""
        },
        "sp-8": {
            "value": "8px",
            "note": "inside components"
        },
        "sp-12": {
            "value": "12px",
            "note": "label to field"
        },
        "sp-16": {
            "value": "16px",
            "note": "paragraph rhythm"
        },
        "sp-20": {
            "value": "20px",
            "note": ""
        },
        "sp-24": {
            "value": "24px",
            "note": "card padding"
        },
        "sp-32": {
            "value": "32px",
            "note": "grid gutters"
        },
        "sp-40": {
            "value": "40px",
            "note": ""
        },
        "sp-48": {
            "value": "48px",
            "note": "between blocks"
        },
        "sp-56": {
            "value": "56px",
            "note": ""
        },
        "sp-64": {
            "value": "64px",
            "note": "large card padding"
        },
        "sp-80": {
            "value": "80px",
            "note": "section padding"
        },
        "sp-96": {
            "value": "96px",
            "note": ""
        },
        "sp-120": {
            "value": "120px",
            "note": "section breaks"
        }
    }
}
```