> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Organic

Earth tones, soft irregulars, textures that breathe

- Category: Styles
- Palette: #f1eee4 #2e3327 #7a8b6f #c4703f
- Type pairing: Young Serif · Karla
- Tags: earthy natural soft calm botanical

## Philosophy

Organic design brings the outside in: earth tones, soft irregular shapes, textures that feel hand-touched, layouts that breathe like landscapes rather than snap to rigid columns. It reads calm, trustworthy, sustainable — ideal for wellness, food, climate, crafts, and hospitality.

The tension to manage: organic must stay *usable*. Irregularity lives in containers and dividers; navigation and forms stay predictable.

## Typography

- **Display**: Young Serif, Prata, or Gantari — humanist warmth, slight quirk, no corporate gloss.
- **Body**: Karla, Work Sans, or Figtree at 400–500. Keep sizes generous (17px+) and line-height airy (1.7).
- Avoid geometric coldness (Futura-like faces) and high-contrast fashion serifs; both break the soil.

## Color

Draw from materials: clay, moss, sand, stone, bark. Base near `oklch(0.94 0.02 95)` (unbleached linen), ink deep olive-brown `oklch(0.28 0.03 120)`, accents sage `oklch(0.65 0.08 140)` and terracotta `oklch(0.62 0.12 45)`. Chroma stays low (≤0.12) — saturation is the tell of artificiality here.

## Surfaces & backgrounds

- Blob-shaped image masks (`border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%`).
- Grain overlays at 3–4% opacity; handmade paper texture is welcome.
- Wavy or hand-drawn-feel SVG dividers between sections.
- Botanical line illustrations as marginalia, not hero art.

## Layout grammar

Asymmetric masonry over strict grids; overlapping images with generous negative space; full-width breathing room between sections (6–10rem). Cards get soft-large radii (1.5rem+) or fully organic blobs. Buttons pill-shaped. Photography natural-light, unretouched, slightly desaturated to match the palette.

## Motion

Slow growth metaphors: elements scale up from 0.94 with soft ease-out, images reveal via clip-path circle expansion. Hover lifts of 4px max. Ambient drift (very slow translate loops) on decorative leaves/shapes — paused under reduced motion.

## Reference theme

```css
[data-theme="grove"] {
  color-scheme: light;
  --color-base-100: oklch(0.94 0.02 95);
  --color-base-200: oklch(0.89 0.03 95);
  --color-base-content: oklch(0.28 0.03 120);
  --color-primary: oklch(0.52 0.09 145);
  --color-primary-content: oklch(0.97 0.01 95);
  --color-secondary: oklch(0.62 0.12 45);
  --color-secondary-content: oklch(0.97 0.01 95);
  --color-accent: oklch(0.68 0.1 85);
  --color-accent-content: oklch(0.25 0.03 95);
  --color-neutral: oklch(0.38 0.03 110);
  --color-neutral-content: oklch(0.94 0.02 95);
  --radius-box: 1.25rem;
  --radius-field: 999rem;
  --radius-selector: 1rem;
  --border: 1px;
  --depth: 0;
}
```

Headings in `"Young Serif"`, body in `"Karla"`.

## Pitfalls

- **Don't** pair organic shapes with sharp neon accents — one world per site.
- **Don't** let blob borders make text containers unpredictable; wrap blobs around media, not paragraphs.
- **Don't** oversaturate greens; dyed-lawn green kills the register faster than anything.