Vapor-wash Minimal

# Vapor-wash Minimal

## Philosophy

A restrained interface language that replaces illustrative density with atmosphere: broad white space, translucent color blooms, and fine vector traces that suggest presence without demanding attention. It aims to feel luminous, airy, and editorial rather than immersive or ornamental.

### Values

- calm visual pacing
- atmospheric softness over hard decoration
- clarity through whitespace
- gentle emotional warmth
- illustration reduced to suggestion

### Anti-Values

- dense dashboards
- heavy skeuomorphism
- high-contrast aggression
- busy textures
- crowded iconography

### Visual Character

- pale watercolor-like wash fields behind major sections
- soft radial and linear gradients that fade with feathered edges
- minimal single-stroke line illustrations with tiny abstract motifs
- oversized outer margins and wide spacing between content blocks
- muted but luminous accent color used as a glow rather than a solid fill

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#6F7CFF` |
| secondary | `#B8C2FF` |
| accent | `#8ED8D2` |
| background | `#F8FAFF` |
| surface | `rgba(255,255,255,0.72)` |
| text | `#25304A` |
| muted | `#6E7893` |
| border | `rgba(111,124,255,0.18)` |
| error | `#D96C85` |
| success | `#62B898` |
| warning | `#D8A45F` |
| info | `#6F7CFF` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Manrope
- **Mono Font**: JetBrains Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.6
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 14px
- **Md**: 22px
- **Lg**: 36px
- **Full**: 9999px

### Shadows

- **Sm**: 0 10px 30px rgba(111,124,255,0.08)
- **Md**: 0 24px 60px rgba(111,124,255,0.12)
- **Lg**: 0 36px 90px rgba(111,124,255,0.16)

### Surfaces

- **Treatment**: glass
- **Card Style**: misted translucent panels layered over pale atmospheric blooms
- **Bg Pattern**: none

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: barely-there luminous hairlines that define space without hard separation

### Motion

- **Duration**: 260ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: deliberate

## Rules

### Composition

Use large breathing zones with asymmetric editorial grouping. Let atmospheric washes anchor regions, while translucent cards float lightly within them. Avoid more than two levels of containment in any area.

### Hierarchy

Lead with elegant serif headlines, then quiet sans-serif support text, then ultra-light mono metadata. Hierarchy comes from spacing, scale, and haze-backed grouping before color contrast.

### Density

Low density. Components should feel curated and sparing, with meaningful empty space between modules and generous line length control.

### Signature Patterns

- hero and section wrappers include blurred radial wash layers positioned behind content
- cards use translucent white surfaces with backdrop-filter blur and 1px luminous borders
- micro-illustrations are built from single-stroke SVG lines with tiny gradient dots and arcs
- accent emphasis appears as soft glow underlines or halo pills instead of solid blocks
- section layouts preserve oversized margins and staggered negative space to keep a gallery-like calm

## Layout

### Grid

A 12-column desktop grid with content often spanning 4-7 columns and deliberate empty columns preserved for calm. Tablet collapses to 8 columns, mobile to a single flowing stack with retained vertical breathing room.

### Breakpoints

Desktop default, tablet at 1024px, mobile at 720px and compact at 540px.

### Whitespace

Whitespace is structural, not residual: 64-120px section padding on desktop, 40-64px on tablet, and 24-32px on mobile.

## Guidance

### Do

- Use color as atmosphere and emphasis as glow
- Keep illustrations sparse and diagram-like
- Preserve generous margins even when content is short
- Prefer feathered gradients and translucent layers over solid fills
- Balance serif elegance with plain modern body text

### Don't

- Fill every area with cards or decoration
- Use thick dark borders or hard shadows
- Rely on saturated neon as the dominant field color
- Introduce photo-real scenes or detailed illustrations
- Compress spacing to fit more modules above the fold