# Theroger · Design system migration spec

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

> This site is a masterclass in using restraint and whitespace to elevate a product, making it an excellent reference for premium e-commerce design.

## 1. Identity DNA

The Roger's design system operates like a high-end boutique catalog, where vast expanses of white space serve not as empty area, but as the primary compositional tool. This approach creates a monochromatic foundation that deliberately yields all visual interest to the high-resolution photography of the product itself. The result is an identity built on extreme restraint, where every design decision serves to frame, not compete with, the athletic footwear being presented.

**One-liner:** Minimalist premium athletic footwear with a focus on clean typography and expansive white space.
**Keywords:** Premium · Minimal · Clean · Athletic · Lifestyle
**Analogy:** A high-end boutique catalog that uses vast white space to let premium products speak for themselves.

## 2. Color

The color system is defined by its stark, high-contrast monochromatic scheme. A pure white background acts as a vast, clean canvas, while black provides all primary typographic and interactive contrast, with a light gray reserved only for the subtlest differentiation of background planes.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#f7f7f7` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#222222` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(0,0,0,0.10)` | divider |

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

The governing principle is absolute restraint: the palette provides a neutral stage, ensuring that color is introduced solely through the product photography.

## 3. Typography

Typographic voice is established through a clean, geometric sans-serif, which provides a neutral, premium clarity. The scale is disciplined, with distinct roles assigned from large, tightly-tracked display headings down to small, monospaced technical accents.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.0 | 700 | -0.5px | Primary brand headings and collection titles |
| heading | 39px | 1.2 | 700 | -0.4px | Section headers and product names |
| subheading | 24px | 1.2 | 400 | 0.2px | Product category labels and descriptions |
| body | 16px | 1.5 | 400 | 0.2px | General text and price information |
| label | 12px | 1.3 | 400 | 0.2px | Overline tags and metadata |

**Type rules:**
- 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.

## 4. Spacing

The underlying rhythm is governed by a strict 4px grid, but the perceived layout is shaped by large, unstructured fields of whitespace that create pace and separation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A strict 4px grid provides underlying structure, but actual layout relies heavily on large, unstructured whitespace to create rhythm.

## 5. Surfaces

Surface treatment is virtually non-existent; the design relies on the stark contrast between the white background and black content. Depth is communicated only through minimal, functional 1px borders and a single, subtle shadow reserved for specific elements, avoiding any decorative elevation.

- **Radius:** sm 4px · md 8px · lg 40px · pill 999px
- **Shadows:**
  - 0px 0px 18px 0px rgba(0, 0, 0, 0.2)
- **Borders:** Minimal 1px solid borders used only for functional elements like buttons and progress indicators.

## 6. Layout

The structural skeleton is a fluid grid that maintains substantial horizontal margins, creating a focused column for content. Generous vertical spacing between sections reinforces the airy, premium feel, allowing large photographic heroes to dominate their respective zones without visual clutter.

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

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

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and purpose, with all animations being smooth, hardware-accelerated transitions. Interactive feedback is delivered through slight scaling or translation transforms on hover and focus, ensuring user actions are acknowledged without visual disruption to the calm interface.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.87, 0, 0.13, 1)`
- **Patterns:**
  - 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.

- **Hover:** Subtle background color changes or slight image scaling to indicate interactivity without being distracting.
- **Click:** Immediate visual feedback through state changes, often accompanied by a smooth transition.
- **Transition:** All interactive elements use consistent 0.2s to 0.3s transitions for color, background, and transform properties.
- **Keyboard:** Standard focus states are maintained for accessibility, typically using a visible outline or ring.

## 8. Voice & Don'ts

The editorial voice is confident, understated, and direct, mirroring the minimal visual design. Language focuses on product attributes with a premium tone, deliberately avoiding excessive adjectives or loud promotional messaging.

- **Tone:** Confident, understated, and premium. The language is direct and focuses on product attributes without being overly salesy.
- **Headline style:** Bold, uppercase or title-case headings with negative letter-spacing to create a strong visual impact.
- **CTA style:** Direct and action-oriented, typically using simple text on high-contrast buttons.
- **Avoid:** Excessive adjectives / Loud promotional language / Cluttered layouts

### Don'ts
- ❌ 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.

The system deliberately excludes gradients, complex backgrounds, decorative typography, and cluttered layouts, using these omissions as active design choices.

## System Prompt (paste into AI tool)

```
Positioning: A premium, direct-to-consumer athletic footwear brand focusing on minimal design and high-quality photography. Key colors: A stark monochromatic palette of pure white (#ffffff) and black (#000000), with a light gray (#f7f7f7) for subtle background differentiation. Font categories: Geometric sans-serif for all primary text, with occasional use of monospace. Critical donts: Never use gradients or decorative shadows; avoid cluttered layouts by maintaining expansive white space; never use playful or decorative typography that undermines the premium aesthetic.
```