---
name: Rains
description: "Excellent example of fashion ecommerce where the photography does all the emotional heavy lifting while UI remains deliberately restrained and minimal."
version: alpha

colors:
  background: "#E3E3E3"
  primary: "#10100F"
  secondary: "#2D2D2D"
  neutral: "#B3B3B2"
  bg-soft: "#FFFFFF"
  bg-quiet: "#F5F5F5"
  muted-soft: "#EFEFEF"
  line: "rgba(239, 239, 239, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  display-sm:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.4px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Premium rainwear brand combining minimalist Nordic design with bold editorial photography.

*A sleek Scandinavian fashion house where clean typography and cinematic photography meet functional rain gear.*

## Colors

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

- **Background (`#E3E3E3`)** — uses `bg` token
- **Primary text (`#10100F`)** — uses `ink` token
- **Secondary text (`#2D2D2D`)** — uses `ink-soft` token
- **Muted (`#B3B3B2`)** — uses `muted` token
- **Borders (`rgba(239, 239, 239, 1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* 8px base unit with 4px increments for tight UI elements and generous whitespace for editorial photography breathing room

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Pill-shaped buttons (border-radius: 9999px) with solid black fill and white text, or transparent with black border for secondary actions
- **card:** Photography-focused cards with minimal chrome, using overlaid large typography for titles and transparent buttons
- **chip:** Checkbox-style chips with square borders (border-radius: 8px) and uppercase labels in the cookie consent modal
- **input:** Clean rectangular inputs with inset box-shadow borders, generous padding, and uppercase labels
- **hero:** Full-bleed cinematic photography with large overlapping typography in white or accent colors, bottom-aligned navigation buttons

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```