Eco / Organic Natural

---
name: eco-organic
description: Apply the Eco / Organic Natural visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Eco / Organic Natural, mentions organic natural, earthy sustainable, green brand, or describes forest, clay, and cream earth tones, humanist serif plus sans pairing, leaf and seed motifs — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Eco / Organic Natural Design System

Earthy sustainable warmth: forest green and bark brown with clay and warm cream, humanist serif headings, leaf motifs and kraft-paper texture, soft organic corners and photography-led storytelling. The design equivalent of a farmers-market stall done well.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Eco / Organic Natural.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (organic natural, earthy sustainable, green brand, natural foods aesthetic), or describes its traits: forest, clay, and cream earth tones; humanist serif plus sans pairing; leaf and seed motifs; kraft-paper textures; organic 12–20px rounding; photography-led natural layouts.

## Design tokens

### Color palette

- Warm cream page background, sun-baked: `#fce4b4` (--color-bg)
- Card background, lighter cream: `#fdf3dc` (--color-surface)
- Forest green primary text: `#2d4030` (--color-text)
- Secondary text, bark brown: `#5c4033` (--color-text-muted)
- Meadow green — links, buttons, and interactive states: `#3f6d3a` (--color-accent)
- Forest — dark fills, footer, and reversed panels: `#2d4030` (--color-forest)
- Olive — tags, illustration, chart fills (decorative): `#7f803e` (--color-olive)
- Clay — warm highlights, badges, kraft accents: `#cc9a52` (--color-clay)
- Bark brown — rules, icons, grounding details: `#5c4033` (--color-bark)

### Typography

- Display / headings: Lora (fallback: Georgia, serif)
- Body: Work Sans (fallback: Helvetica, Arial, sans-serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.25, letter-spacing 0
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 104 — Airy and grounded: wide margins, tall sections, photography given room; the pace of the page is a walk, not a scroll-race.
- Border radius: md 12px, lg 20px, arch 50% 50% 0 0 / 30% 30% 0 0, pill 999px — Soft organic rounding; the arch mask (window shape) is the house style for feature imagery.
- Border treatment: 1px solid #e0cfa4 — Warm hairlines; featured panels may use a 1px bark border like a stamped kraft label.

### Shadows

- soft: `0 3px 12px rgba(92, 64, 51, 0.10)` — Default card lift, warm-toned
- soft-lg: `0 10px 28px rgba(92, 64, 51, 0.14)` — Hover and featured panels

### Layout

- Max content width: 1200px
- Photography-led: full-width imagery of ingredients, landscapes, and hands at work
- Arch-masked feature images alternating left/right with text
- Kraft-texture bands for values and certification sections
- Leaf or seed motif as section markers and list bullets

### Effects

- Kraft-paper texture panels at low opacity
- Hand-drawn leaf, seed, and sprig line motifs
- Grainy, warm photo treatment — natural light only
- Stamped-label treatment for certifications (organic, B-corp)

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 180ms / 320ms / 550ms
- Slow fades and gentle 12px rises, like things settling into soil
- Images scale 1.03 on hover with the soft-lg shadow
- Leaf motifs may sway barely perceptibly; nothing else auto-moves

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fce4b4;
  --color-surface: #fdf3dc;
  --color-text: #2d4030;
  --color-text-muted: #5c4033;
  --color-accent: #3f6d3a;
  --color-forest: #2d4030;
  --color-olive: #7f803e;
  --color-clay: #cc9a52;
  --color-bark: #5c4033;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-arch: 50% 50% 0 0 / 30% 30% 0 0;
  --radius-pill: 999px;
  --shadow-soft: 0 3px 12px rgba(92, 64, 51, 0.10);
  --shadow-soft-lg: 0 10px 28px rgba(92, 64, 51, 0.14);
  --border-default: 1px solid #e0cfa4;
  --font-display: Lora, Georgia, serif;
  --font-body: "Work Sans", Helvetica, Arial, sans-serif;
  --text-base: 17px;
  --leading-heading: 1.25;
  --leading-body: 1.65;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 550ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar, 72px; serif wordmark, Work Sans links, a leaf glyph divider; cart and CTA in meadow green
- **Hero:** Large Lora headline in forest green over cream or full-bleed harvest photography, short honest subline, meadow-green pill CTA, arch-masked product shot
- **Card:** Light cream surface, 12–20px radius, warm soft shadow, arch or rounded product image, serif title, olive tag chips, 24px padding
- **Button (primary):** Meadow green fill, cream text, 999px pill; deepens to forest on hover
- **Button (secondary):** Transparent, 1px bark border, forest text; fills light cream on hover
- **Form fields:** Cream fill, 1px warm border, 12px radius; focus turns the border meadow green with a soft warm glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Kraft-and-leaf material language: kraft-paper texture panels with a small hand-drawn leaf or seed motif marking sections, product photography on natural linen and wood, and organic arch-shaped image masks. Spend boldness here; keep everything else quiet.

## Do

- Lead with honest photography — real ingredients, real places, natural light
- Use kraft texture and stamped labels to ground sustainability claims
- Keep greens and browns muted and mineral; the palette is dyed, not printed
- Give certifications and sourcing stories real layout space

## Don't

- No neon greens or synthetic gradients — 'eco' dies with artificial color
- No sharp corners or hard black borders
- Don't stack leaf clichés; one motif, used consistently, beats a forest of clip art
- Avoid vague green claims in copy blocks styled as facts — the aesthetic amplifies greenwashing badly

## Accessibility notes

- Forest green text on the warm cream ground is ~9:1 and the meadow-green accent ~4.9:1 — both pass AA; olive #7f803e is decorative only (~3.3:1) and must not carry text
- Clay #cc9a52 badges need forest-green or bark text, never cream
- Texture panels must stay subtle enough that overlaid text keeps full contrast

## Reference sites

- Patagonia: https://www.patagonia.com
- Whole Foods Market: https://www.wholefoodsmarket.com
- Allbirds: https://www.allbirds.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip eco-organic.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/eco-organic.json

Settings → Capabilities → Skills → Upload skill → eco-organic.zip