# Represent · Design system migration spec

> Source: https://representclo.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of how minimalist typography and high-quality photography can create a premium brand identity without complex UI components.

## 1. Identity DNA

The design system is built on the principle of a high-end streetwear lookbook presented as a clean, editorial magazine. Its identity is rooted in a minimalist, bold aesthetic focused on strong typography and full-bleed photography, creating a premium feel through stark contrast and restraint.

**One-liner:** A minimalist, bold fashion editorial site focused on strong typography and full-bleed photography.
**Keywords:** streetwear · premium · minimal · bold · editorial
**Analogy:** A high-end streetwear lookbook presented as a clean, editorial magazine.

## 2. Color

The color palette is a strict monochrome base of black and off-white, punctuated by a single deep red accent. This high-contrast approach serves editorial impact, using the accent sparingly for emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F7F7` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#575757` | secondary text |
| `--muted` | `#C7C7C7` | placeholder |
| `--accent` | `#AE0200` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome with a singular deep red accent for emphasis.

The guiding principle is clarity through stark contrast, allowing photography and typography to command attention.

## 3. Typography

The typographic voice is bold and direct, built on a category of grotesque sans-serifs. Rules enforce uppercase for UI elements and tight tracking for large display type, creating a condensed, authoritative presence.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 700 | -0.5px | Main headings and hero text |
| h2 | 32px | 1.2 | 600 | 0px | Section titles |
| body | 16px | 1.5 | 400 | 0.13px | General paragraph text and descriptions |
| caption | 12px | 1.3 | 400 | 0.36px | Small metadata, tags, and secondary information |

**Type rules:**
- Use uppercase for navigation, tags, and secondary UI elements.
- Maintain tight tracking for large display typography.

## 4. Spacing

Spacing follows an 8px base rhythm with 4px micro-steps for tight UI elements, establishing a consistent and measurable grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** 8px base with 4px micro-steps for tight UI elements.

## 5. Surfaces

Surfaces are defined by minimalist depth, utilizing specific heavy shadows or stark flatness. Borders are a subtle 1px solid line, maintaining clean divisions without visual weight.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 0px 24px 0px
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The layout skeleton opens with full-bleed photography overlaid with typography, establishing immediate editorial impact. This transitions into a clean, structured grid for product listings, balancing dramatic introduction with functional browsing.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed photography with overlaid text, transitioning to a clean grid for product listings.

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and purpose. Transitions are smooth and limited to standard easing, focusing on clean opacity fades and scaling to maintain a premium, unobtrusive feel.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth opacity and transform transitions on hover and scroll.
  - Subtle fading for image transitions.

- **Hover:** Subtle opacity changes or slight scaling on interactive elements.
- **Click:** Immediate visual feedback via transition effects.
- **Transition:** All elements use standard 0.2s to 0.4s ease-in-out transitions.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is minimal, direct, and premium. Headlines are bold, uppercase, and condensed, while calls to action are highly visible and action-oriented.

- **Tone:** Minimal, direct, and premium.
- **Headline style:** Bold, uppercase, and condensed.
- **CTA style:** Action-oriented, uppercase, and highly visible.
- **Avoid:** Cursive fonts / Loud gradients / Cluttered layouts

### Don'ts
- ❌ Don't use decorative fonts — screenshot shows a strict reliance on bold grotesque sans-serifs.
- ❌ Don't use rounded corners on primary UI elements — screenshot shows sharp, rectangular edges.
- ❌ Don't use a multi-color palette — screenshot shows a strict monochrome base with a single red accent.
- ❌ Don't use subtle drop shadows on cards — screenshot shows flat surfaces or very heavy, specific shadows.
- ❌ Don't use mixed case in primary navigation — screenshot shows exclusive use of uppercase for UI labels.
- ❌ Don't use soft, pastel backgrounds — screenshot shows a stark white or light gray (#F7F7F7) base.

The system deliberately avoids decorative fonts, loud gradients, and cluttered layouts to preserve its core aesthetic of clean, bold restraint.

## System Prompt (paste into AI tool)

```
This is a premium streetwear fashion site that utilizes a minimalist editorial aesthetic. The design DNA is rooted in high-contrast monochrome (black #000000 on white #F7F7F7) with bold, uppercase grotesque-sans typography (STKBureau). The layout relies heavily on full-bleed photographic heroes and a structured 12-column grid. Key accent is a deep red (#AE0200). Critical donts: do not use rounded corners on primary elements, do not introduce decorative or script fonts, and do not use a multi-color palette. The overall feel is clean, bold, and highly restrained.
```
