---
title: "Rains design system"
variant: extended
source: https://rains.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/rains-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Rains · Design System

> Scandinavian minimalism, led by imagery

**Theme:** light · **Industry:** fashion · **Source:** https://rains.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Rains pairs a restrained monochrome interface with full-bleed campaign photography and clean product rows. Oversized white headlines and compact pill-shaped controls keep the shopping experience editorial and direct.

## North star

Let cinematic campaign photography dominate, while keeping the shopping interface monochrome, compact, and unmistakably legible.

## Overview

The page uses a white canvas as a quiet frame for large campaign images, with product collections and category panels returning to open, light backgrounds. Its measured interface palette is deliberately spare: near-black text and pale gray surfaces and borders; the warm browns, greens, and blues visible in screenshots belong to campaign photography, not additional UI colors. EuropaGroNr2SH carries the heavy visual work through oversized, tightly composed headlines, while navigation and controls stay small, bold, and uppercase where appropriate. Full-bleed hero panels alternate with four-column product rows and paired category imagery, creating a clear rhythm between storytelling and shopping. Generous section spacing lets each campaign image feel like its own editorial spread. Rounded capsule controls provide the main UI softness; otherwise, the page favors flat surfaces, minimal borders, and little visible elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, pale product-display backgrounds, and white campaign headlines or text over imagery. |
| Mist Gray | `#ececec` | `--color-mist-gray` | surface | Subtle surface and hairline border tone; supports quiet separation between interface elements. |
| Soft Ink | `#10100f` | `--color-soft-ink` | neutral | Primary navigation, headings, body copy, links, and dark text on light controls. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Minor muted text occurrence; not a defining background or brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ececec` (Mist Gray) · `--color-text` → `#10100f` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (Deep Black) · `--color-border` → `#ececec` (Mist Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#10100f` | `#ffffff` | 19.04:1 | AAA |
| `#10100f` | `#ececec` | 16.12:1 | AAA |
| `#ffffff` | `#ececec` | 1.18:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ececec` | 17.78:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| EuropaGroNr2SH | `--font-body` | webfont | 700, 600 | Display headlines, headings, body copy, navigation, buttons, captions, and prominent links. | Inter |
| EuropaGroNr2SB | `--font-europagronr2sb` | webfont | 400 | Regular-weight navigation and utility controls, including search. | Inter |

- **EuropaGroNr2SH:** Heavy, compact sans-serif; measured weights 600 and 700. Headlines scale dramatically; navigation is uppercase and bold.
- **EuropaGroNr2SB:** Measured at weight 400; used sparingly beside the heavier display family, including small uppercase utility text.

### Type scale — Golden Ratio (ratio ≈ 1.651, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 245px | 600 | 1.02 | 0 | — | EuropaGroNr2SH | Oversized campaign titles laid over full-bleed photography. |
| h1 | 216.5px | 600 | 1.02 | 0 | — | EuropaGroNr2SH | Primary page and campaign headlines. |
| h2 | 167.5px | 600 | 1.02 | 0 | — | EuropaGroNr2SH | Large editorial headings introducing campaign or category sections. |
| h3 | 156.5px | 600 | 1.02 | 0 | — | EuropaGroNr2SH | Secondary campaign titles and prominent collection headings. |
| h4 | 48px | 600 | 1 | 0 | — | EuropaGroNr2SH | Product and supporting section headings. |
| body | 20px | 700 | 0.9 | 0 | — | EuropaGroNr2SH | Campaign subtitles, descriptions, and primary supporting copy. |
| caption | 16px | 700 | 1 | 0 | — | EuropaGroNr2SH | Compact product labels and supporting details. |
| button | 16px | 700 | 1 | 0 | — | EuropaGroNr2SH | Short, bold labels inside capsule calls to action. |
| nav | 14px | 700 | 1 | 0 | uppercase | EuropaGroNr2SH | Small uppercase category and utility navigation labels. |
| link | 20px | 700 | 0.9 | 0 | — | EuropaGroNr2SH | Prominent product names and category links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 16, 20, 24, 32, 56 px.
- Section rhythm 56px · element gap 8px · card padding — · max content width 1408px.

The page is built from a wide, centered content system measured at a 1408px maximum width, with campaign media often spanning the full viewport. Large image-led sections alternate with four-column product grids and two-column category panels. Hero copy aligns left over the imagery; product names and details remain compact beneath images. Section spacing is generous, using a measured 56px section gap and an 8px base spacing rhythm. The overall density is comfortable: expansive campaign moments balanced by efficient shopping rows.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `50%` · pill `9999px`
- Shadow `hairline` (link): `rgb(255, 255, 255) 0px 0px 0px 1px, rgba(16, 16, 15, 0.2) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, with white canvas areas and understated pale-gray separators. No prominent card shadows are measured. Rounded controls sit cleanly over both image and light backgrounds; a subtle measured hairline shadow is associated with a link interaction state, not general elevation.

