Organic Naturalism

# Organic Naturalism

## Philosophy

Organic Naturalism treats interface surfaces like cultivated terrain: living, breathable, and structured by growth rather than mechanical symmetry. Information feels embedded in layers of paper fiber, stone dust, and botanical residue. Hierarchy emerges through natural strata, branching emphasis lines, and generous breathing room that suggests observation, stewardship, and slow confidence rather than speed or frictionless efficiency.

### Values

- Cultivated calm over sterile optimization
- Material tactility over glossy abstraction
- Asymmetric growth patterns over rigid geometric repetition
- Readable warmth over neutral corporate distance
- Interfaces that imply stewardship, care, and continuity

### Anti-Values

- Chrome-heavy futurism
- Perfectly rectilinear grids everywhere
- Cold fluorescent contrast
- Aggressive motion or gamified bounce
- Sharp synthetic edges disconnected from material texture

### Visual Character

- Cards and panels use asymmetric radii with a clipped leaf-notch on the upper-right corner
- Section bands and large surfaces carry faint topographic contour lines that drift horizontally across the page
- Headings and dividers use vein-like branching underlines made from tapered gradients rather than straight rules
- Controls appear as seed-pod capsules with soft inset rims and moss-toned pressed states
- The page uses an asymmetric river layout: a broad flowing content stream paired with a narrow observation rail

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#4E6B47` |
| secondary | `#8B6F52` |
| accent | `#B86C3A` |
| background | `#F4EFE3` |
| surface | `#FBF7EE` |
| text | `#243026` |
| muted | `#6F756A` |
| border | `#A8A18F` |
| error | `#A64B45` |
| success | `#557A46` |
| warning | `#C28A2E` |
| info | `#5F7E8A` |

### Typography

- **Heading Font**: Fraunces
- **Body Font**: Literata
- **Mono Font**: Spline Sans Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Spacing

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

### Radii

- **None**: 0px
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 30px
- **Full**: 999px

### Shadows

- **Sm**: 0 2px 6px rgba(56, 56, 36, 0.08)
- **Md**: 0 12px 24px rgba(56, 56, 36, 0.10)
- **Lg**: 0 24px 60px rgba(56, 56, 36, 0.16)

### Surfaces

- **Treatment**: paper
- **Card Style**: layered parchment cards with inset wash and subtle grain
- **Bg Pattern**: custom SVG

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: soft structural borders that feel like pressed fiber edges rather than hard strokes

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.23, 1, 0.32, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: [1200,1024,768,480]
- **Column Progression**: 12 → 8 → 4 → 1

## Rules

### Composition

Compose interfaces as interdependent ecological zones instead of stacked boxes: a main current for the core task, a supporting rail for context, and nested habitat cards for records or decisions. Allow content bands to widen and narrow like terraces instead of enforcing equal widths throughout.

### Hierarchy

Lead with expressive editorial headings, then use species-label microcopy, badges, and vein dividers to guide scanning. Important actions sit inside warm capsule controls; secondary information recedes into quieter moss or clay tints.

### Density

Moderate-to-airy. Use generous internal padding and breathing room between macro sections, but keep local clusters tight enough to feel cultivated rather than sparse. Dense data should be softened with wash backgrounds, row markers, and rounded containment.

### Signature Patterns

- Large surfaces use repeating topographic contour lines or sediment bands as background-image layers
- Cards and modals use asymmetric border-radius plus a clipped upper-right leaf-notch silhouette
- Section headings and labels use tapered branching underlines made from layered linear gradients
- Buttons, toggles, radios, and inputs use seed-pod capsule geometry with inset rim shadows and pressed states
- Table rows and list items carry a left-side root marker bar or dot that anchors each record like a plant stem

## Layout

### Grid

Use an asymmetric 12-column river grid on desktop with a 8-column content stream and 4-column observation rail; collapse to 8 columns on tablet landscape, 4 columns on tablet portrait, and 1 column on phone. Major sections should appear as staggered terraces rather than perfectly aligned rows.

### Breakpoints

At 1024px reduce the river split and compress side-by-side analytics into paired cards. At 768px stack the rail below the stream and convert action clusters into wrapped rows. At 480px move to single-column terraces, full-width controls, scrollable tables, and vertically stacked pagination.

### Whitespace

Favor large outer margins and deep panel padding, with smaller plant-like clustering inside cards. Let whitespace feel like air pockets between stones: irregular at the macro level, disciplined at the micro level.

## Guidance

### Do

- Use warm off-whites and earthy greens as the dominant field, with clay accent reserved for key moments
- Shape containers and controls so they feel grown or carved, not machine-stamped
- Employ subtle texture, contour lines, and layered washes to suggest material depth
- Let headings feel literary and reflective while keeping body copy highly readable
- Anchor dense information with root markers, quiet dividers, and rounded containment

### Don't

- Do not introduce glossy glassmorphism, neon gradients, or metallic chrome
- Do not square off the interface into repetitive identical cards
- Do not use harsh black borders or clinical grayscale-only contrast
- Do not over-animate controls; movement should feel like settling, not bouncing
- Do not let decorative organic motifs overpower legibility or task flow