How Many Plants 以温暖的纸感底色、手绘植物插画和鲜明的编辑式字体建立亲切风格。首页先用色彩丰富的植物主题字样吸引注意，再以图文交替的内容板块介绍植物资源，最后落在深绿色订阅页脚。
North star · Make the page feel like a carefully composed plant journal: quiet paper-toned structure, expressive botanical art, and clear editorial typography.
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.
Body copy, third-level headings, and primary button labels.
Aa 设计
Hellenictypewriter
网络字体 · 字重 400 / 500 · 占比 38%
免费替代：Courier Prime
Main headings, links, captions, and the typewriter-like display voice.
角色
示例
字号
字重
行高
字距
一级标题
Brand and primary page titles, including the homepage identity.
How Many Plants
36px
500
1.33
0
二级标题
Section-level editorial headings in resource panels.
How Many Plants
28px
500
1.14
0
三级标题
Supporting feature titles and smaller content headings.
The quick brown fox 敏捷的狐狸
24px
500
1.33
0
正文
Readable descriptions explaining guides, care topics, and tools.
The quick brown fox 敏捷的狐狸
20px
400
1.6
0
辅助文字
Small annotations, auxiliary labels, and fine-print copy.
The quick brown fox 敏捷的狐狸
16px
400
1.25
0
链接
Navigation and resource links, including outlined CTA labels.
The quick brown fox 敏捷的狐狸
20px
400
1.6
0
间距与布局
基准单位 8px · 密度：适中
64px版块间距
16px元素间距
64px卡片内边距
1248px内容最大宽度
4px
12px
16px
32px
44px
48px
64px
152px
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.
圆角与层次
hairline · button, other
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.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
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.
✕ 不该做
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.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
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.