## Imagery

Photography defines the page: fashion campaigns, editorial collaborations, and product still lifes. Images are large, sharply framed, and often full-bleed, with headlines and small calls to action layered over quieter areas. Product grids use isolated items on light backgrounds. A campaign video appears as an image-led feature; there are no defining decorative illustrations or 3D motifs.

## Components

### Campaign hero

Full-width campaign photography with large white, left-aligned headline, supporting copy, and compact pill calls to action.

### Header navigation

Small bold uppercase category labels over the hero, with brand mark at left and search and cart utilities at right.

### Product grid

Four-column product rows with isolated product imagery, bold product names, prices, and small color indicators.

### Campaign video

Image-led video feature with a centered play affordance and oversized white headline over the media.

### Category image pair

Two adjacent fashion images link to women’s and men’s shopping, with compact white labels placed over the imagery.

### Capsule CTA

Pill-shaped action button; measured campaign button uses #26292a fill, white bold text, and 9999px radius.

### Utility search

Compact pale-gray pill control with near-black search label and icon.

### Measured component styles

- **Primary button** (“Explore the campaign”): background #26292a · text #ffffff · radius 9999px · padding 12px 32px · 700 16px EuropaGroNr2SH
- **Secondary button** (“SEARCH”): background #f0f0f0 · text #10100f · radius 9999px · padding 0px 16px · 400 14px EuropaGroNr2SB
- **Link** (“Rains x La Marzocco Linea Mini”): transparent background · text #10100f · radius 0px · padding 0px · 700 20px EuropaGroNr2SH
- **Navigation item** (“NEW IN”): transparent background · text #10100f · radius 0px · padding 0px · 700 14px EuropaGroNr2SH · uppercase

## Do

- Use white space as the interface’s default canvas.
- Keep UI text in the measured monochrome palette.
- Give campaign photography the dominant visual area.
- Use oversized bold headlines over editorial imagery.
- Keep product rows orderly and easy to scan.
- Use compact pill controls for key actions.

## Don't

- Do not add unmeasured interface accent colors.
- Do not turn campaign images into small decorative thumbnails.
- Do not crowd the page with extra borders or card shadows.
- Do not use decorative display type or exaggerated tracking.
- Do not confuse colors inside campaign photos with UI palette colors.
- Do not make navigation larger or more prominent than the campaign.

## Agent prompt

Build a new fashion-commerce page in the Rains visual style. Use Gallery White (#ffffff) as the canvas, Mist Gray (#ececec) only for quiet surfaces and hairlines, and Soft Ink (#10100f) for interface text and links; Deep Black (#000000) is only a minor muted text tone. Keep the UI monochrome and let the photography supply seasonal color. Use a clean, heavy sans-serif close to Europa Grotesk, with very large campaign headlines, compact uppercase navigation, and bold product labels. Structure the page as full-bleed editorial campaigns alternating with tidy product grids and paired category imagery. Align hero copy left, maintain spacious section breaks, and use restrained capsule CTAs. Keep surfaces flat and borders subtle; do not invent decorative accents, gradients, or prominent shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-image campaign hero with left-aligned overlay copy and navigation across the top. | Campaign discovery, Shop campaign, Shop capsule | Oversized white headline, Compact pill CTAs, Overlay navigation |
| 2 | product-grid | Four-column product row on a light background. | Product browsing, Price visibility, Color indicators | Isolated product photography, Compact names and prices, Minimal grid chrome |
| 3 | video | Single full-width campaign video panel with left-aligned overlay content. | Play video, Explore campaign | Large white title, Play affordance, Compact pill CTA |
| 4 | product-grid | Four-column product grid with isolated fashion images. | Compare products, View prices, Check available colors | Product cutouts, Small product details, Light backgrounds |
| 5 | category-nav | Two side-by-side image panels, each linking into a shopping category. | Shop women, Shop men | Fashion campaign imagery, White overlaid labels, Paired panels |
| 6 | hero | Large single-image campaign block with headline and actions layered over the photography. | Shop women’s jackets, Shop men’s jackets | Full-width campaign image, Oversized white heading, Small capsule links |
| 7 | hero | Full-width editorial image with prominent left-positioned text overlay. | Shop women’s rainwear, Shop men’s rainwear | Large white headline, Short supporting line, Pill category actions |
| 8 | hero | Single full-width campaign image with overlaid title and shopping link. | Shop backpacks | Oversized white title, Campaign image, Compact CTA |
| 9 | category-nav | Two-column image pair with one travel-bag category link per panel. | Shop duffle and weekend bags, Shop suitcases | Lifestyle product photography, Adjacent category panels, Small overlaid links |
| 10 | hero | Full-width footwear close-up with overlaid headline and paired shopping actions. | Shop women’s footwear, Shop men’s footwear | Macro product framing, Oversized white headline, Compact pill links |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/rains-com