Illustrated Eco Brand

@claude-code

Hand-drawn SVG illustration-driven eco-sustainability brand. Features Fraunces / Nunito / Kalam font trio, warm OKLCH paper-and-earth palette, feTurbulence wobble filters on all drawn elements, paper-grain texture overlay, naive-art garden scenes, inline SVG illustrations woven into text flow, and handwritten margin annotations. Zero photographs — every visual is a hand-drawn inline SVG.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/illustrated-eco-brand and apply its design language to my project

Design Language

All colors in OKLCH. The palette evokes natural dyes on recycled kraft paper — warm, earthy, slightly faded. No neons, no pure black, no pure white.

| Token | OKLCH Value | Material Name | Usage |
|-------|-------------|---------------|-------|
| `--paper` | `oklch(0.95 0.02 80)` | Warm off-white | Page background, card backgrounds |
| `--paper-dark` | `oklch(0.90 0.025 78)` | Kraft paper | Section alternation background |
| `--ink` | `oklch(0.25 0.04 60)` | Rich soil brown | Primary text, headings, dark sections |
| `--ink-light` | `oklch(0.40 0.03 60)` | Faded soil | Secondary text, descriptions |
| `--leaf` | `oklch(0.55 0.14 145)` | Leaf green | Primary accent, CTA buttons, plant illustrations |
| `--leaf-light` | `oklch(0.75 0.10 145)` | Pale leaf | Hover states, connecting lines |
| `--leaf-pale` | `oklch(0.88 0.06 145)` | Morning dew | Impact section background |
| `--terra` | `oklch(0.58 0.12 45)` | Terracotta | Handwriting annotations, pots, soil in illustrations |
| `--terra-light` | `oklch(0.78 0.08 45)` | Clay | Tag borders, secondary accents |
| `--sun` | `oklch(0.88 0.12 95)` | Sunshine yellow | Sun illustrations, flowers, seasonal banner border |
| `--sun-pale` | `oklch(0.93 0.06 95)` | Morning light | Seasonal banner background |
| `--sky` | `oklch(0.72 0.08 230)` | Sky blue | Watering can, pot accents |
| `--sky-pale` | `oklch(0.90 0.04 230)` | Pale sky | Light blue accents |

### Neutrals
All neutrals are warm-tinted toward hue 60-80 (brown/amber), never pure gray.
- Newsletter dark background: `var(--ink)` oklch(0.25 0.04 60)
- Input field on dark: `oklch(0.32 0.03 60)` with border `oklch(0.45 0.03 60)`
- Placeholder on dark: `oklch(0.60 0.02 60)`

Agent instructions (SKILL.md)(advanced)

Design Skill

Routes a hand-drawn SVG illustration system into an eco-sustainability brand. Every visual is an inline SVG with intentional wobble via feTurbulence filters — zero photographs. Warm OKLCH paper-and-earth palette, Fraunces + Nunito + Kalam font trio, paper-grain texture overlay, naive-art garden scenes with ambient animation, and Kalam handwriting annotations woven into text flow. The page feels like a beautifully illustrated seed catalog, not a corporate sustainability website.

Reviews

Related styles

Organic Blob Portfolio@claude-code

Scatter Pin Studio@claude-code

Holographic Glass Store@claude-code

Watercolor Wash Blog@claude-code

Sticker Book Dev@claude-code

Farm-to-Table Restaurant@claude-code

Illustrated Eco Brand

All colors in OKLCH. The palette evokes natural dyes on recycled kraft paper — warm, earthy, slightly faded. No neons, no pure black, no pure white. | Token | OKLCH Value | Material Name | Usage | |-------|-------------|---------------|-------| | `--paper` | `oklch(0.95 0.02 80)` | Warm off-white | Page background, card backgrounds | | `--paper-dark` | `oklch(0.90 0.025 78)` | Kraft paper | Section alternation background | | `--ink` | `oklch(0.25 0.04 60)` | Rich soil brown | Primary text, headings, dark sections | | `--ink-light` | `oklch(0.40 0.03 60)` | Faded soil | Secondary text, descriptions | | `--leaf` | `oklch(0.55 0.14 145)` | Leaf green | Primary accent, CTA buttons, plant illustrations | | `--leaf-light` | `oklch(0.75 0.10 145)` | Pale leaf | Hover states, connecting lines | | `--leaf-pale` | `oklch(0.88 0.06 145)` | Morning dew | Impact section background | | `--terra` | `oklch(0.58 0.12 45)` | Terracotta | Handwriting annotations, pots, soil in illustrations | | `--terra-light` | `oklch(0.78 0.08 45)` | Clay | Tag borders, secondary accents | | `--sun` | `oklch(0.88 0.12 95)` | Sunshine yellow | Sun illustrations, flowers, seasonal banner border | | `--sun-pale` | `oklch(0.93 0.06 95)` | Morning light | Seasonal banner background | | `--sky` | `oklch(0.72 0.08 230)` | Sky blue | Watering can, pot accents | | `--sky-pale` | `oklch(0.90 0.04 230)` | Pale sky | Light blue accents | ### Neutrals All neutrals are warm-tinted toward hue 60-80 (brown/amber), never pure gray. - Newsletter dark background: `var(--ink)` oklch(0.25 0.04 60) - Input field on dark: `oklch(0.32 0.03 60)` with border `oklch(0.45 0.03 60)` - Placeholder on dark: `oklch(0.60 0.02 60)`

Routes a hand-drawn SVG illustration system into an eco-sustainability brand. Every visual is an inline SVG with intentional wobble via feTurbulence filters — zero photographs. Warm OKLCH paper-and-earth palette, Fraunces + Nunito + Kalam font trio, paper-grain texture overlay, naive-art garden scenes with ambient animation, and Kalam handwriting annotations woven into text flow. The page feels like a beautifully illustrated seed catalog, not a corporate sustainability website.