North star · Give oversized, confident typography center stage on soft color fields, then surround it with sparse hand-drawn details.
The visual identity balances a soft, warm canvas with assertive black typography. The hero uses pale pink (#f6e0db) as a full-width backdrop, giving the oversized centered headline room to dominate without feeling severe. Manrope carries the logo-like display, navigation, and bold sans-serif headings; Alfa Slab One adds a distinctive editorial voice to selected headings and body text. Navigation is built from white pill shapes with fine black outlines, while small coral details add a lively cue. Hand-drawn science, reading, and audio motifs sit around the headline, with a tilted aqua text panel entering at the bottom of the viewport. The measured palette also includes yellow, lime, purple, and blue; reserve these for section accents or small illustrative details rather than treating them as equally prominent blocks. Keep composition airy, central, and playful, with clean black-on-light contrast.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
页面底色 · Paper White表层 · Blush Canvas表层 2 · Aqua Note主文字 · Story Ink描边 · Story Ink强调 · Curious Yellow强调 2 · Ear Coral强调 3 · Play Lime
Editorial headings and selected body or card text.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero display lettering, visually dominant above the fold.
La puce à l'oreille
119.5px
800
1
0
一级标题
Editorial-style primary heading where slab-serif character is used.
La puce à l'oreille
46px
400
1.09
0
二级标题
Section-level editorial headings.
La puce à l'oreille
35px
400
1.09
0
三级标题
Strong sans-serif headings within page content.
La puce à l'oreille
34px
800
1.24
0
四级标题
Supporting subheadings and introductory text.
The quick brown fox 敏捷的狐狸
25px
500
1.6
0
正文
Editorial body and podcast card copy.
The quick brown fox 敏捷的狐狸
16px
400
normal
0
辅助文字
Compact labels and supporting metadata.
The quick brown fox 敏捷的狐狸
12px
700
1.5
0
导航
Large, bold primary navigation labels.
The quick brown fox 敏捷的狐狸
25px
800
1.12
0
间距与布局
基准单位 2px · 密度：适中
80px版块间距
5px元素间距
—卡片内边距
864px内容最大宽度
4px
5px
8px
10px
15px
16px
20px
24px
25px
30px
38px
46px
80px
The measured content max width is 864px, with a comfortable overall density and a section rhythm of 80px. In the hero screenshot, the headline is centered within a full-width blush field, while the horizontal navigation spans the upper edge. Let the headline occupy the central visual axis and leave generous open space around it. Use smaller outlined navigation pills at the right and distribute decorative drawings around, rather than over, the main copy. The measured page section is tall and single-column.
圆角与层次
卡片 · 10px
导航 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page reads as mostly flat: no measured shadows, with contrast created by colored section fields and thin black outlines. Navigation uses white, pill-shaped fills with black borders; content cards have a measured 2px black border and 10px radius. Keep layering limited to overlapping or tilted illustrated panels.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary pill navigation
Large white rounded pills with black outlines and bold Manrope labels; the Explorer item includes a small coral downward marker.
Secondary navigation
Small white capsule links with black outlines, aligned after the main navigation items.
Hero headline
Oversized, centered black multi-line text on a full-width blush field, with surrounding open space.
Decorative doodles
Sparse, fine black line illustrations of science, reading, and audio subjects, accented with small palette colors.
Podcast content card
Measured cards use a 2px black outline, 10px radius, and 16px Alfa Slab One text.
Tilted aqua panel
Aqua text panel enters at an angle from the lower hero edge as a secondary visual layer.
Imagery · The first viewport uses hand-drawn, outlined doodles—an atom, headphones, a book, and a small robot—rather than photography. Keep illustrations light, playful, and scattered around the headline, with occasional colored fills. A skewed aqua text panel is partly visible near the hero’s lower edge. The artwork should feel like supporting marginalia, not a competing focal point.
Use Blush Canvas (#f6e0db) as the hero’s dominant field.
Keep the main headline large, black, and centrally aligned.
Build navigation from white pills with black outlines.
Use hand-drawn doodles as sparse supporting details.
Contrast heavy Manrope with selective Alfa Slab One.
Reserve bright palette colors for accents and illustrated details.
✕ 不该做
Don’t replace the airy hero with a dense grid.
Don’t let decorative artwork obscure the headline.
Don’t add shadows as a default elevation treatment.
Don’t use bright accents as the primary text color.
Don’t make navigation look like filled rectangular buttons.
Don’t introduce photography where simple line illustrations fit.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new page in the La puce à l'oreille visual style. Use Blush Canvas (#f6e0db) for a broad hero field, Story Ink (#000000) for high-contrast text and outlines, and Paper White (#ffffff) for pill navigation fills. Set the main message in oversized, centered Manrope, mixing in Alfa Slab One for editorial contrast. Place outlined white capsule navigation along the top and surround the hero message with a few fine, hand-drawn subject-related doodles. Introduce Aqua Note (#ace2df), Ear Coral (#ef724f), Curious Yellow (#e7db4c), or Play Lime (#6ed311) only as restrained accents. Keep the page comfortable and open, use the measured 864px content maximum and 80px section rhythm, and favor flat surfaces, thin black borders, and rounded cards over shadows or complex effects.
