← Design systems

Wendy's Design System

Wendy's client brand system: fresh QSR personality, cameo logo, Fresh Never Frozen proof, Wendy's Rewards, offers, delivery, breakfast, Frosty, menu analytics, and client-delivery patterns. Includes approved supplied assets, inferred tokens from provided artwork, brand board, and an installable brand skill.

Brand board

Tokens · system.css

:root {
  --wendys-red: #BB252D;
  --wendys-red-dark: #912637;
  --wendys-blue: #2390C1;
  --wendys-brown: #3B302F;
  --wendys-skin: #EFD1CF;
  --wendys-white: #FFFFFE;
  --wendys-cream: #FFF4E8;
  --wendys-frosty: #765447;
  --wendys-ice: #E9F7FC;
  --wendys-border: #E7CEC7;
  --wendys-shadow: 0 18px 40px rgba(59, 48, 47, 0.14);

  --font-display: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --font-body: Inter, Aptos, "Helvetica Neue", system-ui, sans-serif;
  --font-condensed: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

body {
  margin: 0;
  background: var(--wendys-cream);
  color: var(--wendys-brown);
  font-family: var(--font-body);
}

.wendys-board {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(187, 37, 45, 0.08), rgba(255, 244, 232, 0.96) 45%),
    var(--wendys-cream);
}

.wendys-hero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 420px;
  background: var(--wendys-red);
  color: var(--wendys-white);
}

.wendys-hero__copy {
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.wendys-eyebrow {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wendys-hero h1 {
  margin: 0;
  max-width: 12ch;
  color: var(--wendys-white);
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 92px);
  line-height: 0.95;
}

.wendys-hero p {
  margin: 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.45;
}

.wendys-hero__media {
  position: relative;
  min-height: 280px;
  background: var(--wendys-red-dark);
  overflow: hidden;
}

.wendys-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wendys-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.wendys-section-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
}

.wendys-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.wendys-card {
  background: var(--wendys-white);
  border: 1px solid var(--wendys-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--wendys-shadow);
}

.wendys-logo-card {
  min-height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wendys-logo-card img {
  max-width: 100%;
  max-height: 132px;
  object-fit: contain;
}

.wendys-blue-card {
  background: var(--wendys-blue);
}

.wendys-swatch {
  min-height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--wendys-white);
  font-weight: 800;
}

.wendys-swatch small {
  font-weight: 700;
  opacity: 0.86;
}

.wendys-component {
  display: grid;
  gap: var(--space-3);
}

.wendys-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  border: 0;
  padding: 0 22px;
  background: var(--wendys-red);
  color: var(--wendys-white);
  font-weight: 900;
}

.wendys-metric {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  color: var(--wendys-red);
}

.wendys-caption {
  margin: 0;
  color: var(--wendys-brown);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .wendys-hero,
  .wendys-grid {
    grid-template-columns: 1fr;
  }
}

Files & assets

Name	Kind	Location
Wendy's cameo logo (SVG)	logo	content/design-systems/wendys/assets/logos/wendys-cameo.svg
Wendy's cameo logo (PNG)	logo	content/design-systems/wendys/assets/logos/wendys-cameo.png
Wendy's cameo square image	logo	content/design-systems/wendys/assets/logos/wendys-cameo-square.jpeg
Wendy's food pattern banner	photography	content/design-systems/wendys/assets/photography/wendys-food-pattern-banner.jpeg

Overview

# Wendy's Design System

Client brand system for **Wendy's**. This entry translates the supplied assets and public Wendy's
brand signals into an Enlighten-style system for decks, reports, dashboards, demos, QSR analytics,
rewards, offers, ordering, delivery, breakfast, and restaurant operations.

The core idea is **fresh food with conversational confidence**: unmistakably Wendy's, direct, a
little playful, quality-forward, and useful for app, loyalty, menu, and operations work.

## Brand Signals

| Signal | Role |
| --- | --- |
| `Wendy's cameo` | Primary recognition system and core logo asset. |
| `Fresh, Never Frozen` | Product proof and quality anchor for beef and burger storytelling. |
| `We Got You` | Helpful, direct, guest-centered service voice. |
| `Wendy's Rewards` | Loyalty/app surface for offers, points, free food, and daily deals. |
| `Frosty, fries, burgers, breakfast` | Menu anchors for campaign and product visualization. |

## Color

The core colors below are taken from the supplied SVG cameo logo asset. Supporting tints are
inferred until official Wendy's guidelines are provided.

| Token | Hex | Role |
| --- | --- | --- |
| `--wendys-red` | `#BB252D` | Primary Wendy's red, logo hair, action, offers. |
| `--wendys-red-dark` | `#912637` | Deep red shadow and contrast. |
| `--wendys-blue` | `#2390C1` | Bow and collar blue, links, app/info accent. |
| `--wendys-brown` | `#3B302F` | Logo outline, type, high-contrast UI. |
| `--wendys-skin` | `#EFD1CF` | Cameo skin tone and warm support tint. |
| `--wendys-white` | `#FFFFFE` | Logo field, cards, clean UI backgrounds. |
| `--wendys-cream` | `#FFF4E8` | Food-friendly page surface. |
| `--wendys-frosty` | `#765447` | Frosty/product accent and chart contrast. |

## Type

Official Wendy's type packages were not included. Until those arrive, use this practical stack:

| Token | Stack | Role |
| --- | --- | --- |
| `--font-display` | `Arial Black`, `Helvetica Neue`, system sans | Offer headlines and assertive product copy. |
| `--font-body` | `Inter`, `Aptos`, system sans | UI, reports, dashboards, and body copy. |
| `--font-condensed` | `Arial Narrow`, `Roboto Condensed`, system sans | Menu labels, dense cards, operational tables. |

## What's In This Entry

| File / folder | Purpose | Where |
| --- | --- | --- |
| `system.css` | Authoritative design tokens and reusable component CSS | git |
| `brand-board.html` | Brand board with palette, logos, voice, components, and sample layouts | git |
| `overview.md` | Human-readable summary of the system | git |
| `meta.json` | Registry metadata and asset references | git |
| `assets/logos/` | Supplied Wendy's cameo assets | git |
| `assets/photography/` | Supplied food banner imagery | git |
| `skill/` | Installable `wendys-design` brand skill | git |

## How Agents Should Use It

1. Pull `system.css` into context. It is authoritative for this registry entry.
2. Use tokens by `var()` name. Do not hardcode brand colors.
3. Treat supplied logo files as approved assets. Do not redraw, stretch, or recolor them.
4. Keep the voice fresh, direct, useful, and lightly playful.
5. Mark inferred choices clearly when a deliverable claims brand-standard accuracy.

## Source Notes

Evidence used for this first pass:

- Approved files supplied for client use: Wendy's cameo SVG/PNG/JPEG assets and food pattern banner.
- Public Wendy's digital surfaces reviewed on June 17, 2026: home, rewards, app/order, and menu pages.

> This is a client-enabled working system, not a substitute for official brand guidelines. Update
> color, type, spacing, and logo rules if Wendy's provides a guideline PDF or font package.