风格库/健康医疗/Leandra Isler

Leandra Isler

以沉静自然的设计呈现整体疗愈Quiet, earthy design for holistic care

浅色主题健康医疗naturheilpraxis homepage极简大地色编辑式排版暖中性色宁静原网页 leandra-isler.ch ↗ · 2026-10-12 采集 · 1440×900 桌面端
Leandra Isler 首屏

Leandra Isler 的首页以暖奶油色为底,搭配柔和的橄榄棕色区块,呈现整体自然疗法诊所的气质。克制的字体与清晰的预约按钮,让页面显得平静、亲切。

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

品牌色
强调色
表层色
中性色
页面底色 · Warm Cream表层 · Earthy Ochre表层 2 · Olive Moss主文字 · Deep Charcoal次要文字 · Warm Cream强调 · Earthy Ochre强调 2 · Olive Moss
文字背景对比度WCAG
#1e211e Deep Charcoal#f4e6cd Warm Cream13.2:1AAA
#1e211e Deep Charcoal#8f774b Earthy Ochre3.8:1AA-large
#1e211e Deep Charcoal#888151 Olive Moss4.11:1AA-large
#f4e6cd Warm Cream#8f774b Earthy Ochre3.47:1AA-large
#f4e6cd Warm Cream#888151 Olive Moss3.21:1AA-large
#8f774b Earthy Ochre#f4e6cd Warm Cream3.47:1AA-large

字体

字号阶梯:Golden Ratio(比例约 1.639,正文 16px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

PP Neue Montreal

网络字体 · 字重 400 / 500 · 占比 100%
免费替代:DM Sans

Page-wide typeface for headings, body copy, uppercase navigation and CTA labels.

角色示例字号字重行高字距
一级标题
Primary practice statement and prominent introductory heading.
Leandra Isler
43px4001-0.045em
二级标题
Secondary section headings and supporting content titles.
The quick brown fox 敏捷的狐狸
24px4001-0.045em
正文
Practice introduction, explanatory copy, and general page text.
The quick brown fox 敏捷的狐狸
16px4001.20
辅助文字
Compact uppercase navigation or short utility labels.
The quick brown fox 敏捷的狐狸
14px5001.20

间距与布局

基准单位 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.

页面版块

共 1 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Use #f4e6cd as the dominant canvas color.
  • 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.

相似风格

Leandra Isler 设计系统 — 配色、字体与 DESIGN.md | Design DNA