# Sysco — Design System
> Sysco is the global leader in selling, marketing and distributing food products to restaurants, healthcare and educational facilities, lodging establishments and other customers.
- **Canonical:** https://uiuxskills.com/library/sysco
- **Source:** https://www.sysco.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-08-26T00:16:17.201Z

---

---
version: alpha
name: Sysco
tagline: Wholesale Restaurant Food Distributor
description: >-
  Sysco is the global leader in selling, marketing and distributing food products to restaurants,
  healthcare and educational facilities, lodging establishments and other customers.
tone: Professional, reliable, community-oriented, and authoritative.
color-scheme: light
colors:
  primary: "#003087"
  secondary: "#007A33"
  accent: "#FFC72C"
  surface: "#FFFFFF"
  surface-dim: "#F4F5F7"
  surface-container: "#E9EBF0"
  on-primary: "#FFFFFF"
  on-secondary: "#FFFFFF"
  on-surface: "#1A1A1A"
  outline: "#D1D5DB"
  error: "#D32F2F"
  success: "#2E7D32"
typography:
  display-lg:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 1.875rem
    fontWeight: 700
    lineHeight: "1.3"
  headline-md:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.35"
  headline-sm:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: "\"Helvetica Neue\", Arial, sans-serif"
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.05em
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}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.lg}"
    height: 44px
  button-primary-hover:
    backgroundColor: "#002260"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.lg}"
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.lg}"
    height: 44px
  button-secondary-hover:
    backgroundColor: "#005C25"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.lg}"
    height: 44px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  button-accent:
    backgroundColor: "{colors.accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
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

Sysco's visual identity communicates trust, reliability, and industry leadership at a global scale. By balancing a deep, authoritative corporate blue with fresh green accents, the design establishes a highly professional B2B presence. The interface evokes a sense of supply chain efficiency, fresh quality, and dependable community partnership.

## Colors

The color strategy centers on establishing corporate trust while highlighting freshness and sustainability. A deep blue anchor is paired with a vibrant green to represent the journey from farm to table, supported by a clean, neutral background palette that ensures high contrast and readability.

