What is UNIQLO's primary brand color?

UNIQLO's chrome runs on absolute black `#000000` — declared across 65 different :root CSS variables (including `--black`, `--textPrimaryDefault`, `--borderPrimaryDefault`, `--display1-color-primary-dark`, and the entire `--blackOpacity10` through `--blackOpacity95` scale) and used 645 times on the homepage (324 text, 320 border, 1 gradient). The only chromatic brand-layer token is Logo Red `#ee0000`, declared as `--red500`, `--attentionDefaultBackgroundColor`, and `--errorDefaultBackgroundColor`. It appears 16 times: 8 as text and 8 as border, scoped to the UNIQLO wordmark, the UT tile in the category grid, the corner sale-flag on portrait photography, and the dismiss control on the shipping-promo announcement bar. Painting a CTA in `#ee0000` would compete with the corner sale-flag — the system holds primary buttons at a flat `#000000` fill with white text.

What typography does UNIQLO use, and what should I substitute?

UNIQLO runs two faces. The catalogue chrome — body, nav links, captions, prices — uses the Helvetica Neue stack (`"Twemoji Country Flags", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif`) at weight 400 only. No 500, no 600, no 700, no italic on the homepage. Hero h2 sits at 22px / 26.4px, body p at 14px / 18.2px (17 occurrences), captions at 13px / 16.9px (18 occurrences), and category overlay text climbs to 32px / 38.4px in pure white over portrait photography. The proprietary UniqloProRegular face appears at 36px, 17px uppercase, and 15px with `0.36px` letter-spacing — reserved for the wordmark, hero campaign overlays, and the UT mark. If UniqloProRegular is unavailable, Inter or Söhne at weight 500 with `0.36px` tracking approximate the optical weight; preserve the uppercase casing and the tracking value exactly.

Why does UNIQLO use 999px pills with 0px everywhere else?

The radius vocabulary is one decision. `999px` (`{rounded.full}`) appears 4 times in the homepage extraction and is reserved for taxonomic chips — the category filter pills below the search input. Every other surface in the system holds at `0px`: primary buttons, hero overlay cards, product portraits, the UT tile, the sale-flag corner, the search input, the footer columns. There is no 4px, no 8px, no 12px intermediate radius anywhere. The split is categorical — a surface is either a fully-rounded taxonomic pill or a hard rectangle. The hard rectangle is the catalogue chrome; the pill is the tag. Softening any interactive surface to a 4px corner would shift UNIQLO from a Tokyo print catalog toward generic Western e-commerce.

Why is UNIQLO's primary CTA flat black instead of red?

The primary CTA in the system is a flat `#000000` rectangle with `#ffffff` text, `0px` corners, no border, and the Helvetica Neue stack at 14–16px weight 400. The Logo Red `#ee0000` is held in reserve for the wordmark chip, the UT tile, and the corner sale-flag pinned to portrait product photography. Painting CTAs in red would compete with the sale-flag — the load-bearing pricing signal on the home page — and dilute the wordmark's iconic recognition. Flat black on white inherits from UNIQLO's print catalog rhythm and keeps the eye on the garment portrait beside the button rather than on the chrome itself.

Can I use this DESIGN.md to build my own React storefront?

Yes — drop the file into Claude, Cursor, or GitHub Copilot and ask for a page in UNIQLO's voice. The agent will reproduce the absolute black-on-white chrome, the Helvetica Neue weight-400 catalogue type, the one-tier `999px`-or-`0px` radius split, the corner-pinned sale-flag, the UT tile in the category grid, and the four-column white footer — rather than a generic apparel template with rounded corners and saturated accents. Every hex sits in the extracted JSON, every typography signature came directly from the page's computed styles, and the dormant 60-variable :root atlas (including the accent-blue `#005db5`, the 10-step grey ramp, and the deep-red `#870000`) is captured for the cart, account, and order flows that don't paint on the homepage.

What's missing from this DESIGN.md?

