---
title: "Leandra Isler design system"
variant: extended
source: https://www.leandra-isler.ch/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/leandra-isler-ch)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Leandra Isler · Design System

> Quiet, earthy design for holistic care

**Theme:** light · **Industry:** health · **Source:** https://www.leandra-isler.ch/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Leandra Isler’s homepage uses a warm cream canvas and muted olive-brown bands to frame a holistic health practice. Restrained typography and a direct appointment CTA give the page a calm, personal character.

## North star

Use warm cream space, earthy full-width color bands, and restrained charcoal typography to make booking feel calm and direct.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Charcoal | `#1e211e` | `--color-deep-charcoal` | neutral | Primary text, headings, navigation links, and the appointment button background. |
| Warm Cream | `#f4e6cd` | `--color-warm-cream` | surface | Main page canvas and reversed text on dark elements; the screenshot appears as a close cream variation. |
| Earthy Ochre | `#8f774b` | `--color-earthy-ochre` | brand | Broad muted brown section surface, especially the lower appointment band. |
| Olive Moss | `#888151` | `--color-olive-moss` | accent | Secondary olive surface and accent, measured in section backgrounds rather than as a small decorative detail. |

### Semantic aliases

`--color-canvas` → `#f4e6cd` (Warm Cream) · `--color-surface` → `#8f774b` (Earthy Ochre) · `--color-surface-2` → `#888151` (Olive Moss) · `--color-text` → `#1e211e` (Deep Charcoal) · `--color-text-muted` → `#f4e6cd` (Warm Cream) · `--color-accent` → `#8f774b` (Earthy Ochre) · `--color-accent-2` → `#888151` (Olive Moss)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e211e` | `#f4e6cd` | 13.2:1 | AAA |
| `#1e211e` | `#8f774b` | 3.8:1 | AA-large |
| `#1e211e` | `#888151` | 4.11:1 | AA-large |
| `#f4e6cd` | `#8f774b` | 3.47:1 | AA-large |
| `#f4e6cd` | `#888151` | 3.21:1 | AA-large |
| `#8f774b` | `#f4e6cd` | 3.47:1 | AA-large |
| `#8f774b` | `#888151` | 1.08:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 400, 500 | Page-wide typeface for headings, body copy, uppercase navigation and CTA labels. | DM Sans |

- **PP Neue Montreal:** Use regular weights for headings and body; headings are tightly tracked, while small navigation labels use medium weight and uppercase.

### Type scale — Golden Ratio (ratio ≈ 1.639, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 43px | 400 | 1 | -0.045em | — | PP Neue Montreal | Primary practice statement and prominent introductory heading. |
| h2 | 24px | 400 | 1 | -0.045em | — | PP Neue Montreal | Secondary section headings and supporting content titles. |
| body | 16px | 400 | 1.2 | 0 | — | PP Neue Montreal | Practice introduction, explanatory copy, and general page text. |
| caption | 14px | 500 | 1.2 | 0 | uppercase | PP Neue Montreal | Compact uppercase navigation or short utility labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 10, 14, 16, 20, 30, 60, 120, 130, 150 px.
- Section rhythm 60px · element gap 4px · card padding — · max content width 1320px.

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.

## Shape & elevation

- Radius: button `4px` · media `4px` · xs `4px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.07) 0px 0px 10px 0px`

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Termin anfragen Termin anfragen”): background #1e211e · text #f4e6cd · radius 4px · padding 10px 14px · 400 16px PP Neue Montreal
- **Link** (“HOME”): transparent background · text #1e211e · radius 0px · padding 0px · 500 14px PP Neue Montreal · uppercase

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, sparse section on a warm cream field; screenshot shows a small centered loading mark. | Practice introduction, Appointment action | Warm cream canvas, Earthy lower band, Charcoal CTA |

## Source CSS custom properties (selected)

```css
--spacing--letter-spacing-h1: -.045em;
--spacing--line-height-h2: 1em;
--primary: #888151;
--primary-hover: #a29a65;
--border: #1e211e33;
--text-medium: #1e211e;
--spacing--letter-spacing-h2: -.03em;
--spacing--line-height-h1: .9em;
--text-light: #b4b4b4;
--box-full-color: #edddc3;
--spacing--margin-desktop: 120px;
--border-radius: 4px;
--primary-dark: #7b7447;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/leandra-isler-ch