/* =========================================================================== studiohill-tokens.css — the single source of truth v3.0 · 02 August 2026 Supersedes v2.3. Nothing downstream declares its own hex, size, weight, track or rule value. If a value is missing, add it HERE. Fonts resolve from public/assets/fonts. =========================================================================== */ /* --- Termina · Fort Foundry desktop + web licence, self-hosted ----------- */ @font-face { font-family: 'Termina'; src: url('../fonts/Termina-Heavy.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Termina'; src: url('../fonts/Termina-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* --- Everett · TWK Everett, licensed, self-hosted ------------------------ */ @font-face { font-family: 'Everett'; src: url('../fonts/TWKEverett-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* --- General Sans · Fontshare FFL, self-hosted --------------------------- */ @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* --- IBM Plex Mono · SIL OFL 1.1, self-hosted ---------------------------- */ @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } :root { /* === COLOUR — PRIMARY ================================================= */ --sh-studio-black: #0A0A0A; /* backgrounds, bands, the wordmark */ --sh-warm-cream: #F0EEE8; /* default document ground */ --sh-charcoal: #282828; /* body text, subheadings */ /* === COLOUR — SECONDARY ============================================== */ --sh-stone: #D2D2C8; /* dividers, borders, rules */ --sh-slate: #787870; /* short uppercase labels, captions */ --sh-linen: #C8C3BE; /* header kickers, emphasis on black */ --sh-deep-black: #1E1E1E; /* dark UI hover */ --sh-white: #FFFFFF; /* pure white panels only */ /* === COLOUR — BONE (new at v3.0) ===================================== */ --sh-bone: #E0D8C6; /* versos, cards, envelopes, terms */ --sh-bone-rule: #C9C0AC; /* hairlines on bone */ --sh-text-muted-on-bone: #5A554F; /* labels on bone — slate fails here */ /* === COLOUR — ACCENT (new at v3.0) =================================== */ --sh-burgundy: #6E1F32; /* live states ONLY. absent by default */ /* === COLOUR — DERIVED TEXT TONES ===================================== */ --sh-text-muted: #787870; /* rules, short tracked labels only */ --sh-text-muted-on-cream: #5C5C54; /* reading text on cream */ --sh-text-muted-on-black: #96928B; /* reading text on black */ /* === COLOUR — DERIVED UI TINTS (screen affordances only) ============= */ --sh-cream-hover: #EBE9E2; --sh-placeholder: #B8B3AE; --sh-screen-bg: #DEDCD6; /* === TYPEFACES ======================================================== */ --sh-font-mark: 'Termina', sans-serif; /* THE MARK + NUMERALS ONLY */ --sh-font-display:'Everett', sans-serif; /* headlines, display */ --sh-font-body: 'General Sans', sans-serif; /* body, UI, prices */ --sh-font-mono: 'IBM Plex Mono', monospace; /* technical + ALL UI voice */ /* === WEIGHTS ========================================================== */ --sh-w-regular: 400; --sh-w-medium: 500; /* prices, structural numerals */ --sh-w-heavy: 800; /* the wordmark, set-titles */ /* === PRINT SCALE — A4 DENSE (rate cards, licensing, priced sheets) ==== */ --sh-pt-wordmark: 16pt; /* Termina Heavy */ --sh-pt-numeral: 24pt; /* Termina Medium — year, card number */ --sh-pt-display: 24pt; /* Everett — page title */ --sh-pt-display-min: 16pt; /* Everett floor in print */ --sh-pt-display-dense: 12pt; /* Everett floor in print */ --sh-pt-lg: 8pt; /* EVERY ex-GST figure. there is no larger price */ --sh-pt-md: 7.5pt; /* item name, intro line, inc-GST */ --sh-pt-base: 7pt; /* terms text */ --sh-pt-sm: 6.5pt; /* Plex Mono section label, uppercase, +0.20em */ --sh-pt-xs: 6pt; /* mono meta, table head, footer, +0.06em */ --sh-pt-micro: 5.5pt; /* item description, leading 1.3 */ /* === DOCUMENT SCALE — briefs and long-form (900 × 1273px page) ======== */ --sh-size-5xl: 54px; /* Everett — cover display */ --sh-size-4xl: 44px; /* Termina Medium — structural numeral */ --sh-size-3xl: 36px; /* Everett — section head */ --sh-size-2xl: 26px; /* Termina Heavy — wordmark on cover */ --sh-size-xl: 24px; /* Everett — lede, tile head. FLOOR for Everett */ --sh-size-lead: 15px; /* General Sans — lead paragraph */ --sh-size-base: 13px; /* General Sans — body, lists, cells, leading 1.6 */ --sh-size-md: 11px; /* Termina — sub-meta, tagline */ --sh-size-sm: 10px; /* Termina — labels, caps, +0.22em */ --sh-size-xs: 9px; /* Termina — eyebrow, caps, +0.32em */ /* === TRACKING ========================================================= */ --sh-track-mark: 0.062em; /* horizontal wordmark lockup */ --sh-track-mark-sm: 0.20em; /* wordmark at 22px and under */ --sh-track-numeral: 0.052em; /* Termina Medium numerals, 96px */ --sh-track-label: 0.20em; /* Plex Mono print section label */ --sh-track-eyebrow: 0.24em; --sh-track-caption: 0.18em; --sh-track-mono: 0.06em; --sh-track-display: -0.025em; /* Everett at section size */ /* === WORDMARK GEOMETRY (Phase 1, fixed) =============================== */ --sh-mark-kern-hi: 0.015em; /* H–I */ --sh-mark-kern-il: 0.030em; /* I–L */ --sh-mark-kern-ll: 0.036em; /* L–L */ --sh-mark-kern-stop:-0.030em; /* L–. */ --sh-mark-word-space:0.26em; --sh-mark-min-print: 25mm; --sh-mark-min-screen:80px; /* === BAR DEVICE (Phase 1, fixed) ====================================== */ --sh-bar-height: 2.25; /* × cap height of the lockup */ --sh-bar-overrun: 1.8; /* × cap height, right of the stop */ --sh-bar-lift: 1.5; /* × cap height, above and below */ --sh-bar-opacity: 0.8; /* over a photograph ONLY. never lower */ --sh-bar-fill-cream: rgba(240, 238, 232, 0.8); --sh-bar-fill-ink: rgba(10, 10, 10, 0.8); /* === LAYOUT =========================================================== */ --sh-base-unit: 8px; --sh-page-margin: 16mm; /* A4 print documents */ --sh-doc-gutter: 64px; /* long-form 900×1273 page */ --sh-grid-columns: 12; --sh-grid-gutter: 24px; --sh-margin-desktop: 64px; --sh-margin-tablet: 32px; --sh-margin-phone: 24px; /* === RULES ============================================================ */ --sh-rule: 1px solid var(--sh-stone); --sh-rule-print: 0.4pt solid var(--sh-stone); --sh-rule-bone: 1px solid var(--sh-bone-rule); --sh-rule-strong: 1px solid var(--sh-studio-black); --sh-radius: 0; /* no rounded corners, anywhere */ /* === SHADOWS — screen affordances only, never on a brand element ====== */ --sh-shadow-menu: 0 2px 8px rgba(10,10,10,0.12); --sh-shadow-preview: 0 1px 2px rgba(10,10,10,0.10); }