/* =============================================================
KFC Atlas Design System — Colors & Type Foundation
Pulled from Figma file "KFC Atlas DS (Foundations).fig"
Brand red, blackbox UI shell, Kentucky Fried type family
============================================================= */
/* ───────────────── Font faces ───────────────── */
@font-face {
font-family: "Kentucky Fried Sans";
src: url("./fonts/KentuckyFriedSans-Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kentucky Fried Sans";
src: url("./fonts/KentuckyFriedSans-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kentucky Fried Serif";
src: url("./fonts/KentuckyFriedSerif-Italic.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kentucky Fried Serif";
src: url("./fonts/KentuckyFriedSerif-HeavyItalic.otf") format("opentype");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kentucky Fried Stripes";
src: url("./fonts/KentuckyFriedStripes-Heavy.otf") format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Taco Bell uses Brandon Grotesque for headlines. We only have the Black weight,
so we register it at 900 and the brand override below only uses it for the
--font-display tier. Body copy still goes through Helvetica fallback to avoid
the browser awkwardly synthesising a "light" weight from the Black face. */
@font-face {
font-family: "Brandon Grotesque";
src: url("./fonts/BrandonGrotesqueWeb-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root {
/* ───────────────── Brand primitives ─────────────────
KFC red is the single hero color. Pair with deep black and warm whites. */
--kfc-red: #F5002B; /* Primary brand red — buttons, accents */
--kfc-red-hover: #B60020; /* Pressed / hovered red */
--kfc-red-bright: #E91C24; /* Legacy "Spice" red used on some components */
--kfc-red-deep: #C8102E; /* Deep brand red, used on borders/illustration */
--kfc-black: #000000; /* True black — nav, headlines, surfaces */
--kfc-ink: #1A1A1A; /* Soft black for body text on light bg */
--kfc-white: #FFFFFF;
/* Neutrals — warm-grey scale (paper / sand) */
--kfc-paper: #F7F5F3; /* Warm off-white surface */
--kfc-sand: #EEEBE7; /* Card / divider bg */
--kfc-stone: #D7D4CF; /* Hairline borders, disabled */
--kfc-pebble: #A2A09B; /* Tertiary text, icons */
--kfc-graphite: #7E7C77; /* Secondary text */
--kfc-slate: #666666; /* Caption text */
--kfc-charcoal: #343434; /* Foundations cover / dark surface */
/* Semantic — pulled from Figma "Color Token Documentation" */
--kfc-success-fg: #2A6F4B;
--kfc-success-bg: #EEF7EE;
--kfc-warning-fg: #CC8000;
--kfc-warning-bg: #FFEDCC;
--kfc-error-fg: #CC1A66;
--kfc-error-bg: #FFD9E5;
--kfc-error-soft: #FFA5A5;
--kfc-info-fg: #3366B2;
--kfc-info-bg: #E8F2FC;
--kfc-promo-fg: #8A38F5; /* Cart / loyalty highlights */
--kfc-promo-bg: #FFEBA6; /* Yellow promo strip */
/* Promo accents — pulled from the "Rewards & Offers" Figma templates.
Used as flat backgrounds behind product photography on rewards / offer
cards (e.g. "Wicked Wednesday" lime, "Snack Hacks" cream). Never used
for type or UI chrome. */
--kfc-lime: #BFE036; /* Rewards / Wicked-Wednesday bright lime */
--kfc-cream: #FBF5E5; /* Warning-toast & soft-promo cream */
--kfc-blush: #FFEEEE; /* Pale red soft background (alerts, promos) */
--kfc-amber: #FFBD15; /* Bright yellow accent (some offers) */
--kfc-orange: #FF9B17; /* Orange offer accent */
/* Surfaces */
--bg-page: var(--kfc-white);
--bg-page-warm: var(--kfc-paper);
--bg-elevated: var(--kfc-white);
--bg-inverse: var(--kfc-black);
--bg-brand: var(--kfc-red);
/* Top-bar / "chrome" surface — the kiosk header bar sits on this.
For KFC, chrome is black; for Taco Bell we flip it to white so the
bar matches their mobile site. Sibling tokens give us the matching
text + border colours so the contents stay legible. */
--chrome-bg: var(--kfc-black);
--chrome-fg: var(--kfc-white);
--chrome-fg-muted: rgba(255,255,255,0.7);
--chrome-fg-meta: rgba(255,255,255,0.56);
--chrome-border: rgba(255,255,255,0.2);
/* Accent colour for splashes on the dark inverse surfaces — e.g. the
"order" word in the screensaver CTA, or any other pop the chrome
should pick up. KFC uses brand red against black chrome; brands whose
chrome is the brand colour itself (Taco Bell purple) need a contrast
colour and override this below. */
--chrome-accent: var(--kfc-red);
/* Foreground (text / icon) colour placed ON top of --chrome-accent — i.e.
inside the round CTA button. White against red on KFC, dark purple
against white on Taco Bell. */
--chrome-accent-fg: var(--kfc-white);
/* Foreground */
--fg-1: var(--kfc-ink); /* Primary text */
--fg-2: var(--kfc-slate); /* Secondary text */
--fg-3: var(--kfc-graphite); /* Tertiary text */
--fg-disabled: var(--kfc-pebble);
--fg-on-brand: var(--kfc-white);
--fg-on-dark: var(--kfc-white);
/* Secondary text on dark surfaces — DO NOT use --kfc-stone/--kfc-pebble for body
copy on black; warm greys go anaemic on pure black. Use these instead. */
--fg-on-dark-2: rgba(255,255,255,0.78); /* sub-heading / paragraph on black */
--fg-on-dark-3: rgba(255,255,255,0.56); /* meta / fine print on black */
--fg-link: var(--kfc-red);
/* Borders */
--border-hairline: var(--kfc-sand);
--border-default: var(--kfc-stone);
--border-strong: var(--kfc-black);
--border-brand: var(--kfc-red);
/* Shadow */
--shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
--shadow-overlay: 0 8px 24px rgba(0,0,0,0.12);
--shadow-pressed: inset 0 1px 0 rgba(0,0,0,0.06);
/* ───────────────── Radii ─────────────────
KFC uses square corners on the hero brand surfaces (the "stripes" logo is square)
and modest rounding on UI controls. No pill capsules except on tags. */
--radius-0: 0px;
--radius-xs: 2px;
--radius-sm: 4px; /* Default for buttons & inputs */
--radius-md: 8px;
--radius-lg: 12px; /* Cards & sheets */
--radius-xl: 16px;
--radius-pill: 999px; /* Tags only */
/* ───────────────── Spacing scale (4px base) ───────────────── */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ───────────────── Type families ─────────────────
1. Kentucky Fried Stripes Heavy → display / headlines (uppercase, condensed) */
--font-display: "Kentucky Fried Stripes", "Impact", "Arial Black", sans-serif;
/* 2. Kentucky Fried Serif Heavy Italic → sub-display / quote / category headers */
--font-serif: "Kentucky Fried Serif", "Playfair Display", Georgia, serif;
/* 3. Kentucky Fried Sans → body / UI / nav */
--font-sans: "Kentucky Fried Sans", "Helvetica Neue", Arial, sans-serif;
/* Mono only for code reference in docs */
--font-mono: "Source Code Pro", "SF Mono", Menlo, monospace;
/* ───────────────── Type scale (mobile defaults) ─────────────────
Step naming: 9XL → XS, matches Figma "Updated FontStyle 11.05.2026"
Display steps use Stripes Heavy (uppercase). Serif steps use Heavy Italic (uppercase).
Sans steps use Light. */
/* Display — Kentucky Fried Stripes Heavy, UPPERCASE */
--text-9xl-size: 96px;
--text-9xl-lh: 88px;
--text-8xl-size: 84px;
--text-8xl-lh: 82px;
--text-7xl-size: 72px;
--text-7xl-lh: 70px;
--text-6xl-size: 68px;
--text-6xl-lh: 64px;
--text-5xl-size: 52px;
--text-5xl-lh: 50px;
--text-4xl-size: 44px;
--text-4xl-lh: 42px;
--text-3xl-size: 36px;
--text-3xl-lh: 36px;
/* Serif — Kentucky Fried Serif Heavy Italic, UPPERCASE */
--text-2xl-size: 28px;
--text-2xl-lh: 30px;
--text-2xl-ls: 0.25px;
--text-xl-size: 22px;
--text-xl-lh: 24px;
--text-lg-size: 18px;
--text-lg-lh: 20px;
/* Sans body — Kentucky Fried Sans Light, sentence case */
--text-md-size: 16px;
--text-md-lh: 24px;
--text-sm-size: 14px;
--text-sm-lh: 21px;
--text-xs-size: 12px;
--text-xs-lh: 18px;
/* Desktop bumps — display tier grows */
@media (min-width: 1024px) {
--text-9xl-size: 120px;
--text-9xl-lh: 110px;
--text-8xl-size: 96px;
--text-8xl-lh: 88px;
}
}
/* ───────────────── Semantic element styles ─────────────────
Plain CSS so you can write /
and get the right thing. */
html, body {
font-family: var(--font-sans);
font-weight: 300;
font-size: var(--text-md-size);
line-height: var(--text-md-lh);
color: var(--fg-1);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.kfc-display,
h1 {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--text-5xl-size);
line-height: var(--text-5xl-lh);
letter-spacing: 0;
text-transform: uppercase;
color: var(--fg-1);
margin: 0;
}
h2,
.kfc-serif-headline {
font-family: var(--font-serif);
font-weight: 800;
font-style: italic;
font-size: var(--text-2xl-size);
line-height: var(--text-2xl-lh);
letter-spacing: var(--text-2xl-ls);
text-transform: uppercase;
color: var(--fg-1);
margin: 0;
}
h3 {
font-family: var(--font-serif);
font-weight: 800;
font-style: italic;
font-size: var(--text-xl-size);
line-height: var(--text-xl-lh);
text-transform: uppercase;
margin: 0;
}
h4 {
font-family: var(--font-serif);
font-weight: 800;
font-style: italic;
font-size: var(--text-lg-size);
line-height: var(--text-lg-lh);
text-transform: uppercase;
margin: 0;
}
p,
.kfc-body {
font-family: var(--font-sans);
font-weight: 300;
font-size: var(--text-md-size);
line-height: var(--text-md-lh);
margin: 0;
}
.kfc-body-sm { font-size: var(--text-sm-size); line-height: var(--text-sm-lh); }
.kfc-caption { font-size: var(--text-xs-size); line-height: var(--text-xs-lh); color: var(--fg-2); }
.kfc-eyebrow { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg-2); }
.kfc-label { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; }
/* Brand wordmark — the giant uppercase block treatment */
.kfc-wordmark {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(96px, 14vw, 214px);
line-height: 0.92;
letter-spacing: 0;
text-transform: uppercase;
color: var(--kfc-white);
}
code, pre, .kfc-mono {
font-family: var(--font-mono);
font-size: 14px;
}
a {
color: var(--fg-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Force white text inside any element that opts into a dark surface.
Add the `.kfc-on-dark` class — or just live inside the Hero, which we'll
tag — and every heading + paragraph flips to white without losing the
semantic element. */
.kfc-on-dark,
.kfc-on-dark h1,
.kfc-on-dark h2,
.kfc-on-dark h3,
.kfc-on-dark h4,
.kfc-on-dark p {
color: var(--fg-on-dark);
}
.kfc-on-dark .kfc-secondary { color: var(--fg-on-dark-2); }
.kfc-on-dark .kfc-meta { color: var(--fg-on-dark-3); }
/* ===============================================================
Brand variant: Taco Bell
Applied when the root has `data-brand="tacobell"`. We override the
handful of tokens that diverge from KFC — primarily the brand red
becomes Taco Bell purple — and let everything else (neutrals,
spacing, type scale) inherit. Where the codebase hard-codes
#F5002B in SVG fills, the brand.primaryHex JS export is used
instead; tokens here cover the CSS-variable consumers.
=============================================================== */
:root[data-brand="tacobell"] {
--kfc-red: #401989; /* Brand purple */
--kfc-red-hover: #501098; /* Pressed / hovered */
--kfc-red-bright: #8B2FA0; /* Lighter purple for some accents */
--kfc-red-deep: #501098; /* Deep brand purple */
/* Taco Bell leans cooler — keep neutrals but swap the warm "paper"
for true white so plates read crisp on purple. */
--kfc-paper: #FFFFFF;
--kfc-sand: #F2F2F4;
--kfc-cream: #F6EEF7; /* soft purple-tinged cream */
--kfc-blush: #F2E6F7;
--bg-page-warm: #FFFFFF;
/* Chrome — replace pure black surfaces (kiosk header, screensaver bg,
success screen, etc.) with a deep brand purple. Slightly darker than
--kfc-red so primary CTAs still pop against the chrome. */
--bg-inverse: #501098;
--kfc-black: #2D0942; /* darker accent for the brand stripe */
/* Top-bar — Taco Bell's mobile site uses a clean white nav with dark
purple text + icons. Flip the chrome tokens accordingly. The kiosk
header reads these so it can render light without us also flipping
the screensaver / success / menu-rail surfaces (those stay purple
for the dramatic full-bleed feel). */
--chrome-bg: #FFFFFF;
--chrome-fg: #2D0942;
--chrome-fg-muted: rgba(45,9,66,0.65);
--chrome-fg-meta: rgba(45,9,66,0.45);
--chrome-border: rgba(45,9,66,0.15);
/* Brand-red would blend into Taco Bell's purple-on-purple inverse surface;
use white so the splash word in the screensaver CTA stays legible. */
--chrome-accent: #FFFFFF;
/* Dark purple text/icon inside the now-white round CTA button. */
--chrome-accent-fg: #2D0942;
/* Type — Taco Bell ships Brandon Grotesque Black. We registered just the
Black weight above; use it for headlines only. Body copy and lighter
weights stay on Helvetica fallback so we don't synthesise a "light"
Brandon Grotesque that would look bad. */
--font-display: "Brandon Grotesque", "Helvetica Neue", "Arial Black", Impact, sans-serif;
--font-serif: "Helvetica Neue", Georgia, serif;
--font-sans: "Helvetica Neue", Arial, sans-serif;
}