/* ============================================================ Neighbourhood — Website 2026 Design System Canonical design tokens. Extracted from the approved InDesign source (NBH042 Website 2026 — Homepage V3) and aligned with the headless prototype in /redesign-2026/headless-prototype/. This file is the single source of truth. The styleguide and any build (Tailwind, React, plain HTML) should import these vars and reference tokens by name — never hard-code a hex or px value. ============================================================ */ /* ---- Fonts: Lay Grotesk (V4) ------------------------------- */ /* The brand typeface (V4). Swiss-modernist clarity with softened forms. 5 weights: Regular 400, Medium 500, Semibold 600, Bold 700, Black 800. PRODUCTION BLOCKER: the files below are TRIAL builds (evaluation licence only). Replace with the licensed OTFs before shipping live — same font-family + filenames, so it's a drop-in swap. Not on Google Fonts; self-host. Paths are relative to this file. */ @font-face { font-family:'Lay Grotesk'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/laygrotesk-trial-regular.otf') format('opentype'); } @font-face { font-family:'Lay Grotesk'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/laygrotesk-trial-medium.otf') format('opentype'); } @font-face { font-family:'Lay Grotesk'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/laygrotesk-trial-semibold.otf') format('opentype'); } @font-face { font-family:'Lay Grotesk'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/laygrotesk-trial-bold.otf') format('opentype'); } @font-face { font-family:'Lay Grotesk'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/laygrotesk-trial-black.otf') format('opentype'); } :root { /* ==================================================== 1. COLOUR ==================================================== */ /* --- Core surfaces & ink (V4) --- V4 shifted the base to PURE WHITE for a crisper digital foundation, introduced a soft grey for layering, and retained graphite black as the primary dark tone. Cream is kept only as an optional warm surface. */ --color-white: #ffffff; /* base — V4 pure white */ --color-paper: #ffffff; /* cards / panels */ --color-grey-soft: #ececec; /* V4 soft grey — layering, hierarchy, supporting elements */ --color-cream: #fbf9f4; /* optional warm surface (retained; NOT the base) */ --color-ink: #2e2e30; /* graphite black — primary dark (V4) */ --color-ink-soft: #5a5a5a; /* secondary text, captions */ --color-hairline: #e6e6e6; /* 1px borders, dividers (neutral on white) */ /* --- Interactive accent --- V4 is a category-colour system rather than one brand accent. The house accent evolves the old coral into the HubSpot Orange-Coral so CTAs keep warmth and continuity; sections can override --color-accent per service. */ --color-accent: #f09068; /* house accent — V4 HubSpot Orange-Coral */ --color-accent-tint: #f5dcca; /* peach wash */ --color-accent-strong: #e2663a; /* deeper coral — rare high-emphasis only */ /* --- Service-category palette (V4) --- Each NBH service line owns a light pastel (backgrounds) + a saturated version (accents/emphasis). Hexes from nbh-knowledge/brand/VOICE.md (eyedropped from the V4 PDF — confirm exact values with T+P). `*-tint` = light pastel, base = saturated. */ --color-customer: #c880b0; /* Customer Service + Ticketing — Mauve */ --color-customer-tint: #f2cee5; /* Blush */ --color-hubspot: #f09068; /* HubSpot Onboarding + Support — Orange-Coral */ --color-hubspot-tint: #f5dcca; /* Peach */ --color-marketing: #4ec880; /* Marketing + Growth — Green */ --color-marketing-tint: #d8f5dc; /* Mint */ --color-seo: #709ee8; /* SEO + Paid Media — Cornflower */ --color-seo-tint: #cadaf8; /* Periwinkle */ --color-sales: #edd850; /* Sales + CRM — Gold */ --color-sales-tint: #f2eaaa; /* Butter */ --color-websites: #a898d8; /* Websites + Integrations — Blue-Lavender */ --color-websites-tint: #d8d4f0; /* Lavender */ /* ==================================================== 2. TYPOGRAPHY ==================================================== */ --font-sans: 'Lay Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Weights (the five packaged Inter cuts) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; /* Fluid type scale — clamp(min, preferred, max). Marketing/content pages use the fluid headings; product UI should pin to the max values. Steps keep >=1.25 contrast between roles. */ --text-xs: 0.8125rem; /* 13px — micro labels, footer legal */ --text-sm: 0.9375rem; /* 15px — captions, meta */ --text-base: clamp(1rem, 1.25vw, 1.125rem); /* body copy */ --text-lg: clamp(1.125rem, 1.40vw, 1.375rem); /* large body, list-in cards */ --text-xl: clamp(1.25rem, 1.85vw, 1.625rem); /* lead paragraph / intro */ --text-2xl: clamp(1.5rem, 2.40vw, 2.25rem); /* H4 / card titles */ --text-3xl: clamp(1.75rem, 3.00vw, 2.50rem); /* H3 / sub-section */ --text-4xl: clamp(2.25rem, 4.60vw, 4rem); /* H2 / section heading */ --text-5xl: clamp(2.5rem, 6.00vw, 5rem); /* large statement heading */ --text-display: clamp(3.5rem, 9.00vw, 8rem); /* hero display */ /* Line height — tighter as size grows */ --leading-display: 0.95; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Letter-spacing — V4 sets 0.5% (0.005em) across headings AND body for Swiss-modernist evenness. --tracking-label stays wider for caps. */ --tracking-base: 0.005em; /* 0.5% — the V4 default (headings + body) */ --tracking-display: 0.005em; --tracking-tight: 0.005em; --tracking-normal: 0.005em; --tracking-label: 0.05em; /* uppercase eyebrows / pill labels */ /* Readable measure for body text */ --measure: 68ch; /* ==================================================== 3. SPACING (4pt scale, semantic names) ==================================================== */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; /* Page gutter + vertical section rhythm (fluid) */ --gutter: clamp(1.5rem, 5vw, 6rem); --section-space: clamp(4rem, 9vw, 8rem); --content-max: 1640px; /* matches the 1800px artboard inset */ /* ==================================================== 4. RADIUS ==================================================== */ --radius-sm: 8px; --radius-md: 16px; /* default card */ --radius-lg: 24px; --radius-xl: 50px; /* large image masks / hero & CTA blobs */ --radius-pill: 999px; /* buttons, service pills, tags */ /* ==================================================== 5. ELEVATION (soft, warm-tinted — never grey #000 shadows) ==================================================== */ --shadow-sm: 0 1px 2px rgba(26,22,15,0.04), 0 2px 6px rgba(26,22,15,0.05); --shadow-md: 0 4px 12px rgba(26,22,15,0.06), 0 12px 28px rgba(26,22,15,0.07); --shadow-lg: 0 10px 30px rgba(26,22,15,0.08), 0 30px 60px rgba(26,22,15,0.10); /* ==================================================== 6. MOTION ==================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint, natural deceleration */ --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 600ms; /* ==================================================== 7. TYPE ROLES Exact recipes from the live homepage. Use these for headings; the numeric --text-* scale above is for general/body use. Each role pairs a size with a leading and tracking — the full recipes are shipped as utility classes (.text-hero … .text-lead) in theme.css. ==================================================== */ --text-hero: clamp(3.5rem, 9vw, 8rem); /* hero display — once per page (.h-hero) */ --text-sub: clamp(2.5rem, 6vw, 5rem); /* opener under the hero (.h-sub) */ --text-section: clamp(2.75rem, 5.5vw, 5rem); /* section H2 (.h-section) */ --text-pull: clamp(1.5rem, 2.4vw, 2.25rem); /* pull quotes (.h-pull) */ --text-stat: clamp(1.5rem, 2.2vw, 2.6rem); /* stat figures, tabular (.h-stat-xl) */ --text-lead: clamp(1.5rem, 2.5vw, 2rem); /* lead paragraph after a headline (.lead) */ --text-eyebrow: clamp(0.8rem, 1.1vw, 1.125rem); /* small card / eyebrow label (.h-card) */ --leading-stat: 1.0; /* ==================================================== 8. LAYOUT WIDTHS (named containers, from the prototype) ==================================================== */ --width-prose: 60ch; /* one column of body copy */ --width-narrow: 640px; /* intimate / centred blocks */ --width-readable: 820px; /* heading + lead together */ --width-default: 1200px; /* standard module */ --width-wide: 1440px; /* tile rows, broad bands */ --width-canvas: 1640px; /* full-bleed cards (== --content-max) */ --width-edge: 2880px; /* outermost 4K / ultrawide band */ /* Vertical section rhythm — padding-block on
*/ --pad-sm: clamp(2.5rem, 5vw, 4rem); /* 40 → 64 */ --pad-md: clamp(4rem, 7vw, 6rem); /* 64 → 96 */ --pad-lg: clamp(6rem, 9vw, 8rem); /* 96 → 128 (default marketing module) */ --pad-xl: clamp(8rem, 12vw, 12rem); /* 128 → 192 (hero / between modules) */ /* Element rhythm — vertical stack gaps (use as gap on a flow container) */ --stack-tight: 1rem; /* 16 — related lines */ --stack-default: 1.5rem; /* 24 — paragraphs */ --stack-relaxed: 2rem; /* 32 — heading → lead → CTA */ --stack-loose: 3rem; /* 48 — between sub-blocks */ --stack-section: 4.5rem; /* 72 — section heading → grid */ /* ==================================================== 9. SEMANTIC STATE COLOURS Derived from the service palette so alerts, toasts and form validation stay on-brand rather than generic. ==================================================== */ --color-success: var(--color-marketing); /* green */ --color-success-tint: var(--color-marketing-tint); --color-warning: var(--color-sales); /* yellow */ --color-warning-tint: var(--color-sales-tint); --color-danger: #dc3b2e; /* functional error red (UI necessity; not a V4 brand colour) */ --color-danger-tint: #fbe3de; --color-info: var(--color-seo); /* blue */ --color-info-tint: var(--color-seo-tint); /* ==================================================== 10. FOCUS & BORDERS ==================================================== */ --border-hairline: 1px solid var(--color-hairline); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent); --focus-ring-offset: 2px; /* ==================================================== 11. Z-INDEX SCALE ==================================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ==================================================== 12. SURFACE ALIASES (semantic — components read THESE, not the raw colours, so dark mode is a single switch) ==================================================== */ --surface-page: var(--color-white); /* V4 base = pure white */ --surface-raised: var(--color-paper); --surface-sunken: var(--color-grey-soft); /* soft grey */ --text-default: var(--color-ink); --text-muted: var(--color-ink-soft); --border-default: var(--color-hairline); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* ============================================================ DARK THEME Activate with . Derived from the live footer's charcoal surface. Neutrals are warm-tinted toward the coral brand hue (never pure #000/#fff); service tints are re-derived as low-chroma dark washes via color-mix so the palette still reads; accents keep their hue (coral on charcoal passes contrast). Components reference the surface/text aliases, so this block is the ONLY place dark values are defined. (For OS-driven switching, the ships-with theme.js / useTheme hook resolve data-theme="auto" → light|dark in JS.) ============================================================ */ [data-theme="dark"] { color-scheme: dark; --color-cream: #1a1916; /* page — warm charcoal */ --color-paper: #232220; /* cards, lifted off the page */ --color-ink: #f5f3ee; /* primary text — warm off-white */ --color-ink-soft: #a8a59c; /* secondary text */ --color-hairline: #36342f; /* dividers */ --surface-page: #1a1916; --surface-raised: #232220; --surface-sunken: #141310; --text-default: #f5f3ee; --text-muted: #a8a59c; --border-default: #36342f; /* Service + state tints → dark washes of each hue */ --color-customer-tint: color-mix(in srgb, var(--color-customer) 20%, #1a1916); --color-hubspot-tint: color-mix(in srgb, var(--color-hubspot) 20%, #1a1916); --color-accent-tint: color-mix(in srgb, var(--color-accent) 20%, #1a1916); --color-marketing-tint: color-mix(in srgb, var(--color-marketing) 20%, #1a1916); --color-seo-tint: color-mix(in srgb, var(--color-seo) 20%, #1a1916); --color-sales-tint: color-mix(in srgb, var(--color-sales) 20%, #1a1916); --color-websites-tint: color-mix(in srgb, var(--color-websites) 20%, #1a1916); --color-success-tint: color-mix(in srgb, var(--color-marketing) 20%, #1a1916); --color-warning-tint: color-mix(in srgb, var(--color-sales) 20%, #1a1916); --color-danger-tint: color-mix(in srgb, var(--color-danger) 20%, #1a1916); --color-info-tint: color-mix(in srgb, var(--color-seo) 20%, #1a1916); /* Shadows: deeper and cooler on a dark ground */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 12px 28px rgba(0,0,0,0.35); --shadow-lg: 0 10px 30px rgba(0,0,0,0.55), 0 30px 60px rgba(0,0,0,0.45); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 60%, transparent); }