# Casey's — Design System
> Casey's is a leading Midwestern convenience store chain famous for its made-from-scratch pizza, fresh food, and rewards program.
- **Canonical:** https://uiuxskills.com/library/casey-s
- **Source:** https://www.caseys.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-07-25T02:32:08.049Z

---

---
version: alpha
name: Casey's
tagline: Famous for Pizza
description: >-
  Casey's is a leading Midwestern convenience store chain famous for its made-from-scratch pizza,
  quality fuel, and friendly service.
tone: Friendly, energetic, value-driven, and community-oriented.
color-scheme: light
colors:
  primary: "#E10600"
  secondary: "#574150"
  neutral: "#212121"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-primary: "#FFFFFF"
  on-surface: "#212121"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#2E7D32"
typography:
  display-lg:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 3rem
    fontWeight: 800
    lineHeight: "1.15"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 1.875rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: 0em
  headline-md:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-sm:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.35"
    letterSpacing: 0em
  body-md:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: 0em
  label-md:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.02em
  label-sm:
    fontFamily: system-ui, -apple-system, sans-serif
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 44px
    borderColor: transparent
  button-primary-hover:
    backgroundColor: "#C00500"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 44px
    borderColor: transparent
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 44px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 16px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 16px
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 48px
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 48px
    borderColor: "{colors.primary}"
  link:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  link-hover:
    backgroundColor: transparent
    textColor: "#C00500"
    typography: "{typography.label-md}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  category-chip:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
  lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)
---

## Overview

The Casey's visual identity balances the friendly, community-focused charm of a classic Midwestern general store with the high-efficiency interface of a digital food delivery platform. It pairs a high-contrast primary red with deep plum accents and clean, light neutrals to establish an energetic, value-driven, and highly accessible retail presence. The overall aesthetic is optimized to drive immediate appetite appeal and clear, straightforward user action.

## Colors

The color strategy relies on a high-contrast palette designed to capture attention and drive conversions. A vibrant primary red serves as the dominant brand identifier, supported by a deep plum accent for rewards and secondary actions, while clean white and light grey neutrals keep the layout structured and readable.

*   Primary (`{colors.primary}`): `#E10600` - Casey's signature brand red, used for primary call-to-actions, key branding elements, and highlighting active states.
*   Secondary (`{colors.secondary}`): `#574150` - A deep plum/purple-grey tone used for secondary branding, headers, and rewards-related accents.
*   Neutral (inferred) (`{colors.neutral}`): `#212121` - Dark charcoal used for body text and high-contrast headings to ensure readability.
*   Surface (`{colors.surface}`): `#FFFFFF` - Pure white used for card backgrounds, content containers, and clean page sections.
*   Surface Container (`{colors.surface-container}`): `#F4F4F4` - Light grey used for page backgrounds, category chips, and subtle section dividers.
*   On Primary (inferred) (`{colors.on-primary}`): `#FFFFFF` - White text used on primary red backgrounds to maintain high contrast and accessibility.
*   On Surface (inferred) (`{colors.on-surface}`): `#212121` - Dark text applied over white and light grey surfaces.
*   Outline (inferred) (`{colors.outline}`): `#E0E0E0` - Subtle grey border color used to define card boundaries and input fields.
*   Error (inferred) (`{colors.error}`): `#D32F2F` - Standard semantic red used for error states, alerts, and critical notifications.
*   Success (inferred) (`{colors.success}`): `#2E7D32` - Standard semantic green used for successful actions, validation, and positive rewards feedback.

## Typography

Typography is clean, modern, and highly legible, utilizing a robust system-sans-serif stack to ensure rapid loading times and seamless cross-platform rendering. Clear hierarchy scales from bold, tight-leading display headlines down to compact, high-density labels.

*   Display Large (inferred) (`{typography.display-lg}`): Large promotional display headings used in hero banners.
*   Display Medium (inferred) (`{typography.display-md}`): Medium display headings for secondary hero banners and marketing campaigns.
*   Headline Large (inferred) (`{typography.headline-lg}`): Used for main section headers like "Slice into savings" and "Featured products".
*   Headline Medium (inferred) (`{typography.headline-md}`): Used for category titles and medium-sized section headers.
*   Headline Small (inferred) (`{typography.headline-sm}`): Used for product card titles and smaller sub-headings.
*   Body Medium (inferred) (`{typography.body-md}`): Standard body copy size for descriptions, rewards details, and general text.
*   Body Small (inferred) (`{typography.body-sm}`): Smaller body copy for secondary details, terms, and metadata.
*   Label Medium (inferred) (`{typography.label-md}`): Interactive labels, button text, and navigation links.
*   Label Small (inferred) (`{typography.label-sm}`): Micro-labels, badges, and tiny interactive elements.

## Layout

