What is Target's primary brand color?

Target Red (#cc0000) is the brand voltage — wired into the CSS as --_ref-color-red-600, --color-circle-text-circle360mark, and --color-background-page-brand. It appears 211 times across the captured page (74 as text, 32 as background, 105 as border), making it the dominant chromatic surface after the canvas. The hover-darker variant is a deep crimson (#a51e24) wired as --color-border-brand-hover. Unlike Nordstrom and the upper-tier fashion category where red is a strictly-semantic clearance flag, Target uses red as a load-bearing brand canvas — the hero banner, every primary CTA pill, every category-tab active state, and the bullseye logo itself.

What typeface does Target use, and what should I use as a substitute?

Target's marketing site runs Helvetica for Target — a custom proprietary face shipped via WOFF, with fallbacks to HelveticaForTarget, Targetica, HelveticaNeue for Target, Helvetica Neue, Helvetica, and finally Arial. The stack is a Targetica metric clone of Helvetica Neue commissioned to give Target visual ownership over the workhorse grotesk. Display headlines sit at 38px in weight 700 with 39.9px line height; body text at 14-16px in weight 400; small labels and CTAs at 13-14px in weight 700. The closest open-source substitute is Inter at the same weights with slightly tighter letter-spacing on display (-0.5px on the 38px tier), or Roboto for a closer metric match to the Helvetica Neue fallback chain.

Why are Target's buttons fully rounded?

Every primary CTA in the Target system uses a 999px border-radius, which renders as a fully-rounded pill at the 40px button height. The circle-rewards button uses the same pill, the secondary CTAs use the same pill, and the category-filter tabs use the same pill. There is no rounded-rectangle middle tier — Target's shape language is binary: either 4-12px (cards, tiles, offer plates) or 999px (anything tappable). The pill treatment echoes the Bullseye logo itself, which is a circle, and reinforces the playful, accessible-design positioning that distinguishes Target from Walmart's more utilitarian rectangle-CTA aesthetic.

Why does Target use charcoal instead of pure black for text?

The workhorse text color is charcoal (#333333) — wired as --color-background-inverse, --color-text-base, and --_ref-color-gray-700, and used 2062 times across the captured page (1039 as text, 1023 as border). Pure #000000 appears 14 times only, scoped to --color-text-always-black for the rare inverted-surface text and to the bullseye logo's black ring outline. The 51-point lightness shift from pure black softens the page chrome enough that the saturated bullseye red can read as the loudest element without competition. Nordstrom makes the same warm-shift move at #191a1b; Target's version is lighter.

Can I use this DESIGN.md to build my own React mass-market retail site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Target's specific moves: red hero banner, fully-rounded 999px CTA pills, charcoal ink, dotted-rule offer-band dividers, and the cream-tinted backdrops that distinguish Target's offer tiles from Walmart's white-on-white card grid. The tokens resolve cleanly without invention. The one move worth borrowing only if you have the brand permission is letting one saturated red carry both the hero canvas and every primary CTA — most mid-market retailers cannot hold both moves at the same saturation without the page reading as a single emergency alert.

Target Design System

Target's marketing system as a DESIGN.md file.

About Target DESIGN.md

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

E-commerce & Retail

Target's homepage opens with a saturated red banner that says HELLO SUMMER SAVINGS in white over a row of stylized popsicle-and-Coca-Cola illustrations, with three offer percentages (20% / 40% / Up to 45%) inlined into the headline as larger glyphs. There is no editorial photograph above the fold; the page commits to a flat color block and lets the offer band do the typographic work. Where Nordstrom holds the chrome silent and lets fashion photography carry every chromatic decision, Target inverts the move entirely — the brand voltage is the canvas, the offers are the typography, and the merchandise photography sits below the fold as supporting evidence.

The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 13 color tokens drawn from the 109 CSS custom properties Target exposes (under the `--color-` and `--_ref-color-` prefixes from their internal "Loungewear" or "Targetica" design system), organized into a Target Red brand-voltage tier, a charcoal ink/canvas chrome ladder, a small set of semantic colors for info/success/subdued states, and three soft cream-and-blue background tones for offer-tile backdrops. 11 typography tokens run "Helvetica for Target" — a custom HelveticaForTarget/Targetica metric clone that falls back to Helvetica Neue, with display at 38/700, body at 14/400, and small labels at 13/700. 18 components cover the red hero banner, the fully-rounded 999px CTA pill, the cream-tinted offer tile, the white circle-rewards button, the search input, and the bottom-rule top nav.

Feed this file to Claude or Cursor and it will reproduce Target's specific moves: a flat-red hero banner instead of a photograph, fully-rounded 999px CTA pills at 40px height across every action, charcoal ink (#333333) instead of pure black, and the dotted-rule divider treatment that distinguishes Target's offer flyers from generic e-commerce tile grids. The tokens resolve cleanly without invention. Treat it as a reference: the move worth borrowing is the discipline of letting one saturated red carry every CTA and active state, which only works when the brand has the cultural permission Target has to claim red as a primary surface.

What makes it distinct

Bullseye voltage as canvasTarget Red #cc0000 fills the hero banner, every primary CTA, and every category-tab active state, appearing 211 times across the captured page
Custom Targetica typefaceTarget ships a proprietary metric-compatible Helvetica clone with HelveticaForTarget and Targetica fallbacks before reaching Helvetica Neue
Fully-rounded 999px pillsevery primary CTA, sign-in chip, and circle-rewards button uses a maximum-radius pill at 40px height, no rounded-rectangle middle tier
Charcoal ink, never blackbody text and section headings render at #333333, with pure black reserved for a single small inverted surface
Dotted-rule offer flyersTarget's offer-band dividers use thin red dotted hairlines instead of solid borders, echoing newspaper-circular and scissor-coupon conventions

Live at target.com

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

target.com

Explore Target

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.

Target design system FAQ

Common questions about Target'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.

Target — official site

Target's public marketing site — 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.