What is Macy's primary brand color?

Macy's brand voltage is star-red #e01a2b — a saturated, slightly-warm red that carries the logomark star, every CTA pill, the editorial sale strip above the nav, every price-slash on a discounted item, and the percent-off sale chips. It is the most-used non-neutral color on the page, appearing 465 times — 220 as text, 220 as border, 25 as background fill. The red is structural rather than reserved; it does the brand-voltage job and the price-emphasis job and the editorial-sale job all at once. The discipline that holds the system together is the strict pill-at-action rule: red surfaces always render as a 20-63px pill, never as a rectangular fill that would compete with a content card.

What typefaces does Macy's use, and what should I use as substitutes?

Macy's runs two families. Macy's Sans (a proprietary grotesk close to Helvetica Neue) carries every chrome surface — nav links at 14px / 700, body paragraphs at 14px / 500, h3 section heads at 25px / 700, button labels at 14px / 700. Ramillas Medium is the serif voice — reserved for the largest editorial sale displays at 44-55px / weight 400-500, used on the seasonal sale banner ('20-60% off furniture, mattresses & rugs') and the campaign hero text. The sans-plus-serif split is unusual for a department-store retailer; most peers commit to a single sans for chrome and a separate display for marketing campaigns, but Macy's uses the serif specifically and only at the largest sale-display tier. The closest open-source substitutes are Inter for Macy's Sans and Cormorant Garamond or Playfair Display for Ramillas Medium.

Why does Macy's have a copper-bronze accent if the brand is red?

The copper-bronze #b06207 is not a secondary brand accent — it is the color of one specific editorial component. The 'Loved by us, picked for you' editorial seal renders as a hand-stamped horizontal strip with the copper as its background fill, holding tiny tab labels for category navigation (Memorial Day Deals · Memorial Day Trends · Loved by Us · Bedding · Mattresses · Home Edit · Furniture). The copper appears 42 times in the captured page, all inside this single seal component. Outside the seal it is absent; the brand red still does every other job. The seal is a print-catalogue reference — a literal hand-stamp gesture on a digital surface.

What is Macy's corner-radius philosophy?

The radius scale is binary: 5px on every rectangular content card and 20-63px pill on every clickable action. Content surfaces (product cards, editorial promo blocks, photo tiles) use a small 5px radius (73 occurrences). Tappable surfaces (the 'Ask Macy's' AI button, the search input, the carousel category-tab strip) use a 20-63px full pill (4 occurrences). The 50% radius (54 occurrences) appears only on the small circular carousel-dot pagination indicators. There is no 8 / 12 / 16px middle tier — the gap between content rounding and action rounding is deliberately wide, so the customer's eye lands instantly on every tappable surface.

What is the editorial strip above the Macy's nav?

Above the main nav band sits a thin peach-cream editorial strip carrying the rotating promotional copy in star-red — 'Memorial Day Sale · Up to 60% OFF' on the captured surface, with an arrow caret for the next slide. The strip is not part of the structural nav; it is a separately-themed sub-band that uses a cream surface (#eceff1) and the brand red as text. The pattern lets Macy's run a high-density promotional message above the chrome without disturbing the white-on-white grocery-list rhythm of the main nav (Women · Men · Kids & Baby · Home · Beauty · Designer · Sale & Discounts · Gift Ideas · Macy's Pre-Owned).

Can I use this DESIGN.md to build my own retail marketing 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 Macy's specific moves: star-red as recurring voltage across chrome and inventory, sans-plus-serif typographic split with Ramillas Medium reserved for editorial sale tier, copper-bronze scoped to the hand-stamp seal only, pill-at-action plus rectangle-at-content geometry, and the editorial-strip-above-the-nav pattern. The tokens resolve without invention — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your retail brand has a historic figurative mark is treating that mark as a recurring system component rather than a static header logo.

Macy's Design System

Macy's marketing chrome packaged as a DESIGN.md file.

About Macy's DESIGN.md

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

E-commerce & Retail
Marketplaces

Macy's homepage runs on a single saturated red and a deliberate two-typeface split. The logomark is a five-point star with "macy's" in lower-case sans wordmark beside it, both rendered in star-red (#e01a2b) — and that exact red carries the editorial promo strip above the nav ("Memorial Day Sale · Up to 60% OFF"), the "Ask Macy's" AI pill in the search bar, every price slash on a discounted item, the brand-red sale chip, and the small fixed promo "10 Days of Glam · 50% off" callout block. The red is the most-used non-neutral color on the page: 465 occurrences, 220 as text and 220 as border. Where Nordstrom commits to a serif-and-white luxury aesthetic and Target leans on bulls-eye scarlet over flat white, Macy's runs the brand red as both promotional voltage and structural ink — a 1858-vintage star treated as a recurring system token.

The DESIGN.md file packages the marketing surface into a machine-readable spec. Inside: 11 color tokens drawn from the structural ink, the star-red brand voltage, a copper-bronze hand-stamp accent for the editorial seal, the body cream and grey neutrals, and a navy accent reserved for the carousel-dot active state; 13 typography tokens running Macy's Sans across every chrome surface with Ramillas Medium serif reserved for the largest editorial sale displays at 44-55px; 5 corner-radius tokens centered on a 5px rectangular card radius and a 20-63px action pill; 8 spacing values on an 8px base; and 18 component definitions covering the red star promo strip, the search-with-Ask-AI pill, the price-slash, the percent-off chip, the carousel rail, the hand-stamped seal, and the standard catalogue inventory.

Feed this file to an AI coding tool and it reproduces Macy's specific moves: star-red as recurring voltage across chrome and inventory, sans-for-chrome plus serif-for-editorial-sale pairing, copper-bronze scoped to the editorial seal only, pill-at-action plus 5px-rectangle-at-content geometry, and the editorial-strip-above-the-nav promotional pattern. The one move worth borrowing only if your retail brand has a historic figurative mark: treating the star as a recurring component rather than a static logo. Most marks recede after the header; Macy's red star reads as a stamp on every page surface that needs to feel branded.

What makes it distinct

Star-red as system voltage#e01a2b carries 465 occurrences as CTA fill, price slash, sale chip, and the editorial strip above the nav
Sans-plus-serif pairingMacy's Sans for chrome and inventory, Ramillas Medium serif at 44-55px for the largest editorial sale displays
Hand-stamped seal in copper#b06207 copper-bronze appears 42 times, scoped entirely to the 'Loved by us, picked for you' editorial seal
Pill geometry at the action layerevery clickable CTA renders as a 20-63px pill, while every content card sits at a 5px rectangular radius
Editorial promo stripa peach-cream band above the nav carries the 'Memorial Day Sale · Up to 60% OFF' sub-brand surface in the brand red display weight

Live at macys.com

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

macys.com

Explore Macy's

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.

Other

Specialty colors.

Macy's design system FAQ

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

Macy's — official site

Macy'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.