/* ============================================================ eMotion Video brand system THE SINGLE SOURCE OF TRUTH. Version 2026-07-31f. Rules for anyone (human or model) touching brand values: 1. Colour and font values live HERE and nowhere else. 2. Every other file points at this one. It does not restate numbers. memory/user_profile.md, the emotion-video-brand skill, project READMEs, handoffs: all say "see brand/brand-system.css" instead of listing hexes. 3. There is exactly ONE permitted mirror of these values: the MIRROR block inside skills/emotion-video-brand/SKILL.md, which exists only so a session with no folder access still has something. It is stamped with this file's version. If the stamps differ, this file wins and the mirror is stale. 4. Changing a value here means bumping the version above, updating the skill mirror stamp, and nothing else. 5. emotionvideo-site/app/globals.css is the deployed site's own token file. It must match this file. It is the one legitimate duplicate, because Next.js cannot import from outside its own tree. Check any output with: python3 skills/emotion-video-brand/scripts/check-brand.py ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Permanent+Marker&display=swap'); :root { /* ============================================================ COLOUR. 21 semantic tokens plus one 11-step neutral ramp. Every colour on eMotion Video output comes from this list. Audited against the live site 2026-07-31. ============================================================ */ /* --- Primary: the dominant three --- */ --colour-navy: #112255; /* foundation, dark surfaces, footers */ --colour-purple: #200939; /* identity, deep sections, panels that hold content */ --colour-teal: #007799; /* accent, CTAs, links. Use sparingly */ /* --- Supporting --- */ --colour-blue: #114499; /* hover states, gradients */ --colour-highlight: #33ccee; /* Permanent Marker word only, dark backgrounds only. On white or light, use --colour-teal instead */ --colour-purple-2: #592299; /* DECORATIVE ONLY. Confirmed by Suzie 2026-07-31. Permitted: small decorative shapes, dots, squares, bullet markers, hero collage fragments. Not permitted: buttons, panels, or any container that holds text or another control. It cannot hold a teal button (1.94:1, the button dissolves), which is what deep purple is for (3.53:1). Also correct INSIDE the logo artwork, which is never recoloured. */ /* --- Surfaces --- */ --colour-white: #ffffff; --colour-near-white: #faf8f4; /* warm cream paper. Was #ffeeff pink-white until 2026-07-31: the pink fought the teal CTA */ --colour-surface: #f4f6fb; /* calm light section background */ --colour-bg-dark: #0d1a3e; /* hero and deep backgrounds */ /* --- Text --- */ --colour-ink: #0F0F1A; /* darkest text */ --colour-text-white: #ffffff; /* text on dark */ --colour-text-secondary: #dfe5f6; /* muted text on dark. 837 uses on the live site */ --colour-text-tertiary: #c9d2ec; /* description text on dark */ --colour-text-muted: #5a6685; /* muted text on LIGHT. 5.72:1 on white, 5.29:1 on --colour-surface. Replaced #5a6685 (2.88:1), #5a6685 (4.48:1) and #5a6685 (4.35:1) on 2026-07-31, which all failed or scraped AA */ --colour-text-on-teal: #e3f4f9; /* muted text inside teal panels. 4.53:1. Replaced #e3f4f9 (4.19:1) on 2026-07-31 */ /* --- Semantic status. One of each, no near-duplicates --- */ --colour-error: #991111; /* form error text. 8.60:1 on white, AAA */ --colour-error-bg: #fdf1f1; --colour-alert: #cc2222; /* attention blocks, eyebrow labels, decorative red. 5.50:1 on white, AA. Not for form errors */ --colour-success: #2d8a4e; --colour-warning: #f5a623; /* amber for stars, icons and fills. NEVER text on a light background, it only reaches 2.03:1 there */ --colour-warning-text: #7a5600; /* the amber to use when amber must be text. 6.65:1 */ /* ============================================================ NEUTRAL RAMP. One family, eleven steps, navy-derived. This is the tint scale the live site already used. It was never written down, which is why sessions kept inventing new near-duplicates. Counted as ONE system, not eleven decisions. Contrast figures are against white. ============================================================ */ --navy-950: #0a1330; /* 18.28 deepest. Section floors */ --navy-900: #152852; /* 14.41 dark panels */ --navy-800: #25315c; /* 12.56 dark cards */ --navy-700: #33406e; /* 10.00 raised dark surfaces */ --navy-600: #3f4a70; /* 8.66 most used tint on the site, 159 uses */ --navy-500: #4a5578; /* 7.34 body text alternative on light */ --navy-400: #55608a; /* 6.13 secondary text on light */ --navy-300: #8a93b2; /* 3.04 LARGE text and UI edges only, never body copy */ --navy-200: #93a0c8; /* 2.59 decorative and dividers only, never text */ --navy-100: #aab6db; /* 2.01 decorative only */ --navy-050: #e5e9f4; /* 1.21 light surface fills */ /* --- Lilac tints. Soft purple surfaces, never text --- */ --lilac-300: #c6b8db; --lilac-200: #d5c9e6; --lilac-100: #e4dcf0; /* ============================================================ CYAN / TEAL RAMP. The site uses a genuine cyan family beyond the single --colour-teal: bright accents on dark, deep teals for gradient ends, pale tints for surfaces. Documented 2026-07-31 rather than converged, because the steps are visibly distinct. ============================================================ */ --teal-700: #0e6f88; /* deep teal, gradient ends and dark accents */ --teal-600: #128aa5; /* mid-deep teal */ --teal-500: #1f97b4; /* mid teal */ --teal-400: #25a7c1; /* lighter mid teal */ --teal-300: #43b8ea; /* bright sky accent on dark */ --teal-200: #7fe4ff; /* pale bright cyan on dark */ --teal-150: #8ee9fb; /* palest bright cyan on dark */ --teal-100: #bff3fb; /* very pale cyan surface */ --teal-050: #eafaff; /* pale teal surface */ /* --- Amber, second step --- */ --colour-warning-deep: #e08a00; /* deeper amber. Fills and icons only. 2.69:1 on white, never text on light */ /* --- Green tint surfaces --- */ --colour-success-bg: #faf8f4; --colour-success-tint: #bff0cf; /* --- Legacy, kept deliberately --- */ --colour-pink-white: #ffeeff; /* Kept by Suzie 2026-07-31 for its 12 existing decorative uses on the live site. Superseded by --colour-near-white for surfaces. Do not use in new work, do not remove from the existing 12. */ /* --- Borders --- */ --colour-border-light: rgba(255, 255, 255, 0.06); /* on dark */ --colour-border-medium: rgba(255, 255, 255, 0.12); /* on dark */ --colour-border-muted: #E8E5EE; /* light dividers */ --colour-border-input: rgba(17, 34, 85, 0.5); /* form field edges. 3.17:1. Was 0.16 alpha (1.37:1) until 2026-07-31, which made input boxes effectively invisible */ /* ----- Typography ----- */ --font-heading: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-highlight: 'Permanent Marker', cursive; /* ----- Weight scale. These are the weights the live site actually uses, documented 2026-07-31 with a job each. Inter ships 300 to 900. ----- */ --w-light: 300; /* rare. Large quiet numerals and oversized quiet display only */ --w-body: 400; /* all running copy. The default */ --w-medium: 500; /* supporting copy that needs a touch more presence than body */ --w-semibold: 600; /* labels, eyebrows, small uppercase, table headers */ --w-bold: 700; /* the workhorse. Section headings, card titles, emphasis. By far the most used weight on the site */ --w-extrabold: 800; /* larger section headings and anything that must out-rank a 700 */ --w-black: 900; /* hero and page-title scale only. Reads heavy below about 30px */ /* PERMANENT MARKER RULE (Suzie, 2026-07-31): one highlighted word per SCREENFUL, not per page. A long scrolling page may carry several, provided no two are visible at once and the device does not become the pattern. Prefer a single word. Do not set phrases, headings, sentences or labels in it. Colour it --colour-highlight on dark, --colour-teal on light. */ /* Type scale */ --fs-hero: clamp(40px, 5.6vw, 76px); --fs-h1: clamp(32px, 5vw, 56px); --fs-h2: clamp(26px, 4vw, 44px); --fs-h3: clamp(20px, 3vw, 30px); --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 11px; /* Type weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Spacing scale */ --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: 128px; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; /* Effects */ --blur-sm: blur(12px); --blur-md: blur(14px); --blur-lg: blur(70px); /* Gradients */ --gradient-hero: linear-gradient(135deg, #112255 0%, #200939 100%); --gradient-ray: linear-gradient(180deg, rgba(51, 204, 238, 0.5), rgba(51, 204, 238, 0)); /* Shadows */ --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 26px 50px rgba(0, 0, 0, 0.4); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(0, 119, 153, 0.35); }