The interface is built on a responsive grid system featuring a centered max-width container of 1200px. Spacing is highly structured and relies on a standardized scale, utilizing `{spacing.md}` (16px) and `{spacing.lg}` (24px) to separate grid items and define section gutters. The observed top-to-bottom section order is `nav`, `hero`, `rewards-banner`, `categories-grid`, `promotions`, `featured-products`, and `footer`. The hero composition pattern consists of a rotating carousel of high-impact promotional banners showcasing current food deals. On mobile devices, multi-column grids (up to 6 columns for categories on desktop) collapse responsively to 2-3 columns to maintain legibility.

## Elevation & Depth

Depth is conveyed through flat design principles with selective, purposeful elevation. The site uses single-layer shadows to separate floating elements and promotional cards from the background canvas.

*   `elevation.sm` — Used for subtle card lift and low-priority interactive elements.
*   `elevation.md` — Applied to dropdowns, popovers, and standard interactive hover states.
*   `elevation.lg` — Applied selectively to high-priority promotional cards to make them pop against the light grey background.

The values for `elevation.sm` and `elevation.md` were inferred, while `elevation.lg` was observed directly from key promotional elements.

## Shapes

Casey's utilizes a highly rounded shape language to establish a friendly, approachable, and modern digital aesthetic. Interactive elements such as buttons, category chips, and badges leverage fully rounded corners to invite user interaction and soften the interface.

Content containers, product cards, and promotional banners use generous, softer corners defined by `{rounded.xl}` or `{rounded.lg}`. This frames food photography and promotional graphics cleanly without creating harsh, sharp edges.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary

Anatomy: Fully rounded button utilizing `{colors.primary}` background, `{colors.on-primary}` text, and `{typography.label-md}`.
States: Transition to `button-primary-hover` with a deeper red background (`#C00500`) on hover.
Use when: Directing users to high-priority primary actions such as "Start order" or "Join now".
`→ Deep reference: src/components/Button/PrimaryButton.tsx`

### button-secondary

Anatomy: Fully rounded button with a transparent background, `{colors.primary}` text, and a `{colors.primary}` border.
States: Standard hover states apply subtle background shifts while maintaining the primary red outline.
Use when: Presenting secondary actions that support the primary goal without competing for visual dominance.
`→ Deep reference: src/components/Button/SecondaryButton.tsx`

### card

Anatomy: Content container utilizing `{colors.surface}` background, `{rounded.xl}` corners, and a `{colors.outline}` border.
States: Static container with no active hover states.
Use when: Grouping standard product information, menu items, or secondary content blocks.
`→ Deep reference: src/components/Card/StandardCard.tsx`

### card-elevated

Anatomy: High-priority container utilizing `{colors.surface}` background, `{rounded.xl}` corners, and a transparent border.
States: Leverages `{elevation.lg}` to stand out against `{colors.surface-container}`.
Use when: Highlighting key promotional offers, limited-time deals, or featured marketing campaigns.
`→ Deep reference: src/components/Card/ElevatedCard.tsx`

### input-field

Anatomy: Text input container utilizing `{colors.surface}` background, `{colors.on-surface}` text, `{rounded.md}` corners, and a `{colors.outline}` border.
States: Transitions to `input-field-focus` on focus, changing the border color to `{colors.primary}`.
Use when: Capturing user text inputs, search queries, or form data.
`→ Deep reference: src/components/Input/InputField.tsx`

### link

Anatomy: Inline text element utilizing `{colors.primary}` text color and `{typography.label-md}`.
States: Transitions to `link-hover` on hover, shifting the text color to a deeper red (`#C00500`).
Use when: Navigating to secondary pages or triggering inline text actions like "View all".
`→ Deep reference: src/components/Link/Link.tsx`

### badge

Anatomy: Small, fully rounded tag utilizing `{colors.secondary}` background and `{colors.surface}` text with `{typography.label-sm}`.
States: Static informational indicator.
Use when: Displaying rewards points, active promotions, or general product metadata.
`→ Deep reference: src/components/Badge/Badge.tsx`

### badge-error

Anatomy: Small, fully rounded tag utilizing `{colors.error}` background and `{colors.surface}` text with `{typography.label-sm}`.
States: Static informational indicator.
Use when: Displaying critical alerts, out-of-stock statuses, or error notifications.
`→ Deep reference: src/components/Badge/ErrorBadge.tsx`

### badge-success

Anatomy: Small, fully rounded tag utilizing `{colors.success}` background and `{colors.surface}` text with `{typography.label-sm}`.
States: Static informational indicator.
Use when: Displaying successful actions, active savings, or positive rewards feedback.
`→ Deep reference: src/components/Badge/SuccessBadge.tsx`

### divider

Anatomy: A thin horizontal line utilizing `{colors.outline}` background with a height of 1px.
States: Static structural element.
Use when: Separating distinct content blocks or list items within a single container.
`→ Deep reference: src/components/Divider/Divider.tsx`

### category-chip

