# Hy-Vee — Design System > A vibrant, red-dominant e-commerce and grocery platform designed for high-contrast readability and friendly consumer convenience. - **Canonical:** https://uiuxskills.com/library/hy-vee - **Source:** https://www.hy-vee.com/ - **Category:** E-commerce & Retail - **Compatible tools:** claude, cursor, lovable, figma-make - **Coverage:** 80% - **License:** MIT - **Last updated:** 2026-08-18T21:41:21.844Z --- --- version: alpha name: Hy-Vee tagline: Grocery Store with Aisles Online Ordering description: >- A vibrant, red-dominant e-commerce and grocery platform designed for high-contrast readability and friendly consumer convenience. tone: friendly, energetic, accessible, and community-focused color-scheme: light colors: primary: "#D82117" secondary: "#AF0000" background: "#FFFFFF" surface: "#F7F5F0" surface-container: "#F3F1EB" on-primary: "#FFFFFF" on-surface: "#000000" outline: "#E0E0E0" error: "#D82117" success: "#2E7D32" link: "#BDEFFD" typography: display-lg: fontFamily: Montserrat fontSize: 48px fontWeight: 700 lineHeight: "1.1" 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.4" letterSpacing: 0em headline-sm: fontFamily: Montserrat fontSize: 18px fontWeight: 600 lineHeight: "1.4" letterSpacing: 0em body-md: fontFamily: Arial fontSize: 14px fontWeight: 400 lineHeight: "1.5" letterSpacing: 0em body-sm: fontFamily: Arial fontSize: 12px fontWeight: 400 lineHeight: "1.4" letterSpacing: 0em label-md: fontFamily: Montserrat fontSize: 14px fontWeight: 600 lineHeight: "1" letterSpacing: 0.02em label-sm: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: "1" letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px xl: 16px full: 9999px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 48px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: 12px 24px height: 44px width: auto button-primary-hover: backgroundColor: "{colors.secondary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: 12px 24px height: 44px width: auto button-secondary: backgroundColor: "{colors.link}" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.sm}" padding: 10px 20px height: 40px width: auto input-field: backgroundColor: "{colors.secondary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 8px 16px height: 40px width: 100% borderColor: "{colors.primary}" input-field-focus: backgroundColor: "{colors.secondary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 8px 16px height: 40px width: 100% borderColor: "{colors.primary}" outlineOffset: 2px card: backgroundColor: "{colors.background}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: 16px height: auto width: 100% borderColor: "{colors.outline}" card-elevated: backgroundColor: "{colors.background}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: 16px height: auto width: 100% card-container: backgroundColor: "{colors.surface-container}" textColor: "{colors.on-surface}" rounded: "{rounded.xl}" padding: 24px height: auto width: 100% link: textColor: "{colors.primary}" typography: "{typography.label-md}" link-hover: textColor: "{colors.secondary}" typography: "{typography.label-md}" badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-sm}" rounded: "{rounded.sm}" padding: 2px 8px height: 20px width: auto badge-error: backgroundColor: "{colors.error}" textColor: "{colors.on-primary}" typography: "{typography.label-sm}" rounded: "{rounded.sm}" padding: 2px 8px height: 20px width: auto badge-success: backgroundColor: "{colors.success}" textColor: "{colors.on-primary}" typography: "{typography.label-sm}" rounded: "{rounded.sm}" padding: 2px 8px height: 20px width: auto divider: backgroundColor: "{colors.outline}" height: 1px width: 100% hero-banner: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.xl}" padding: 48px height: auto width: 100% fab: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: 12px 24px height: 48px width: auto motion: duration-short: 200ms duration-medium: 500ms easing-standard: ease-in-out 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 The Hy-Vee visual identity is defined by a high-energy, red-dominant color scheme that drives immediate action and builds strong brand recognition. This bold primary tone is balanced by soft, warm neutral surfaces and clean, highly legible typography to establish a friendly and accessible digital storefront. The overall experience feels energetic, trustworthy, and community-focused, optimizing the path to purchase for everyday grocery shoppers. ## Colors The color strategy leverages a high-contrast palette to drive engagement while maintaining strict readability across e-commerce interfaces. A vibrant red acts as the primary brand anchor, supported by deep red hover states and clean, warm neutrals that soften the overall layout. * `colors.primary` (#D82117): Signature red used for primary call-to-actions, brand logos, and key interactive elements to drive engagement. * `colors.secondary` (#AF0000): Deeper red used for hover states on primary elements and as the background for high-contrast search inputs. * `colors.background` (#FFFFFF): Pure white background used to maintain a clean, uncluttered canvas for product listings and content grids. * `colors.surface` (inferred) (#F7F5F0): A warm, soft cream neutral used for hero banners and large content containers to soften the visual weight. * `colors.surface-container` (inferred) (#F3F1EB): A slightly darker warm neutral used for secondary content blocks and card backgrounds. * `colors.on-primary` (#FFFFFF): White text and iconography used on top of primary and secondary red backgrounds to ensure maximum contrast. * `colors.on-surface` (#000000): Deep black text used for body copy and headings on light backgrounds to meet strict accessibility standards. * `colors.outline` (inferred) (#E0E0E0): A light grey stroke used for subtle dividers, borders, and structural boundaries. * `colors.error` (inferred) (#D82117): The primary red is also leveraged for error states and urgent alerts to maintain a cohesive palette. * `colors.success` (inferred) (#2E7D32): A standard green used for positive confirmations, savings badges, and successful actions. * `colors.link` (#BDEFFD): A soft light blue accent color used for secondary links, promotional highlights, and specific interactive states. ## Typography The typography system pairs the geometric, friendly sans-serif Montserrat for headings and labels with the highly legible, standard Arial font for body copy. This combination ensures that promotional headings feel energetic and structured, while product details and pricing remain effortless to read at small sizes. * `typography.display-lg` (Montserrat): Main hero carousel headlines to grab immediate attention with a friendly, geometric sans-serif feel. * `typography.display-md` (inferred) (Montserrat): Secondary hero banners and major section headings. * `typography.headline-lg` (inferred) (Montserrat): Product category titles and promotional block headers. * `typography.headline-md` (inferred) (Montserrat): Standard card titles and sub-sections. * `typography.headline-sm` (inferred) (Montserrat): Small product titles and minor headings. * `typography.body-md` (inferred) (Arial): Primary body font size used for product descriptions, metadata, and general copy. * `typography.body-sm` (Arial): Helper text, legal disclaimers, and secondary product details. * `typography.label-md` (inferred) (Montserrat): Button labels, navigation links, and interactive controls. * `typography.label-sm` (inferred) (Montserrat): Small badges, tags, and micro-navigation elements. ## Layout The layout utilizes a structured grid system with a standard container max-width of 1200px and a systematic spacing scale built on a base unit of 4px. Large sections and hero banners utilize generous padding like `spacing.2xl` (48px) to create visual breathing room, while product grids use tighter spacing like `spacing.md` (12px) to `spacing.lg` (16px) to maximize density and information display. The observed section order top-to-bottom is nav, hero, features, deals, products, and footer. The hero banner follows a pattern of a large, warm-toned carousel featuring bold, left-aligned typography, a single primary pill CTA, and subtle navigation arrows on the left and right edges. On mobile, the multi-column desktop grid transitions to a single-column stacked layout, and the main navigation collapses into a mobile-friendly drawer. ## Elevation & Depth Depth is primarily flat, relying on clean borders and background color changes to separate content, with subtle shadows applied to interactive and floating elements. * `elevation.sm` (inferred): Applied to standard product cards on hover or to separate grid items, indicating hoverability. * `elevation.md` (inferred): Used for interactive floating elements like the "Need Help?" floating action button (FAB) to establish stack order over the main canvas. * `elevation.lg` (inferred): Reserved for high-priority overlays, dropdowns, and modal dialogs that require distinct separation from the page content. ## Shapes The brand embraces a friendly, approachable aesthetic by heavily utilizing rounded corners across interactive and structural elements. Primary call-to-actions, search inputs, and floating action buttons are styled as fully rounded pills using `rounded.full` to invite interaction and soften the interface. Content containers and hero banners use a softer, large radius like `rounded.xl` (16px) or `rounded.lg` (12px) to frame imagery and text warmly. Smaller elements, such as secondary buttons and badges, utilize tighter radii like `rounded.sm` (4px) to maintain structural alignment without appearing sharp. ## 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 consists of a pill-shaped container styled with `rounded.full`, `colors.primary` background, and `colors.on-primary` text using `typography.label-md`. It has a fixed height of 44px and horizontal padding of 24px. Use this for main action drivers like "Shop now" or "Clip now". ### button-primary-hover The hover state of the primary button, transitioning the background to `colors.secondary` while keeping `colors.on-primary` text. It maintains the same `rounded.full` shape and padding. Use to provide visual feedback when a user hovers over a primary action. ### button-secondary Composed of a `colors.link` background with `colors.on-surface` text and a subtle `rounded.sm` corner radius. It has a height of 40px and padding of 10px 20px. Use this for secondary, non-urgent actions or alternative options. ### input-field A fully rounded text input container using `rounded.full`, styled with a `colors.secondary` background, `colors.primary` border, and `colors.on-primary` text. It has a height of 40px and padding of 8px 16px. Use for search bars and form inputs. ### input-field-focus The active state of the input field, maintaining the `rounded.full` shape and `colors.secondary` background but adding an explicit focus outline offset of 2px. Use to indicate active text entry focus. ### card A structural container with a `colors.background` surface, `colors.on-surface` text, and a `colors.outline` border. It features a `rounded.lg` corner radius and 16px padding. Use to display individual product items in a grid. ### card-elevated Similar to the standard card but without a border, relying instead on `elevation.sm` to lift it off the background. It uses `colors.background` and `rounded.lg`. Use to highlight featured products or active grid items on hover. ### card-container A larger content block container styled with a `colors.surface-container` background, `colors.on-surface` text, and a `rounded.xl` corner radius. It features generous 24px padding. Use to group related content, secondary features, or promotional blocks. ### link Inline text element using `colors.primary` and `typography.label-md`. It has no background or border. Use for text-based navigation, "Shop all" links, and secondary inline actions. ### link-hover The hover state of the inline link, transitioning the text color to `colors.secondary` while maintaining `typography.label-md`. Use to provide clear interactive feedback on text links. ### badge A small metadata tag with a `colors.primary` background, `colors.on-primary` text, and a `rounded.sm` corner radius. It has a height of 20px and padding of 2px 8px. Use for general product tags or neutral status indicators. ### badge-error A specialized badge using `colors.error` background and `colors.on-primary` text to highlight urgent notifications. It uses `rounded.sm` and `typography.label-sm`. Use for out-of-stock alerts or critical errors. ### badge-success A promotional badge styled with a `colors.success` background, `colors.on-primary` text, and `rounded.sm` corner radius. It uses `typography.label-sm`. Use to highlight savings, discounts, and successful actions. ### divider A thin structural line with a height of 1px and a background of `colors.outline`. It spans the full width of its container. Use to separate distinct content sections or list items. ### hero-banner A large promotional block featuring a `colors.surface` background, `colors.on-surface` text, and a `rounded.xl` corner radius with 48px padding. Use at the top of main landing pages to showcase seasonal campaigns and key promotions. ### fab A floating action button styled with a `colors.primary` background, `colors.on-primary` text, and a `rounded.full` pill shape. It has a height of 48px and padding of 12px 24px. Use for persistent, high-priority actions like "Need Help?". ## Do's and Don'ts | Do | Don't | | --- | --- | | Use `{colors.primary}` for all primary call-to-action buttons like `{components.button-primary}`. | Never use sharp corners (0px radius) on primary interactive elements like `{components.button-primary}` or `{components.input-field}`. | | Apply `{rounded.full}` to primary buttons and input fields to maintain the friendly, pill-shaped design language. | Do not apply `{colors.primary}` as a text color on dark backgrounds due to contrast failure. | | Ensure all text placed on `{colors.primary}` or `{colors.secondary}` uses `{colors.on-primary}` to guarantee accessible contrast. | Avoid using `{colors.secondary}` for body copy; reserve it for hover states and high-contrast input backgrounds. | | Use `{colors.surface}` as the background for large promotional `{components.hero-banner}` elements to soften the layout. | Do not mix font families within a single component; keep headings strictly `{typography.display-lg}` and body copy `{typography.body-md}`. | | Separate product grid items using subtle `{colors.outline}` borders or light `{elevation.sm}` shadows on `{components.card}`. | Never apply heavy shadows like `{elevation.lg}` to standard flat `{components.card}` components. | | Set section headers to `{typography.display-lg}` or `{typography.display-md}` using the Montserrat font family. | Do not use `{colors.link}` for primary actions; reserve it strictly for `{components.button-secondary}` and secondary highlights. | | Utilize `{colors.success}` exclusively for positive reinforcement, savings badges, and successful checkout indicators. | Do not use `{colors.error}` for standard promotional badges; reserve it strictly for `{components.badge-error}` and critical alerts. | | Apply `{spacing.2xl}` for section padding and `{spacing.md}` for product grid gaps to maintain structured visual hierarchy. | Avoid using `{spacing.xs}` or `{spacing.sm}` for outer padding on `{components.card-container}` elements to prevent crowded layouts. | ## Content Style * **CTA Style:** Action-oriented, short, and imperative. Button labels should use active verb forms and direct language, such as "Shop now", "Clip now", or "Log in to add". Keep casing standard and length minimal to drive immediate interaction. * **Heading Tone:** Direct, benefit-driven, and friendly. Headlines should focus on savings, convenience, and community value (e.g., "Sizzlin' weekly ad deals" or "Ready. Set. School!"). Avoid overly complex phrasing in favor of clear, declarative statements. * **Copy Density:** Low to medium density. Prioritize highly scannable product grids, clear pricing, and bold promotional headers over long paragraphs of text. Use whitespace and structural dividers to allow the user's eye to easily navigate the page. ## Imagery & Icons The imagery style is mixed, combining high-quality, vibrant product photography with clean, minimal stroke-based icons. Product images must be displayed on clean, pure white backgrounds within `{components.card}` elements to maintain high contrast and clarity. Promotional banners and `{components.hero-banner}` components feature rich, colorful lifestyle and food photography that evokes a sense of freshness and appetite. Icons should use simple, friendly geometric lines that align with the rounded aesthetic of the brand's shapes. --- ## Companion prompt ## Role You are an AI assistant generating UI components and layouts for Hy-Vee, a friendly, energetic, and community-focused grocery brand. Match its bold, accessible 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.display-lg}`, `{spacing.xl}`, `{rounded.full}` — never hardcode hex values, pixel sizes, or font names directly. 2. Render only the components listed under `components:` (`button-primary`, `card`, `hero-banner`, etc.). Do not invent variants the spec does not define. 3. Follow the shape language from Shapes: pill (`{rounded.full}`) on all primary buttons, search inputs, and FABs; `{rounded.xl}` on content containers and hero banners; `{rounded.md}` on standard cards. 4. Apply the Layout notes: max-width 1200px container, `{spacing.2xl}` padding on hero and section wrappers, `{spacing.md}`–`{spacing.lg}` gaps inside product grids. 5. Treat the Do's and Don'ts as authoritative. If a user request conflicts — e.g., sharp-cornered primary buttons or `{colors.primary}` as body text — surface the conflict before proceeding. ## Output contract **Must:** - Use token names for every color, type style, radius, and spacing value. - Include hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover` uses `{colors.secondary}`). - Place `{colors.on-primary}` on any text or icon rendered over `{colors.primary}` or `{colors.secondary}`. - Write CTAs in the spec's imperative style: short, action-first ("Shop now", "Clip now"). - Apply `{colors.success}` only for savings badges and positive confirmations; `{colors.error}` only for errors and alerts. **Must NOT:** - Invent colors, font families, or radius values outside the spec. - Use generic utility defaults when a brand token exists. - Apply `{colors.link}` to primary actions or `{colors.secondary}` to body copy. - Mix Montserrat and Arial within a single component. - Add emoji, filler copy, or marketing language. - Rewrite page copy, button labels, or navigation items, or alter information architecture while applying tokens. ## When in doubt - If the spec does not define a value, ask before inventing one. - Prefer composing existing components over introducing new tokens. - For ambiguous backgrounds, default to `{colors.surface}` for large containers and `{colors.background}` for tight product grids. - For unspecified breakpoints, default to mobile-first with one breakpoint at 768px. - Tokens noted as inferred approximations yield to any authoritative Figma or theme-file values the product team provides.