---
title: "How Many Plants design system"
variant: extended
source: https://howmanyplants.com/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/howmanyplants-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# How Many Plants · Design System

> A playful, illustrated field guide for plant people

**Theme:** light · **Industry:** other · **Source:** https://howmanyplants.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

How Many Plants pairs a warm, paper-like canvas with hand-drawn botanical artwork and confident editorial typography. Its homepage leads with a colorful illustrated wordmark, then guides visitors through plant resources in alternating image-and-copy panels before closing with a deep-green newsletter footer.

## North star

Make the page feel like a carefully composed plant journal: quiet paper-toned structure, expressive botanical art, and clear editorial typography.

## Overview

The page feels like a cheerful printed plant journal brought to the web. A warm off-white canvas (#f9f5f1) carries most of the experience, while pale cream panels (#fffef9) sit behind selected copy and gallery-like content. Near-black text (#222222) keeps headings and body copy readable; muted yellow-green (#bfb33b) marks the illustrated wordmark, delicate rules, and button shadows. Deep teal (#025050) is reserved for the full-width footer, creating a clear visual close. Chromatica handles readable body text and compact navigation, while Hellenictypewriter gives headings, links, and captions a typewriter-like editorial voice. The layout alternates spacious two-column image-and-copy features, with varied image placement and plentiful breathing room. Botanical collages, plant cutouts, and hand-drawn details overlap their frames, supplying color and personality without changing the restrained base palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pressed Paper | `#f9f5f1` | `--color-pressed-paper` | neutral | Main page canvas and pale text on the deep-teal footer; gives the layout its warm paper-like ground. |
| Garden Ink | `#222222` | `--color-garden-ink` | neutral | Primary heading and body text, plus outlined button borders and dark navigation labels. |
| Cream Leaf | `#fffef9` | `--color-cream-leaf` | surface | Cream content panels behind selected resource cards and the pale frames in the illustrated wordmark. |
| Moss Gold | `#bfb33b` | `--color-moss-gold` | accent | Thin illustration outlines and the offset button shadow; prominent in the homepage wordmark artwork. |
| Canopy Teal | `#025050` | `--color-canopy-teal` | brand | Full-width footer background and dark botanical accent, visually separating contact and newsletter content. |

### Semantic aliases

`--color-canvas` → `#f9f5f1` (Pressed Paper) · `--color-surface` → `#fffef9` (Cream Leaf) · `--color-surface-2` → `#025050` (Canopy Teal) · `--color-text` → `#222222` (Garden Ink) · `--color-text-muted` → `#f9f5f1` (Pressed Paper) · `--color-border` → `#bfb33b` (Moss Gold) · `--color-accent` → `#025050` (Canopy Teal) · `--color-accent-2` → `#bfb33b` (Moss Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#f9f5f1` | 14.67:1 | AAA |
| `#222222` | `#fffef9` | 15.76:1 | AAA |
| `#222222` | `#025050` | 1.72:1 | fail |
| `#f9f5f1` | `#fffef9` | 1.07:1 | fail |
| `#f9f5f1` | `#025050` | 8.54:1 | AAA |
| `#025050` | `#f9f5f1` | 8.54:1 | AAA |
| `#025050` | `#fffef9` | 9.18:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Chromatica | `--font-body` | webfont | 400, 500 | Body copy, third-level headings, and primary button labels. | Nunito Sans |
| Hellenictypewriter | `--font-display` | webfont | 400, 500 | Main headings, links, captions, and the typewriter-like display voice. | Courier Prime |

- **Chromatica:** Use measured regular and medium weights; sentence-case copy and labels, with occasional uppercase navigation.
- **Hellenictypewriter:** Regular and medium weights; retain natural casing, roomy leading, and a distinct typewriter character.

### Type scale — Minor Third (ratio ≈ 1.216, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 500 | 1.33 | 0 | — | Hellenictypewriter | Brand and primary page titles, including the homepage identity. |
| h2 | 28px | 500 | 1.14 | 0 | — | Hellenictypewriter | Section-level editorial headings in resource panels. |
| h3 | 24px | 500 | 1.33 | 0 | — | Chromatica | Supporting feature titles and smaller content headings. |
| body | 20px | 400 | 1.6 | 0 | — | Chromatica | Readable descriptions explaining guides, care topics, and tools. |
| caption | 16px | 400 | 1.25 | 0 | — | Hellenictypewriter | Small annotations, auxiliary labels, and fine-print copy. |
| link | 20px | 400 | 1.6 | 0 | — | Hellenictypewriter | Navigation and resource links, including outlined CTA labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 12, 16, 32, 44, 48, 64, 152 px.
- Section rhythm 64px · element gap 16px · card padding 64px · max content width 1248px.

Use a centered content frame with a measured maximum width of 1248px. The header stacks a compact announcement above the main navigation; the large illustrated wordmark then occupies the central stage. Resource areas are comfortable two-column splits, alternating copy and artwork from section to section. Keep generous section gaps and card padding, with restrained element gaps inside text groups. Align feature copy to the start rather than centering it; allow artwork to feel loose and layered within its column.

## Shape & elevation

- Shadow `hairline` (button, other): `rgb(191, 179, 59) 6px 6px 0px 0px`

The page is mostly flat: large areas rely on background contrast rather than card shadows or rounded containers. Borders are thin and visible in the illustrated hero and navigation rules. Buttons use a square, dark outline with a small offset moss-gold shadow; art may overlap its frame, but avoid adding broad UI drop shadows.

## Imagery

Use botanical illustrations, plant cutouts, and editorial collages rather than generic product photography. The hero is a sequence of illustrated wordmark panels with oversized lettering and plant objects overlapping thin frames. Feature art mixes annotated plant diagrams, playful plant-care illustrations, and arrangements of pots. Preserve the hand-crafted, paper-collage impression and keep imagery visually distinct from the quiet page canvas.

## Components

### Announcement strip

A narrow top message centered above the navigation, decorated with small plant symbols and an inline underlined link.

### Primary navigation

A horizontally balanced header with resource links at left, centered wordmark, and plant-club and search actions at right.

### Illustrated wordmark

A tall sequence of cream panels framed with moss-gold lines, oversized black lettering, and overlapping botanical cutouts.

### Resource feature

A spacious two-column panel pairing a botanical image with an editorial heading, compact description, and outlined link button.

### Outlined CTA button

Square corners, dark text and border, Chromatica label, generous horizontal padding, and an offset #bfb33b shadow.

### Newsletter footer

A full-width #025050 footer with light text, email signup, navigation and social links, contact details, and a plant illustration.

### Measured component styles

- **Primary button** (“Plant Guides”): transparent background · text #222222 · border 2px solid #222222 · radius 0px · padding 12px 48px · 400 20px Chromatica · shadow rgb(191, 179, 59) 6px 6px 0px 0px
- **Link** (“About”): transparent background · text #f9f5f1 · radius 0px · padding 0px · 400 20px Hellenictypewriter
- **Input**: transparent background · text #f9f5f1 · radius 0px · padding 0px 12px 0px 0px · 400 20px Hellenictypewriter
- **Card** (“Get to know your plants Comprehensive gu”): background #fffef9 · text #222222 · radius 0px · padding 64px · 400 14px Chromatica

## Do

- Keep the canvas warm and paper-like.
- Use botanical illustrations as the main visual spectacle.
- Alternate image and copy positions across feature panels.
- Use Hellenictypewriter for editorial headings and links.
- Reserve deep teal for the footer and related dark accents.
- Give outlined CTAs a moss-gold offset shadow.

## Don't

- Do not introduce gradients or glossy effects.
- Do not round the square-edged buttons or panels.
- Do not crowd the generous feature layouts.
- Do not replace the illustrated wordmark with a plain text hero.
- Do not use the teal footer color across every section.
- Do not let decorative art reduce text readability.

## Agent prompt

Build a new page in the How Many Plants visual style: an editorial plant journal on a warm #f9f5f1 canvas, with readable #222222 text and selected #fffef9 content panels. Use Moss Gold (#bfb33b) for fine illustrative outlines and offset CTA shadows, and keep Canopy Teal (#025050) for a distinct footer or limited dark section. Pair Chromatica-like sans-serif body copy with Hellenictypewriter-like typewriter headings and links. Create an expressive botanical illustration or collage as the visual anchor, then organize supporting content in generous, alternating two-column image-and-copy sections. Keep controls square, use outlined buttons, preserve clear alignment and breathing room, and avoid gradients, glossy treatments, or heavy shadows. The page should feel crafted, playful, and easy to browse.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Centered announcement and compact three-part navigation above the hero. | Announcement link, Resource navigation, Search access | Thin horizontal rules, Centered wordmark, Plant-club outline action |
| 2 | gallery | Wide illustrated wordmark panel with full-width framed artwork. | Brand recognition | Cream frame, Moss-gold outline, Layered plant cutouts |
| 3 | gallery | Wide horizontal illustration continuing the framed wordmark sequence. | Visual storytelling | Oversized lettering, Botanical overlays, Thin gold-green frame |
| 4 | gallery | Third full-width hero strip with layered art and small resource labels. | Resource cues | Illustrated shelf, Compact text labels, Plant cutouts |
| 5 | gallery | Horizontal framed illustration continuing the stacked hero sequence. | Brand immersion | Line-art objects, Overlapping foliage, Cream background |
| 6 | gallery | Wide illustrated hero strip with typography and collage elements. | Brand immersion | Botanical collage, Framed strip, Editorial lettering |
| 7 | gallery | Final wide panel closes the vertical hero illustration sequence. | Transition to content | Illustrated lettering, Thin outlined frame, Plant cutouts |
| 8 | feature-split | Two columns: annotated plant illustration beside text and a bordered CTA. | Browse plant guides, Learn through annotations | Image-and-copy split, Cream card, Square outlined CTA |
| 9 | feature-split | Two-column feature with text card and plant-care illustration on opposing sides. | Explore care topics, Progressive learning | Alternating split, Pale text panel, Outlined link button |
| 10 | feature-split | Image-led collage opposite a compact editorial description panel. | Discover plant culture, Explore related content | Asymmetric split, Plant-and-pot collage, Cream text card |
| 11 | feature-split | Copy panel and illustrated preview arranged as a spacious two-column feature. | Preview upcoming tool | Editorial text card, Illustrated tool preview, Coming Soon CTA |
| 12 | footer | Full-width deep-teal footer in two broad columns with links, signup, and illustration. | Email signup, Explore navigation, Social links, Contact details | Light text on teal, Email field and arrow, Large plant graphic |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/howmanyplants-com