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

# Simon Liesinger · Design System

> Quiet editorial minimalism with expressive typography.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.liesingers.com/ · **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._

A restrained designer portfolio built around refined serif typography, generous whitespace and a nearly monochrome palette. Delicate rules organize the work and service index, while a fine-line geometric drawing and a single portrait bring subtle visual contrast.

## North star

Let serif typography and deliberate whitespace define the page; use rules and imagery only as quiet structure.

## Overview

The page uses a soft light-gray canvas throughout, with near-black text providing crisp contrast and a muted gray reserved for hairline dividers. The dark footer forms the only substantial inverse-color band. Typography carries the identity: Garamond-style serif headlines and prose create an editorial, personal voice, while restrained Helvetica sans-serif supports compact contact details and functional labels. The opening is intentionally sparse: a left-aligned greeting and introduction sit above a delicate red geometric line illustration, with contact details tucked near the lower edge. A three-column index is separated by fine rules, then the long-form sections return to a quiet label-and-copy arrangement with generous vertical pauses. Photography appears sparingly as a centered portrait, shown without decorative framing. There are no visible shadows, rounded cards, gradients, or ornamental UI effects; structure comes from alignment, whitespace, typography, and thin borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f2f2f2` | `--color-gallery-mist` | brand | Dominant canvas across the hero, index, and long-form portfolio sections. |
| Soft Ink | `#181818` | `--color-soft-ink` | neutral | Primary text and links, plus the inverse footer background. |
| Quiet Rule | `#6e6e6e` | `--color-quiet-rule` | semantic | Thin borders dividing the index and other section boundaries. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Gallery Mist) · `--color-surface` → `#181818` (Soft Ink) · `--color-text` → `#181818` (Soft Ink) · `--color-border` → `#6e6e6e` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181818` | `#f2f2f2` | 15.86:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GaramondRg | `--font-display` | webfont | 400 | Serif display and editorial text for the greeting, section labels, navigation, and long-form copy. | EB Garamond |
| HelveticaMd | `--font-body` | webfont | 600 | Semibold sans-serif for service and project links and compact functional copy. | Inter |
| HelveticaRg | `--font-helveticarg` | webfont | 400 | Regular sans-serif for small contact and caption text. | Inter |

- **GaramondRg:** Regular weight; keep natural letter spacing and mixed-case editorial styling.
- **HelveticaMd:** Weight 600; compact, straightforward mixed-case labels without display-style tracking.
- **HelveticaRg:** Regular weight; small, quiet utility text with natural tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.31, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 400 | 1.22 | 0 | — | GaramondRg | Hero greeting and primary introductory statement. |
| h2 | 29px | 400 | 0.86 | 0 | — | GaramondRg | Large section or navigation labels, including the index. |
| h3 | 25px | 400 | 1.28 | 0.016em | — | GaramondRg | Secondary editorial headings and smaller section labels. |
| body | 16px | 600 | 1.13 | 0 | — | HelveticaMd | Prominent service and portfolio links. |
| caption | 12px | 400 | 1.67 | 0 | — | HelveticaRg | Contact details and small supporting labels. |
| link | 16px | 600 | 1.13 | 0 | — | HelveticaMd | Interactive text links, including collaborators and email. |

