Design System Inspiration of Uniqlo (ユニクロ)

1. Visual Theme & Atmosphere

Uniqlo is the global apparel brand of Japan's Fast Retailing, and its design language is the visual translation of one idea: LifeWear -- simple, high-quality, everyday clothing "Made for All." The interface mirrors the product philosophy with almost literal fidelity. Where the clothing is engineering disguised as plainness, the website is a precise, gridded, near-monochrome canvas where a single saturated red (#ed1d24) does all the talking. The page opens on pure white (#ffffff) with near-black text (#1a1a1a), and the only chromatic event on most screens is the Uniqlo red -- in the logo, in price tags, in sale flags, in the primary CTA. Color is rationed like a scarce resource, which makes every red mark read as a deliberate signal rather than decoration.

The logo, designed by Kashiwa Sato in 2006, is the design system in miniature: a white katakana-inspired wordmark locked into a red square that deliberately echoes the Japanese flag (Hinomaru). That red square is the brand's load-bearing geometry -- a hard-edged rectangle, no rounding, maximum contrast. The whole site inherits that logic: rectangles, hard 90-degree corners, a strict modular grid of product tiles, and typography set in a clean geometric sans (TT Commons Pro on the modern web build, with Helvetica Neue / Arial as the historical fallback, and Hiragino Kaku Gothic for Japanese). Nothing is pill-shaped, nothing is soft, nothing apologizes for being a product catalog.

What defines Uniqlo visually is catalog rigor: dense, evenly-spaced grids of garment photography on white, where the product is the hero and the chrome recedes to black-and-white. The aesthetic is closer to a Muji-adjacent Japanese retail clarity than to the aspirational editorial mood of luxury fashion or the chaotic density of fast-fashion competitors. It is fashion presented as infrastructure -- orderly, legible, repeatable at the scale of thousands of SKUs.

Key Characteristics:

