# Dollar General — Design System
> A high-contrast, value-driven retail design system optimized for digital coupons, everyday low prices, and rapid product scanning.
- **Canonical:** https://uiuxskills.com/library/dollar-general
- **Source:** https://www.dollargeneral.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-07-25T02:34:18.810Z

---

---
version: alpha
name: Dollar General
description: >-
  A high-contrast, value-driven retail design system optimized for digital coupons, everyday low
  prices, and rapid product scanning.
tone: Value-focused, accessible, straightforward, and promotional
color-scheme: light
colors:
  primary: "#FDB813"
  secondary: "#000000"
  tertiary: "#CF112C"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-primary: "#000000"
  on-surface: "#222222"
  outline: "#E0E0E0"
  error: "#CF112C"
  success: "#107C41"
typography:
  display-lg:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.2"
  display-md:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.2"
  headline-lg:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 1.875rem
    fontWeight: 700
    lineHeight: "1.3"
  headline-md:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.3"
  headline-sm:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: "1.2"
  label-sm:
    fontFamily: "\"Arial\", sans-serif"
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: "1.2"
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  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}"
    width: 100spx
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    borderColor: "{colors.secondary}"
  card:
    backgroundColor: "{colors.surface}"
    width: 171px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.secondary}"
  link:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.tertiary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  clip-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    width: 32px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Dollar General's visual identity focuses on high-contrast, value-driven retail design. The interface uses its signature bright yellow and deep black brand colors to convey immediate affordability, accessibility, and convenience. Vibrant red accents draw immediate attention to promotional deals, digital coupons, and urgent discount states.

## Colors

The color strategy relies on high contrast to ensure readability and rapid visual scanning of products and deals.

*   **Primary (inferred)** (`{colors.primary}`): The iconic Dollar General yellow, used to establish brand identity and highlight primary actions.
*   **Secondary** (`{colors.secondary}`): Deep black used for primary typography, headers, and high-contrast branding elements.
*   **Tertiary** (`{colors.tertiary}`): Promotional red used for digital coupons, sales, and urgent discount callouts.
*   **Background** (`{colors.background}`): Clean white background to ensure maximum readability and product image clarity.
*   **Surface** (`{colors.surface}`): White surface for product cards and content containers.
*   **Surface-container (inferred)** (`{colors.surface-container}`): Light gray background for structural sections and input fields.
*   **On-primary (inferred)** (`{colors.on-primary}`): Black text used on yellow primary elements to guarantee accessible contrast.
*   **On-surface (inferred)** (`{colors.on-surface}`): Dark charcoal text for body copy and product descriptions on white surfaces.
*   **Outline (inferred)** (`{colors.outline}`): Light gray border color for separating product tiles and grid items.
*   **Error** (`{colors.error}`): Red is used both for promotional alerts and error states.
*   **Success (inferred)** (`{colors.success}`): Green used for cash back rewards and successful coupon clip states.

## Typography

The system relies entirely on highly legible, standard sans-serif typography to ensure accessibility and clean rendering across all devices.

*   **display-lg (inferred)** (`{typography.display-lg}`): Large promotional headers and hero discount banners.
*   **display-md (inferred)** (`{typography.display-md}`): Secondary promotional banners and major section titles.
*   **headline-lg (inferred)** (`{typography.headline-lg}`): Main category headers and landing page section titles.
*   **headline-md (inferred)** (`{typography.headline-md}`): Sub-section headers and featured product carousel titles.
*   **headline-sm (inferred)** (`{typography.headline-sm}`): Product names in detailed views and card group headers.
*   **body-md (inferred)** (`{typography.body-md}`): Standard product titles, descriptions, and body copy.
*   **body-sm (inferred)** (`{typography.body-sm}`): Secondary product details, pricing metadata, and ratings.
*   **label-md (inferred)** (`{typography.label-md}`): Interactive labels, button text, and navigation links.
*   **label-sm (inferred)** (`{typography.label-sm}`): Coupon terms, fine print, and small badge labels.

## Layout

The layout is built around a dense, highly scannable grid optimized for rapid product scanning and deal discovery. Product tiles are standardized to maximize screen real estate, allowing multiple deals to be presented simultaneously. The observed section order top-to-bottom is `nav`, `hero`, `features`, `use-cases`, and `footer`. The hero composition pattern features a centered headline and subhead with a single primary CTA, accompanied by an asymmetric product screenshot offset to the right. On mobile viewports below 768px, the navigation collapses to a hamburger drawer to maintain a clean layout.

## Elevation & Depth

Depth is kept minimal to maintain a flat, accessible, and straightforward discount-store aesthetic. Subtle single-layer shadows are used across three levels to separate interactive elements from the light background, while flat borders define most content boundaries.

*   `elevation.sm` — Standard product cards and subtle interactive elements.
*   `elevation.md` — Dropdowns, popovers, and secondary interactive layers.
*   `elevation.lg` — Modals, drawer overlays, and prominent floating elements.

*Note: The elevation values were inferred to match the flat, high-contrast visual style of the brand.*

## Shapes

The brand utilizes a mix of sharp and slightly rounded corners to maintain a clean, structured, and highly functional interface. Standard content containers and cards use subtle radiuses to preserve grid alignment and density.

The rounded scale ranges from `rounded.sm` (2px) and `rounded.md` (4px) for small badges and inputs, up to `rounded.lg` (8px) and `rounded.xl` (12px) for larger cards and containers. Fully rounded pill shapes (`rounded.full`) are strictly reserved for specific interactive elements like coupon clipping buttons to make them instantly recognizable.

## 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
The primary call-to-action button. Features a background of `{colors.primary}`, text in `{colors.on-primary}`, and uses `{typography.label-md}`. Use for high-priority actions like checkout or main promotional sign-ups.