Anatomy: Fully rounded interactive pill utilizing `{colors.surface-container}` background and `{colors.on-surface}` text with `{typography.label-md}`.
States: Active state transitions to highlight selected categories.
Use when: Displaying quick-filter options or high-level product categories in a horizontal scroll.
`→ Deep reference: src/components/Chip/CategoryChip.tsx`

### swatch-neutral

Anatomy: Small square block utilizing `{colors.neutral}` background and `{rounded.sm}` corners.
States: Static visual indicator.
Use when: Displaying neutral color options or solid color swatches in product details.
`→ Deep reference: src/components/Swatch/NeutralSwatch.tsx`

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-actions like 'Start order' and 'Join now'. | Never use `{colors.secondary}` for primary call-to-actions, as it is reserved for accents and rewards branding. |
| Apply `{rounded.full}` to all interactive buttons to maintain the friendly, rounded brand aesthetic. | Avoid using sharp corners less than `{rounded.md}` on interactive components or cards. |
| Use `{colors.surface-container}` as the background for category grids and subtle content sections. | Never use `{colors.surface-container}` for primary text elements, which require high readability. |
| Ensure all text on `{colors.primary}` backgrounds uses `{colors.on-primary}` for optimal contrast. | Do not place dark text like `{colors.on-surface}` on `{colors.primary}` without verifying contrast ratios. |
| Utilize `{rounded.xl}` on product cards to frame food photography cleanly. | Avoid mixing multiple shadow styles; stick to the defined `{elevation.sm}`, `{elevation.md}`, and `{elevation.lg}` scale. |
| Apply `{elevation.lg}` selectively to high-priority promotional cards to draw user attention. | Do not apply `{elevation.lg}` to standard product list items; use `{colors.outline}` borders instead. |
| Use `{typography.headline-lg}` for main section headers like 'Slice into savings' to establish clear hierarchy. | Avoid using `{typography.display-lg}` for standard body text or secondary descriptions. |
| Apply `{rounded.full}` to `{colors.secondary}` badges to denote active rewards points clearly. | Do not use `{colors.error}` for standard rewards badges; reserve it strictly for `{colors.error}` semantic states. |

## Content Style

Casey's call-to-action style is action-oriented, direct, and urgent. It utilizes imperative verbs such as "Start order", "Join now", "Get this deal", and "Order now" to drive immediate conversions and streamline the purchasing path.

Headlines are framed in a friendly, casual, and value-focused tone. Phrasing is benefit-led and declarative, emphasizing savings, convenience, and fresh ingredients (e.g., "Slice into savings", "Order Pizza, Snacks, Fuel & More").

Copy density is low to medium. Information is chunked into highly scannable cards, category grids, and promotional banners with minimal body text to maintain a rapid, frictionless ordering flow.

## Imagery & Icons

The imagery style is highly photographic, focusing on appetizing, high-contrast food photography featuring pizzas, sides, and drinks. Product images are isolated on clean white or light grey backgrounds with soft shadows to make the items stand out. Promotional banners use bold, colorful graphics with clear typography overlays. Icons should utilize clean, minimal lines with rounded terminals to align with the friendly shape language of `{rounded.full}` buttons.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Casey's, a playful, accessible, community-oriented convenience and food ordering brand. Match its friendly, energetic tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.headline-lg}`, `{rounded.xl}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only components listed under `components:` (`button-primary`, `card`, `category-chip`, etc.). Do not invent variants the spec doesn't define.
3. Apply `{rounded.full}` to all interactive buttons and category chips; apply `{rounded.xl}` to product cards and promotional banners per the Shapes notes.
4. Follow the Do's and Don'ts table as authoritative. If a user request conflicts — for example, using `{colors.secondary}` for a primary CTA — surface the conflict before proceeding.
5. Keep layouts within the 1200px max-width container, use the `{spacing.xs}` through `{spacing.2xl}` scale for all gaps and padding, and default to mobile-first with one breakpoint at 768px.

## Output contract

**Must:**
- Use all tokens by name; never hardcode a value available in the spec.
- Cover hover, focus, and disabled states for every interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.on-primary}` for all text rendered on `{colors.primary}` backgrounds.
- Use `{typography.label-md}` for button labels and `{typography.display-lg}` only for hero banner headings.
- Match CTA copy style — imperative, direct verbs — when the spec's Voice & Content section applies.

**Must NOT:**
- Invent colors, radii, or font scales absent from the spec.
- Use generic system defaults (e.g., a grey not mapped to `{colors.neutral}`, `{colors.outline}`, or `{colors.surface-container}`).
- Apply sharp corners below `{rounded.md}` on any interactive element or card.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or invent page copy, headings, navigation items, or button labels.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If a value isn't in the spec, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on light surfaces, use `{colors.on-surface}`.
- Prefer composing existing components over introducing new tokens.
- Tokens marked "(inferred)" in spec prose are approximations; authoritative theme files take precedence.
- If torn between two radius values, choose the larger — Casey's shape language favors friendliness over sharpness.