*   `colors.primary` (inferred) (#003087): Deep blue representing corporate trust, stability, and industry leadership.
*   `colors.secondary` (inferred) (#007A33): Fresh green representing produce, sustainability, and growth.
*   `colors.accent` (inferred) (#FFC72C): Gold used for highlights, alerts, and warm accents.
*   `colors.surface` (#FFFFFF): Clean white background for maximum readability and contrast.
*   `colors.surface-dim` (inferred) (#F4F5F7): Light gray background for section differentiation and card containers.
*   `colors.surface-container` (inferred) (#E9EBF0): Slightly darker gray for structural elements and borders.
*   `colors.on-primary` (#FFFFFF): White text for high contrast on primary blue elements.
*   `colors.on-secondary` (inferred) (#FFFFFF): White text for high contrast on secondary green elements.
*   `colors.on-surface` (inferred) (#1A1A1A): Near-black text for optimal readability on light surfaces.
*   `colors.outline` (inferred) (#D1D5DB): Standard gray border color for inputs and dividers.
*   `colors.error` (inferred) (#D32F2F): Standard red for error states and critical alerts.
*   `colors.success` (inferred) (#2E7D32): Standard green for success states and positive confirmations.

## Typography

The typography relies on clean, highly legible sans-serif typefaces to convey professionalism and authority across digital touchpoints. The clean geometry of "Helvetica Neue" and Arial ensures that complex product catalogs and dense operational data remain highly readable.

*   `typography.display-lg` (inferred): Large sans-serif headings for hero banners and major promotional statements.
*   `typography.display-md` (inferred): Medium sans-serif headings for secondary hero banners and landing page headers.
*   `typography.headline-lg` (inferred): Bold sans-serif titles for major content sections.
*   `typography.headline-md` (inferred): Semi-bold sans-serif titles for subsections and card headings.
*   `typography.headline-sm` (inferred): Small semi-bold sans-serif titles for small cards and feature callouts.
*   `typography.body-md` (inferred): Standard body copy for optimal readability across all devices.
*   `typography.body-sm` (inferred): Small body copy for secondary text, footer links, and captions.
*   `typography.label-md` (inferred): Bold, slightly tracked labels for buttons, navigation links, and badges.
*   `typography.label-sm` (inferred): Small bold labels for micro-copy, tags, and small badges.

## Layout

The layout relies on a structured, high-density grid system designed to present vast product catalogs and corporate information clearly. Standard container max-widths align content, utilizing a spacing scale from `spacing.xs` (4px) to `spacing.2xl` (48px) to separate major thematic blocks. The observed top-to-bottom section order follows: `nav`, `hero`, `features`, `about`, `locations`, and `footer`. The hero composition pattern features a rotating carousel banner with high-impact food photography, bold headlines, and direct call-to-action buttons. Responsive behavior ensures a mobile-optimized navigation drawer, collapsing multi-column grids, and scaled typography for smaller viewports.

## Elevation & Depth

Subtle, multi-layered shadows are used conservatively across three levels to maintain a clean, flat, and highly accessible enterprise aesthetic. The shadow values are inferred to support interactive states without cluttering the layout.

*   `elevation.sm` (inferred): Applied to small interactive elements and subtle card lifts.
*   `elevation.md` (inferred): Used for dropdown menus, popovers, and standard elevated cards to separate them from the background.
*   `elevation.lg` (inferred): Reserved for modals, drawer overlays, and high-impact floating components.

## Shapes

The brand utilizes a highly structured, conservative corner radius system to maintain a professional, established character. Small border-radii are applied to interactive and structural elements to soften the corporate layout without losing its enterprise authority.

Buttons and input fields utilize `rounded.md` (4px) to provide approachable but structured touch targets. Cards and content blocks use `rounded.lg` (8px) or `rounded.xl` (12px) to define boundaries, while badges utilize `rounded.full` (9999px) for pill-shaped indicators.

## 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

Composed of a `{colors.primary}` background with `{colors.on-primary}` text using `{typography.label-md}` and a `{rounded.md}` corner radius. It transitions to `button-primary-hover` on hover. Use this for the main call-to-action on any page or section, such as "Shop Now" or "Get Started".

### button-secondary

Composed of a `{colors.secondary}` background with `{colors.on-secondary}` text using `{typography.label-md}` and a `{rounded.md}` corner radius. It transitions to `button-secondary-hover` on hover. Use this for secondary actions, environmental highlights, or sustainability-related calls-to-action.

### button-accent

Composed of a `{colors.accent}` background with a `{rounded.md}` corner radius and `{typography.label-md}` text. Use this sparingly for high-visibility highlights or promotional alerts.

### card

A structural container featuring a `{colors.surface}` background, `{colors.on-surface}` text, a `{colors.outline}` border, and a `{rounded.lg}` corner radius. Use this to group related product categories, services, or article previews on a flat surface.

### card-elevated

A structural container featuring a `{colors.surface}` background, `{colors.on-surface}` text, and a `{rounded.lg}` corner radius, lifted by a subtle shadow. Use this to highlight featured content or interactive items that need to stand out from the background.

### card-dim

A low-contrast container featuring a `{colors.surface-dim}` background, `{colors.on-surface}` text, and a `{rounded.md}` corner radius with `16px` padding. Use this to separate secondary content blocks or informational callouts from the main white surface.

### input-field

An entry field featuring a `{colors.surface}` background, `{colors.on-surface}` text, `{typography.body-md}`, a `{colors.outline}` border, and a `{rounded.md}` corner radius. It transitions to `input-field-focus` with a `{colors.primary}` border when active. Use this for all search bars, login forms, and contact inputs.

### link

An inline text element using `{typography.body-md}` and `{colors.primary}` text. It transitions to `link-hover` with `{colors.secondary}` text on hover. Use this for inline navigation, text links, and secondary pathways.

### badge

A small pill-shaped indicator using `{colors.surface-container}` background, `{colors.on-surface}` text, `{typography.label-sm}`, and a `{rounded.full}` corner radius. Use this for category tags, status labels, or counts. Specialized variants include `badge-success` (using `{colors.success}`) and `badge-error` (using `{colors.error}`).

### divider

A simple structural rule using `{colors.outline}` with a height of `1px`. Use this to separate distinct content blocks or list items vertically.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons like `{components.button-primary}`. | Never use `{colors.accent}` for body text as it lacks sufficient contrast against `{colors.surface}`. |
| Apply `{colors.surface-dim}` as a background color for content sections to separate them from the main `{colors.surface}`. | Do not apply `{rounded.full}` to standard `{components.card}` elements; keep them to `{rounded.lg}`. |
| Use `{typography.headline-lg}` for major section headings to establish a clear visual hierarchy. | Avoid using `{typography.display-lg}` for standard body copy or secondary labels. |
| Ensure all form inputs transition to `{components.input-field-focus}` on active state to maintain accessibility. | Do not omit the `{colors.outline}` border on `{components.input-field}` elements to prevent them from blending into the background. |
| Utilize `{spacing.md}` for standard padding inside `{components.card}` components. | Avoid using heavy shadows beyond `{elevation.lg}` to maintain the clean, flat enterprise aesthetic. |
| Apply `{colors.secondary}` for secondary actions and environmental/sustainability highlights via `{components.button-secondary}`. | Never place `{colors.on-primary}` text directly on a `{colors.surface}` background without a high-contrast container. |
| Use `{typography.body-sm}` for secondary body copy, footer text, and captions to maintain hierarchy. | Do not use `{typography.label-md}` for long paragraphs of body text. |
| Apply `{rounded.full}` exclusively to `{components.badge}` elements for pill-shaped tags. | Do not use `{colors.success}` or `{colors.error}` for standard text links; reserve them for status indicators. |

## Content Style

Call-to-action labels are imperative, action-oriented, and direct. They are typically kept short, often consisting of two words (e.g., "Shop Now", "Learn More", "Get Started") to drive immediate engagement and guide the user through the ordering or registration funnel.

Headlines are direct, benefit-driven, and community-focused. They clearly state the value proposition or operational benefit to the customer, maintaining a professional and authoritative voice that builds trust with business operators.

The layout maintains a moderate copy density. High-level value propositions are balanced with structured bullet points and generous whitespace to ensure readability for busy operators and B2B clients who need to scan information quickly.

## Imagery & Icons

The imagery style uses a mixed treatment that combines high-quality photography of fresh food, logistics, and diverse associates with clean, flat iconography. Photography should feel authentic and professional, highlighting fresh produce, custom cuts of meat, and real-world supply chain operations. Icons should be minimal, geometric, and functional, representing various food categories and services clearly without distracting from the content. Keep brand logos locked to standard proportions and avoid placing them over busy photographic backgrounds without a solid backing container.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Sysco, an enterprise B2B wholesale food distribution brand with a professional, reliable, and authoritative tone. 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.body-md}`, `{spacing.lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font stacks.
2. Render only the components listed under `components:` (`button-primary`, `card`, `input-field`, etc.). Do not invent variants (e.g., outlined cards, ghost buttons) that the spec does not define.
3. Follow the Layout notes when structuring density: use a structured grid, align content within standard container max-widths, and separate major thematic blocks with `{spacing.2xl}`.
4. Apply the Shapes notes conservatively: `{rounded.md}` for inputs and buttons, `{rounded.lg}` for cards. Never apply `{rounded.full}` to cards.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.accent}` for body text), surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Cover hover, focus, and disabled states for all interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively for all padding, margin, and gap values.
- Apply `{colors.primary}` to primary CTA backgrounds and `{colors.on-primary}` for their text.
- Match CTA copy style: imperative, 2-word phrases per the Voice and Content section.
- Maintain WCAG AA contrast minimums; never place `{colors.accent}` on `{colors.surface}` as body text.

**Must NOT:**
- Introduce colors, font families, or radii absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, filler copy, or unsolicited marketing text.
- Reference any specific framework, library, or toolchain.
- Rewrite, replace, or extend existing page copy, navigation items, or page sections as a side effect of applying tokens.

## When in doubt
- If a required token is not defined in the spec, ask the product team before inventing a value.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous background roles, default to `{colors.surface-dim}` for section containers and `{colors.surface}` for primary page backgrounds.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px, consistent with the high-density grid described in Layout notes.
- Tokens marked "(inferred)" in the spec are visual approximations; if an authoritative theme file or design token source exists for Sysco, those values override inferred ones.