Skywash Quiet UI

# Skywash Quiet UI

## Philosophy

A quiet interface language that borrows the emotional logic of hand-painted anime backgrounds rather than character art: expansive sky fields, hazed distance, softened transitions, and tiny islands of crisp utility suspended over diffuse atmosphere. Interfaces should feel inhaled rather than assembled, with interaction points appearing as restrained instruments inside a living landscape.

### Values

- atmosphere before ornament
- depth through painted tonal bands
- small precise controls over large diffuse surfaces
- emotional calm with subtle wonder
- environmental storytelling through color and silhouette

### Anti-Values

- hard-edged techno gloss
- dense chrome-heavy dashboards
- high-contrast aggressive CTA stacks
- skeuomorphic clutter
- busy texture that competes with content

### Visual Character

- full-bleed misty sky gradients that shift vertically from pale light to saturated horizon bands
- gouache-like cloud and fog edges created with blurred layered shapes instead of sharp dividers
- painted foliage silhouettes framing content panes at the edges and lower horizon
- small crisp translucent control bars and chips floating over broad diffuse fields
- cards and panels separated by low-contrast light seams rather than heavy boxed outlines

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#6b8fc7` |
| secondary | `#9cc3da` |
| accent | `#f7c98b` |
| background | `#e9f1f6` |
| surface | `rgba(248,250,252,0.52)` |
| text | `#203246` |
| muted | `#5f7385` |
| border | `rgba(255,255,255,0.42)` |
| error | `#c96b6b` |
| success | `#71a985` |
| warning | `#d7a65c` |
| info | `#79a9c8` |

### Typography

- **Heading Font**: Shippori Mincho
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: Fragment 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=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Fragment+Mono:ital@0;1&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 12px
- **Md**: 20px
- **Lg**: 32px
- **Full**: 9999px

### Shadows

- **Sm**: 0 8px 24px rgba(61,89,120,0.08)
- **Md**: 0 18px 50px rgba(61,89,120,0.14)
- **Lg**: 0 28px 80px rgba(61,89,120,0.18)

### Surfaces

- **Treatment**: gradient
- **Card Style**: frosted watercolor panes with translucent fill and inner light bloom
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: nearly evaporated light seams and dew-line separators instead of assertive frames

### Motion

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

## Rules

### Composition

Use broad environmental fields first, then anchor information in quiet floating panes aligned to a horizon logic rather than a strict boxed dashboard. Major sections should feel like weather layers: hero atmosphere, mid-distance narrative pane, and foreground controls.

### Hierarchy

Hierarchy comes from tonal contrast, vertical depth, and blur sharpness differences. Headlines sit in the clearest layer, supporting content in translucent panes, and utilities in the smallest highest-contrast chips.

### Density

Low to medium density. Prefer fewer, better-grouped controls with generous breathing room and continuous sightlines to the background atmosphere.

### Signature Patterns

- stack 3-5 absolutely positioned gradient haze layers behind every major scene section
- use ::before or ::after bloom veils to soften panel edges and create watercolor spill
- introduce horizon-band separators as thin translucent horizontal gradients rather than borders
- frame lower sections with blurred foliage silhouettes made from radial-gradient clusters
- keep controls in compact pill or rail forms with crisp text and 1px dew-line strokes over diffuse backgrounds

## Layout

### Grid

Desktop uses a 12-column atmospheric grid with large outer margins and overlapping panes; tablet shifts to stacked split sections; mobile becomes a single-column scroll of floating modules.

### Breakpoints

mobile 0-767px, tablet 768-1099px, desktop 1100px+

### Whitespace

Whitespace should simulate air and distance: larger top and side breathing zones, soft overlaps between modules, and no cramped control clusters.

## Guidance

### Do

- use layered gradients to imply weather and depth
- let one atmospheric field unify multiple content blocks
- keep controls minimal, compact, and visually quiet
- use silhouettes and bloom as environmental framing devices
- reserve strongest contrast for active state and key reading text

### Don't

- do not turn the language into a component catalog of cards
- do not use harsh black strokes or hard drop-shadows
- do not crowd the scene with many equal-weight buttons
- do not use neon saturation or cyberpunk contrast
- do not let decorative texture overpower content legibility