/* ========================================================================== NFL Global Design Playbook (V1.0, June 2026) — design tokens for web Source: "NFL Global Design Playbook.pdf" + client asset delivery. Values marked [derived] are not in the playbook; they are web translations chosen to stay inside the system. Everything else is quoted from the book. Fonts load relative to this file: keep the fonts/ folder next to it. ========================================================================== */ /* ---------- Fonts: All-Pro Display (primary, widths A < B < C) ---------- */ /* A = narrowest, C = widest. C is the primary headline width (p23). */ @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display A"; src: url("fonts/display/AllProDisplayA-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display B"; src: url("fonts/display/AllProDisplayB-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Display C"; src: url("fonts/display/AllProDisplayC-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; } /* ---------- Fonts: All-Pro Sans (secondary: body, captions, annotations) ---------- */ @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-ThinItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Heavy.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-HeavyItalic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "All-Pro Sans"; src: url("fonts/sans/All-ProSans-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; } :root { /* ---------- Masterbrand palette (p47/p48) ---------- Four groups: Neutrals, Darks, Midtones, Brights. Never let them compete. */ --nfl-gridiron-black: #000000; /* Neutral · PMS Black C · CMYK 0-0-0-100 */ --nfl-sideline-white: #FFFFFF; /* Neutral · PMS White · CMYK 0-0-0-0 */ --nfl-legacy-blue: #001D3C; /* Dark · PMS 2768 C · RGB 0-29-60 */ --nfl-legacy-red: #410000; /* Dark · PMS 7428 C · RGB 65-0-0 */ --nfl-shield-blue: #003369; /* Midtone · PMS 654 C · RGB 1-51-105 (book hex; RGB = #013369) */ --nfl-unity-red: #A00000; /* Midtone · PMS 201 C · RGB 160-0-0 */ --nfl-impact-blue: #0074EE; /* Bright · PMS 3005 C · RGB 0-116-238 */ --nfl-shield-red: #D50A0A; /* Bright · PMS 186 C · RGB 213-10-10 */ /* ---------- Extended palette: International (p53) ---------- Flag colours consolidated into fixed greens / yellows / oranges. Only for global / international-games content, always next to the core palette. */ --nfl-legacy-green: #045D29; /* PMS 357 C */ --nfl-unity-green: #1D8147; /* PMS 7739 C */ --nfl-impact-green: #11B154; /* PMS 7739 C (book lists the same PMS twice) */ --nfl-legacy-yellow: #B86200; /* PMS 145 C */ --nfl-unity-yellow: #F39B05; /* PMS 7549 C */ --nfl-impact-yellow: #FFC800; /* PMS 116 C */ --nfl-legacy-orange: #B83100; /* PMS 484 C */ --nfl-unity-orange: #FF5500; /* PMS 166 C */ --nfl-impact-orange: #FF8000; /* PMS 152 C */ /* ---------- Neutral UI tints [derived] ---------- The book uses "50% Gridiron Black" for lockup dividers (p111) and a light grey panel (#EBEBEB) throughout its own layouts. UI greys = tints of Gridiron Black. */ --nfl-black-80: rgba(0, 0, 0, .80); --nfl-black-60: rgba(0, 0, 0, .60); --nfl-black-50: rgba(0, 0, 0, .50); /* divider lines on light (p111) */ --nfl-black-20: rgba(0, 0, 0, .20); --nfl-black-10: rgba(0, 0, 0, .10); --nfl-panel: #EBEBEB; /* playbook panel grey */ --nfl-white-70: rgba(255, 255, 255, .70); --nfl-white-20: rgba(255, 255, 255, .20); /* ---------- Depth treatment (p52, p54, p80) ---------- "Stage lighting": linear, vertical, ONE colour family, darkest at the top, brightest at the bottom. Never radial/vignette, never mix families (p56). */ --nfl-depth-black: linear-gradient(180deg, #000000 0%, #FFFFFF 100%); --nfl-depth-blue: linear-gradient(180deg, #001D3C 0%, #003369 50%, #0074EE 100%); --nfl-depth-red: linear-gradient(180deg, #410000 0%, #A00000 50%, #D50A0A 100%); --nfl-depth-green: linear-gradient(180deg, #045D29 0%, #1D8147 50%, #11B154 100%); --nfl-depth-yellow: linear-gradient(180deg, #B86200 0%, #F39B05 50%, #FFC800 100%); --nfl-depth-orange: linear-gradient(180deg, #B83100 0%, #FF5500 50%, #FF8000 100%); /* Darker variants for full-bleed UI sections where white type sits on top [derived] */ --nfl-depth-blue-deep: linear-gradient(180deg, #001D3C 0%, #001D3C 35%, #003369 100%); --nfl-depth-red-deep: linear-gradient(180deg, #410000 0%, #410000 35%, #A00000 100%); /* ---------- Typography ---------- */ --nfl-font-display-a: "All-Pro Display A", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --nfl-font-display-b: "All-Pro Display B", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --nfl-font-display-c: "All-Pro Display C", "Helvetica Neue", Arial, sans-serif; --nfl-font-display: var(--nfl-font-display-c); /* swapped to B / A on narrower canvases (see nfl-components.css) */ --nfl-font-sans: "All-Pro Sans", "Helvetica Neue", Arial, sans-serif; /* Type scale [derived from p38 hierarchy: 154 / 62 / 38 / 14 / 14 / 18·12 pt]. Ratios kept, sizes made fluid for screens. Body never below 16px on web. */ --nfl-size-hero: clamp(3.5rem, 10vw, 9.625rem); /* All caps headline · Display Bold (154pt in book) */ --nfl-size-h1: clamp(2.25rem, 4.6vw, 3.875rem); /* Sentence case headline · Display Bold (62pt) */ --nfl-size-h2: clamp(1.625rem, 2.8vw, 2.375rem); /* Subhead · Display Medium, caps (38pt) */ --nfl-size-h3: clamp(1.25rem, 1.8vw, 1.5rem); /* small headings / card titles [derived] */ --nfl-size-body: 1.0625rem; /* Body · Sans Regular (14pt in book → 17px) */ --nfl-size-small: 0.9375rem; /* Informative copy · Sans Medium */ --nfl-size-cta: 1.125rem; /* CTA buttons · Display Bold (18pt) */ --nfl-size-link: 0.8125rem; /* Text links · Display Bold caps (12pt → 13px) */ --nfl-size-caption: 0.8125rem; /* All-Pro Sans rules (p34/p35): ≤24px → 120% leading, 0 tracking; >24px → 110%, −1% */ --nfl-leading-sans: 1.2; --nfl-leading-sans-large: 1.1; --nfl-tracking-sans: 0; --nfl-tracking-sans-large: -0.01em; /* All-Pro Display: flexible but consistent line to line; descenders may never collide (p27) */ --nfl-leading-display-caps: 0.9; /* stacked caps headlines [derived from book examples] */ --nfl-leading-display-sentence: 1.02; /* sentence case needs room for descenders */ --nfl-tracking-display-tight: -0.01em; /* large sizes, "bolder impact" (p28) */ --nfl-tracking-display-wide: 0.04em; /* small sizes, "increased legibility" (p28) */ --nfl-measure: 55ch; /* All-Pro Sans: 40–60 characters per line (p37) */ /* ---------- Layout [derived] ---------- */ --nfl-margin: clamp(16px, 4vw, 72px); --nfl-gutter: clamp(12px, 1.6vw, 24px); --nfl-columns: 8; /* 8 wide · 6 · 4 square · 2 vertical (p74) → set per breakpoint */ --nfl-radius-s: 4px; /* social/list cards in the book */ --nfl-radius-m: 8px; /* playbook panels, content card */ --nfl-radius-pill: 999px; /* CTA buttons (p38) */ --nfl-shield-min: 45px; /* digital minimum height (p14) */ /* ---------- Motion [derived from the three behaviours, p89] ---------- */ --nfl-ease-ball: cubic-bezier(.65, 0, .35, 1); /* spiral / orbit: smooth, high velocity */ --nfl-ease-shift: cubic-bezier(.83, 0, .17, 1); /* sudden lateral cut */ --nfl-ease-unifier: cubic-bezier(.34, 1.56, .64, 1); /* magnetic snap with overshoot */ --nfl-dur-fast: 180ms; --nfl-dur-base: 420ms; --nfl-dur-slow: 900ms; }