• Uniqlo Red (#ed1d24, Pantone 485 C) as the single brand accent -- rationed, never decorative
• Pure white (#ffffff) canvas with near-black (#1a1a1a) text -- maximum legibility, no warmth tax
• Hard 90-degree corners everywhere -- the red square logo's geometry inherited site-wide (radius 0-2px)
• TT Commons Pro geometric sans (web), Hiragino Kaku Gothic (Japanese), Helvetica/Arial fallback
• Strict modular product grid -- 2-up mobile, 3-4-up desktop, even gutters, repeating tiles
• Bold uppercase labels and price-forward hierarchy -- the price is a first-class typographic citizen
• Flat, shadowless surfaces -- depth comes from grid and whitespace, not elevation
• Bilingual-native typography -- Japanese and Latin set with equal care, neither subordinate

2. Color Palette & Roles

Primary

• Uniqlo Red (#ed1d24): The brand color. Pantone 485 C, RGB(237,29,36), CMYK(1,99,97,0). Logo background, primary CTA, sale/price flags, active states, error emphasis. Unchanged since the 2006 Kashiwa Sato rebrand. This is the only saturated hue in the entire system.
• Pure White (#ffffff): Page background, card surfaces, logo wordmark, text on red. The default canvas -- everything sits on white.
• Near Black (#1a1a1a): Primary text, headings, navigation labels, product names. Not pure #000000 -- a hair softer to reduce harshness on long catalog scans.

Brand (Logo / Marketing)

• Hinomaru Red (#ed1d24): The red square. Same value as primary -- the logo and the UI accent are intentionally the same red, unlike brands that split brand-red from UI-red.
• Logo White (#ffffff): The katakana wordmark, always knocked out of the red square. Never inverted (red text on white square is not the lockup).

Text Scale

• Heading (#1a1a1a): Product names, section titles, strong labels.
• Body (#333333): Standard reading text, descriptions, paragraph copy.
• Secondary (#666666): Sub-labels, metadata, secondary product info, helper text.
• Tertiary / Muted (#999999): Placeholder text, disabled labels, fine print, struck-through original prices.

Semantic

• Sale / Price Red (#ed1d24): Sale prices, discount flags, "限定" / "LIMITED OFFER" tags. The red doubles as the price-attention color -- there is no separate "sale orange."
• Error Red (#ed1d24 / #d0021b): Form errors, validation failures. Reuses brand red; deeper #d0021b for error text on white when extra contrast is needed.
• Success Green (#1a8917): Order confirmation, in-stock indicators, "added to cart." Used sparingly -- green is functional, never decorative.
• Info Blue (#0070c9): Informational links, size-guide links, shipping notices. Restrained, utilitarian.

Neutral Scale

• Gray 50 (#f5f5f5): Lightest surface, secondary section backgrounds, hover fills, skeleton base.
• Gray 100 (#eeeeee): Card fills, disabled button surfaces, input backgrounds.
• Gray 200 (#e0e0e0): Default borders, dividers, grid lines, input outlines.
• Gray 300 (#cccccc): Stronger borders, inactive controls.
• Gray 500 (#999999): Muted text, placeholders, struck prices.
• Gray 700 (#666666): Secondary text.
• Gray 900 (#1a1a1a): Primary text, near-black.

Surface & Borders

• Border Default (#e0e0e0): Standard dividers, product-tile separators, input borders, table rules.
• Border Strong (#1a1a1a): Emphasized outlines -- outlined "secondary" buttons, selected swatches, active filter chips.
• Overlay Scrim (rgba(0,0,0,0.5)): Modal/drawer backdrop. Neutral black, no tint.

3. Typography Rules

Font Family

• Primary (Latin/web): "TT Commons Pro", "Helvetica Neue", Helvetica, Arial, sans-serif
• Japanese: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif
• Logo wordmark: Custom katakana-inspired geometric sans (Kashiwa Sato, 2006) -- not used for body text, lockup only.
• Numerals: Tabular figures for prices and size charts; proportional for running copy.

The system is a clean geometric sans with even stroke weight and open counters -- chosen for maximum legibility at catalog density across Latin, Japanese, and dozens of localized scripts. There are no serifs, no display faces, no decorative type anywhere in the product experience.

Hierarchy

Principles

• Price is typography. Prices use 700 weight and tabular numerals, sized as large as a subtitle. The price never inherits body weight -- it is a headline-class element in every product tile.
• Uppercase for tags, sentence case for content. Status tags and category labels ("NEW", "LIMITED OFFER", "MEN") are uppercase with +0.5px tracking; product names and descriptions are sentence case for readability.
• Two weights do the work. 400 (body) and 700 (headings, prices, tags) carry ~90% of the UI; 600 is the bridge for subtitles and nav. No light weights -- legibility over elegance.
• Bilingual parity. Japanese (Hiragino) and Latin (TT Commons Pro) are weighted to sit harmoniously on the same line; neither script is treated as the fallback. Localized scripts inherit the same hierarchy.
• Tight tracking on display only. Negative letter-spacing appears at 36px+ to tighten campaign headlines; body and UI text use normal tracking.

4. Component Stylings

Buttons

Uniqlo buttons are rectangular, hard-cornered, and high-contrast. The system is deliberately small: a red primary, a black/outlined secondary, and a disabled state. Radius stays at 0-2px -- the red-square logo geometry inherited.

Primary (Red)

• Background: #ed1d24
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 14px 24px
• Font: 15px / 700 / TT Commons Pro
• Hover: background darkens to #c8161c
• Use: Primary CTA -- "ADD TO CART" (カートに入れる), "BUY NOW", "CHECKOUT"
• Height: ~48px, often full-width on mobile

Secondary (Outlined Black)

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #1a1a1a
• Radius: 2px
• Padding: 14px 24px
• Font: 15px / 700 / TT Commons Pro
• Hover: background #1a1a1a, text #ffffff (inverts)
• Use: Secondary action -- "ADD TO WISHLIST", "FIND IN STORE", "CONTINUE SHOPPING"

Solid Black

• Background: #1a1a1a
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 14px 24px
• Font: 15px / 700 / TT Commons Pro
• Hover: background #333333
• Use: Neutral strong action where red would over-signal -- account/settings CTAs, "SIGN IN"

Tertiary / Text Link

• Background: transparent
• Text: #1a1a1a with underline
• Border: none
• Font: 14px / 600 / TT Commons Pro
• Hover: text #ed1d24
• Use: Inline links -- "View size guide", "See details", "More colors"

Disabled

• Background: #eeeeee
• Text: #999999
• Border: none
• Radius: 2px
• Use: Unavailable action (out of stock, incomplete form). Geometry identical to active so layout is stable.

Product Tiles (Cards)

The product tile is the atomic unit of the entire site -- the design system exists primarily to render thousands of these in a grid.

Standard Product Tile

• Background: #ffffff
• Border: none (separated by grid gutter, not borders)
• Radius: 0px on image, 0px on tile
• Image: 1:1.33 (3:4 portrait) garment photo on white or #f5f5f5
• Padding: 0 on image, 8px-12px on text block below
• Product name: 14px / 600 / #1a1a1a
• Price: 16px / 700 / #1a1a1a (or #ed1d24 if on sale, with struck #999999 original)
• Color swatches: row of 16px hard-edged squares below price
• Tag (optional): top-left "NEW" / "LIMITED" / "SALE" flag in #ed1d24 or #1a1a1a
• Hover: subtle image swap (alternate view), no shadow lift

Content / Feature Card

• Background: #ffffff or #f5f5f5
• Border: none
• Radius: 0px
• Padding: 24px-32px
• Use: LifeWear story blocks, fabric-technology features, campaign tiles

Inputs & Forms

Text Input

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #cccccc
• Radius: 2px
• Padding: 12px 14px
• Font: 14px / 400 / TT Commons Pro
• Placeholder: #999999
• Focus: border #1a1a1a (1px), no glow
• Error: border #ed1d24, helper text #ed1d24 12px below

Select / Dropdown

• Same geometry as text input
• Chevron indicator #666666, right-aligned
• Use: Size, quantity, country/region pickers

Swatches (Color / Size Selectors)

Color Swatch

• Shape: hard-edged square, ~24px
• Border: 1px solid #e0e0e0 (unselected)
• Selected: 2px solid #1a1a1a outline with 2px white inset gap
• Radius: 0px

Size Chip

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #cccccc
• Radius: 2px
• Padding: 8px 14px
• Selected: border #1a1a1a (2px), background #ffffff
• Disabled (out of stock): #cccccc text, diagonal strike, #eeeeee bg

Tags / Flags

Sale Flag

• Background: #ed1d24
• Text: #ffffff
• Border: none
• Radius: 0px
• Padding: 2px 6px
• Font: 11px / 700 / TT Commons Pro, UPPERCASE, +0.5px tracking
• Use: "SALE", "LIMITED OFFER", "限定価格"

New / Neutral Flag

• Background: #1a1a1a
• Text: #ffffff
• Border: none
• Radius: 0px
• Padding: 2px 6px
• Font: 11px / 700 / TT Commons Pro, UPPERCASE
• Use: "NEW", "ONLINE EXCLUSIVE"

Navigation

• Top bar: white background, #1a1a1a text, red square logo top-left
• Category links: 13px / 600 / #1a1a1a, generous horizontal spacing, hover underline
• Mega-menu: full-width white drawer, columned category lists, no shadow (1px #e0e0e0 bottom border separates from content)
• Utility icons (search, account, wishlist, cart): #1a1a1a line icons, ~20px
• Sticky on scroll with a subtle 1px #e0e0e0 bottom border, no blur

Tabs / Filters

Filter Chip

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #cccccc
• Radius: 2px
• Padding: 8px 14px
• Active: border #1a1a1a (2px) or filled #1a1a1a bg with white text
• Use: Category/attribute filters on listing pages

Toasts / Notifications

Default

• Background: #1a1a1a
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 14px 18px
• Font: 14px / 600 / TT Commons Pro
• Use: "Added to cart", "Saved to wishlist" -- brief, auto-dismiss

---

Verified: 2026-06-06 Tier 1 sources: uniqlo.com (live catalog — grid geometry, white canvas, red CTA, hard-cornered tiles); Kashiwa Sato 2006 logo system (red square + katakana wordmark). Web build typeface TT Commons Pro confirmed via Fonts In Use / TypeType records; Japanese rendered in Hiragino Kaku Gothic. · https://www.uniqlo.com (live production site) Tier 2 sources: brandpalettes.com/uniqlo-colors (Uniqlo Red #ed1d24, Pantone 485 C, RGB 237/29/36 — unchanged since 2006); color-name.com (#ED1D24); brandyhq.com (#ed1d24, #ffffff palette). Conflicts resolved: Hint suggested #FF0000-ish + Helvetica; corrected to verified #ed1d24 (Pantone 485 C) and TT Commons Pro / Hiragino (Helvetica Neue retained only as historical fallback). Brand-red and UI-red are intentionally the same value.

5. Layout Principles

Spacing System

• Base unit: 8px
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Product-tile internal text spacing: tight 8-12px
• Section spacing: generous 48-64px between content blocks
• Grid gutters: 8-16px on mobile, 16-24px on desktop

Grid & Container

• Max content width: ~1280px (centered, with side margins on large screens)
• Product grid: 2 columns mobile, 3 columns tablet, 4 columns desktop (sometimes 3-up for larger imagery)
• Even gutters, no per-tile borders -- whitespace is the divider
• Hero banners: full-bleed edge-to-edge, often with overlaid red/white typography
• The grid is strict and repeating -- the catalog reads as a uniform module system, deliberately un-editorial

Whitespace Philosophy

• Product as hero, chrome as silence. The garment photo gets the space; navigation, filters, and labels recede to small black-on-white. Whitespace exists to isolate each product so it can be judged on its own.
• Even rhythm over drama. Unlike luxury fashion's asymmetric editorial layouts, Uniqlo uses an even, predictable grid. The lack of layout surprise is the brand -- order, reliability, scale.
• Generous between, tight within. Big gaps between sections (48-64px); tight, efficient spacing inside a tile (8-12px). The macro feels calm; the micro feels dense and practical.

Border Radius Scale

• Sharp (0px): Product images, swatches, tags, hero banners -- the default
• Minimal (2px): Buttons, inputs, chips -- a barely-there softening for tap affordance
• Nothing above 2px. No pills, no rounded cards. Hard corners are the brand's geometry.

6. Depth & Elevation

Shadow Philosophy: Uniqlo is fundamentally a flat, shadowless system. Depth is communicated through the grid, whitespace, and hard borders -- not elevation. The product grid has zero shadow; tiles separate by gutter alone. Shadows appear only on truly floating UI (menus, drawers, modals) and even then they are minimal, neutral black, single-layer. There are no brand-tinted shadows, no multi-layer depth stacks, no glassmorphism. The aesthetic is print-catalog flatness: everything sits on the same plane until it explicitly floats above the page. This restraint reinforces the "honest, no-tricks" product positioning -- the clothing isn't dramatized, and neither is the UI.

No Blur

• Sticky nav uses a solid white background, not backdrop blur
• Modal scrims are flat black at 50% opacity, no blur on the underlying content

7. Do's and Don'ts

Do

• Use Uniqlo Red (#ed1d24) only for brand, primary CTA, prices/sale, and errors -- ration it
• Keep the canvas pure white (#ffffff) with near-black (#1a1a1a) text
• Use hard corners -- radius 0px on images/tags/swatches, max 2px on buttons/inputs
• Make the price a first-class element: 700 weight, tabular numerals, subtitle-sized
• Lay products on a strict, even, repeating grid (2/3/4-up) with whitespace gutters
• Use uppercase + tracking for tags ("NEW", "SALE", "LIMITED OFFER")
• Set Japanese in Hiragino Kaku Gothic and Latin in TT Commons Pro with equal weight
• Keep surfaces flat -- borders and whitespace over shadows

Don't

• Don't use #ff0000 -- the verified brand red is #ed1d24 (Pantone 485 C)
• Don't introduce a second accent color -- red is the only saturated hue
• Don't use pill or large-radius shapes -- the brand geometry is the hard-edged red square
• Don't add shadows to product tiles -- the grid is flat by design
• Don't use brand-tinted or multi-layer shadows -- shadows are minimal, neutral, floating-UI only
• Don't make the price visually subordinate to the product name -- price is headline-class
• Don't use light font weights -- the system is 400 / 600 / 700 only
• Don't dramatize -- no gradients, no glass, no editorial asymmetry; order is the aesthetic

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: ~48px height, full-width on mobile
• Size/color chips: minimum 40x40px tap area
• Nav and utility icons: ~44px tap target with padding
• Product tiles: entire tile is tappable

Collapsing Strategy

• Top nav: full horizontal mega-menu → hamburger drawer on mobile
• Filters: inline filter bar → bottom-sheet / side-drawer on mobile
• Product grid: 4-up → 3-up → 2-up (never 1-up — pairs preserve catalog scanning)
• Add-to-cart: inline button → sticky bottom bar on mobile PDP
• Hero typography: 48px → 28px, maintaining 700 weight and red/white contrast

Image Behavior

• Garment photos maintain 3:4 portrait aspect at all breakpoints
• Hero banners go full-bleed edge-to-edge; text reflows but stays high-contrast
• Lazy-loaded grid images fade in over a #f5f5f5 placeholder
• Zoom on PDP: pinch/hover magnify, image stays sharp on white

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / Brand: Uniqlo Red (#ed1d24)
• CTA Hover: Dark Red (#c8161c)
• Background: Pure White (#ffffff)
• Secondary surface: Gray 50 (#f5f5f5)
• Heading text: Near Black (#1a1a1a)
• Body text: Dark Gray (#333333)
• Secondary text: Gray (#666666)
• Muted / placeholder: Gray (#999999)
• Border: Gray 200 (#e0e0e0)
• Sale / Error: Uniqlo Red (#ed1d24)
• Success: Green (#1a8917)
• Strong neutral button: Near Black (#1a1a1a)

Example Component Prompts

• "Create a product tile: white bg, 3:4 portrait garment photo (no radius), product name 14px weight 600 #1a1a1a, price 16px weight 700 #1a1a1a tabular numerals, row of 16px hard-edged color swatches below, optional top-left 'NEW' flag (#1a1a1a bg, white 11px uppercase). No shadow — separated by grid gutter."
• "Build an add-to-cart button: #ed1d24 bg, white text, 15px weight 700, 2px radius, 14px 24px padding, full-width on mobile, ~48px tall. Hover darkens to #c8161c."
• "Design a secondary button: white bg, #1a1a1a text, 1px solid #1a1a1a border, 2px radius, 15px weight 700. Hover inverts to #1a1a1a bg with white text. Use for 'FIND IN STORE'."
• "Create a sale price block: original price 14px #999999 strikethrough, sale price 18px weight 700 #ed1d24 tabular numerals, small 'SALE' flag #ed1d24 bg white 11px uppercase 0.5px tracking."
• "Lay out a product grid: white bg, 4 columns desktop / 2 mobile, even 16px gutters, no tile borders or shadows. Each tile is a tappable product card."
• "Design a size selector: row of size chips, white bg, #1a1a1a text, 1px #cccccc border, 2px radius, 8px 14px padding. Selected chip gets 2px #1a1a1a border. Out-of-stock chips are #cccccc with a diagonal strike."

Iteration Guide

1. The canvas is always pure white #ffffff; text is near-black #1a1a1a — never pure black, never tinted backgrounds for primary content
2. Red #ed1d24 is rationed — brand, primary CTA, price/sale, error. If two reds are competing on a screen, remove one
3. Hard corners: 0px on images/tags/swatches, 2px max on buttons/inputs. No pills, ever
4. Price is headline-class: 700 weight, tabular numerals, sized like a subtitle
5. Product grid is strict and even (2/3/4-up), separated by whitespace gutters, zero shadow
6. Two-to-three weights only: 400 body, 600 subtitle/nav, 700 headings/prices/tags
7. Japanese in Hiragino Kaku Gothic, Latin in TT Commons Pro — equal weight, neither is a fallback
8. Flat by default; shadows only on floating UI (menus, drawers, modals), minimal and neutral

---

10. Voice & Tone

Uniqlo's voice is plain, functional, and quietly confident -- the verbal equivalent of a well-made white T-shirt. It describes what a garment does (fabric technology, fit, care) before how it makes you feel. There is no hype, no seasonal urgency theater beyond honest sale labeling, no aspirational lifestyle fantasy. The register is the same in Japanese and in every localized market: clear, respectful, practical. The brand line -- "LifeWear" and "Made for All" -- sets the tone: clothing as a universal daily utility, not a status signal.

Forbidden phrases. "Revolutionary", "must-have", "game-changer", aspirational lifestyle fantasy ("live your best life"), false scarcity ("only 2 left — hurry!"), exclamation-stacked hype. Uniqlo sells utility honestly; manufactured urgency contradicts the LifeWear thesis.

11. Brand Narrative

Uniqlo (ユニクロ) is the flagship brand of Fast Retailing, founded by Tadashi Yanai (柳井正), who opened the first "Unique Clothing Warehouse" store in Hiroshima in 1984 (the contracted name "Uni-Qlo" came from a registration typo that stuck). Yanai inherited his father's roadside men's tailoring business and reimagined it as something radical for Japanese retail: a self-service, warehouse-style store selling well-made basics at honest prices, free of the formality and markup of department-store fashion.

The brand's modern identity dates to 2006, when Yanai commissioned designer Kashiwa Sato to create the global visual system: the red square logo with its white katakana-inspired wordmark, deliberately evoking the Japanese flag (Hinomaru) to signal a Japanese brand thinking globally from the start. That same year Uniqlo opened its New York and London flagships, and the red-and-white system has been unchanged since.

The organizing philosophy is LifeWear -- articulated by Yanai as "simple, high-quality, everyday clothing designed to improve everyone's life." LifeWear is explicitly "Made for All": clothing engineered to transcend age, gender, ethnicity, and trend. Uniqlo's competitive position is the inverse of fast fashion -- not chasing micro-trends, but perfecting timeless basics through textile engineering (HEATTECH thermal base layers, AIRism breathable fabric, Ultra Light Down). The product is innovation disguised as plainness, and the design system performs the same trick: it looks like a plain catalog, but every grid measure, every rationed red mark, and every hard corner is deliberate.

What Uniqlo refuses: the aspirational fantasy of luxury fashion, the disposable trend-churn of fast fashion, the visual chaos of overcrowded retail. What it embraces: Japanese retail clarity, honest pricing, function-first storytelling, and an order so consistent it reads as trust. The red square is a flag planted on that idea.

12. Principles

1. Ration the red. #ed1d24 is the only saturated color in the system, so every appearance is a signal -- brand, CTA, price, error. Decorative red dilutes the signal and is forbidden. If red competes with red on a screen, one of them is wrong.
2. Product as hero, chrome as silence. The garment gets the space and the light; navigation, filters, and labels recede to small black-on-white. The UI's job is to disappear so the product can be judged honestly.
3. Order is the aesthetic. A strict, even, repeating grid is not boring -- it is the brand. Predictability communicates reliability and scale. Editorial asymmetry belongs to luxury fashion; Uniqlo is infrastructure.
4. Hard corners, always. The red-square logo's geometry governs the whole system. Radius stays at 0-2px. Pills and soft cards contradict the brand's planted-flag rectangularity.
5. Price is headline-class. A price set in 700-weight tabular numerals at subtitle size respects the customer's reason for being there. Demoting the price to fine print is a betrayal of an honest-value brand.
6. Flat over deep. Depth comes from grid and whitespace, not elevation. Shadows appear only when something genuinely floats. A flat catalog says "no tricks" -- which is the product promise.
7. Bilingual by birth. Japanese and Latin are co-equal, set with equal care. Localized markets inherit the same hierarchy; no script is a second-class fallback. The brand was global from its 2006 rebrand onward.
8. Honesty over urgency. Sales are labeled plainly with real prices; there is no manufactured scarcity. The voice describes what clothing does, not the life it promises. LifeWear is a utility claim, and the UI keeps that promise.

13. Personas

Personas below are fictional archetypes informed by publicly described Uniqlo customer segments (value-conscious everyday shoppers, function-first buyers, global basics-wardrobe builders), not individual people.

Aiko Tanaka, 34, Tokyo. Working mother, shops Uniqlo online during her commute. Buys HEATTECH for the whole family every autumn and AIRism in summer. Reads fabric descriptions carefully -- she trusts Uniqlo precisely because the site explains why a fabric is warm or breathable rather than just calling it "cozy." Expects the size chart to be accurate and the price to be exactly what the tag says. Annoyed by any retailer that buries the real price under fake "was/now" theater. Reads the site in Japanese; the Hiragino type and clean grid feel like home.

Marcus Hale, 41, Chicago. Software manager who has standardized his wardrobe on Uniqlo basics -- the same Supima T-shirt and chino in multiple colors. Values the strict grid: he can scan a category page in seconds because every tile is identical in structure. Does not want to be sold a lifestyle; wants to find the gray crewneck, confirm it's in stock in M, and check out in under a minute. The flat, shadowless, no-nonsense UI is exactly why he shops here instead of trend-chasing competitors.

Priya Nair, 27, London. Design-conscious shopper who appreciates Uniqlo as "Muji for clothes" -- minimal, honest, well-engineered. Follows the LifeWear collaborations (the brand's restraint makes the occasional designer collab feel meaningful). Notices and respects the typography and the rationed red. Would immediately distrust a redesign that added gradients, shadows, or a second accent color -- to her the flatness is the credibility.

Mr. Sato, 58, Osaka. Long-time customer since the warehouse-store days. Buys reliable basics -- socks, undershirts, the same down vest -- and values that Uniqlo's pricing and product names are plain and consistent year to year. Uses the website occasionally but mostly to check store stock. The clear, large price and the "FIND IN STORE" button matter more to him than any campaign imagery.

14. States

15. Motion & Easing

Durations:

Easings:

Explicitly restrained. No spring, no bounce, no overshoot. Motion is functional and brief, matching the no-tricks product positioning. Nothing animates just to delight; transitions exist to clarify spatial relationships (where the cart drawer came from, what a filter did).

Signature motions.

1. Product image swap. On hover (desktop) or as a secondary thumbnail (mobile), the tile's primary photo cross-fades to an alternate garment view over motion-fast. The tile never lifts or casts a shadow -- the image changes, the geometry stays flat.
2. Mini-cart drawer. "Add to cart" slides a drawer in from the right edge over motion-standard / ease-enter, with a synchronized rgba(0,0,0,0.5) scrim fade. Dismissal slides back over motion-fast / ease-exit.
3. Mega-menu reveal. Hovering a top-nav category drops a full-width white panel over motion-standard. The panel appears flat against the page (1px #e0e0e0 separator), not floating with heavy shadow.
4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. Image swaps become instant cuts, drawers appear without sliding. The catalog stays fully functional; nothing is gated behind animation.