Organic

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

[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.