ISSEY MIYAKE

Overview

ISSEY MIYAKE is a Japanese fashion design system rooted in the philosophical principle of 'one piece of cloth' (一枚の布), exploring the profound relationship between the human body and garment construction. The aesthetic movement is 'Architectural Minimalism'—a disciplined, precision-driven approach that treats typography, spacing, and color as structural elements rather than decorative flourishes. The UI evokes clarity, restraint, and intellectual rigor: users encounter a serene, uncluttered canvas where information hierarchy is conveyed through weight, scale, and negative space rather than color saturation or ornament. The emotional response is one of calm confidence—the interface feels like a well-designed gallery space where each element has earned its place.

The brand voice is precise, measured, and respectful of the user's time. Vocabulary favors concrete nouns over adjectives; sentences are short and declarative. The tone never rushes or oversells; instead, it presents facts with quiet authority. Example: 'A-POC ABLE ISSEY MIYAKE explores the relationship between body and fabric through innovative construction techniques.' The personality is that of a thoughtful curator, not a salesperson.

Colors

The color palette is anchored in a refined grayscale system with strategic use of near-black and off-white, reflecting the brand's Japanese heritage and minimalist philosophy. Primary (#333333) is the dominant text and interactive color—used for body copy, button states, and active elements. It appears in 99 instances across the site, establishing visual authority without aggression. Secondary (#767676) provides a softer alternative for supporting text and disabled states, creating visual hierarchy through weight rather than hue. Tertiary (#cccccc) is reserved for borders, dividers, and subtle surface differentiation. The surface stack ranges from pure white (#ffffff) at the brightest level to #ebebeb (surface-container) for subtle card backgrounds, maintaining legibility while avoiding ha

Typography

The type system employs a single typeface family—HelveticaLTPro / HelveticaNeueLTPro—across all scales, reinforcing the brand's commitment to clarity and consistency. This monolithic approach is intentional: rather than varying typeface, the system uses size, weight, and letter-spacing to create hierarchy. Display (60px, 400 weight, -0.02em tracking) is reserved for hero statements and major section breaks; Headline-lg (40px) for page titles; Headline-md (28px) for subsection headers; Body-md (16px) for primary content. All weights remain at 400 (regular) or 600 (bold in rare cases), avoiding the visual noise of intermediate weights. Letter-spacing is tightly controlled: negative tracking (-0.02em to -0.01em) on large sizes compresses them into confident blocks, while body text uses 0em to

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing content to breathe on large displays while maintaining focus on medium screens. The grid is fluid below 768px, collapsing to single-column layouts on mobile. White-space is the primary design tool: the spacing scale (unit: 8px, increments: xs 4px, sm 12px, md 24px, lg 40px, xl 64px) is applied generously to create visual rest. Section separation uses lg spacing (40px) vertically; card padding uses md spacing (24px); input fields use sm spacing (12px) for internal padding. The gutter width is consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. Container max-width is 1280px, with content never exceeding 900px on narrower viewports to maintain optimal line length (50–75 characte

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadow effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on hover states and subtle focus rings; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals that require clear separation from the background; lg (0 4px 8px rgba(0, 0, 0, 0.20)) for floating elements and dropdowns. Shadows are always soft and diffuse, never sharp or dramatic. Borders are preferred over shadows for primary visual separation: all cards and input fields use a 1px solid border in #cccccc or #aaa

Shapes

The shape philosophy is 'Architectural Sharpness'—minimal rounding that respects the grid and maintains visual clarity. Border-radius follows a discrete scale: sm (2px) for small UI elements like badges and input focus rings; DEFAULT (4px) for buttons, cards, and standard containers; md (5px) for slightly larger cards and modals; lg (10px) for hero sections and large containers; xl (16px) for rare cases requiring softer appearance; full (50%) for circular elements like avatars or icon buttons. The reasoning is functional: 2–4px rounding softens hard edges without introducing visual ambiguity,

Components

Action Elements Buttons are the primary interactive component. Button-primary uses a 1px solid border in primary color (#333333) with transparent background on default state, transitioning to a filled background (#eceeef) on hover with a 200ms ease transition. Height is fixed at 44px with 12px vertical and 20px horizontal padding, using label-md typography (14px, 400 weight). Button-secondary uses the same dimensions but with a transparent background and outline border, appearing as a ghost variant. Both states include a focus ring: 2px solid primary color with 2px offset, visible on keyboard navigation. Hover states apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift the button slightly, reinforcing interactivity.

Containers & Surfaces Cards are the primary container componen

Do's and Don'ts

**Do**

• Do use the primary color (#333333) for all interactive elements—buttons, links, focus states—to create consistent affordance.
• Do maintain minimum 40px vertical spacing (lg) between major sections to allow visual breathing room.
• Do apply 1px solid borders in outline colors (#cccccc, #aaaaaa) as the primary method of visual separation; avoid relying on shadow alone.
• Do use the full 12-column grid and respect the 1280px container max-width to ensure content remains scannable and focused.
• Do keep all typography at 400 weight (regular) or 600 weight (bold) only; avoid intermediate weights that introduce visual noise.
• Do apply 150–200ms ease transitions on all hover and focus state changes to provide responsive feedback without feeling sluggish.

**Don't**

• Don't use colors outside the defined palette—no accent colors, gradients, or saturated hues that conflict with the minimalist aesthetic.
• Don't apply border-radius greater than 16px except for full-circle elements; excessive rounding undermines the architectural precision.
• Don't use drop shadows as the primary visual separator; always pair shadows with 1px borders for clarity and accessibility.
• Don't exceed 75 characters per line in body text; maintain optimal line length by respecting container max-widths and gutter spacing.
• Don't mix typefaces; HelveticaLTPro / HelveticaNeueLTPro is the sole typeface family across all scales and weights.
• Don't apply letter-spacing greater than 0.1em on body text; excessive tracking reduces readability and conflicts with the refined aesthetic.