---
name: Sneakinpeace
description: "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."
version: alpha

colors:
  background: "#F0EEED"
  primary: "#3D3D3D"
  secondary: "#767676"
  tertiary: "#D41515"
  neutral: "#E0E0E0"
  bg-soft: "#FFFFFF"
  bg-quiet: "#808080A6"
  line: "rgba(61, 61, 61, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: neo-grotesque-sans
    fontSize: 14px
    lineHeight: 1.9
    fontWeight: 400
    letterSpacing: "0.4px"
  caption:
    fontFamily: neo-grotesque-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 6px
  lg: 26px
  pill: 999px

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

---

## Overview

A premium streaming platform that curates luxury sneaker campaigns and editorial content.

*A live magazine channel for high-end sneakers and fashion campaigns.*

## Colors

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.

- **Background (`#F0EEED`)** — uses `bg` token
- **Primary text (`#3D3D3D`)** — uses `ink` token
- **Secondary text (`#767676`)** — uses `ink-soft` token
- **Accent (`#D41515`)** — uses `accent` token
- **Muted (`#E0E0E0`)** — uses `muted` token
- **Borders (`rgba(61, 61, 61, 1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Flexible spacing prioritized for padding within overlay cards and navigation elements rather than a strict vertical grid.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 26px
- `pill`: 999px

## Components

- **button:** Pill-shaped status badges (e.g., LIVE) and small icon buttons for media control.
- **card:** Floating panels with soft shadows and rounded corners containing video details or product lists.
- **chip:** Small, rounded category tags (e.g., Womens, Mens) attached to product listings.
- **input:** Minimal text-based navigation and search inputs without heavy visual borders.
- **hero:** Full-screen video or photographic background with overlaid descriptive text.

## Do's and Don'ts

**Don't:**
- 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).

---

## System Prompt (paste into AI agent)

```
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.
```