Kroger Design System

Overview

Kroger's digital storefront uses what is, among US grocery e-commerce brands, a genuinely unusual typographic strategy. Dual-voice navigation. Nunito — a rounded geometric humanist sans with softly inflated counters — handles every surface that speaks: headings, section titles, button labels, and carousel calls-to-action. The system-ui fallback stack handles every surface that navigates: product names, price metadata, nav-link labels, and filter chips. The contrast between Nunito's bouncy geometry and the neutral system stack creates a clear functional partition without a single extra CSS rule. Where Target uses a single custom sans-serif and Walmart uses Walmart Sans end-to-end, Kroger outsources the informational layer to whatever the user's operating system provides and retains the brand voice only for editorial hierarchy.

The corporate blue (#1860ae) is the system's lone chromatic voltage — but it appears only as text and border, never as a background fill in the marketing surface. Interactive affordances (link text, border rings on active elements, carousel paddles in the light-blue surface tint) use the blue to signal "tappable" without painting any canvas with it. The hero band behind "Kick Off Summer with Sizzling Savings" is a product image fill, not a blue CSS surface. This text-and-border-only discipline is the opposite of Cloudflare (which fills the entire hero canvas with brand orange) and closer to how Amazon or Target handle their brand color — as a link signal, not a structural element.

The shape language is two-tiered warmth: 4px on action surfaces (buttons, form inputs, checkboxes), 16px on content surfaces (product cards, section panels). The 12-point gap makes the two registers visually unambiguous — browsable content feels warm and approachable while tappable affordances stay sharp.

Key Characteristics:

• Corporate blue (#1860ae) appears 234 times — 117 as text, 117 as border — but never as a background fill in the marketing surface.
• Nunito weight 700 at 20–32px for all headings; system-ui weight 400 at 12–16px for body, nav, and metadata — a two-family divide that correlates exactly with editorial vs. informational function.
• 4px radius for action surfaces (buttons, inputs), 16px for product cards — the widest action-to-content radius gap among the major US grocery brands.
• Near-black (#000000) carries 1,398 total occurrences — the dominant text color for headings and body across the page.
• Mid-gray (#707172) handles all neutral-tertiary chip fills, inactive tab backgrounds, and secondary catalog labels.
• 75 clustered CSS color tokens, including 20+ regional sub-brand identifiers (--harrisTeeterBrand, --fredMeyerBrand, --dillonsBrand, etc.) — the most token-dense grocery system in the directory.
• 4px base spacing (63 occurrences), 8px second step (31 occurrences) — the tightest spacing base among the US grocery platforms, tuned for dense product grids.

Colors

Brand

• Primary ({colors.primary} — #1860ae): frequency 234. Used as text (117), border (117). The Kroger corporate blue — wired as --color-text-action-brand-default, --color-border-action-accent-default, and --blue-text-default. Never renders as a background fill in the captured surface; every occurrence is a link, an interactive border ring, or a focus indicator.
• Primary Dark ({colors.primary-dark} — #0e51a1): frequency 48. Used as text (21), background (8), border (19). The slightly deeper blue that carries hover and pressed states for interactive elements, and fills the primary-button and active-category-tab background. Wired as --krogerBrand and --blue-background-press.
• Primary Deeper ({colors.primary-deeper} — #023b7f): frequency 4. The deepest blue tier — wired as --color-text-brand-primary and --blue-text-primary. Used for primary icon fills and high-emphasis heading accents.
• Primary Light ({colors.primary-light} — #2478ce): frequency 2 (background only). The hover state for carousel paddles and secondary surfaces. Wired as --color-background-brand-secondary and --blue-background-default.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 77. Used as background (36), text (20), border (21). The page floor — all product-grid sections, the top-nav, and card interiors. Also the text color for all reversed white-on-blue headline moments.
• Surface-1 ({colors.surface-1} — #e7e8e9): frequency 3. Used as background. A light cool gray that appears as the inverse-background-tertiary — the background behind inverse (dark-canvas) UI zones.
• Surface Blue ({colors.surface-blue} — #eff7fd): frequency 3. A very light sky-blue used as the resting fill for carousel paddles. Wired as --color-background-brand-tertiary, --blue-background-tertiary. The single chromatic surface fill in the catalog.

Text

• Ink ({colors.ink} — #000000): frequency 1398. Used as text (714), border (683), shadow (1). The dominant text color — primary headings, body copy, product labels, price display. Also drives 683 of all border occurrences as the hairline/rule color in the near-black ink tone. Wired as --color-text-primary and --color-border-primary.
• Ink Secondary ({colors.ink-secondary} — #3c3d3e): frequency 0 rendered, but wired as --gray-text-primary and --color-text-neutral-primary — the default neutral-text tone for secondary labels in the system at rest.
• Ink Muted ({colors.ink-muted} — #707172): frequency 108. Used as background (108) — in the neutral secondary and tertiary chip fill contexts (--gray-background-default, --color-background-neutral-secondary). Not a text color in the captured marketing surface but carries inactive state tabs.

Hairlines

• Hairline ({colors.hairline} — #bcbdbe): frequency 6. Used as background. The tertiary border tone — wired as --color-border-tertiary, --gray-border-tertiary. Lighter than ink for card outlines and section dividers.
• Hairline Light ({colors.hairline-light} — #d3d4d5): frequency 27. Used as border (27). The inverse border — used for borders on dark/inverse surfaces (--color-border-inverse-tertiary). Also wires into carousel paddle and component tab outer-border.

Semantic

• Surface Blue ({colors.surface-blue} — #eff7fd): see above.
• Success ({colors.success} — #306c36): declared as --color-icon-action-positive-default. Positive/success action color for confirmations and availability indicators.
• Danger ({colors.danger} — #a9011f): declared as --color-background-danger-primary. Error and out-of-stock indicator.
• Warning ({colors.warning} — #aa3c00): declared as --yellow-icon-default. Warning state for expiring offers and near-sold-out signals.
• Special ({colors.special} — #79508b): declared as --purple-border-default. Kroger's "special" product-category accent for Boost savings and subscription-tier badging.

Shadow

• Shadow ({colors.shadow} — #1d1e1f): frequency 3 as shadow. The multi-level shadow ink — wired as --shadow-level-1-color and --shadow-level-2-color. Used in the elevation shadow declarations (--shadow-6, --shadow-16, --shadow-24).

Typography

Font Families

The system runs two families: Nunito for editorial authority surfaces and the system-ui fallback stack (resolving to Roboto on Chrome/Android) for informational surfaces. Nunito is declared as --type-headline-font-family; the system stack is declared as --type-baseline-text-font-family. The divide correlates exactly with function: Nunito identifies brand-voice moments (headings, CTAs, section titles), system-ui identifies navigation moments (product names, price rows, filter chips, body copy).

Hierarchy

Principles

Nunito's display range tops at 32px / 700 — the hero h2 tier. Below that, Nunito covers headings at 20px in three weight steps (700, 500, 400) that map to decreasing emphasis. There is no 24px or 28px Nunito tier — the scale jumps from 20px straight to 32px. Body copy strictly uses the system-ui stack; no Nunito body text appears in the captured surface. This functional split eliminates the need for font-weight gymnastics within a single family.

Note on Font Substitutes

Nunito is open-source (Google Fonts) — no licensing steps required. The closest alternatives with similar rounded geometry are DM Sans and Poppins. For the system-ui layer, Roboto is already embedded in the fallback stack on most Android and Chrome environments. On Apple platforms the stack resolves to San Francisco, which is visually distinct — if typographic consistency across platforms matters, replace the system-ui layer with Inter.

Layout

Spacing System

• Base unit: 4px — the single most-captured value with 63 occurrences. Dominant in inter-element gaps and grid gutters.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 14px · {spacing.base} 16px · {spacing.lg} 32px · {spacing.xl} 48px.
• Button padding: 8px all-around at the default small-button tier (category tab, nav link chip).
• Product card internal padding: 16px — the base spacing value, aligned with the {spacing.base} token.
• Section vertical rhythm: ~32px between major catalog sections; ~14px between product rows within a grid.

Grid & Container

• Max content width: ~1440px at desktop. Product grids run at 5–6 columns for the weekly specials carousel and 3–4 columns for product category grids.
• Hero banner: full-bleed promotional image with the heading overlay at left-center. The current hero carries a summer grilling campaign — product photography fills the entire hero canvas.
• Category nav: a scrollable horizontal tab row below the hero, holding "Pharmacy & Health," "Deli," "Produce," and other department tabs.
• Product card grid: uniform cards at 16px radius, shadow-elevated on hover (--shadow-6 through --shadow-24), with image panel + product name + price + add-to-cart button.

Rhythm

The page structure is banner → category tabs → product carousel → promo block → product grid → editorial section. Each band is separated by 32px vertical whitespace. Within bands, the 4px and 8px base units dominate — the catalog is dense by design, fitting as many product cards per viewport as the 16px card radius permits.

Elevation

Kroger's marketing surface uses a three-level shadow system declared in CSS custom properties:

• --shadow-6: a three-layer shadow using {colors.shadow} at 4%, 12%, and 8% opacity — the resting card elevation. Product cards use this on hover-in.
• --shadow-16: the same three-layer structure at larger blur radii — modal and drawer elevation.
• --shadow-24: the widest spread variant — highest elevation for full-page overlays and dialogs.

The shadow ink is {colors.shadow} (#1d1e1f) — a near-neutral very dark blue-gray rather than pure black. This keeps shadows slightly warm rather than hard-printed.

Shapes

The radius scale is two-tiered:

• {rounded.none} 0px — full-bleed banner panels and section separators.
• {rounded.xs} 4px — the action-surface default: primary buttons, form inputs, checkboxes (--component-checkbox-radius), and category-tab rectangles. 114 occurrences — the dominant radius.
• {rounded.sm} 8px — secondary surfaces and intermediate tiles. 11 occurrences.
• {rounded.md} 12px — the yellow-tag radius (--component-yellow-tag-radius is declared at 0.25rem = 4px, but 12px appears in the component scale for medium tiles).
• {rounded.lg} 16px — product cards and large surface tiles. 79 occurrences — the second dominant radius.
• {rounded.xl} 32px — the carousel paddle at desktop dimensions.
• {rounded.full} 9999px — full pills for toggle buttons and circular avatar chips. Wired as --component-button-radius (62.5rem) and --radius-round.

The 4px-to-16px two-tier structure is the system's defining shape gesture. Browsable content is warm (16px); interactive surfaces are precise (4px). The gap is always visible to the eye.

Components

button-primary — Mid-blue {colors.primary-dark} (#0e51a1) fill, white text at {typography.button-md} (Nunito / 16px / 700), {rounded.xs} 4px radius, 8px padding, 34px height. The canonical instance is the category-navigation tab in its active state ("Pharmacy & Health").

button-primary-hover — Deepens to {colors.primary-deeper} (#023b7f) on press — darker within the blue family, no hue shift.

button-secondary — White fill, corporate-blue text and border, full-pill {rounded.full} rounding, 8×16px padding, 40px height. Used for "Shop All" and secondary browse CTAs.

top-nav — White canvas surface, 64px height, 1px hairline bottom border. Houses the Kroger logo, the search bar, the department-tab navigation strip, and the account / cart icons.

nav-link — Transparent, mid-blue {colors.primary-dark} text in system-ui at {typography.nav-link} (12px / 400). Appears in the sub-nav strip below the primary nav for breadcrumbs and quick-links.

hero-heading — White text on transparent product-image hero background, Nunito {typography.display-xl} (32px / 700). "Kick Off Summer with Sizzling Savings" is the canonical captured instance.

section-heading — Ink text at {typography.display-xl} on the white canvas — used for "Customize Your Meal," "Fresh & Ready Meals," and "All Departments" section intros.

body-paragraph — Ink text at {typography.body-md} (14px / 400 / system-ui). Used for promotional lead copy and product description paragraphs.

card — White canvas fill, 1px hairline border, {rounded.lg} 16px radius, 16px padding, shadow on hover. The standard product card — contains an image panel, product label, price row, and add-to-cart button.

category-tab — White fill, ink text, 1px hairline border, {rounded.xs} 4px radius, 8px padding, 34px height. The inactive department-navigation tab.

category-tab-active — Mid-blue {colors.primary-dark} fill, white text. The active tab — same dimensions as inactive.

promo-banner — Mid-blue {colors.primary-dark} fill, white text at {typography.body-md}, 16×32px padding. The promotional callout strips that appear between catalog sections.

carousel-paddle — Light-blue {colors.surface-blue} fill, corporate-blue icon, {rounded.lg} 16px radius, 40px height. The resting state of the carousel left/right navigation paddle. Wired as --component-carousel-paddle-color-default.

carousel-paddle-hover — Shifts to {colors.primary-light} (#2478ce) fill with white icon. Wired as --component-carousel-paddle-color-hover.

text-input — White fill, ink text, 1px hairline border, {rounded.xs} 4px radius, 8px padding, 40px height.

price-tag — Transparent, ink text at {typography.price-lg} (system-ui / 16px / 500). Price display rendered inline within product cards.

footer — White canvas, muted gray text at {typography.body-sm}, 1px top hairline, 32×16px padding. Holds the department links, legal disclaimers, and pharmacy disclaimers.

product-label — Transparent, ink text at {typography.body-sm} (12px / 400 / system-ui). Product name displayed beneath the card image.

Do's and Don'ts

Do use {colors.primary} (#1860ae) as text and border only — never as a background fill in marketing surfaces. The system's interactive-affordance discipline keeps the blue as a tappability signal rather than a structural canvas element. Introducing a blue hero background would collapse the functional distinction between "brand voice" (ink/canvas) and "interactive affordance" (corporate blue).

Do use Nunito for every heading, section title, and button label — then switch to system-ui for every body, caption, price, and nav-link. The two-family split is the system's primary structural tool; mixing Nunito into body copy or system-ui into headings breaks the functional partition without adding any typographic benefit.

Do observe the 4px-to-16px radius split: use {rounded.xs} 4px on buttons, checkboxes, and form inputs; use {rounded.lg} 16px on product cards and panel surfaces. Rounding buttons to 8px or 12px moves them out of the action-surface tier and makes them read as content containers.

Do use the three-level shadow system (--shadow-6 → --shadow-16 → --shadow-24) for card hover, modal, and dialog elevation respectively. Each level uses {colors.shadow} (#1d1e1f) as the ink — not pure black. Substituting black ink shadows makes the page feel printed rather than digital.

Don't use {colors.ink-muted} (#707172) as a text color — it is a background fill token in the captured surface (108 of 108 occurrences are background fills for inactive chip states). For secondary text, use {colors.ink-secondary} (#3c3d3e). Using the mid-gray as text color will make secondary copy too low-contrast for WCAG AA compliance.

Don't render headings in the system-ui font stack — Nunito is not a stylistic option in this system but a functional designation for heading surfaces. A developer reaching for font-family: system-ui on an h2 would inadvertently break the dual-voice partition that distinguishes Kroger's catalog from a generic e-commerce template.

Don't introduce a 12px or 14px radius on buttons. The two-tier system is 4px or 16px — there is no middle radius for action surfaces. A 12px button reads as a content tile; the 4px sharpness is the affordance signal.

Don't add regional sub-brand colors (--harrisTeeterBrand, --fredMeyerBrand, etc.) to the marketing layer. These are chain-identification tokens for the banner-selector and account flows; using them as page-decoration accents in the main storefront would read as a chain co-branding error.

Known Gaps

• Checkout flow: the add-to-cart and payment forms live behind authentication walls not captured in the marketing extraction. Button active-state, input focus-ring color, and form validation colors are not represented.
• Dark mode: no dark-mode surface is exposed in the marketing layer. The token system includes inverse color families (--color-text-inverse-primary, --inverse-border-primary) but no dark-canvas page surfaces appear in the capture.
• Mobile layout: the 1440px desktop capture does not represent the 768px breakpoint where the 5-column carousel collapses to 2-column and the top-nav hamburgers. Spacing values and radius behavior at mobile scale are not documented.
• Sub-brand token isolation: the 20+ regional chain brand tokens (--harrisTeeterBrand, --dillonsBrand, --kingSoopersBrand, etc.) are declared in the CSS but none render in the marketing surface. Their visual application on chain-specific pages is not captured.
• Pharmacy and health sub-theme: the --pharmacyBrand and --krogerHealthBrand tokens suggest a dedicated pharmacy sub-surface with a deeper navy palette — not rendered in the main storefront capture and not represented in this file's color tokens.
• Motion: the carousel auto-play timing (--sidebar-timing: 500ms, --dropdownSlideDownTiming: 141ms, --inputSlideOutTiming: 253ms) is declared but visual animation behavior is not documented.
• Boost savings program: the "Boost" loyalty token family (--boost-border-default, --boost-savings-color, etc.) spans a magenta-to-pink gradient range used in the subscription savings UI — fully declared but not rendered in the captured marketing page.