/* ───────────────────────────────────────────────────────────── GENERATED FILE -- DO NOT EDIT BY HAND. Synced from: references/brand/Lachlan Holmes Personal Brand Design System/tokens.css Re-generate with: scripts/sync-personal-brand-tokens.sh Edit tokens upstream (in the design-system repo), pull, then re-sync. ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── LACHLAN HOLMES — Design Tokens Brand v1.0 · April 2026 Drop this file into any project and reference the variables. @import "tokens.css"; The values below are extracted verbatim from BrandGuide_2026_04. ───────────────────────────────────────────────────────────── */ :root { /* ── Colour palette (brand guide pg.16) ───────────────────── */ --c-paper: #F1F2F1; /* Primary surface · Light Grey */ --c-ink: #2B2B2B; /* Primary type · Black */ --c-red: #FA442C; /* Accent only · sparingly */ --c-grey: #BABCB7; /* Secondary surface */ /* tint scale on ink for borders / muted text */ --c-ink-50: rgba(43, 43, 43, 0.50); --c-ink-30: rgba(43, 43, 43, 0.30); --c-ink-15: rgba(43, 43, 43, 0.15); --c-ink-08: rgba(43, 43, 43, 0.08); --c-rule: rgba(43, 43, 43, 0.18); /* ── Type stacks ──────────────────────────────────────────── */ /* Univers is the workhorse. If your project has an Adobe Fonts kit with Univers, the stack resolves to the real cuts. Helvetica Neue is the standard fallback. */ --f-sans: "Univers", "Univers LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-cond: "Univers Condensed", "Univers LT Std 57 Condensed", "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, sans-serif; --f-ext: "Univers LT Std 93 Extra Black Extended", "Univers 93 Extra Black Extended", "Univers Black Extended", "Univers LT Std 73 Black Extended", "Arial Black", "Helvetica Neue", Helvetica, sans-serif; /* Pinyon Script — reserved for thumbnails / select social only */ --f-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive; /* alias kept for compatibility with older references */ --f-mono: var(--f-sans); /* ── Spacing (8pt grid, tightened) ────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 144px; /* ── Layout maximums ──────────────────────────────────────── */ --max-w: 1320px; --gutter: clamp(24px, 4vw, 64px); /* ── Geometry ─────────────────────────────────────────────── */ /* The system uses HARD corners. Reserve any radius for the registration mark and circular badges only. */ --radius: 0; } /* ── Pinyon Script (free, accent face) ───────────────────────── If your project doesn't already load Pinyon, paste this into the document (uncomment) — or use the Google Fonts . @font-face { font-family: "Pinyon Script"; src: url("assets/fonts/PinyonScript-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } */ /* ── Type ramp helpers (optional) ────────────────────────────── Apply directly as a class, or duplicate the rules into your own component styles. ────────────────────────────────────────────────────────────── */ .t-display-01 { font-family: var(--f-ext); font-weight: 900; font-stretch: 125%; font-size: 72px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .t-display-02 { font-family: var(--f-ext); font-weight: 700; font-stretch: 125%; font-size: 48px; line-height: 1; letter-spacing: -0.015em; text-transform: uppercase; } .t-heading { font-family: var(--f-ext); font-weight: 900; font-stretch: 125%; font-size: 28px; line-height: 1.1; letter-spacing: -0.005em; text-transform: uppercase; } .t-body { font-family: var(--f-sans); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: 0.005em; } .t-caption { font-family: var(--f-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .t-script { font-family: var(--f-script); font-weight: 400; font-style: italic; letter-spacing: 0; } /* ── Selection (brand-respecting) ──────────────────────────── */ ::selection { background: var(--c-red); color: var(--c-paper); } /* ────────────────────────────────────────────────────────────────────────── LEGACY ALIASES (do not delete) Existing personal-brand projects use --brand-* names. These resolve to the canonical --c-* tokens above so a single hex change in the design system propagates everywhere. ────────────────────────────────────────────────────────────────────────── */ :root { --brand-black: var(--c-ink); /* #2B2B2B -- NOT pure #000 */ --brand-light-grey: var(--c-paper); /* #F1F2F1 */ --brand-grey: var(--c-grey); /* #BABCB7 */ --brand-red: var(--c-red); /* #FA442C -- accent only */ }