# Rains · Design system migration spec

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

> Excellent example of fashion ecommerce where the photography does all the emotional heavy lifting while UI remains deliberately restrained and minimal.

## 1. Identity DNA

Rains operates with the precision of a Scandinavian fashion house, where every interface element serves as a quiet frame for the photography. The design system treats its product imagery as the primary protagonist, using a neutral canvas of charcoals, grays, and whites to construct an environment of deliberate restraint. This is editorial commerce architecture, built to let the garment speak.

**One-liner:** Premium rainwear brand combining minimalist Nordic design with bold editorial photography.
**Keywords:** Premium Rainwear · Scandinavian Minimalism · Outdoor Fashion · Editorial Commerce
**Analogy:** A sleek Scandinavian fashion house where clean typography and cinematic photography meet functional rain gear.

## 2. Color

The color system is defined by its absence, functioning as a gallery wall for the photographic narrative. Backgrounds and typography remain achromatic, with the palette's only chromatic warmth arriving through the imagery itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E3E3E3` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#10100F` | body text |
| `--ink-soft` | `#2D2D2D` | secondary text |
| `--muted` | `#B3B3B2` | placeholder |
| `--muted-soft` | `#EFEFEF` | weak hint |
| `--line` | `rgba(239, 239, 239, 1)` | divider |

**Color principle:** Photography-driven palette with neutral backgrounds, deep charcoal typography, and muted grays creating a clean, elevated canvas for product imagery.

The governing principle is that the interface provides the stage, while the photography delivers all emotional resonance.

## 3. Typography

Typography adheres to a strict geometric sans-serif family, creating a unified structural voice across the site. Navigation employs uppercase transformation with tracked spacing for institutional clarity, while headlines and body text maintain a tight, editorial rhythm that prioritizes readability within an editorial grid.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 700 | -1px | Hero headlines and campaign text |
| display-sm | 40px | 1.0 | 700 | 0px | Section titles |
| body | 14px | 1.2 | 400 | 0.4px | Primary body text and navigation |
| caption | 12px | 1.2 | 400 | 0.3px | Secondary text and metadata |

**Type rules:**
- All navigation and labels use uppercase transformation with tracked spacing
- Headlines use heavy weight geometric sans-serif with tight line-height
- Body text uses regular weight with generous letter-spacing for readability
- Text rarely exceeds 16px, maintaining an editorial grid aesthetic

## 4. Spacing

Spacing follows an 8px base rhythm, establishing a consistent grid that alternates between generous whitespace for editorial photography and tighter increments for functional UI elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 px
- **Rhythm:** 8px base unit with 4px increments for tight UI elements and generous whitespace for editorial photography breathing room

## 5. Surfaces

Surface treatments rely on precise, functional borders and minimal shadows to define depth. Input fields use inset borders for a recessed, focused state, while floating elements receive a single, subtle shadow for necessary lift without visual clutter.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 0px 0px 1px rgba(0,0,0,1) inset for input borders
  - 1px 2px 8px 0px rgba(0,0,0,0.35) for floating elements
- **Borders:** 1px solid rgb(239, 239, 239) for dividers and input states, 1px solid rgb(45, 45, 45) for active elements

## 6. Layout

The structural skeleton is built on a dramatic shift in scale. It opens with full-width, cinematic photography heroes that overlay large-scale typography, then resolves into organized, grid-based product sections below the fold.

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

**Skeleton:** Full-width photography heroes with overlaid typography, transitioning to grid-based product sections below

## 7. Motion & Interaction

Motion philosophy borrows from cinematic editing, with longer durations for photographic transitions that establish mood and atmosphere. Micro-interactions are brisk and functional, using consistent 0.2s timing to confirm user input without lingering.

- **Durations:** micro 180ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.6, 1)`
- **Patterns:**
  - Smooth opacity transitions for modal overlays (0.3s)
  - Stroke-dashoffset animations for loading states
  - All interactive elements use 0.2s transition on hover states
  - Image transitions use 0.5-1s duration for cinematic feel

- **Hover:** Subtle opacity reduction or color shift on interactive elements, maintained within 0.2s transition
- **Click:** Immediate visual feedback through background color change or border accent
- **Transition:** All transitions use 0.2s default timing with cubic-bezier easing for smooth interactions
- **Keyboard:** Standard tab navigation with visible focus states using inset box-shadow borders

## 8. Voice & Don'ts

The editorial voice is confident, minimal, and imbued with Scandinavian restraint, using short, punchy phrases that evoke mood rather than describe product features. Call-to-action language remains clean and action-oriented, matching the utility of its pill-shaped button components.

- **Tone:** Confident, minimal, editorial with Scandinavian restraint
- **Headline style:** Short, punchy, lowercase or sentence-case phrases that evoke mood rather than describe products directly
- **CTA style:** Action-oriented phrases like 'Explore the campaign' and 'Shop the collection' in clean pill-shaped buttons
- **Avoid:** Excessive exclamation marks / Salesy promotional language / Long descriptive paragraphs / Bright neon colors / Decorative typography

### Don'ts
- ❌ Don't use decorative script fonts — screenshot shows clean geometric sans-serif throughout
- ❌ Don't add drop shadows to hero images — screenshot shows flat photography with overlaid text
- ❌ Don't use bright accent colors — screenshot shows neutral palette with occasional red/orange from photography only
- ❌ Don't make navigation items colorful — screenshot shows all navigation in uniform black uppercase text
- ❌ Don't use rounded card corners generously — screenshot shows sharp edges or minimal rounding on cards
- ❌ Don't center-align all content — screenshot shows left-aligned typography over photography with right-aligned search/cart
- ❌ Don't use gradient backgrounds — screenshot shows solid neutral colors and photography fills

The system deliberately omits decorative script, gradient overlays, and saturated accent colors, committing fully to a philosophy where restraint is the primary design principle.

## System Prompt (paste into AI tool)

```
Rains.com is a premium Scandinavian rainwear brand combining minimalist Nordic design with bold editorial photography. The site uses a neutral palette (background #E3E3E3, primary ink #10100F, soft ink #2D2D2D, muted #B3B3B2) with photography providing all color. Typography is entirely geometric sans-serif (Europa Grotesk family) with uppercase navigation labels, tight headline spacing at 48px/1.0, and body text at 14px with 0.4px letter-spacing. Key UI patterns include pill-shaped buttons (border-radius 9999px), full-bleed photography heroes with overlaid large text, and clean input fields with inset borders. Three critical donts: never use decorative script fonts, never add gradients or texture overlays to photography, and never use bright neon or saturated accent colors in UI elements.
```
