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

# Daniel Triendl · Design System

> A quiet canvas for vivid, characterful illustration

**Theme:** light · **Industry:** portfolio · **Source:** https://www.danieltriendl.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 white portfolio canvas lets a large, varied body of illustration take the lead. Compact sans-serif labels and a floating pill navigation keep browsing clear without competing with the artwork.

## North star

Keep the interface quiet, white, and compact so an irregular, colorful illustration grid remains the unmistakable focus.

## Overview

The page keeps its interface nearly colorless: white canvas, black text, and a small amount of soft gray for secondary links and pale UI details. The measured red is a border-color outlier rather than a defining visible brand accent; the vivid yellows, pinks, greens, and blues belong chiefly to the portfolio artwork. A compact sans-serif carries navigation, labels, and project metadata, while a serif display face gives the short introduction a contrasting editorial note. The work is arranged in a long, three-column masonry-like feed whose changing image proportions create rhythm without boxed cards. Small titles and hashtag-like descriptors sit close to each image. Generous page-level breathing room offsets the dense sequence of projects, and rounded floating navigation controls provide the clearest interface layer. The result is quiet and functional around the edges, expressive and varied within the artwork.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and open space between projects; lets artwork colors stand apart. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Primary navigation, project titles, metadata, and body text. |
| Signal Coral | `#fe4e4e` | `--color-signal-coral` | semantic | Measured border color; not a prominent visible page accent. |
| Soft Graphite | `#9b9b9b` | `--color-soft-graphite` | neutral | Muted secondary links and subdued footer or supporting text. |
| Mist Gray | `#f2f2f2` | `--color-mist-gray` | surface | Minor pale interface details and subtle heading or navigation backgrounds. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink Black) · `--color-border` → `#fe4e4e` (Signal Coral)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UniversalSans-425 | `--font-body` | webfont | 400 | Body copy and subdued secondary links | Inter |
| UniversalSans-625 | `--font-universalsans-625` | webfont | 500 | Navigation, captions, and button labels | Inter |
| Rza | `--font-display` | webfont | 400 | Editorial introduction heading | Cormorant Garamond |

- **UniversalSans-425:** Regular weight; compact, lightly tight tracking and sentence case.
- **UniversalSans-625:** Medium weight; tight tracking and restrained sentence case.
- **Rza:** Regular serif display treatment; use as a brief contrast to the sans-serif interface.

### Type scale — Custom (ratio ≈ 1.714, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1.17 | -0.006em | — | Rza | Serif-styled introduction heading in the about block. |
| body | 14px | 400 | 1.21 | -0.01em | — | UniversalSans-425 | Compact sans-serif supporting copy and secondary links. |
| caption | 10px | 500 | 1 | -0.01em | — | UniversalSans-625 | Small, medium-weight project metadata and labels. |
| button | 14px | 500 | 1.21 | -0.01em | — | UniversalSans-625 | Medium-weight labels on navigation controls. |
| nav | 14px | 500 | 1.21 | -0.01em | — | UniversalSans-625 | Medium-weight Explore, Index, Work, About, and Contact labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 5, 7, 8, 9, 10, 12, 16, 18, 20, 24, 46, 68 px.
- Section rhythm 96px · element gap — · card padding — · max content width 1325px.

A long portfolio feed begins below a slim top header, with work arranged in three responsive, staggered columns. The measured page max width is 1325px; preserve broad white margins around the artwork rather than enclosing projects in cards. Image heights and proportions vary, so the grid feels like a curated masonry wall rather than uniform tiles. Place short titles and compact tags directly beneath images. An introduction block and small editorial inserts appear among the work, while a floating pill navigation stays visually distinct from the scrolling gallery.

## Shape & elevation

- Radius: nav `9999px` · xs `4px` · sm `10px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`
- Motion: standard transition `0.46s cubic-bezier(0.17, 0.84, 0.44, 1)` on interactive elements.

The page is predominantly flat, with no visible card system or heavy outlines around artwork. A soft shadow supports the floating rounded navigation control, distinguishing it from the white canvas without creating a strong overlay. Keep layering sparse and avoid adding elevation to individual projects.

## Imagery

Illustration is the defining content: a broad mix of editorial portraits, posters, hand-drawn scenes, graphic abstractions, and client work. Display each piece as its own image with its original vivid palette and varied aspect ratio. Avoid applying a shared color filter or decorative frame; compact project titles and tags provide context without masking the artwork.

## Components

### Top identity header

Small artist mark and Daniel Triendl name sit at the upper left; Explore and Index actions form a pale rounded control at the upper right.

### Artwork tile

Individual illustration displayed at its natural visual proportion, with softly rounded image corners and no enclosing card.

### Project caption

Compact black project title followed by small hashtag-style descriptors directly below the artwork.

### About insert

A brief introduction is embedded within the gallery, pairing a subtle section label with a serif statement and muted follow-up link.

### Floating section navigation

Work, About, and Contact sit in a bottom-centered pill with a soft shadow; the active destination uses a white segment.

### Gallery position indicator

A small pale pill at the gallery edge shows the current position in the work sequence.

### Measured component styles

- **Primary button** (“Close Close”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Times New Roman
- **Link** (“Hildegard Knef #cover #portrait Show pro”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Times New Roman
- **Navigation item** (“Daniel Triendl”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Times New Roman

## Do

- Use white space as the dominant interface surface.
- Let each artwork retain its own colors and proportions.
- Keep project captions compact and directly tied to images.
- Use sans-serif for navigation and metadata.
- Reserve serif typography for short editorial statements.
- Use rounded pills sparingly for navigation controls.

## Don't

- Do not treat illustration colors as a site-wide UI palette.
- Do not wrap every artwork in a bordered or elevated card.
- Do not force every gallery tile into the same aspect ratio.
- Do not enlarge metadata until it competes with the artwork.
- Do not add prominent accent-colored buttons unsupported by the page.
- Do not crowd the canvas with extra interface decoration.

## Agent prompt

Build a portfolio page with a quiet Gallery White (#ffffff) canvas and Ink Black (#000000) interface text. Use a slim identity header, subtle top-right browsing controls, and a long three-column masonry-style illustration feed whose images keep varied proportions and original colors. Keep project titles and hashtag-like metadata small, close to each image, and visually secondary. Use UniversalSans-like sans-serif for navigation, captions, and body copy; introduce a restrained serif only for a short editorial statement. Use Soft Graphite (#9b9b9b) for muted links and Mist Gray (#f2f2f2) only for subtle UI details. Do not make Signal Coral (#fe4e4e) a prominent accent. Keep cards flat, framing minimal, and navigation pills softly elevated rather than turning the gallery into a generic boxed grid.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Three-column, long-form staggered artwork feed with embedded introduction and editorial inserts. | Explore and index browsing, Project titles and tags, Current gallery position | Varied image proportions, Compact captions, Floating pill navigation, White open canvas |

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