# Howmanyplants · Design system migration spec

> Source: https://howmanyplants.com  ·  Curated by OpenDesign  ·  en

> A highly distinctive, characterful editorial design that perfectly balances bold typography with handcrafted, whimsical illustrations.

## 1. Identity DNA

How Many Plants is built like a whimsical, curated bookstore for plant lovers, filled with handmade illustrations and characterful typography. Its identity is a warm, illustrated editorial platform for plant enthusiasts, blending bold typography with handcrafted graphics. The system is playful, botanical, editorial, and community-driven.

**One-liner:** A warm, illustrated editorial platform for plant enthusiasts, blending bold typography with handcrafted graphics.
**Keywords:** Playful · Botanical · Editorial · Curated · Community
**Analogy:** A whimsical, curated bookstore for plant lovers, filled with handmade illustrations and characterful typography.

## 2. Color

An earthy warmth is grounded in a near-white canvas, punctuated by an energetic chartreuse-gold and playful pastel accents. This palette creates a light, tactile feel, avoiding heavy gradients or dark modes in favor of solid, defined color blocks.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFEF9` | main background |
| `--bg-soft` | `#F9F5F1` | card background |
| `--ink` | `#222222` | body text |
| `--muted` | `#BFB33B` | placeholder |
| `--muted-soft` | `#E8D1EB` | weak hint |
| `--accent` | `#BFB33B` | single accent |
| `--line` | `rgba(34, 34, 34, 1.0)` | divider |

**Color principle:** Earthy warmth grounded in a near-white canvas, punctuated by an energetic chartreuse-gold and playful pastel accents.

The palette principle is to maintain a warm, near-white canvas as the primary surface, using bold, solid accents for energy and definition.

## 3. Typography

The typographic system mixes a geometric sans-serif with a typewriter-style serif, adding distinct editorial character. This combination allows for expressive, massive display text that physically interacts with illustrations, alongside clean, readable body copy for articles.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 0.9 | 400 | -1px | Massive hero lettering interwoven with illustrations. |
| heading | 36px | 1.2 | 400 | 0px | Section titles in a typewriter-style serif. |
| body | 14px | 1.4 | 400 | 0px | Clean, highly readable body copy for articles. |

**Type rules:**
- Uppercase navigation and sidebar labels create strong geometric rhythm.
- Massive display text physically interacts with overlapping illustrations.
- Mixing a geometric sans-serif with a typewriter-style serif adds editorial character.

## 4. Spacing

Spacing follows a generous, spacious rhythm, with ample side padding to frame the editorial content and give elements room to breathe within the collage.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Generous, spacious rhythm with generous side padding (64px) to frame the editorial content.

## 5. Surfaces

Surfaces are defined by depth created through playful, offset block shadows rather than soft gradients. Hard, solid borders in dark ink or olive gold are often used to create tactile, 3D effects on interactive components.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgb(191, 179, 59) 6px 6px 0px 0px
- **Borders:** Hard, solid borders (2px to 4px) in dark ink or olive gold, often used as playful offset drop shadows.

## 6. Layout

The layout skeleton is a masonry-like collage where text and custom illustrations physically overlap and break out of standard grid boundaries. This approach rejects clean, empty minimalism in favor of a dense, layered, and interactive composition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 32px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A masonry-like collage where text and custom illustrations physically overlap and break out of standard grid boundaries.

## 7. Motion & Interaction

Motion philosophy is restrained and functional, relying on standard 220ms state transitions for basic interactivity. The focus is on tactile feedback and characterful static presentation rather than elaborate animation sequences.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Standard 220ms state transitions for basic interactivity.

- **Hover:** A custom watering-can cursor appears globally, replacing the default pointer.
- **Click:** Standard pointer state for interactive elements.
- **Transition:** Smooth 220ms duration transitions applied universally to state changes.
- **Keyboard:** Standard focus visibility implied for accessibility, though the primary interaction is pointer-driven.

## 8. Voice & Don'ts

The editorial voice is playful, encouraging, and warmly authoritative, with bold, conversational, typographically expressive headlines. It deliberately avoids clinical sterility, overly formal corporate language, minimalist empty spaces, and standard UI component patterns.

- **Tone:** Playful, encouraging, and warmly authoritative.
- **Headline style:** Bold, conversational, and typographically expressive.
- **CTA style:** Framed in solid borders with a tactile drop shadow to mimic physical buttons.
- **Avoid:** Clinical sterility / Overly formal corporate language / Minimalist empty spaces / Standard UI component patterns

### Don'ts
- ❌ Don't use clean, empty minimalism — the screenshot shows a dense, overlapping collage of illustrations and text.
- ❌ Don't rely on subtle drop shadows — the screenshot shows thick, solid 6px offset block shadows.
- ❌ Don't use dark mode or heavy gradients — the screenshot shows a light, near-white canvas with solid pastel accents.
- ❌ Don't use standard UI grid layouts — the screenshot shows text and images physically overlapping and breaking boundaries.
- ❌ Don't use standard system cursors globally — the screenshot shows a custom watering-can cursor.
- ❌ Don't use purely typographic CTA buttons — the screenshot shows outlined boxes with solid offset background fills.

The system deliberately avoids clean, empty minimalism, subtle drop shadows, dark mode, standard grid layouts, global system cursors, and purely typographic CTA buttons.

## System Prompt (paste into AI tool)

```
This design is a warm, playful editorial platform for plant enthusiasts, built on a near-white canvas (#FFFEF9) with a prominent chartreuse-gold accent (#BFB33B) and dark ink (#222222). It features a dynamic mix of geometric sans-serif and typewriter-style serif typography. The layout uses a dense, overlapping collage approach where massive text and custom illustrations physically interact, breaking standard grid boundaries. Interaction is enhanced by a custom watering-can cursor and thick, solid block shadows on buttons. Critical constraints: NEVER use dark mode, minimal empty space, or subtle, realistic drop shadows. Always maintain the playful, illustrated, collage-like editorial character.
```