# Gordon Food Service — Design System
> Gordon Food Service is a prominent family-owned food distributor serving restaurants, healthcare facilities, and schools across North America.
- **Canonical:** https://uiuxskills.com/library/gordon-food-service
- **Source:** https://gfs.com/en-us/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-09-30T05:00:02.046Z

---

---
version: alpha
name: Gordon Food Service
tagline: Your Dedicated Foodservice Partner
description: >-
  Gordon Food Service is a prominent family-owned food distributor serving restaurants, healthcare
  facilities, and schools across North America.
tone: professional, reliable, warm, and community-focused
color-scheme: light
colors:
  primary: "#C80000"
  secondary: "#69727D"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  surface-dim: "#F8F7F3"
  surface-container: "#EDEBE2"
  on-primary: "#FFFFFF"
  on-surface: "#292D35"
  outline: "#C8C8C8"
  error: "#D13E33"
  info: "#4E87A0"
typography:
  display-lg:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-md:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  body-lg:
    fontFamily: Lato
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-md:
    fontFamily: Lato
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  label-md:
    fontFamily: Lato
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Lato
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  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.md}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "#A00000"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.surface-container}"
  input-field-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "#A00000"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 20px rgba(0, 0, 0, 0.2)
---

## Overview

Gordon Food Service utilizes a clean, professional, and highly trustworthy visual identity. Anchored by a bold primary red and balanced with warm neutral tones, the design system emphasizes reliability, heritage, and ease of use for foodservice businesses. The overall aesthetic is accessible, structured, and community-focused, reflecting over a century of distribution expertise.

## Colors

The color strategy relies on a strong primary brand red to draw immediate attention to key actions, supported by a warm neutral palette that provides soft contrast and excellent readability. 

