YEEZY

Overview

YEEZY operates within the aesthetic of Architectural Minimalism—a design philosophy that treats digital interfaces as refined, functional structures stripped of ornament. The brand serves luxury fashion consumers who value clarity, precision, and the uncompromising presentation of product. The UI evokes a gallery-like serenity: a near-monochromatic palette of off-white (#f3f2ee), charcoal (#000000), and warm earth tones (#6e5542, #8a866c) creates visual restraint that allows product imagery to dominate. The emotional response is one of exclusivity and control—every element earns its place through necessity, never decoration.

The YEEZY voice is terse, authoritative, and devoid of marketing flourish. Copy is sparse: product codes (TS-03, LS-03, HD-03) replace verbose descriptions. Tone is imperative and direct—"CONTINUE," "OPT OUT," "NEXT"—reflecting a brand confident enough to assume the user's intent. Vocabulary skews technical and abbreviated. Example sentence in brand voice: "TS-03 available in black. Size range XS–XL. Delivery 5–7 business days."

Colors

The YEEZY color system is fundamentally monochromatic, with primary (#000000) and on-primary (#ffffff) forming the core interaction layer. Black is deployed on all call-to-action buttons (backgroundColor: rgb(0, 0, 0), textColor: rgb(255, 255, 255)) and critical interactive elements, establishing an unambiguous visual hierarchy. The surface stack—surface (#ffffff), surface-dim (#f3f2ee), surface-container (#eeebe5)—provides subtle tonal separation without introducing competing hues. Secondary (#6e5542) and tertiary (#8a866c) are warm, desaturated earth tones used sparingly for accent text, borders, and disabled states; they reinforce the brand's connection to natural materials and craft. Outline (#8a866c) and outline-variant (#c4c4c4) define form boundaries with restraint: dropdowns use 1p

Typography

YEEZY's typography system is built entirely on YZY Plex Mono (with IBM Plex Mono as fallback), a monospaced typeface that reinforces the brand's technical, architectural identity. The type hierarchy spans from display (60px, 700 weight, -0.04em letter-spacing) for hero statements down to label-sm (12px, 600 weight, 0.05em letter-spacing) for metadata and product codes. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) are used for section breaks and modal titles, maintaining visual rhythm through consistent line-height (48px and 36px respectively). Body text (16px–18px, 400 weight) is set with 24–28px line-height for legibility over the light surface. All interactive labels (buttons, form fields) use label-md (14px, 600 weight, 0.01em letter-spacing) to ensure crisp, scanna

Layout

YEEZY employs a fluid 12-column grid with a container-max-width of 1280px, allowing product grids to scale responsively from mobile to desktop without reflow. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero from product grid, grid from footer), md (24px) creates breathing room within card groups, and sm (12px) defines internal padding within components. The gutter is consistently 24px, maintaining alignment across all breakpoints. White-space is treated as a design material—negative space around product imagery is never filled, allowing the eye to rest and focus on merchandise. Containers use surface-container (#eeebe5) backgrounds only when semantic grouping is necessary; the default is transparent or surface (#ffffff) to preserve the gall

Elevation & Depth

Depth in YEEZY is conveyed through subtle shadow and border treatments rather than dramatic layering. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small cards, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and lifted surfaces, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Dropdown panels use a specialized dropdown shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to ensure they float clearly above the page without appearing heavy. Borders—1px solid at #d0d0d0 or #c4c4c4—define form boundaries and card edge

Shapes

YEEZY's shape philosophy is Architectural Sharpness—corners are either fully squared (border-radius: 0px on most elements) or subtly rounded (4px / 0.25rem on form controls and dropdowns). Buttons use rounded: DEFAULT (0.5rem / 4px) to soften the hard edge without introducing visual softness; this 4px radius appears in the live computed styles (borderRadius: 4px on dropdown panels). Cards and modals use rounded: lg (1rem / 16px) only when they require visual separation from the background; most product containers remain square. The full radius (9999px) is reserved for badges and pill-shaped UI

Components

Action Elements Buttons are the primary interaction mechanism and must always use backgroundColor: {colors.primary} (#000000) with textColor: {colors.on-primary} (#ffffff). Standard button-primary has padding: 12px 24px, height: 48px, rounded: DEFAULT (4px), and typography: label-md (14px, 600 weight). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#1a1a1a) and textColor: {colors.on-primary-container} (#f3f2ee)—a subtle darkening that signals state change without jarring the user. Secondary buttons use transparent backgrounds with 1px solid borders at {colors.outline} (#8a866c), maintaining visual hierarchy through stroke rather than fill. Ghost buttons (used for tertiary actions like "OPT OUT") have no border, no background, and rely on

Do's and Don'ts

**Do**

• Do use black (#000000) on white (#ffffff) for all primary CTAs—this contrast is non-negotiable and reinforces brand authority.
• Do maintain the monospace typography (YZY Plex Mono) across all UI text, including form labels and error messages, to preserve the technical aesthetic.
• Do apply the 4px border-radius consistently to form controls and dropdowns; never use 0px radius on interactive elements.
• Do use the earth-tone secondary (#6e5542) and tertiary (#8a866c) colors only for disabled states, borders, and metadata text—never as primary backgrounds.
• Do preserve white-space around product imagery; resist the urge to fill negative space with decorative elements or gradients.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to dropdown panels to ensure they float clearly above the page.

**Don't**

• Don't use rounded corners larger than lg (16px) on any component; the brand rejects soft, organic shapes.
• Don't introduce color gradients or glassmorphism effects; YEEZY is flat, architectural, and devoid of atmospheric effects.
• Don't use system fonts or sans-serif typefaces; YZY Plex Mono is mandatory for all UI text to maintain brand identity.
• Don't apply text-shadow or blur effects to body copy; reserve text-shadow only for small labels over complex product imagery.
• Don't use more than three colors in any single view; the palette is intentionally restricted to force clarity.
• Don't animate transitions longer than 200ms; the brand values precision and speed, not fluidity or ease.