/* ============================================================ Earshot — Brand Tokens ============================================================ Version: 1.2.0 Updated: 2026-07-02 Canonical source: https://earshotau.netlify.app/brand/tokens.css Repo: answerau/earshot-website ------------------------------------------------------------ This file is the single source of truth for Earshot brand design tokens. It is consumed by: - The marketing site (this repo) - The Earshot dashboard (answerau/earshot-dashboard) - Any future Earshot surface (PDF templates, slides, etc.) Consuming this file: - Marketing site: - Dashboard: pulled at build time, vendored into the build output. See dashboard repo's prebuild script. Updating tokens: 1. Edit this file 2. Bump the version comment above (semver — bump major only for breaking changes like renamed/removed tokens) 3. Deploy this repo 4. Trigger a redeploy of any consumer that vendors at build time (dashboard CI watches this file's URL) Naming convention: --earshot-{category}-{role}-{variant?} e.g. --earshot-color-bg-primary --earshot-color-state-improving --earshot-space-4 --earshot-radius-sm Changelog: 1.2.0 (2026-07-02) - Positive Good rebrand landed. The reserved accent slot is now filled with PG's confirmed brand primary (#7A00DF — a deep, saturated violet, verified against positivegood.com.au on 2026-07-02). Non-breaking: components that already reference --earshot-color-accent pick this up automatically. 1.1.0 (2026-06-13) - Removed PG-derived purple accent tokens. Earshot is keeping its palette generic and teal-led while Positive Good rebrands. A neutral accent slot is reserved at --earshot-color-accent-* for the future partner colour. - Accent buttons now use the existing teal-light as their background until the partner accent is locked. 1.0.0 (2026-06-13) - Initial token set. ============================================================ */ :root { /* ======================================================== COLOUR — Brand ======================================================== */ --earshot-color-brand-teal: #114B5F; /* Primary brand */ --earshot-color-brand-teal-mid: #1A6478; /* Hover / mid step */ --earshot-color-brand-teal-light: #2EA8A0; /* Lighter teal, also used as neutral data colour */ /* ======================================================== COLOUR — Accent (PARTNER COLOUR — Positive Good) ------------------------------------------------------ Positive Good's rebrand landed on 2026-07-02. The accent slot now holds their confirmed brand primary, verified directly against positivegood.com.au (WordPress "synced colour" —> #7A00DF, a deep, saturated violet). Contrast notes (verified 2026-07-02): - #7A00DF on #FFFFFF ~7.5:1 passes AA + AAA text - #FFFFFF on #7A00DF ~5.5:1 passes AA text - #7A00DF on #114B5F (teal) low accents only, not text Safe for buttons, links, icons, and decorative accents at all sizes on light surfaces. On the deep teal surface, reserve for non-text accents (dots, borders, backgrounds for large glyphs). If PG rebrand again, follow the same process: update both values, re-verify contrast, bump minor version, redeploy. ======================================================== */ --earshot-color-accent: #7A00DF; /* Positive Good brand primary */ --earshot-color-accent-strong: #5F00AE; /* Darker for hover / active states */ /* ======================================================== COLOUR — Ink / Text ======================================================== */ --earshot-color-ink: #1C2B30; /* Primary text on light backgrounds */ --earshot-color-ink-muted: #4A5C61; /* Secondary text on light */ --earshot-color-ink-faint: #6B7B7E; /* Tertiary / metadata text */ --earshot-color-ink-inverse: #EAF1F1; /* Primary text on dark backgrounds */ --earshot-color-ink-inverse-muted: #93A8AC; /* Secondary text on dark */ --earshot-color-ink-inverse-faint: #6E868B; /* Tertiary text on dark */ /* ======================================================== COLOUR — Surface (Light theme — marketing default) ======================================================== */ --earshot-color-bg-base: #F6F8F8; /* Page background */ --earshot-color-bg-surface: #FFFFFF; /* Card / panel background */ --earshot-color-bg-surface-alt: #EEF2F2; /* Subtle alt surface */ --earshot-color-border-subtle: #DDE3E4; --earshot-color-border-default: #C2CACC; --earshot-color-border-strong: #93A8AC; /* ======================================================== COLOUR — Surface (Dark theme — dashboard default) ======================================================== */ --earshot-color-bg-dark-base: #0B1F24; /* Dashboard page background */ --earshot-color-bg-dark-surface: #132C33; /* Card / panel */ --earshot-color-bg-dark-surface-alt: #102931; /* Alt panel */ --earshot-color-bg-dark-track: #2C474E; /* Slider / progress track */ --earshot-color-border-dark-subtle: #264A52; --earshot-color-border-dark-default: #3A626A; /* ======================================================== COLOUR — Data / State (semantic, used in dashboard) ======================================================== */ --earshot-color-state-improving: #57B97E; /* Green: improving / support / social-licence zone */ --earshot-color-state-stable: #6B7B7E; /* Grey: stable / neutral / baseline */ --earshot-color-state-contested: #E0A458; /* Amber: watch / contested zone */ --earshot-color-state-risk: #C25E5E; /* Coral: rising risk / opposition */ /* Slightly desaturated variants for backgrounds / tints */ --earshot-color-state-improving-soft: #DCEEE2; --earshot-color-state-stable-soft: #E3E7E8; --earshot-color-state-contested-soft: #F7E8D3; --earshot-color-state-risk-soft: #F2D7D7; /* ======================================================== COLOUR — Functional UI ======================================================== */ --earshot-color-link: var(--earshot-color-brand-teal-mid); --earshot-color-link-hover: var(--earshot-color-brand-teal); --earshot-color-link-visited: var(--earshot-color-brand-teal); --earshot-color-focus-ring: var(--earshot-color-brand-teal-light); --earshot-color-button-primary-bg: var(--earshot-color-brand-teal); --earshot-color-button-primary-bg-hover: var(--earshot-color-brand-teal-mid); --earshot-color-button-primary-text: var(--earshot-color-ink-inverse); --earshot-color-button-secondary-bg: transparent; --earshot-color-button-secondary-border: var(--earshot-color-brand-teal); --earshot-color-button-secondary-text: var(--earshot-color-brand-teal); --earshot-color-button-accent-bg: var(--earshot-color-accent); --earshot-color-button-accent-bg-hover: var(--earshot-color-accent-strong); --earshot-color-button-accent-text: #FFFFFF; /* ======================================================== TYPOGRAPHY — Family ======================================================== */ --earshot-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --earshot-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ======================================================== TYPOGRAPHY — Weight ======================================================== */ --earshot-weight-light: 300; --earshot-weight-regular: 400; --earshot-weight-medium: 500; --earshot-weight-semibold: 600; --earshot-weight-bold: 700; /* ======================================================== TYPOGRAPHY — Size (modular scale, base 16px / 1rem) ======================================================== */ --earshot-size-3xs: 0.625rem; /* 10px — micro labels only */ --earshot-size-2xs: 0.75rem; /* 12px — fine print */ --earshot-size-xs: 0.875rem; /* 14px — metadata, captions */ --earshot-size-sm: 1rem; /* 16px — body small */ --earshot-size-md: 1.125rem; /* 18px — body */ --earshot-size-lg: 1.375rem; /* 22px — large body / small heading */ --earshot-size-xl: 1.75rem; /* 28px — h3 */ --earshot-size-2xl: 2.25rem; /* 36px — h2 */ --earshot-size-3xl: 3rem; /* 48px — h1 */ --earshot-size-4xl: 4rem; /* 64px — hero display */ --earshot-size-5xl: 5.5rem; /* 88px — extra large display */ /* ======================================================== TYPOGRAPHY — Line height ======================================================== */ --earshot-leading-tight: 1.15; /* Display, large headings */ --earshot-leading-snug: 1.3; /* Headings */ --earshot-leading-normal: 1.5; /* Body */ --earshot-leading-relaxed: 1.7; /* Long-form reading */ /* ======================================================== TYPOGRAPHY — Letter spacing ======================================================== */ --earshot-tracking-tight: -0.02em; /* Large display */ --earshot-tracking-normal: 0; --earshot-tracking-wide: 0.05em; --earshot-tracking-wider: 0.12em; /* Eyebrows, all-caps labels */ /* ======================================================== SPACING (8px base, with 4px half-step) ======================================================== */ --earshot-space-0: 0; --earshot-space-half: 0.25rem; /* 4px */ --earshot-space-1: 0.5rem; /* 8px */ --earshot-space-2: 1rem; /* 16px */ --earshot-space-3: 1.5rem; /* 24px */ --earshot-space-4: 2rem; /* 32px */ --earshot-space-5: 2.5rem; /* 40px */ --earshot-space-6: 3rem; /* 48px */ --earshot-space-7: 4rem; /* 64px */ --earshot-space-8: 5rem; /* 80px */ --earshot-space-9: 6rem; /* 96px */ --earshot-space-10: 8rem; /* 128px */ /* ======================================================== RADIUS ======================================================== */ --earshot-radius-none: 0; --earshot-radius-xs: 0.125rem; /* 2px */ --earshot-radius-sm: 0.25rem; /* 4px — buttons, inputs */ --earshot-radius-md: 0.5rem; /* 8px — cards */ --earshot-radius-lg: 0.75rem; /* 12px — large cards / panels */ --earshot-radius-xl: 1rem; /* 16px */ --earshot-radius-2xl: 1.5rem; /* 24px — feature cards */ --earshot-radius-full: 9999px; /* Pills, dots */ /* ======================================================== SHADOW (light theme) ======================================================== */ --earshot-shadow-xs: 0 1px 2px rgba(28, 43, 48, 0.04); --earshot-shadow-sm: 0 1px 3px rgba(28, 43, 48, 0.06), 0 1px 2px rgba(28, 43, 48, 0.04); --earshot-shadow-md: 0 4px 8px rgba(28, 43, 48, 0.06), 0 2px 4px rgba(28, 43, 48, 0.04); --earshot-shadow-lg: 0 10px 24px rgba(28, 43, 48, 0.08), 0 4px 8px rgba(28, 43, 48, 0.04); --earshot-shadow-xl: 0 24px 48px rgba(28, 43, 48, 0.10), 0 8px 16px rgba(28, 43, 48, 0.05); /* Shadow (dark theme — used on dark surfaces, more subtle) */ --earshot-shadow-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --earshot-shadow-dark-md: 0 4px 8px rgba(0, 0, 0, 0.35); --earshot-shadow-dark-lg: 0 10px 24px rgba(0, 0, 0, 0.35); /* ======================================================== MOTION — Duration ======================================================== */ --earshot-duration-instant: 50ms; --earshot-duration-fast: 150ms; /* Hover states, button feedback */ --earshot-duration-base: 250ms; /* Default for most transitions */ --earshot-duration-slow: 400ms; /* Modal/panel entry */ --earshot-duration-slower: 600ms; /* Page-level transitions */ /* ======================================================== MOTION — Easing ======================================================== */ --earshot-ease-linear: linear; --earshot-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Default, decelerating */ --earshot-ease-in: cubic-bezier(0.4, 0, 1, 1); /* Accelerating */ --earshot-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth both ends */ --earshot-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Subtle overshoot */ /* ======================================================== BREAKPOINTS (mobile-first, used in media queries) ------------------------------------------------------ Note: CSS custom properties can't be used directly in @media queries. These are documented here for parity with the dashboard's Tailwind config; consume them in JS via getComputedStyle() if needed, or hard-code in CSS @media rules using the same values. ======================================================== */ --earshot-breakpoint-sm: 640px; /* Phones (landscape) and up */ --earshot-breakpoint-md: 768px; /* Tablets and up */ --earshot-breakpoint-lg: 1024px; /* Small laptops and up */ --earshot-breakpoint-xl: 1280px; /* Desktops and up */ --earshot-breakpoint-2xl: 1536px; /* Large desktops and up */ /* ======================================================== Z-INDEX (named layers, never use raw numbers) ======================================================== */ --earshot-z-base: 0; --earshot-z-raised: 10; /* Sticky elements */ --earshot-z-dropdown: 100; --earshot-z-sticky-nav: 200; --earshot-z-overlay: 300; /* Page overlays */ --earshot-z-modal: 400; --earshot-z-popover: 500; --earshot-z-toast: 600; /* Notifications */ --earshot-z-tooltip: 700; /* Always on top */ /* ======================================================== LAYOUT ======================================================== */ --earshot-container-max: 1200px; /* Marketing site content max */ --earshot-container-narrow: 760px; /* Long-form prose */ --earshot-container-wide: 1440px; /* Dashboard at largest */ --earshot-focus-ring-width: 2px; --earshot-focus-ring-offset: 2px; } /* ============================================================ Optional dark theme override ------------------------------------------------------------ The dashboard defaults to dark. Wrap dark UI in [data-theme="dark"] or @media (prefers-color-scheme: dark) to flip light-theme tokens to their dark equivalents. This block overrides the *generic* surface tokens — --earshot-color-bg-base etc. — so component CSS doesn't need to know which theme it's in. ============================================================ */ [data-theme="dark"] { --earshot-color-bg-base: var(--earshot-color-bg-dark-base); --earshot-color-bg-surface: var(--earshot-color-bg-dark-surface); --earshot-color-bg-surface-alt: var(--earshot-color-bg-dark-surface-alt); --earshot-color-border-subtle: var(--earshot-color-border-dark-subtle); --earshot-color-border-default: var(--earshot-color-border-dark-default); --earshot-color-ink: var(--earshot-color-ink-inverse); --earshot-color-ink-muted: var(--earshot-color-ink-inverse-muted); --earshot-color-ink-faint: var(--earshot-color-ink-inverse-faint); --earshot-shadow-sm: var(--earshot-shadow-dark-sm); --earshot-shadow-md: var(--earshot-shadow-dark-md); --earshot-shadow-lg: var(--earshot-shadow-dark-lg); }