CURATED · OPEN · FREE

Theroger

Minimalist premium athletic footwear with a focus on clean typography and expansive white space.

01

Identity DNA

A high-end boutique catalog that uses vast white space to let premium products speak for themselves.

02

Color

Extreme restraint; a monochromatic foundation that relies on high-resolution photography for all visual interest.

03

Typography

geometric-sans · monospace

• display50px · 700
• heading39px · 700
• subheading24px · 400
• body16px · 400
• label12px · 400

Use tight, negative letter-spacing for large display text to create a cohesive visual block. · Maintain generous spacing between text blocks to preserve the airy, premium feel. · Use monospaced fonts only sparingly for technical details or specific design accents.

04

Spacing

A strict 4px grid provides underlying structure, but actual layout relies heavily on large, unstructured whitespace to create rhythm.

05

Surfaces

Minimal 1px solid borders used only for functional elements like buttons and progress indicators.

0px 0px 18px 0px rgba(0, 0, 0, 0.2)

06

Layout

A fluid grid system that maintains substantial horizontal margins and generous vertical spacing between sections.

07

Motion & Interaction

Smooth, hardware-accelerated transitions for interactive elements like buttons and image hovers. · Subtle scaling or translation transforms on focus or hover to provide clear feedback.

Subtle background color changes or slight image scaling to indicate interactivity without being distracting. · Immediate visual feedback through state changes, often accompanied by a smooth transition.

08

Components

• button High-contrast black buttons with white text, often using a pill shape (40px radius) for primary actions and a transparent outline for secondary ones.
• card Simple, borderless containers for product images and text, relying on generous padding and whitespace for separation rather than visible cards.
• chip Not prominently featured in the visible sections; any tags are likely simple uppercase text labels.
• input Standard text inputs for forms, likely using minimal styling with subtle bottom borders.
• hero A large, full-width photographic area paired with a bold, centered heading to establish an aspirational tone.

09

Voice & Don'ts

• Tone Confident, understated, and premium. The language is direct and focuses on product attributes without being overly salesy.
• Headlines Bold, uppercase or title-case headings with negative letter-spacing to create a strong visual impact.
• CTAs Direct and action-oriented, typically using simple text on high-contrast buttons.

• Don't use gradients or complex backgrounds — screenshot shows a flat, monochromatic white background.
• Don't use decorative borders or heavy shadows — screenshot shows a borderless layout with minimal elevation.
• Don't use a wide variety of font colors — screenshot shows an almost exclusive use of black text on white.
• Don't use small, cramped spacing — screenshot shows generous vertical and horizontal whitespace around all elements.
• Don't use rounded corners on all elements — screenshot shows sharp corners on product cards and a pill shape only on primary buttons.
• Don't use playful or quirky typography — screenshot shows clean, geometric sans-serif fonts that prioritize legibility and a premium feel.
• Avoid: Excessive adjectives
• Avoid: Loud promotional language
• Avoid: Cluttered layouts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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