North star · Use warm cream space, earthy full-width color bands, and restrained charcoal typography to make booking feel calm and direct.
The visual identity is led by a warm cream canvas (#f4e6cd), with muted brown-olive (#8f774b) and olive green (#888151) used for broad contrasting section surfaces rather than decorative accents. Deep charcoal (#1e211e) provides the main text and button color, while cream reverses onto the dark CTA. PP Neue Montreal is used throughout in a light, contemporary sans-serif treatment: headings are large, regular-weight, tightly tracked, and compact in line height; supporting copy stays legible and understated. The measured section contains many images and text elements, but the screenshot shows a very sparse cream field and a small centered loading indicator, so avoid inventing visible hero imagery or content absent from the reference. The page’s lower visible band uses an earthy surface and a compact appointment prompt. Overall, generous open space, simple alignment, and minimal decoration keep attention on the practice and its booking action.
Page-wide typeface for headings, body copy, uppercase navigation and CTA labels.
角色
示例
字号
字重
行高
字距
一级标题
Primary practice statement and prominent introductory heading.
Leandra Isler
43px
400
1
-0.045em
二级标题
Secondary section headings and supporting content titles.
The quick brown fox 敏捷的狐狸
24px
400
1
-0.045em
正文
Practice introduction, explanatory copy, and general page text.
The quick brown fox 敏捷的狐狸
16px
400
1.2
0
辅助文字
Compact uppercase navigation or short utility labels.
The quick brown fox 敏捷的狐狸
14px
500
1.2
0
间距与布局
基准单位 4px · 密度:适中
60px版块间距
4px元素间距
—卡片内边距
1320px内容最大宽度
4px
10px
14px
16px
20px
30px
60px
120px
130px
150px
The measured layout allows a wide content area with a comfortable density and a broad section rhythm. Keep content aligned to a consistent central container, with headings and copy starting at the same edge. The screenshot is unusually sparse, showing a large cream field and a tiny centered loading mark before an earthy full-width band; preserve that quietness rather than filling space with invented elements. Use simple horizontal alignment for the booking prompt and CTA. Section spacing should feel generous, with compact gaps inside component groups.
圆角与层次
按钮 · 4px
图片 · 4px
md · other
The page is primarily flat, relying on large color fields rather than cards or layered panels. Measured component corners are subtly rounded, including the appointment button. A faint shadow was detected elsewhere, but it is not a defining visual feature; avoid adding prominent shadows or decorative borders.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Appointment CTA
Use a charcoal button with warm cream text, regular sans-serif type, and the measured subtle corner radius.
Booking prompt band
Place a short prompt, availability note, and appointment action in a compact horizontal arrangement over an earthy surface.
Navigation links
Set links in charcoal, medium-weight uppercase sans-serif with no visible background treatment.
Section surfaces
Use broad muted ochre or olive color areas against the warm cream canvas; keep transitions simple and unornamented.
Headings
Use regular-weight PP Neue Montreal with tight tracking and compact line height for a confident but quiet editorial feel.
Imagery · The crawler measured many images, but the supplied screenshots do not reveal their subjects or framing: the first viewport is a nearly uniform cream field with a small centered mark, and the scaled page shows a muted lower band. Do not infer image content from the counts. Where real page assets are available, use them with restrained, natural presentation that supports the practice rather than competing with the calm palette.
Reserve #8f774b and #888151 for broad earthy surface areas.
Set main text and the primary CTA in #1e211e.
Keep headings regular-weight and tightly tracked.
Give major content areas generous visual breathing room.
Make the appointment action easy to find and understand.
✕ 不该做
Do not introduce bright saturated colors.
Do not invent imagery or page content from the image count alone.
Do not make the layout feel dense or dashboard-like.
Do not rely on gradients, strong shadows, or decorative borders.
Do not use oversized bold typography or highly ornamental type.
Do not turn the earthy section colors into small, scattered accents.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new holistic-health page in Leandra Isler’s quiet, earthy visual style. Use Warm Cream (#f4e6cd) as the dominant canvas, Deep Charcoal (#1e211e) for readable text and the primary appointment button, and broad Earthy Ochre (#8f774b) or Olive Moss (#888151) surface bands for section contrast. Use a clean sans-serif similar to PP Neue Montreal, with regular-weight, tightly tracked headings and restrained uppercase utility labels. Keep the composition spacious and aligned to a consistent wide content container; use simple horizontal groupings for prompts and booking actions. Favor flat surfaces and minimal decoration, with only subtle rounded corners. Do not invent colors, imagery, gradients, or elaborate card effects; let concise content and a clear appointment action lead.