CURATED · OPEN · FREE

Sneakinpeace

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

01

Identity DNA

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

02

Color

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.

03

Typography

transitional-serif · neo-grotesque-sans

• display36px · 400
• body14px · 400
• caption12px · 500

04

Spacing

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

05

Surfaces

Subtle borders and soft box-shadows used to separate floating elements from the video background.

0px 1px 6px -1px rgba(0, 0, 0, 0.08) · 0px 1px 1px -1px rgba(0, 0, 0, 0.08)

06

Layout

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

07

Motion & Interaction

Smooth opacity transitions for content fade-ins. · Subtle hover states on interactive navigation links.

Subtle opacity changes on navigation links and buttons. · Standard pointer cursor for interactive elements, text cursor for selectable content.

08

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.

09

Voice & Don'ts

• Tone Sophisticated, curated, and editorially-driven.
• Headlines Bold, elegant serif typography for campaign titles to evoke a luxury fashion magazine.
• CTAs Subtle, functional text-based navigation and action links.

• 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).
• Avoid: Bright, neon colors that clash with the photographic content.
• Avoid: Heavy, ornate fonts that distract from the visual media.
• Avoid: Dense, cluttered layouts that compete with the full-screen video experience.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko