---
name: Off-White
description: "This site is worth including as a prime example of high-fashion luxury streetwear web design, showcasing how a minimal color palette and strong photography can create a premium brand identity."
version: alpha

colors:
  background: "#F5F5F5"
  primary: "#000000"
  secondary: "#6F6F6F"
  tertiary: "#0019E9"
  neutral: "#6F6F6F"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  h1:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.42px"
  caption:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.48px"

rounded:
  sm: 2px
  md: 8px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A premium streetwear brand combining industrial aesthetics with high-fashion editorial photography.

*A high-fashion editorial magazine meets urban street culture.*

## Colors

High-contrast monochrome with a single vivid electric blue accent for CTAs.

- **Background (`#F5F5F5`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#6F6F6F`)** — uses `ink-soft` token
- **Accent (`#0019E9`)** — uses `accent` token
- **Muted (`#6F6F6F`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospaced

## Layout

A split-screen layout for newsletter modals: 50% photographic editorial, 50% clean form UI.

*Rhythm:* Consistent 4px grid with tight padding in UI elements and generous gaps in editorial layouts.

## Elevation & Depth

- None: None
- None: None
- Borders: Thin 1px borders using primary ink color.

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Solid electric blue background (#0019E9) with white text for primary actions; white background with blue text for secondary actions.
- **card:** Simple containers with thin borders and sharp corners.
- **chip:** Radio buttons with circular outlines and text labels.
- **input:** Minimalist text inputs with only a bottom border.
- **hero:** Large, high-resolution editorial photography.

## Do's and Don'ts

**Don't:**
- don't use rounded corners — screenshot shows sharp, minimal radii (2px) on most elements
- don't use playful or casual fonts — screenshot uses clean sans-serifs and monospaced fonts
- don't use a complex color palette — screenshot relies on black, white, and a single electric blue
- don't use drop shadows on every element — screenshot only applies them to modals and overlays
- don't use centered text for long paragraphs — screenshot uses left-aligned and centered text sparingly
- don't use multi-column layouts for text-heavy sections — screenshot favors clean, single-column readability in modals

---

## System Prompt (paste into AI agent)

```
This site is a premium streetwear fashion brand website featuring a minimalist, high-contrast aesthetic. The design is dominated by a monochrome palette of black (#000000) and off-white (#F5F5F5), with a single vibrant electric blue (#0019E9) used as a high-chroma accent for call-to-action buttons and links. Typography is primarily a clean, humanist sans-serif for body text and a geometric sans-serif for display, with occasional use of a monospaced font for technical or structural details. Key design features include split-screen editorial modals, large high-resolution photography, and thin 1px borders. Critical design constraints: avoid rounded corners on buttons, never use more than one accent color, and maintain the stark, industrial-modern feel. The layout is built on a strict grid with tight spacing in UI elements and generous whitespace in editorial compositions.
```