### button-primary-hover
The hover state for primary buttons. Shifts the background to `{colors.secondary}` and text to `{colors.background}` to provide clear, high-contrast visual feedback.

### button-secondary
An outlined button style with a transparent background, `{colors.secondary}` text, and a border matching `{colors.secondary}`. Use for secondary actions like filtering or viewing details.

### card
The standard product tile container. Uses `{colors.surface}` background, a width of 171px, and a border of `{colors.outline}`. Use to display individual products in a dense grid.

### card-elevated
An alternative card style with a `{colors.surface}` background and transparent border, relying on `{elevation.sm}` for separation. Use for featured products or highlighted deals.

### input-field
Standard form input. Uses `{colors.surface-container}` background, `{colors.on-surface}` text, and a border of `{colors.outline}`. Use for search bars and form entries.

### input-field-focus
The active state for input fields. Shifts the background to `{colors.surface}` and border to `{colors.secondary}` to focus user attention.

### link
Text link using `{colors.secondary}` and `{typography.body-md}`. Use for inline navigation and secondary actions.

### link-hover
Hover state for links, shifting the text color to `{colors.tertiary}` to indicate interactivity.

### badge
Promotional badge using `{colors.tertiary}` background and `{colors.background}` text. Use for active discounts and digital coupon highlights.

### badge-success
Success badge using `{colors.success}` background and `{colors.background}` text. Use for cash back rewards and successful coupon clips.

### divider
Structural line with `{colors.outline}` background and a height of 1px. Use to separate categories and grid sections.

### clip-button
Compact interactive button with `{colors.primary}` background and `{colors.on-primary}` text, fixed at 32px width. Use specifically for digital coupon clipping.

### badge-error
Error alert badge using `{colors.error}` background, `{typography.label-sm}`, `{rounded.sm}`, and 4px 8px padding. Use for critical errors or stock warnings.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons to ensure high visibility. | Do not use `{colors.tertiary}` for standard non-promotional buttons to avoid confusing the user. |
| Apply `{colors.tertiary}` for promotional badges, digital coupons, and urgent discount callouts. | Never place white text directly on `{colors.primary}` without verifying contrast ratios. |
| Maintain standard `{components.card}` dimensions of 171px width for product grid consistency. | Avoid mixing different border radiuses on adjacent `{components.card}` elements. |
| Use `{colors.outline}` for subtle dividers to separate product categories without adding visual noise. | Do not remove the border on `{components.input-field}` unless it is in a high-contrast container. |
| Ensure all text on `{colors.primary}` uses `{colors.on-primary}` for optimal contrast and readability. | Avoid applying heavy shadows; stick to `{elevation.sm}` for standard product cards. |
| Use `{typography.body-sm}` for secondary product details and ratings inside product tiles. | Do not use `{typography.display-lg}` on mobile viewports without proper scaling to prevent layout overflow. |
| Use `{rounded.full}` exclusively for interactive elements like `{components.clip-button}` to denote actionability. | Do not apply `{rounded.full}` to standard `{components.card}` containers. |
| Shift `{components.input-field}` to `{components.input-field-focus}` on active user interaction to highlight the input. | Do not use `{colors.surface-container}` as a background for primary buttons. |

## Content Style

CTA labels must use imperative verbs, sentence case, and no exclamation points. They should remain brief and direct, typically spanning only 2 to 3 words (e.g., "Get started", "Talk to sales").

Headlines must focus on concrete benefit statements and avoid marketing superlatives. Use a clean mix of declarative statements and product-named features to convey immediate value.

Copy density must remain low to support rapid scanning. Use short paragraphs of 1 to 3 sentences, and rely heavily on bullet lists and inline product names to break up text blocks.

## Imagery & Icons

Product imagery must be clean, isolated on white backgrounds, and highly literal to support rapid visual scanning. Promotional banners should combine vibrant photographic lifestyle imagery with bold discount typography. Icons must use clean, minimal shapes that align with the straightforward, high-contrast aesthetic of the brand.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Dollar General, a value-focused, accessible retail brand with a bold, promotional visual identity. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.headline-lg}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or font families.
2. Render only the components listed under `components:` (`button-primary`, `card`, `clip-button`, `badge-error`, etc.). Do not invent variants the spec does not define.
3. Follow the layout note: product tiles default to 171×292px; use the dense grid structure to maximize scannable deal density.
4. Apply shape tokens as the spec directs — `{rounded.md}` (4px) to cards and inputs, `{rounded.lg}` (8px) to elevated cards, `{rounded.full}` only to `clip-button` and pill-style interactive elements.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., white text on `{colors.primary}`), surface the conflict before proceeding.

## Output contract

**Must:**
- Use `{colors.on-primary}` (black) for all text placed on `{colors.primary}` backgrounds.
- Apply `{colors.tertiary}` exclusively to promotional badges, coupons, and urgent discount callouts — never to standard action buttons.
- Cover hover, focus, and disabled states for every interactive component when the spec defines them.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gaps; no arbitrary values.
- Write CTAs as imperative, sentence-case, 2–3 words with no exclamation marks per the voice spec.

**Must NOT:**
- Invent colors, radii, or font scales absent from the spec.
- Substitute generic utility defaults when a brand token exists.
- Add emoji, marketing superlatives, or filler copy.
- Mix different border radii on adjacent `{components.card}` elements.
- Rewrite, replace, or restructure existing page copy, headings, or navigation items.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- Use `{colors.surface-container}` for structural section backgrounds; `{colors.on-surface}` for body text on white.
- Default to mobile-first with one breakpoint at 768px; avoid `{typography.display-lg}` at mobile widths without confirmed scaling.
- Tokens marked "(inferred)" in the spec are approximations; authoritative Figma or theme-file values take precedence.