Several layers fall outside the homepage extraction. The dormant atlas of accent swatches — `#005db5` accent-blue, `#00ab0f` success-green, `#870000` deep-red, `#002955` navy, `#ffce8a` orange200, `#34bc3f` green, `#ff7a7a` and `#ff728d` pink — is declared on `:root` but doesn't paint on the catalogue chrome; those tokens surface on cart, account, order-confirmation, and form-validation flows not present in the capture. Product detail pages (with size pickers, color swatches, fabric callouts, fit guides) carry component variants outside the landing capture. Motion (hover-fade product tiles, drawer-slide cart, banner carousel) is undocumented. The UNIQLO IQ recommendation engine, Find a Store map, and StyleHint editorial pages each carry their own surface treatments. Dark mode is not present — UNIQLO runs a single light theme on the US storefront.

UNIQLO Design System

UNIQLO US storefront tokenized as a DESIGN.md file.

About UNIQLO DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source uniqlo.com

E-commerce & Retail

UNIQLO's US storefront pushes black-on-white retail to its limit. The page paints pure `#000000` ink — not a warm graphite, not a soft charcoal — 645 times across text (324), borders (320), and a single gradient stop, sitting on `#ffffff` canvas with no warm tint, no off-white, no cream. The iconic Logo Red (`#ee0000`) is held to 16 appearances total: 8 as text, 8 as border, never as a background fill on a button. The red lives in the wordmark, the small UT tile in the category grid, the sale-flag corner on portrait photography, and the shipping-promo dismiss. Where most fast-fashion retailers paint primary CTAs in a saturated brand voltage and scatter accent pigments across the catalogue, UNIQLO commits to a 11:1 ink-to-canvas ratio and refuses to let any chromatic accent compete with the garment.

This page packages the storefront into a DESIGN.md file built on the Google Labs open specification. Inside: 22 color tokens organized into ink, surface, hairline, brand-red, and a dormant accent layer carrying 12 :root-declared swatches that don't paint on the homepage (accent-blue `#005db5`, success-green `#00ab0f`, deep-red `#870000`, navy `#002955`, plus a 10-step grey ramp); 11 typography roles split between the Helvetica Neue stack and UniqloProRegular; a one-tier radius scale (`999px` for four taxonomic pills, `0px` everywhere else); a `4px` / `8px` / `16px` / `24px` / `32px` spacing rhythm extracted directly from the homepage's computed paddings (26 occurrences of `8px`, 23 of `4px`, 22 of `16px`); and 19 component entries covering the top nav, search input, category chip, hero overlay card, UT tile, sale-flag corner badge, product portrait, and the four-column footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces UNIQLO's chromatic discipline — square corners, Helvetica labels, a single red mark reserved for sale flags and the UT badge, photography-led portraits with corner-pinned price flags — rather than a generic apparel template. Reference `{component.button-primary}`, `{component.ut-tile}`, or `{component.price-flag}` directly in your prompts and the output stays inside the system's voice. Where most direct-to-consumer fashion brands soften corners to 8px and scatter accent pigments to signal warmth, UNIQLO holds every interactive surface at `0px`, lets the photograph supply every color note, and the result reads like a Tokyo print catalog rendered for the web.

What makes it distinct

Single-voltage red`#ee0000` (UNIQLO Logo Red) appears 16 times total, 8 as text and 8 as border, never as a primary button fill
Absolute black chrome`#000000` carries 645 occurrences against 57 of `#ffffff`, a 11:1 ink-to-canvas ratio that no other global fashion retailer pushes that far
Two-typeface splitHelvetica Neue stack at weight 400 for every catalogue label; UniqloProRegular at `0.36px` uppercase tracking for the wordmark, hero overlays, and the UT mark
One-tier radius`999px` reserved for four taxonomic pills; every button, card, hero overlay, and product tile holds at hard `0px` corners
Dormant atlas of 60 :root CSS variablesaccent-blue `#005db5`, success-green `#00ab0f`, deep-red `#870000`, and a 10-step grey ramp declared but unused on the homepage

Live at uniqlo.com

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

uniqlo.com

Explore UNIQLO

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.

UNIQLO design system FAQ

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

UNIQLO US — official site

The UNIQLO US storefront this DESIGN.md was extracted from on 2026-05-13.

The DESIGN.md specification

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

Use UNIQLO in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→