/* ========================================================================== HOUSE STYLE TOKENS · Prototype Time case study (illustrative sample) A restyleable house style. Not the client's brand. HOW THIS FILE IS BUILT (read before using it) Layer 1 BRAND The only values a re-skin touches: 6 colours, 3 font families, the logo files. The client's kit drops in here. Layer 2 SYSTEM Semantic roles derived from Layer 1 (text, surface, rule, accent...). Pages, the PDF and film cards use THESE. Layer 3 SCALES Type steps, spacing, grid, radius, motion. Brand-neutral; they survive any re-skin unchanged. Layer 4 PIECES Recurring parts every surface shares: the sample flag, the layer rule, the big figure, the logo slot. THE CONTRACT: build with --hs-* system tokens only. Never paste a hex or a font name into a page. If a surface does that, a re-skin breaks it. ========================================================================== */ /* ---------- Faces (files beside this sheet, OFL / Google Fonts) ---------- */ @font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype"); } @font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Geist-Regular.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Geist-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/GeistMono-Regular.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/GeistMono-Medium.ttf") format("truetype"); } :root { /* ====================================================================== LAYER 1 · BRAND (override these, and only these, to re-skin) ====================================================================== */ --brand-name: "Northbench"; /* placeholder reseller name */ --brand-ink: #0E1216; /* Graphite: text, dark grounds */ --brand-paper: #F5F4F0; /* Paper: page ground */ --brand-accent: #E8501E; /* Signal: the one accent */ --brand-accent-strong: #B23E12; /* Signal Deep: accent as small text on paper */ --brand-neutral-strong: #56616B; /* Steel: secondary text, "before" data */ --brand-neutral-soft: #C8CCCD; /* Concrete: rules, borders */ --brand-font-display: "Space Grotesk", "Geist", "Helvetica Neue", Arial, sans-serif; --brand-font-body: "Geist", "Inter Tight", "Helvetica Neue", Arial, sans-serif; --brand-font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Logo files (paths relative to artifacts/identity/). Swap the files, keep the names, or point these elsewhere. */ --brand-logo: url("logo/wordmark-ink.svg"); --brand-logo-reverse: url("logo/wordmark-reverse.svg"); --brand-logo-aspect: 202 / 40; /* width / height of the logo artwork */ /* ====================================================================== LAYER 2 · SYSTEM (semantic roles; surfaces read these) ====================================================================== */ /* Grounds */ --hs-color-bg: var(--brand-paper); --hs-color-surface: color-mix(in srgb, var(--brand-ink) 5%, var(--brand-paper)); /* Fog panel ≈ #E9E9E5 */ --hs-color-surface-raised:#FFFFFF; --hs-color-dark: var(--brand-ink); --hs-color-dark-raised: color-mix(in srgb, var(--brand-paper) 8%, var(--brand-ink)); /* ≈ #1F2327 */ /* Text on light */ --hs-color-text: var(--brand-ink); --hs-color-text-muted: var(--brand-neutral-strong); --hs-color-text-accent: var(--brand-accent-strong); /* accent words under 24px */ /* Text on dark */ --hs-color-text-on-dark: var(--brand-paper); --hs-color-text-on-dark-muted: color-mix(in srgb, var(--brand-paper) 58%, var(--brand-ink)); /* ≈ #959798 */ --hs-color-text-on-accent: var(--brand-ink); /* Lines */ --hs-color-rule: var(--brand-neutral-soft); --hs-color-rule-strong: var(--brand-ink); --hs-color-rule-on-dark: color-mix(in srgb, var(--brand-paper) 18%, var(--brand-ink)); /* Accent: one colour, used as a signal, never as a ground for long text */ --hs-color-accent: var(--brand-accent); --hs-color-accent-wash: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-paper)); /* Data: "now" is the accent, "before" is steel. No third hue. */ --hs-color-data-now: var(--brand-accent); --hs-color-data-before: var(--brand-neutral-strong); --hs-color-data-grid: var(--brand-neutral-soft); /* Families */ --hs-font-display: var(--brand-font-display); --hs-font-body: var(--brand-font-body); --hs-font-mono: var(--brand-font-mono); --hs-weight-display: 500; /* headlines: Space Grotesk Medium */ --hs-weight-strong: 700; /* big figures, wordmark */ --hs-weight-body: 400; --hs-weight-body-strong: 600; --hs-weight-label: 500; /* ====================================================================== LAYER 3 · SCALES (brand-neutral) ====================================================================== */ /* --- Web type, rem, phone-first. Ratio 1.25 below the display steps. --- */ --hs-text-label: 0.75rem; /* 12 · mono caps */ --hs-text-small: 0.875rem; /* 14 · captions */ --hs-text-body: 1.0625rem; /* 17 · body */ --hs-text-lead: 1.25rem; /* 20 · intro */ --hs-text-h3: 1.5rem; /* 24 */ --hs-text-h2: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); /* 28 → 40 */ --hs-text-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); /* 36 → 60 */ --hs-text-display: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem); /* 40 → 72 (over media: never above this) */ --hs-text-figure: clamp(3.5rem, 2.2rem + 4.4vw, 6rem); /* 56 → 96 · stat numerals */ /* --- Print type, US Letter two-pager (pt) --- */ --hs-print-label: 6.75pt; /* mono caps, tracked */ --hs-print-caption: 7.5pt; --hs-print-body: 9pt; /* on a 13pt line */ --hs-print-lead: 12pt; --hs-print-h3: 10.5pt; --hs-print-h2: 16pt; --hs-print-h1: 30pt; --hs-print-figure: 40pt; --hs-print-baseline: 13pt; /* the print baseline grid; body leading */ /* --- Film type, px on a 1920×1080 canvas --- */ --hs-film-label: 28px; --hs-film-body: 40px; --hs-film-title: 72px; --hs-film-headline: 112px; /* one breath: eight words at most */ --hs-film-figure: 220px; --hs-film-logo-height: 72px; /* end card */ /* Leading and tracking */ --hs-leading-tight: 1.04; /* display, figures */ --hs-leading-snug: 1.18; /* headings */ --hs-leading-body: 1.5; --hs-tracking-display: -0.028em; --hs-tracking-heading: -0.015em; --hs-tracking-body: 0; --hs-tracking-label: 0.08em; /* mono labels, always uppercase */ --hs-measure: 64ch; /* longest body line */ --hs-measure-narrow: 44ch; /* --- Spacing: 4px base, one ladder for every surface --- */ --hs-space-1: 0.25rem; /* 4 */ --hs-space-2: 0.5rem; /* 8 */ --hs-space-3: 0.75rem; /* 12 */ --hs-space-4: 1rem; /* 16 */ --hs-space-5: 1.5rem; /* 24 */ --hs-space-6: 2rem; /* 32 */ --hs-space-7: 3rem; /* 48 */ --hs-space-8: 4rem; /* 64 */ --hs-space-9: 6rem; /* 96 */ --hs-space-10: 8rem; /* 128 */ --hs-space-section: clamp(4rem, 2.5rem + 6vw, 8rem); /* between page sections */ /* --- Web grid --- */ --hs-grid-max: 75rem; /* 1200 content width */ --hs-grid-cols: 12; /* 4 under 640px */ --hs-grid-cols-phone: 4; --hs-grid-gutter: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); --hs-grid-margin: clamp(1.25rem, 0.5rem + 4vw, 4rem); --hs-bp-tablet: 640px; /* reference values; media queries cannot read vars */ --hs-bp-desktop: 1024px; /* --- Print grid: US Letter portrait --- */ --hs-print-page-w: 8.5in; --hs-print-page-h: 11in; --hs-print-margin: 0.5in; /* all four sides */ --hs-print-margin-top: 0.625in; /* room for the running head */ --hs-print-cols: 12; --hs-print-gutter: 12pt; /* --- Film frame: 1920×1080 --- */ --hs-film-w: 1920px; --hs-film-h: 1080px; --hs-film-action-safe: 96px; /* 5% */ --hs-film-title-safe-x: 192px; /* 10% */ --hs-film-title-safe-y: 108px; /* 10% */ --hs-film-cols: 12; --hs-film-gutter: 24px; /* --- Edges, rules, radius: engineered, near-square --- */ --hs-radius-0: 0; --hs-radius-1: 2px; /* images, buttons, chips */ --hs-radius-2: 4px; /* the most it ever gets */ --hs-rule-hair: 1px; /* print: 0.5pt */ --hs-rule-strong: 2px; --hs-print-rule-hair: 0.5pt; --hs-shadow-none: none; /* the system does not use drop shadows */ /* --- Motion (web and film) --- */ --hs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --hs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --hs-dur-fast: 160ms; --hs-dur-base: 280ms; --hs-dur-slow: 480ms; --hs-film-type-in: 0.5s; /* 12 frames at 24 fps: type wipes in, left to right */ --hs-film-hold-min: 2.5s; /* a card is readable before it leaves */ /* ====================================================================== LAYER 4 · PIECES (shared parts, all built from the layers above) ====================================================================== */ /* Logo slot: size by height only, never stretch */ --hs-logo-height: 28px; /* web header */ --hs-logo-height-print: 0.28in; /* PDF masthead */ --hs-logo-clearspace: 0.5; /* × logo height, on every side */ /* The layer rule: the mark's motif as a section opener. Three ink hairlines and one short accent bar on top. */ --hs-layer-bar: 3px; --hs-layer-gap: 3px; --hs-layer-accent-w: 2.5rem; --hs-layer-ink: var(--hs-color-rule-strong); --hs-layer-accent: var(--hs-color-accent); /* Sample flag: honest, visible, calm. Required on every surface. Its words are fixed, verbatim, never shortened: "Illustrative sample: the company, people and figures are representative, not an actual named customer." The full sentence is set in sentence case (no uppercase transform), tracking 0.01em, and wraps freely. */ --hs-sample-copy: "Illustrative sample: the company, people and figures are representative, not an actual named customer."; --hs-sample-transform: none; --hs-sample-tracking-sentence: 0.01em; --hs-sample-leading: 1.4; --hs-sample-font: var(--hs-font-mono); --hs-sample-weight: var(--hs-weight-label); --hs-sample-size: var(--hs-text-label); --hs-sample-tracking: var(--hs-tracking-label); --hs-sample-text: var(--hs-color-text); --hs-sample-bg: var(--hs-color-surface); --hs-sample-bar: var(--hs-color-accent); /* 3px left bar */ --hs-sample-bar-w: 3px; --hs-sample-pad: var(--hs-space-2) var(--hs-space-3); /* Big figure (the speed numbers) */ --hs-figure-font: var(--hs-font-display); --hs-figure-weight: var(--hs-weight-strong); --hs-figure-tracking: -0.04em; --hs-figure-color: var(--hs-color-text); --hs-figure-unit-color:var(--hs-color-accent); /* the unit or arrow, never the numeral */ /* Mark colours (read by the inline SVG mark) */ --hs-mark-ink: var(--hs-color-text); --hs-mark-accent: var(--hs-color-accent); } /* Note: custom properties resolve where they are declared, so every derived token that must flip on dark is restated in this scope. */ /* Dark scope: film cards, a dark page band, the PDF's closing strip. Put data-hs-theme="dark" (or class hs-dark) on the container. */ [data-hs-theme="dark"], .hs-dark { --hs-color-bg: var(--hs-color-dark); --hs-color-surface: var(--hs-color-dark-raised); --hs-color-text: var(--hs-color-text-on-dark); --hs-color-text-muted: var(--hs-color-text-on-dark-muted); --hs-color-text-accent: var(--brand-accent); /* passes on graphite */ --hs-color-rule: var(--hs-color-rule-on-dark); --hs-color-rule-strong: var(--brand-paper); --hs-sample-bg: var(--hs-color-dark-raised); --hs-sample-text: var(--brand-paper); --hs-figure-color: var(--brand-paper); --hs-mark-ink: var(--brand-paper); --hs-layer-ink: var(--brand-paper); --brand-logo: var(--brand-logo-reverse); }