* **Primary (`colors.primary`) (#C80000):** The signature Gordon Red, used for primary branding, key call-to-actions, and critical highlights.
* **Secondary (`colors.secondary`) (#69727D):** A slate gray used for secondary text, icons, and subtle UI elements.
* **Background (`colors.background`) (#FFFFFF):** Clean white background used for the main canvas to ensure high readability.
* **Surface (`colors.surface`) (#FFFFFF):** White surface color for cards and content containers.
* **Surface-dim (inferred) (`colors.surface-dim`) (#F8F7F3):** Slightly off-white warm gray used for subtle section backgrounds.
* **Surface-container (`colors.surface-container`) (#EDEBE2):** A warm cream/beige tone used for container backgrounds and input borders to add warmth and contrast.
* **On-primary (`colors.on-primary`) (#FFFFFF):** White text used on primary red backgrounds for maximum contrast.
* **On-surface (`colors.on-surface`) (#292D35):** Dark charcoal gray used for primary body text and headings to avoid the harshness of pure black.
* **Outline (`colors.outline`) (#C8C8C8):** Light gray used for borders, dividers, and structural lines.
* **Error (`colors.error`) (#D13E33):** A warm red variant used for error states and validation alerts.
* **Info (`colors.info`) (#4E87A0):** A muted blue used for informational banners and secondary accents.

## Typography

The typography hierarchy pairs Montserrat for headings to establish a bold, authoritative corporate presence, with Lato for body copy to ensure clean, highly legible reading across all devices.

* **display-lg (`typography.display-lg`):** Montserrat. Used for main hero titles to establish a bold, authoritative presence.
* **display-md (inferred) (`typography.display-md`):** Montserrat. Used for secondary hero titles and major section headers.
* **headline-lg (inferred) (`typography.headline-lg`):** Montserrat. Used for standard section headings throughout the page.
* **headline-md (inferred) (`typography.headline-md`):** Montserrat. Used for card titles and smaller content group headers.
* **body-lg (`typography.body-lg`):** Lato. Used for introductory paragraphs and hero subtext.
* **body-md (`typography.body-md`):** Lato. Used for standard body copy and general descriptions.
* **label-md (inferred) (`typography.label-md`):** Lato. Used for button labels, form headers, and navigation links.
* **label-sm (inferred) (`typography.label-sm`):** Lato. Used for small badges, micro-copy, and helper text.

## Layout

The layout relies on a structured grid with generous container padding and clear section margins to separate content blocks. 
* **Spacing Scale:** Built on an 8px base unit, ranging from `spacing.xs` (4px) up to `spacing.2xl` (48px) to maintain consistent vertical rhythm.
* **Section Order:** The observed top-to-bottom page flow is `nav` -> `hero` -> `features` -> `use-cases` -> `careers` -> `social-proof` -> `footer`.
* **Hero Pattern:** Full-width background image with left-aligned white text and a single primary red CTA button.
* **Responsive Behavior:** Mobile-first layout with navigation collapsing into a hamburger menu and grid columns stacking vertically on smaller viewports. Sections are clearly demarcated using alternating white (`colors.background`) and warm cream (`colors.surface-dim`) backgrounds to maintain visual interest.

## Elevation & Depth

Depth is subtly applied using soft, single-layer shadows on interactive elements, while most layout blocks remain flat, relying on color contrast and borders to establish hierarchy.

* **elevation.sm:** Used for standard card lift and subtle hover states.
* **elevation.md:** Used for dropdowns, popovers, and floating elements like the persistent chat assistant.
* **elevation.lg:** Reserved for modal overlays, drawers, and high-priority dialogs.

## Shapes

Rounded corners are consistently applied to balance modern software aesthetics with professional corporate presentation. 

The system relies heavily on `rounded.md` (8px) as the standard radius for buttons, input fields, and cards. Small metadata elements use `rounded.sm` (4px), while `rounded.full` (9999px) is strictly reserved for badges and circular icons to prevent them from looking like interactive buttons.

## 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. Built with a `colors.primary` background, `colors.on-primary` text, and `rounded.md` corners. It uses `typography.label-md` and features a transition to `button-primary-hover` (#A00000) on hover. Use only for the single most important action in a section.

### button-secondary
An outlined button variant for secondary actions. Built with a `colors.background` background, `colors.primary` text, and a `colors.primary` border. It maintains `rounded.md` corners and `typography.label-md`. Use when multiple actions are presented together.

### card
The standard container for grouping related content. Built with a `colors.surface` background, `rounded.md` corners, and a subtle `colors.outline` border. Use for features, services, and resource grids.

### card-elevated
A prominent card variant that uses `elevation.sm` or `elevation.md` instead of a border to establish depth. Built with `colors.surface` and `rounded.md`. Use to highlight featured articles, tools, or testimonials.

### input-field
Standard form input. Built with a `colors.background` background, `colors.on-surface` text, and a `colors.surface-container` border. On focus, it transitions to `input-field-focus` which highlights the border with `colors.primary`.

### badge
A small, pill-shaped label for categories and metadata. Built with a `colors.surface-container` background, `colors.on-surface` text, and `rounded.full` corners. Use to tag content without implying interactivity.

### divider
A thin structural line used to separate content blocks. Built with a `colors.outline` background and a height of 1px. Use to separate distinct sections or list items.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons like `{components.button-primary}`. | Never use `{colors.primary}` for body text as it reduces readability and strains the eyes. |
| Apply `{colors.surface-container}` as a background color for secondary content blocks to create visual separation. | Do not apply `{rounded.full}` to standard cards or content blocks; reserve it for badges. |
| Ensure all body text uses `{typography.body-md}` or `{typography.body-lg}` with `{colors.on-surface}` for optimal readability. | Do not mix font families; restrict headings to `{typography.display-lg}` and body copy to `{typography.body-md}`. |
| Use `{rounded.md}` for standard interactive components including `{components.input-field}` and `{components.button-primary}`. | Never omit the focus ring or border color change on `{components.input-field-focus}`. |
| Separate distinct content sections with a subtle `{components.divider}` using `{colors.outline}`. | Do not use heavy shadows like `{elevation.lg}` on standard flat cards; keep them flat or use `{elevation.sm}`. |
| Utilize `{elevation.md}` on floating elements like the chat assistant to elevate them above the main content. | Avoid using `{colors.surface-container}` without sufficient contrast against `{colors.on-surface}` text. |
| Apply `{colors.surface-dim}` for subtle background variation behind text-heavy sections. | Do not use `{colors.secondary}` for primary action buttons; reserve it for secondary text and icons. |
| Use `{components.badge-error}` with `{colors.error}` and `{rounded.full}` strictly for validation errors or critical alerts. | Do not use `{colors.info}` or `{colors.error}` interchangeably; maintain clear semantic separation. |

## Content Style

### CTA Style
Button labels must use active, imperative verbs in sentence case. Keep labels concise, typically 2-3 words (e.g., "Become a Customer", "Explore Products", "Learn More"). Avoid passive or generic phrasing.

### Heading Tone
Headlines must be benefit-driven, professional, and direct. Focus on operational efficiency, quality, and partnership. Phrasing should be declarative and authoritative, establishing trust immediately.

### Copy Density
Maintain a moderate copy density. Use short, scannable paragraphs paired with clear bullet points and distinct section headers. Ensure generous whitespace around text blocks to prevent visual fatigue.

## Imagery & Icons

The brand employs a mixed imagery treatment. High-quality food photography showcasing fresh ingredients and active kitchen environments is paired with clean, flat vector icons representing business segments and services. Photographic assets should feel authentic, warm, and well-lit, avoiding overly staged stock photography. Icons must remain simple, flat, and utilize `{colors.secondary}` or `{colors.primary}` to maintain visual alignment with the design system.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Gordon Food Service, a professional, reliable, and enterprise-focused foodservice brand. Match its clean, trustworthy, and community-grounded 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.body-md}`, `{rounded.md}` — never as hardcoded hex values, pixel sizes, or font strings.
2. Use only the components listed under `components:` (`button-primary`, `card`, `input-field`, etc.). Do not invent variants, states, or compound patterns the spec does not define.
3. Apply the spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, gap, and margin decisions. Follow the layout narrative — alternating `{colors.background}` and `{colors.surface-dim}` sections, generous container padding, clear section margins.
4. Treat the Do's and Don'ts as authoritative. If a user request conflicts (e.g. using `{colors.primary}` for body text), surface the conflict explicitly before proceeding.
5. Default shape for buttons, inputs, and cards is `{rounded.md}`. Reserve `{rounded.full}` for badges and circular icons only.

## Output contract

**Must:**
- Use tokens by name for every color, type scale, radius, and spacing decision.
- Render hover, focus, and disabled states for all interactive components where the spec defines them (notably `input-field-focus`, `button-primary-hover`, `link-hover`).
- Apply `{typography.display-lg}` or `{typography.display-md}` (Montserrat) to headings and `{typography.body-md}` or `{typography.body-lg}` (Lato) to body copy — never mix families.
- Write CTAs in sentence case using short imperative verbs, matching the voice and content guidelines.
- Maintain WCAG AA contrast; `{colors.on-primary}` on `{colors.primary}` surfaces, `{colors.on-surface}` on light surfaces.

**Must NOT:**
- Invent colors, fonts, radii, or elevation values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, filler text, or marketing copy.
- Apply `{colors.primary}` to body text.
- Rewrite, replace, or restructure page copy, navigation items, or content hierarchy.
- Use heavy shadow treatments on standard flat cards.

## When in doubt
- Ask the user before introducing any value not present in the spec.
- For ambiguous backgrounds, default to `{colors.surface-dim}` for secondary sections and `{colors.background}` for primary canvas.
- For unspecified breakpoints, use mobile-first with a single breakpoint at 768px per the layout notes.
- Prefer composing existing spec components over adding new tokens.
- Tokens described as inferred approximations yield to any authoritative theme file or Storybook source the product team provides.