CURATED · OPEN · FREE

Howmanyplants

A warm, illustrated editorial platform for plant enthusiasts, blending bold typography with handcrafted graphics.

01

Identity DNA

A whimsical, curated bookstore for plant lovers, filled with handmade illustrations and characterful typography.

02

Color

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

03

Typography

geometric-sans · humanist-sans · transitional-serif

• display96px · 400
• heading36px · 400
• body14px · 400

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.

04

Spacing

Generous, spacious rhythm with generous side padding (64px) to frame the editorial content.

05

Surfaces

Hard, solid borders (2px to 4px) in dark ink or olive gold, often used as playful offset drop shadows.

rgb(191, 179, 59) 6px 6px 0px 0px

06

Layout

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

07

Motion & Interaction

Standard 220ms state transitions for basic interactivity.

A custom watering-can cursor appears globally, replacing the default pointer. · Standard pointer state for interactive elements.

08

Components

• button Text links styled with thick solid borders and an offset background drop shadow to create a tactile, 3D button effect.
• card Content blocks defined by distinct background color rectangles or outlined frames, often layered with cut-out illustrations.
• chip Small, uppercase text labels used for categorization or navigation, relying on typography rather than filled containers.
• input Minimalist, borderless search interaction tucked into the primary navigation header.
• hero A dynamic, massive typographic composition where the headline spells out the brand name across illustrated shelves.

09

Voice & Don'ts

• Tone Playful, encouraging, and warmly authoritative.
• Headlines Bold, conversational, and typographically expressive.
• CTAs Framed in solid borders with a tactile drop shadow to mimic physical buttons.

• 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.
• Avoid: Clinical sterility
• Avoid: Overly formal corporate language
• Avoid: Minimalist empty spaces
• Avoid: Standard UI component patterns

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko