Moss Reflection Garden

# Moss Reflection Garden

## Philosophy

A contemplative interface language that turns application surfaces into quiet illustrated garden scenes. Information sits like placed stones within wide breathing space, while pond forms, moss textures, and inked branches soften the boundary between UI and landscape.

### Values

- calm before efficiency theater
- illustrated atmosphere over sharp utility
- seasonal change as gentle emphasis
- ritual pacing and visual silence

### Anti-Values

- dashboard clutter
- high-contrast techno aggression
- dense labeling
- glossy skeuomorphism

### Visual Character

- broad pond-like color fields with soft inner reflections
- thin ink-line botanical drawings curling around content edges
- stone-framed modules with generous empty margins between them
- restrained caption labels in tiny spaced uppercase text
- single seasonal accent blooms used sparingly against mossy neutrals

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#5B6F61` |
| secondary | `#8C8A78` |
| accent | `#C96E52` |
| background | `#F3F0E7` |
| surface | `#E2E8DD` |
| text | `#223029` |
| muted | `#66746A` |
| border | `#78806F` |
| error | `#A14C47` |
| success | `#5D7A5D` |
| warning | `#B08A47` |
| info | `#6B8A96` |

### Typography

- **Heading Font**: Zen Old Mincho
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.7
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;700&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 32px
- **Full**: 9999px

### Shadows

- **Sm**: 0 4px 10px rgba(34,48,41,0.06)
- **Md**: 0 12px 28px rgba(34,48,41,0.10)
- **Lg**: 0 20px 48px rgba(34,48,41,0.14)

### Surfaces

- **Treatment**: paper
- **Card Style**: misted watercolor panels with subtle reflection halos
- **Bg Pattern**: lines

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: fine weathered stone outlines with occasional darker ink emphasis

### Motion

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

## Rules

### Composition

Compose pages as a landscape scene first: a wide quiet canvas, one primary pond form, then stepping-stone modules placed along a measured reading path.

### Hierarchy

Lead with poetic titles and atmospheric summaries, then let small label chips and stone cards reveal detail without breaking the calm field.

### Density

Low density. Every cluster must be separated by visible breathing room, and no area should feel fully packed.

### Signature Patterns

- large irregular pond shapes created with layered border-radius values
- content cards connected by stepping-stone circular markers along a horizontal or vertical path
- ink-line branch or reed illustrations drawn with pseudo-elements around major sections
- tiny uppercase tracking-heavy section labels placed above content like garden placards
- seasonal accent dots or leaf shapes that appear only as sparse highlights on key states

## Layout

### Grid

A spacious asymmetrical grid with a wide hero panel spanning most columns and smaller stone cards arranged as a stepping path beneath or beside it.

### Breakpoints

Desktop 1280+, tablet 900-1279, mobile below 900 with pond panels stacked vertically and ornaments repositioned.

### Whitespace

Whitespace is treated as raked sand: broad, intentional, and left unfilled around every module.

## Guidance

### Do

- Use large quiet background fields before adding interface objects
- Illustrate flora with thin linework rather than heavy icon blocks
- Keep labels short, quiet, and secondary to atmosphere
- Let seasonal accent colors appear only in one or two strategic places per view

### Don't

- Turn the page into a component catalog
- Use saturated neon or pure black outlines everywhere
- Fill every empty area with controls or badges
- Introduce aggressive hover jumps or bouncy motion