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

# Max Yinger · Design System

> Quiet canvas, expressive type, live interaction.

**Theme:** dark · **Industry:** portfolio · **Source:** https://yinger.dev/ · **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 dark, single-screen portfolio introduces UI engineer Max Yinger through oversized typography, a live local-time display, and compact social links. Its restrained palette and generous negative space make the page feel more like an interactive art direction study than a conventional résumé.

## North star

Keep the page nearly empty and let warm monochrome typography, precise alignment, and small live interface details carry the identity.

## Overview

The page is built on a nearly black olive canvas (#12130f), with warm off-white (#e4dfda) carrying nearly all visible text. A muted charcoal hairline (#3c3c38) outlines the small pill-shaped social controls without introducing a competing accent colour. The palette stays deliberately narrow: the centered segmented indicator and the bold YINGER wordmark use the same pale tone, while the screen remains mostly empty. Typography does the expressive work. A custom display face gives the wordmark and time readout a compact, mechanical character; a contrasting face sets the introductory statement in larger, softer lines; a technical face handles tiny uppercase metadata. Layout anchors the logo at upper left, a small indicator at center, and the time, introduction, and location details near the lower left, balanced by a vertical social-link stack on the right. The result feels sparse, precise, and quietly interactive rather than card-based.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Olive Night | `#12130f` | `--color-olive-night` | brand | Dominant full-page canvas; preserve its near-black olive cast rather than using pure black. |
| Warm Chalk | `#e4dfda` | `--color-warm-chalk` | neutral | Primary text, wordmark, time display, and the brightest segments of the central indicator. |
| Soft Graphite | `#3c3c38` | `--color-soft-graphite` | neutral | Fine dashed outlines around social pills and subtle outlines on small interface details. |

### Semantic aliases

`--color-canvas` → `#12130f` (Olive Night) · `--color-text` → `#e4dfda` (Warm Chalk) · `--color-text-muted` → `#12130f` (Olive Night) · `--color-border` → `#3c3c38` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e4dfda` | `#12130f` | 14.09:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __arbeitTechnik_77487a | `--font-arbeittechnik-77487a` | webfont | 400 | Small uppercase technical labels, social links, and compact metadata. | Roboto Mono |
| __arbeitContrast_bf3c9f | `--font-body` | webfont | 400 | Introductory statement and the main text-led description. | DM Sans |
| __inlineVF_e236f6 | `--font-display` | webfont | 400 | Oversized display lettering, including the wordmark and clock digits. | Bebas Neue |

- **__arbeitTechnik_77487a:** Regular weight; tiny uppercase labels and tightly composed interface text.
- **__arbeitContrast_bf3c9f:** Regular weight with sentence case; large lines remain open and readable.
- **__inlineVF_e236f6:** Use for compact, bold-looking display forms; keep the measured regular weight.

### Type scale — Custom (ratio ≈ 2.229, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 79.5px | 400 | 0.8 | 0 | — | __inlineVF_e236f6 | Wordmark and prominent clock numerals. |
| h1 | 30.5px | 400 | 1.13 | 0 | — | __arbeitContrast_bf3c9f | Primary introductory statement near the lower-left area. |
| body | 16px | 400 | 1.25 | 0 | — | __arbeitContrast_bf3c9f | Supporting sentence text and portfolio introduction. |
| caption | 11.5px | 400 | 1.25 | 0 | — | __arbeitTechnik_77487a | Local-time label, location details, and social-link text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 64 px.
- Section rhythm 64px · element gap 4px · card padding — · max content width 1320px.

A single, full-viewport composition rather than a conventional scroll of cards. Keep the content within the measured 1320px maximum width, with the wordmark high at the left, a small segmented indicator centered in the canvas, and the main information grouped at the lower left. A narrow social stack sits on the right as a counterweight. The layout is one column in content structure, but uses opposing left and right anchors. Preserve broad negative space and a comfortable, sparse density; the measured section rhythm is 64px.

## Shape & elevation

- Radius: button `9999px` · link `4px` · xs `2px` · sm `4px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is essentially flat, with no measured shadows or gradients. Use the canvas as a continuous field and rely on text contrast, negative space, and fine dashed borders for separation. Social controls are outlined pills, not filled buttons or elevated cards; keep layering minimal and avoid adding panels.

## Imagery

The screenshot shows no photography, video, or conventional illustration. The page’s visual interest comes from typography and a tiny segmented loading-style indicator centered in the empty canvas. Treat the YINGER mark and indicator as graphic interface elements, not as a cue to add stock imagery or decorative artwork. Keep the screen still and spacious, with any live details remaining small and integrated into the layout.

## Components

### Wordmark

A large warm off-white YINGER mark at the upper left; treat it as a distinctive typographic graphic.

### Segmented indicator

A small, centered row of dark-to-light rectangular segments, enclosed by a subtle outline.

### Live clock

Prominent display numerals near the lower left, paired with a small uppercase local-time caption and compact am/pm indicators.

### Intro statement

A large, regular-weight text block beside or following the clock, describing the engineer’s focus on realtime 3D, interaction, and performance.

### Location metadata

Tiny uppercase technical text below the introduction, presenting Fort Collins, Colorado and a short role credit.

### Social links

A vertical group of compact labels at the right edge, styled as warm off-white text inside fine dashed charcoal pill outlines.

### Measured component styles

- **Primary button** (“Github Github”): transparent background · text #e4dfda · border 1px dashed #3c3c38 · radius 9999px · padding 4px 12px · 400 11.5798px __arbeitTechnik_77487a
- **Link** (“US OF A”): transparent background · text #e4dfda · radius 4px · padding 0px · 400 11.5798px __arbeitTechnik_77487a · uppercase

## Do

- Use #12130f as the uninterrupted dominant canvas.
- Reserve #e4dfda for primary text and the brightest display details.
- Use #3c3c38 only for subtle outlines and interface edges.
- Keep large areas of empty space around the central indicator.
- Anchor the wordmark upper left and the social links to the right.
- Use the technical face for small uppercase metadata.

## Don't

- Do not add colorful accent colours or gradients.
- Do not fill the page with cards, panels, or decorative imagery.
- Do not center the entire composition vertically or symmetrically.
- Do not replace the warm near-black canvas with pure black.
- Do not enlarge metadata until it competes with the main statement.
- Do not use heavy shadows or raised button treatments.

## Agent prompt

Build a new portfolio page in Max Yinger’s restrained, experimental visual style. Use Olive Night (#12130f) as a continuous full-page canvas, Warm Chalk (#e4dfda) for primary typography and key display details, and Soft Graphite (#3c3c38) for fine dashed outlines. Create a spacious single-viewport composition with a distinctive wordmark at the upper left, a tiny segmented graphic around the center, and the main statement and live-style metadata grouped near the lower left; balance it with a compact vertical link stack on the right. Use a bold, narrow display face for short marks and numerals, a contrasting clean face for the introduction, and a technical mono-style face for labels. Avoid cards, shadows, gradients, photos, and extra accent colours. Let typography, alignment, and negative space provide the visual character.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single full-viewport composition with upper-left wordmark, centered indicator, lower-left introduction, and right-aligned social links. | Live local-time readout, Direct social navigation | Monochrome typography, Dashed pill links, Centered segmented indicator |

## Source CSS custom properties (selected)

```css
--user-agent-color: #2f9c95;
```

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