/* ========================================================================== GoodVibes Foundation — DESIGN TOKENS gvs.foundation · production CSS · Lane H1 (foundation layer) SINGLE SOURCE OF TRUTH for every --gvs-* custom property. Nothing in this file paints. It only declares values. Load order (do not reorder): 1. gvs-tokens.css <- this file 2. gvs-base.css reset, elements, type, utilities, motifs 3. gvs-components.css Lane H2 4. gvs-layout.css Lane H3 Derived from, and consistent with: design/exports/gvs-landing-tokens.css (the shipped landing set) design/exports/gvs-tokens-A-foundations.css (Volume A, incl. corrections) design/exports/gvs-tokens-B-components.css (Volume B, interaction) design/exports/gvs-tokens-C-pages.css (Volume C, templates) design/ai/gvs-guidelines-A-foundations.build.jsx (drawn geometry) Volumes B and C re-declare a handful of these names with IDENTICAL values. That is harmless. If a value ever diverges, THIS FILE WINS and the other file is the bug. Every value is a number that was drawn or measured. Nothing is rounded for convenience and nothing is invented. ========================================================================== */ :root { /* ======================================================================== 1. COLOUR — primitives These are the only 17 colours in the system. Do not add a colour here without a measured contrast row (section 3). ======================================================================== */ /* Brand */ --gvs-petrol: #1B4A5A; /* primary dark: rings, headings, ink */ --gvs-petrol-deep: #123640; /* dark fields: community band, footer */ --gvs-paper: #F3E9D2; /* the page ground. The default. NEVER white */ --gvs-cream: #FAF4E6; /* cards, type knocked out of dark fields */ --gvs-gold: #E8B33C; /* ribbon, CTA fills, accents. A FILL, not an ink: 1.59:1 on paper. */ --gvs-near-black: #161616; /* the ribbon's inner field */ /* Rasta tricolour — the signature divider. THREE HARD BANDS, red then gold then green, left to right. Never a blend, never reordered, never rotated, never a fourth band. */ --gvs-rasta-red: #C8230A; --gvs-rasta-gold: #E6BE00; --gvs-rasta-green: #1A6B30; /* Sunburst ray extensions. Large decorative shapes only. */ --gvs-ray-orange: #E8792B; /* 2.42:1 on paper — decorative only */ --gvs-ray-teal: #2E7F8C; /* 3.84:1 on paper — decorative only */ /* Support */ --gvs-teal-text: #256A75; /* the ONLY teal that may carry type. 5.12:1 */ --gvs-filigree-red: #8E1F14; /* vine and star line art on the seal */ --gvs-soft-grey: #A9A29A; /* 2.09:1 on paper. RULES, DIVIDERS, DISABLED FILLS. Never text, at any size. */ --gvs-placeholder: #968C7E; /* image placeholder field */ --gvs-ink-muted: #6E655B; /* muted TYPE on warm paper. 4.73:1, AA. Introduced in Volume A because the landing set pointed --gvs-text-muted at soft-grey. #7A7065 was tried first: 4.01:1, rejected. */ /* ======================================================================== 2. COLOUR — semantic roles Author against these, not against the primitives, wherever a role exists. ======================================================================== */ --gvs-bg: var(--gvs-paper); --gvs-bg-panel: var(--gvs-cream); --gvs-bg-inverse: var(--gvs-petrol-deep); --gvs-text: var(--gvs-petrol); --gvs-text-inverse: var(--gvs-cream); --gvs-text-muted: var(--gvs-ink-muted); /* CORRECTED. See section 3. */ --gvs-text-on-gold: var(--gvs-petrol); /* 5.03:1 */ --gvs-accent: var(--gvs-gold); --gvs-eyebrow: var(--gvs-teal-text); --gvs-border: var(--gvs-petrol); --gvs-rule: var(--gvs-soft-grey); /* hairlines, dividers */ /* Focus. PETROL, never gold: gold on paper is 1.59:1 and fails the 3:1 non-text minimum (WCAG 2.2 SC 1.4.11). Cream on dark fields. */ --gvs-focus-ring: var(--gvs-petrol); --gvs-focus-ring-inverse: var(--gvs-cream); --gvs-focus-width: 2px; --gvs-focus-offset: 2px; /* Disabled */ --gvs-disabled-opacity: 0.4; /* ======================================================================== 3. CONTRAST — measured, not estimated WCAG 2.1 relative luminance, recomputed for this build. Thresholds: AA normal 4.5:1 (under 24px, or under 19px bold) · AA large 3:1 · non-text / UI 3:1. FOREGROUND BACKGROUND RATIO AA AA-LG --------------------------------------------------------------------- cream #FAF4E6 deep #123640 11.77:1 PASS PASS near-blk #161616 gold #E8B33C 9.43:1 PASS PASS petrol #1B4A5A cream #FAF4E6 8.81:1 PASS PASS cream #FAF4E6 petrol #1B4A5A 8.81:1 PASS PASS petrol #1B4A5A paper #F3E9D2 8.00:1 PASS PASS filigree #8E1F14 paper #F3E9D2 7.38:1 PASS PASS cream #FAF4E6 62% scrim on photo 6.99:1 PASS PASS gold #E8B33C deep #123640 6.73:1 PASS PASS cream #FAF4E6 r-green #1A6B30 6.00:1 PASS PASS r-green #1A6B30 paper #F3E9D2 5.45:1 PASS PASS teal-txt #256A75 paper #F3E9D2 5.12:1 PASS PASS petrol #1B4A5A gold #E8B33C 5.03:1 PASS PASS ink-mute #6E655B paper #F3E9D2 4.73:1 PASS PASS rasta-rd #C8230A paper #F3E9D2 4.70:1 PASS PASS (#7A7065 rejected) paper #F3E9D2 4.01:1 fail PASS ray-teal #2E7F8C paper #F3E9D2 3.84:1 fail PASS placehldr#968C7E cream #FAF4E6 3.02:1 fail PASS ray-orng #E8792B paper #F3E9D2 2.42:1 fail fail soft-gry #A9A29A cream #FAF4E6 2.30:1 fail fail ink-mute #6E655B deep #123640 2.26:1 fail fail soft-gry #A9A29A paper #F3E9D2 2.09:1 fail fail gold #E8B33C paper #F3E9D2 1.59:1 fail fail rasta-gd #E6BE00 paper #F3E9D2 1.48:1 fail fail Consequences, enforced by the token names above: · --gvs-soft-grey never carries text. --gvs-text-muted resolves to --gvs-ink-muted instead. · gold is a fill. Gold type only on --gvs-petrol-deep (6.73:1). · gold is never a focus ring. · teal type is --gvs-teal-text, never --gvs-ray-teal. · --gvs-ink-muted is a PAPER colour. On dark fields muted text must be --gvs-cream at reduced weight, not a grey. ======================================================================== */ /* ======================================================================== 4. TYPE — families See FOUNDATIONS.md, "The font situation". The comps are set in macOS system faces that are NOT webfonts. Each stack is local comp face -> self-hostable substitute -> generic. ======================================================================== */ /* Display: heavy condensed caps. Comp face AvenirNextCondensed-Heavy. Substitute: Oswald 700 — the only common libre condensed grotesque with real poster weight at this width, and it reads as pressed flyer rather than UI. Metrically it is narrower than the comp; headline set widths will shrink. Archivo Variable at wdth 78 / wght 800 is the closer match if the team will ship a variable font. */ --gvs-font-display: "Avenir Next Condensed", "AvenirNextCondensed-Heavy", "Oswald", "Archivo Narrow", "Arial Narrow", system-ui, sans-serif; /* Ribbon: geometric condensed extrabold. Comp face Futura-CondensedExtraBold. In practice the ribbon is always outlined SVG (see assets/seal.svg), so this stack is a fallback for ribbon-styled UI. */ --gvs-font-ribbon: "Futura Condensed", "Futura-CondensedExtraBold", "Avenir Next Condensed", "Oswald", var(--gvs-font-display); /* Body: Inter. This one IS a real webfont (SIL OFL) — self-host it and the body copy matches the comps exactly. */ --gvs-font-body: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Avenir Next", Arial, sans-serif; --gvs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --gvs-display-weight: 800; --gvs-body-weight: 400; --gvs-body-weight-em: 600; /* ======================================================================== 5. TYPE — scale, exactly as drawn at 1440 Do not renumber. Names are referenced by Volumes B and C. ======================================================================== */ --gvs-fs-h1: 92px; /* hero, stacked */ --gvs-fs-h2: 52px; /* section headings */ --gvs-fs-h2-sm: 44px; /* newsletter heading */ --gvs-fs-quote: 40px; /* pull quote */ --gvs-fs-seal: 82px; /* arched GOOD VIBES on the seal (SVG, not CSS) */ --gvs-fs-ribbon: 38px; /* FOUNDATION in the gold ribbon (SVG, not CSS) */ --gvs-fs-h3: 30px; /* event row titles */ --gvs-fs-marquee: 26px; --gvs-fs-card-h: 26px; /* card headings */ --gvs-fs-lead: 20px; /* hero sub-headline */ --gvs-fs-body-lg: 19px; --gvs-fs-body: 18px; /* story body */ --gvs-fs-ui: 17px; /* buttons, inputs */ --gvs-fs-body-sm: 16px; --gvs-fs-card: 15px; /* card body */ --gvs-fs-meta: 14px; /* eyebrows, captions */ --gvs-fs-micro: 13px; /* footer legal, social row */ --gvs-lh-h1: 86px; --gvs-lh-h2: 56px; --gvs-lh-quote: 48px; --gvs-lh-h3: 34px; --gvs-lh-card-h: 30px; --gvs-lh-body: 30px; --gvs-lh-lead: 28px; --gvs-lh-card: 22px; --gvs-lh-meta: 20px; --gvs-lh-tight: 1.1; /* unitless, for fluid display type */ /* Tracking */ --gvs-tracking-eyebrow: 0.18em; /* = Illustrator tracking 180 (1/1000 em) */ --gvs-tracking-display: 0; --gvs-tracking-caps: 0.06em; /* nav items, button labels in caps */ /* The eyebrow, restated as its own tokens because it appears everywhere */ --gvs-eyebrow-size: 14px; --gvs-eyebrow-weight: 600; /* ======================================================================== 6. LAYOUT ======================================================================== */ --gvs-page-width: 1440px; /* the comp width */ --gvs-content-width: 1200px; /* the content column */ --gvs-col: 1200px; /* alias, used by Volume C */ --gvs-gutter: 120px; /* side margin at >= 1440. Steps down. */ --gvs-grid-unit: 8px; /* everything lands on an 8px baseline */ /* Containers. Three, and only three. */ --gvs-container: 1200px; /* .gvs-container */ --gvs-container-narrow: 880px; /* .gvs-container--narrow */ --gvs-container-prose: 680px; /* .gvs-container--prose */ --gvs-measure: 680px; /* alias, used by Volume C */ --gvs-breakout-md: 880px; --gvs-breakout-full: 1200px; /* Card / column arithmetic inside the 1200 column */ --gvs-card-gap: 24px; --gvs-card-width: 282px; /* 4 up */ --gvs-grid-4: 282px; --gvs-grid-3: 384px; --gvs-grid-2: 588px; /* ======================================================================== 7. SPACING — multiples of the 8px unit ======================================================================== */ --gvs-space-0: 0; --gvs-space-1: 8px; --gvs-space-2: 16px; --gvs-space-3: 24px; --gvs-space-4: 32px; --gvs-space-5: 40px; --gvs-space-6: 48px; --gvs-space-7: 56px; --gvs-space-8: 64px; --gvs-space-10: 80px; --gvs-space-12: 96px; --gvs-space-14: 112px; --gvs-space-16: 128px; --gvs-section-pad: 112px; /* standard top and bottom pad inside a section */ /* Defaults for the two primitive layout helpers in gvs-base.css. Override them locally on the element, not here. */ --gvs-stack-gap: var(--gvs-space-3); --gvs-cluster-gap: var(--gvs-space-2); /* ======================================================================== 8. SHAPE ======================================================================== */ --gvs-radius: 8px; /* cards, buttons, inputs, event rows */ --gvs-radius-sm: 4px; /* date chips */ --gvs-radius-pill: 28px; /* community pills, = height / 2 */ --gvs-border-width: 2px; /* the poster keyline. Never a hairline. */ /* Fixed heights drawn in the comp */ --gvs-button-height: 56px; --gvs-nav-height: 96px; --gvs-nav-h: 96px; /* alias, used by Volume C */ --gvs-marquee-height: 80px; /* ======================================================================== 9. MOTIF — the Rasta divider ======================================================================== */ --gvs-divider-height: 10px; /* section seam */ --gvs-footedge-height: 20px; /* page foot */ --gvs-rasta-band-share: 33.333%; --gvs-rasta: linear-gradient(90deg, var(--gvs-rasta-red) 0 33.333%, var(--gvs-rasta-gold) 33.333% 66.666%, var(--gvs-rasta-green) 66.666% 100%); /* ======================================================================== 10. MOTIF — the sunburst ray fan Rays radiate from the seal centre or a page corner, never an arbitrary point, and are always clipped to their section. Colour cycle: rasta-red, ray-orange, rasta-gold, rasta-green, ray-teal. ======================================================================== */ --gvs-ray-count: 20; --gvs-ray-step: 18deg; --gvs-ray-half-width: 6.5deg; --gvs-ray-radius-inner: 48px; --gvs-ray-radius-outer: 168px; --gvs-ray-tint-hero: 100%; /* the seal itself */ --gvs-ray-tint-dark: 30%; /* over --gvs-bg-inverse fields */ --gvs-ray-tint-behind-text: 12%; /* MAXIMUM when body copy sits over it */ /* ======================================================================== 11. THE SEAL — all figures at 100%, outer ring diameter 544 Scale the seal proportionally. Never one part of it. Source: assets/seal.svg (full colour) and assets/seal-mono.svg. ======================================================================== */ --gvs-seal-size: 544px; /* outer ring diameter = the seal size */ --gvs-seal-ring-outer: 544px; /* stroke 6 */ --gvs-seal-ring-heavy: 504px; /* stroke 11 */ --gvs-seal-ring-inner: 352px; /* stroke 6 */ --gvs-seal-ring-stroke: 6px; --gvs-seal-ring-stroke-heavy: 11px; --gvs-seal-arch-radius: 186px; /* baseline radius of the arched caps */ --gvs-seal-arch-size: 82px; --gvs-seal-star-outer: 64px; --gvs-seal-star-inner: 27px; --gvs-seal-ribbon-w: 348px; --gvs-seal-ribbon-h: 64px; --gvs-seal-ribbon-offset: 186px; /* band top, from centre, downward */ --gvs-seal-ribbon-field-w: 332px; --gvs-seal-ribbon-field-h: 48px; /* filled --gvs-near-black */ --gvs-seal-clearspace: 68px; /* = seal-size / 8. Nothing enters it. */ --gvs-seal-min-width: 180px; /* below this the arched caps close up */ --gvs-footer-seal: 108px; /* the footer lockup, mono */ --gvs-mark-min-size: 44px; /* the simplified ring mark */ --gvs-nav-mark: 44px; /* ======================================================================== 12. ICONOGRAPHY Line art only. No fills beyond the drawn dots, no two tone icons, no rounded app tiles. Set: music, calendar, mirrorball, glass, tools, people, ticket, pin, mail, clock, heart, speaker, arrow, external. ======================================================================== */ --gvs-icon-grid: 32px; /* live area */ --gvs-icon-stroke: 2px; /* round caps and joins */ --gvs-icon-inset: 2px; --gvs-icon-colour: var(--gvs-petrol); --gvs-icon-colour-inverse: var(--gvs-cream); --gvs-icon-disc: 76px; /* petrol disc behind card icons */ --gvs-icon-disc-opacity: 8%; --gvs-icon-inline: 16px; /* arrow / external, set with type */ /* ======================================================================== 13. IMAGERY ======================================================================== */ --gvs-photo-mat: 16px; /* warm-paper mat around every photo */ --gvs-photo-keyline: 2px; /* petrol */ --gvs-photo-radius-max: 8px; /* never exceed --gvs-radius */ --gvs-scrim-colour: var(--gvs-petrol-deep); --gvs-scrim-opacity: 0.62; /* MINIMUM. Cream then reads 6.99:1 */ --gvs-overlay: 0.7; /* modal / drawer backdrop */ --gvs-grain-colour: var(--gvs-cream); --gvs-grain-opacity: 0.1; --gvs-grain-rule: 2px; --gvs-grain-pitch: 50px; --gvs-caption-size: 14px; /* SemiBold */ --gvs-credit-size: 13px; /* Regular, --gvs-text-muted */ /* ======================================================================== 14. MOTION Short and mechanical. This is a poster, not an animation. Every transition must be disabled under prefers-reduced-motion — gvs-base.css does that globally. ======================================================================== */ --gvs-t-fast: 120ms; --gvs-t: 160ms; --gvs-t-slow: 240ms; --gvs-ease: cubic-bezier(0.2, 0, 0.2, 1); /* ======================================================================== 15. STACKING Custom properties cannot be used in @media, but they can be used here. ======================================================================== */ --gvs-z-base: 0; --gvs-z-raised: 1; --gvs-z-sticky: 100; --gvs-z-nav: 200; --gvs-z-drawer: 300; --gvs-z-modal: 400; --gvs-z-toast: 500; } /* ========================================================================== 16. BREAKPOINTS — reference only Custom properties do NOT work inside a @media query, so these live as documentation. Copy the literals. They match Volume C exactly. name range gutter content grid notes ----------------------------------------------------------------------- wide >= 1440 120 1200 4 up the drawn comp desktop 1200 - 1439 48 fluid 4 up type scale unchanged laptop 1024 - 1199 40 fluid 3 up H1 92 -> 72 tablet 768 - 1023 32 fluid 2 up split sections stack phone-lg 480 - 767 24 fluid 1 up nav -> drawer, H1 48 phone <= 479 20 350 1 up H1 40 The edges, as authored in Volume C and reused in gvs-base.css: @media (max-width: 1439.98px) @media (max-width: 1199.98px) @media (max-width: 1023.98px) @media (max-width: 767.98px) @media (max-width: 479.98px) The step-down ladder itself lives in gvs-base.css, section 12. It runs desktop-down on purpose: :root above holds the drawn 1440 values, which are the canonical design reference and what Volumes B and C were authored against. See FOUNDATIONS.md, "Why the ladder is max-width". ========================================================================== */ /* ========================================================================== 17. COLOUR SCHEME There is deliberately NO dark theme. The brand ground is warm paper #F3E9D2 and the identity depends on it; a naive inversion would put cream type on petrol everywhere and destroy the poster reading. Declaring the scheme stops the UA from auto-darkening form controls, scrollbars and spellcheck underlines into something that clashes with paper. If a dark theme is ever commissioned it belongs in its own token file that overrides section 2 only, never section 1. ========================================================================== */ :root { color-scheme: light; }