OpenType features in use: `"case", "kern", "ss04", "ss07", "tnum", "zero"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 10, 12, 14, 25, 29, 30, 40, 160 px.
- Section rhythm 160px · element gap — · card padding — · max content width 660px.

Use a centered, narrow editorial canvas with a measured page max width of 660px where content is constrained, while allowing the opening and section bands to span the available viewport. Align text to the left. The first screen balances an upper-left introduction against open space for the geometric drawing, then anchors contact details low in the hero. Follow with a ruled three-column index. Long-form sections use a small label column and a wider prose column, separated by spacious vertical intervals; keep density low and avoid packed UI.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The page is flat, with no measured shadows or gradients and no rounded-corner system. Establish hierarchy through whitespace and alignment rather than raised surfaces. Use thin gray hairlines to divide the index and section edges; reserve the near-black surface for the footer, without adding ornamental layering.

## Imagery

Keep imagery sparse and secondary to typography. The hero illustration is a delicate red wireframe geometric form on the light canvas; treat it as line art rather than a colored illustration panel. Later, place a single understated portrait photograph within the otherwise open layout. Avoid image grids, heavy crops, decorative frames, or overlays.

## Components

### Editorial hero

Left-aligned serif greeting and introduction on the light canvas, with ample open space for a fine-line geometric illustration.

### Contact details

Small utility links sit near the lower edge of the hero, visually subordinate to the main introduction.

### Three-column index

Services, awards, and collaborators form a compact index divided into columns by thin gray rules.

### Section label and prose

Small section labels align beside a wider column of serif editorial copy, with generous vertical spacing between blocks.

### Portrait image

A single centered photograph appears within the otherwise sparse agency section, without a prominent frame or shadow.

### Inverse footer

A compact near-black closing band contains a serif sign-off and small legal links.

### Measured component styles

- **Link** (“Nicolas Tschaikner↗ Graphic & Web Design”): transparent background · text #181818 · radius 0px · padding 0px · 600 16px HelveticaMd
- **Card** (“about↗”): transparent background · text #000000 · border 1px solid #6e6e6e · radius 0px · padding 0px · 400 10px Times New Roman
- **Navigation item** (“about↗”): transparent background · text #181818 · radius 0px · padding 25px 30px 29px 30px · 400 29px GaramondRg

## Do

- Use #f2f2f2 as the primary canvas.
- Set editorial headlines and prose in a Garamond-style serif.
- Keep labels and prose aligned to a calm left edge.
- Use #6e6e6e sparingly for fine dividing rules.
- Preserve substantial whitespace between content sections.
- Reserve #181818 for strong text contrast and the closing footer.

## Don't

- Do not introduce unmeasured colors into the brand palette.
- Do not add shadows, gradients, or rounded-card styling.
- Do not compress the long-form sections into dense blocks.
- Do not let decorative imagery overpower the typography.
- Do not turn the three-column index into heavily boxed cards.
- Do not style every label as a large, bold sans-serif.

## Agent prompt

Build a new page in Simon Liesinger’s restrained editorial portfolio style. Use Gallery Mist (#f2f2f2) as the main canvas and Soft Ink (#181818) for crisp text and a possible inverse footer; use Quiet Rule (#6e6e6e) only for fine dividers. Favor a Garamond-style serif for expressive headings and prose, with a practical sans-serif for compact labels, links, and contact details. Keep content left-aligned, narrow where appropriate, and surrounded by generous whitespace. Organize index-like content into clearly separated columns with hairline rules, then use small section labels alongside wider prose. Keep imagery sparse and understated, with no shadows, gradients, rounded cards, or decorative UI. Prioritize typography, alignment, and quiet pacing over interface ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Open, full-width light canvas; left-aligned introduction with drawing in the open field and contact links near the bottom. | email link, phone link, scroll cue | serif headline, sparse composition, fine-line illustration |
| 2 | feature-grid | Three-column index divided by thin vertical rules. | linked service items, project and collaborator links | column dividers, serif labels, compact list typography |
| 3 | other | Small section label aligned beside a wider editorial text column. | readable prose | serif body copy, open whitespace |
| 4 | other | Single-column prose area paired with a small label and spacious paragraph breaks. | long-form reading | serif prose, generous paragraph spacing |
| 5 | other | Editorial label-and-copy arrangement with a broad text measure. | informational reading | serif copy, minimal structure |
| 6 | other | Label beside two separated paragraphs in an open text column. | informational reading | serif prose, subtle paragraph rhythm |
| 7 | other | A short text block aligned with the preceding label-and-copy sections. | agency reference | serif body, open surrounding space |
| 8 | gallery | Single centered portrait within a spacious light section. | single image view | unframed photography, minimal treatment |
| 9 | footer | Compact full-width dark band with left-aligned sign-off and small legal links. | privacy link, imprint link | inverse surface, serif heading, small utility text |

## Source CSS custom properties (selected)

```css
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
```

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