What is Kroger's primary brand color?

Kroger's primary brand color is a corporate blue at approximately #1860ae, wired into CSS as --color-border-action-accent-default, --color-text-action-brand-default, and --blue-border-default. It appears 234 times in the captured page — 117 as text and 117 as border. Critically, it never appears as a background fill in the marketing surface: the blue is reserved exclusively for interactive affordances (link text, interactive border rings, and focus indicators). This text-and-border-only discipline keeps the brand color as a legibility signal rather than a canvas statement. A darker mid-blue (#0e51a1) handles hover and pressed states, and the deepest tone (#023b7f) wires into the primary icon and heading-emphasis roles.

What typefaces does Kroger use?

Kroger runs a two-family system: Nunito for display headings and interactive labels, and the OS system-ui stack (resolved as Roboto on Android/Chrome) for body copy and navigation links. Nunito is a rounded geometric humanist sans — its slightly inflated counters and soft terminals add warmth to the heading tier without requiring a custom font for the entire system. Display headings sit at 20–32px in weight 700; button labels at 16px in weight 700; body copy at 12–16px in weight 400 from the system-ui stack. The closest open-source substitute for Nunito is DM Sans or Poppins, both rounded geometric sans-serifs at similar weight coverage. Do not substitute Inter — its tight, neutral geometry reads too technical for Kroger's catalog warmth.

Why does Kroger use 16px card rounding when the buttons are 4px?

The radius split is intentional and two-tiered. Action surfaces (buttons, checkboxes, form inputs, small chips) use 4px — the minimal rounding that signals 'tap here' without being either sharp-edged fashion or fully-pill friendly. Product cards, carousel paddles, and medium surface tiles use 16px — the warmer register that signals 'browse this.' The 12-point gap between 4px and 16px is large enough to be unambiguous: a user can see which surfaces are interactive affordances and which are content containers. Target uses 4px throughout (sharper, more editorial), Walmart uses 8px throughout (mid-consumer). Kroger's split reads as higher-warmth browse experience with sharper action surfaces.

Why does Kroger's CSS have so many color tokens?

Kroger's token system is one of the most comprehensive in the directory because the brand runs 24+ regional grocery chains (Ralph's, Fred Meyer, Harris Teeter, Dillons, City Market, Food 4 Less, etc.), each with its own brand identifier wired into the CSS as a --[chainName]Brand custom property. Beyond the sub-brand layer, the design system maintains full semantic color families for six categories: informative (blue tones), positive (green tones), danger (red tones), warning (amber tones), special (purple tones), and boost (magenta tones). Each family runs a five-step primary/secondary/tertiary/static/hover/press matrix. The 75 clustered tokens in this DESIGN.md represent the marketing-surface subset — the full token system in the checkout and account flows is larger still.

Can I use this DESIGN.md to build a grocery e-commerce UI?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Kroger's specific moves: corporate-blue link text and interactive borders with no blue background fills, Nunito weight 700 headings over system-ui body copy, 4px action-surface radius alongside 16px product card rounding, and gray (#707172) as the neutral mid-tone for inactive chips and tertiary labels. The 18 component definitions cover the primary CTA button, product card, carousel paddle, promo banner, and category navigation tab. One caveat: the Nunito display family is open-source and available on Google Fonts, so the typeface side of the spec is directly portable without any licensing steps.

Kroger Design System

Kroger's grocery e-commerce design system as a DESIGN.md file.

About Kroger DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source kroger.com

E-commerce & Retail
Food & Delivery

Kroger's digital storefront runs what is effectively a dual-register type system — Nunito for every surface that signals editorial authority (headings, category titles, button labels) and the OS system-ui stack for everything that moves the user through the catalog (nav links, body copy, price metadata). The split is not a contrast of mood but of function: Nunito's rounded geometric forms identify "we are speaking" moments, while system-ui's neutral clarity identifies "you are navigating" moments. Where Target uses a single custom sans-serif throughout and Walmart uses Walmart Sans end-to-end, Kroger outsources the informational layer to whatever the user's OS provides and keeps only the brand-voice layer proprietary.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 17 color tokens drawn from the 75-entry clustered extraction — the Kroger corporate blue at three depth levels, a semantic set covering danger/positive/warning/special/boost, structural neutrals from near-black through light hairline, and a sub-brand identifier for Kroger's pharmacy arm; 14 typography tokens across Nunito and system-ui from 32px hero headings through 10.5px superscripts; 7 radius tokens anchored at 4px for action surfaces and 16px for product cards; 8 spacing values on a 4px base; and 18 component definitions covering the blue-fill category tab, the product card, the add-to-cart button, and the carousel paddle system.

Feed this file to Claude or Cursor and it will reproduce Kroger's specific moves: corporate-blue link color reserved for interactive affordances but never used as a background canvas fill, Nunito at 700 for headings with system-ui for body, 4px buttons alongside 16px product cards, and the light-gray (#707172) as the subdued mid-tone that carries inactive state chips and secondary catalog labels. The most instructive structural choice is the clean separation of the brand blue into text-and-border territory — it signals interactivity without competing with the product photography that fills the card grid.

What makes it distinct

Two-family typeface splitNunito for every heading and button, system-ui for all nav and body copy; the contrast between the two families separates catalog structure from editorial hierarchy
Corporate blue as link voltage#1860ae appears 234 times as text and border but never as a background fill in the captured surface; interactive affordance without canvas invasion
16px card radius at grocery scalethe 16px product card rounding (79 occurrences) is notably warmer than Target's 4px or Walmart's 8px, tuning the catalog toward approachability
75 clustered CSS color tokensthe most token-dense grocery brand in the directory, with dedicated semantic families for danger, positive, warning, special, boost, and 20+ regional sub-brand identifiers
4px base radius for action surfacesbuttons, checkboxes, and form inputs sit at 4px, while cards jump to 16px; the gap between action-surface sharpness and card warmth is a deliberate two-tier choice

Live at kroger.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

kroger.com

Explore Kroger

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Kroger design system FAQ

Common questions about Kroger's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Kroger — official site

Kroger's public grocery storefront — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.