# Sneakinpeace · Design system migration spec

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

> This site is a strong example of editorial luxury UI, where the interface intentionally recedes to let high-end visual content and photography take center stage.

## 1. Identity DNA

Sneakinpeace operates as a live magazine channel for high-end sneakers and fashion campaigns, a premium streaming platform that curates luxury sneaker campaigns and editorial content. The design system treats the interface as a transparent vessel, where every technical decision serves to foreground the photographic and video narrative. It is architecture designed to disappear, much like the quiet, precise framing of a gallery wall.

**One-liner:** A premium streaming platform that curates luxury sneaker campaigns and editorial content.
**Keywords:** luxury · sneaker culture · editorial · streaming · premium
**Analogy:** A live magazine channel for high-end sneakers and fashion campaigns.

## 2. Color

The color system is built on a foundation of deliberate neutrality, employing warm grays and off-whites to create a muted stage. This restraint ensures the full-bleed photography and video content command the viewer's attention, while a single functional red accent anchors critical live indicators without competing with the media.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F0EEED` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#808080A6` | quiet area |
| `--ink` | `#3D3D3D` | body text |
| `--ink-soft` | `#767676` | secondary text |
| `--muted` | `#E0E0E0` | placeholder |
| `--accent` | `#D41515` | single accent |
| `--line` | `rgba(61, 61, 61, 1)` | divider |

**Color principle:** A muted, neutral palette with warm grays and off-whites to let full-bleed photography and video content dominate, anchored by a functional red accent.

The guiding principle is chromatic deference: the palette exists to frame, not to feature.

## 3. Typography

The typographic voice is split between a bold, elegant serif for feature campaign titles—evoking the authority of a luxury fashion magazine—and a clean neo-grotesque sans-serif for descriptive body text and metadata. This duality establishes a clear hierarchy where display type commands presence and supporting text recedes into a functional role.

- **Display:** transitional-serif
- **Body:** neo-grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.1 | 400 | normal | Feature campaign titles like 'Balenciaga - On Repeat' |
| body | 14px | 1.9 | 400 | 0.4px | Descriptive body text for campaign summaries |
| caption | 12px | 1.3 | 500 | 0.5px | Secondary labels and metadata |

## 4. Spacing

Spatial rhythm is defined by flexible padding within overlay cards and navigation elements rather than a rigid vertical grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 30 / 48 / 64 / 96 px
- **Rhythm:** Flexible spacing prioritized for padding within overlay cards and navigation elements rather than a strict vertical grid.

## 5. Surfaces

Depth is suggested through soft, ethereal means: subtle borders and barely-there box-shadows that separate floating panels from the dynamic video background. The visual language prioritizes a sense of levitation over heavy, grounded elevation.

- **Radius:** sm 4px · md 6px · lg 26px · pill 999px
- **Shadows:**
  - 0px 1px 6px -1px rgba(0, 0, 0, 0.08)
  - 0px 1px 1px -1px rgba(0, 0, 0, 0.08)
- **Borders:** Subtle borders and soft box-shadows used to separate floating elements from the video background.

## 6. Layout

The layout skeleton is a full-bleed media canvas that serves as the constant, immersive backdrop. Floating overlay panels for content and navigation are positioned with careful intention, ensuring functional clarity without obstructing the primary visual experience.

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

**Skeleton:** Full-bleed media canvas with floating overlay panels for content and navigation.

## 7. Motion & Interaction

Motion is treated as a responsive whisper, employing smooth opacity transitions and subtle hover states that acknowledge interaction without announcing it. The philosophy is one of unobtrusive feedback, with quick state changes designed to feel immediate yet never interrupt the viewer's focus on content.

- **Durations:** micro 150ms · small 220ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for content fade-ins.
  - Subtle hover states on interactive navigation links.

- **Hover:** Subtle opacity changes on navigation links and buttons.
- **Click:** Standard pointer cursor for interactive elements, text cursor for selectable content.
- **Transition:** Quick 0.2s to 0.3s transitions for UI state changes.
- **Keyboard:** Standard browser tab navigation through overlay controls.

## 8. Voice & Don'ts

The editorial voice is sophisticated and curated, mirroring the premium positioning of the campaigns it presents. It avoids visual noise and heavy ornamentation, trusting the typographic hierarchy and generous whitespace to communicate with quiet authority.

- **Tone:** Sophisticated, curated, and editorially-driven.
- **Headline style:** Bold, elegant serif typography for campaign titles to evoke a luxury fashion magazine.
- **CTA style:** Subtle, functional text-based navigation and action links.
- **Avoid:** Bright, neon colors that clash with the photographic content. / Heavy, ornate fonts that distract from the visual media. / Dense, cluttered layouts that compete with the full-screen video experience.

### Don'ts
- ❌ Don't use heavy decorative elements — screenshot shows minimalist, functional UI overlays.
- ❌ Don't use sans-serif for main headlines — screenshot shows elegant transitional-serif for feature titles.
- ❌ Don't use bright, saturated background colors — screenshot shows neutral grays (#F0EEED) and whites.
- ❌ Don't use aggressive drop shadows — screenshot shows very subtle, soft box-shadows for depth.
- ❌ Don't clutter the layout with dense text — screenshot shows generous whitespace and focused content blocks.
- ❌ Don't use sharp, square corners on primary elements — screenshot shows consistent use of rounded borders (4px to 6px).

They deliberately forgo bright, saturated colors, heavy decorative elements, and dense layouts, accepting that the interface's greatest success is its own intentional recession.

## System Prompt (paste into AI tool)

```
Design a premium, editorial streaming platform for luxury sneaker campaigns and fashion content. The aesthetic is minimalist and gallery-like, featuring full-bleed video and photographic backgrounds with floating, functional UI overlays. The primary palette consists of neutral grays (#F0EEED, #FFFFFF) and dark text (#3D3D3D), with a single functional red (#D41515) accent for live status. Typography combines elegant transitional-serif for display headlines with a clean neo-grotesque-sans for body text and metadata. Critical constraints: avoid heavy decorative elements, never use neon or highly saturated background colors, and maintain generous whitespace to ensure the visual media remains the focal point. Keep the UI functional and restrained.
```
