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

# Linus Rogge · Design System

> A quiet portfolio framed by a strip of work.

**Theme:** light · **Industry:** portfolio · **Source:** https://linusrogge.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 sparse personal portfolio introduces Linus Rogge with a compact text block and a long row of project imagery. Monospaced black text and a white canvas keep the visual emphasis on the work rather than interface decoration.

## North star

Keep the interface nearly invisible: plain black monospace text on white, with project imagery carrying the visual variety.

## Overview

The page uses a pure white canvas and black text as its entire measured brand palette. That restraint makes the small identity block feel almost like a plain text note, while the vivid colors in the image strip read as project-specific content rather than interface accents. Fragment M is used consistently for the name, role, links, and the small [i] control; the compact monospaced setting gives the page a utilitarian, carefully composed tone. The layout is intentionally sparse: a narrow, left-aligned introduction sits near the upper-left, with a tiny circular image at the opposite corner and a horizontal ribbon of thumbnails near the bottom of the viewport. The thumbnail row supplies nearly all the page’s visual variety. Avoid adding decorative color, cards, borders, or oversized headings; the contrast between expansive white space, terse text, and tightly grouped imagery is the defining strategy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and the expansive open space surrounding the introduction and project imagery. |
| Ink | `#000000` | `--color-ink` | neutral | Name, role description, social links, and the small information control. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Fragment M | `--font-body` | webfont | 400 | Identity text, role, links, and small interface labels | IBM Plex Mono |

- **Fragment M:** Use the measured regular weight throughout; keep text compact, sentence case, and unembellished.

### Type scale — Major Third (ratio ≈ 1.25, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 12px | 400 | 1.33 | 0 | — | Fragment M | Compact introduction and role description |
| button | 12px | 400 | 1.33 | 0 | — | Fragment M | Small [i] information control |
| link | 12px | 400 | 1.33 | 0 | — | Fragment M | Email and external profile links |

OpenType features in use: `"calt", "ss02", "ss05", "ss06"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 10, 32, 40 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width 1424px.

A single, open canvas holds a left-aligned introduction near the upper-left and a small circular image at the upper-right. A narrow horizontal strip of project thumbnails sits close to the bottom of the first viewport, leaving a large uninterrupted gap between text and images. The measured page max width is 1424px, with a compact density and 32px section gap. Preserve the asymmetry and broad negative space rather than imposing a conventional centered grid.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is flat: measured data shows no shadows, card styling, gradients, or decorative borders. Keep the page on one white plane and avoid adding layers around the project images. The images themselves provide the only noticeable visual depth and tonal variation.

## Imagery

A compact, edge-to-edge-feeling row of small rectangular project thumbnails is the main visual content. The images vary in subject and color, including architectural, object, and atmospheric scenes; keep them as unframed photographic crops in a consistent horizontal sequence. A tiny circular image appears near the upper-right. Treat image colors as portfolio content, not as brand palette.

## Components

### Identity block

Left-aligned name followed by a concise role line, set in regular 12px Fragment M.

### External links

Email and profile destinations appear as plain black text links without button treatment.

### Project thumbnail strip

A tight horizontal sequence of rectangular project images anchors the lower part of the viewport.

### Information control

A small [i] label appears directly beneath the image strip, using black 12px monospace text.

### Corner image

A tiny circular image sits at the upper-right, balancing the text block without a visible frame.

### Measured component styles

- **Primary button** (“[i]”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Fragment M
- **Link** (“SPACING”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Fragment M

## Do

- Use white as the uninterrupted page canvas.
- Set interface text in a compact monospace face.
- Keep the introduction left-aligned and concise.
- Use project images as the primary source of color.
- Preserve generous empty space between content groups.
- Keep links plain and black.

## Don't

- Do not introduce accent colors into interface elements.
- Do not enlarge the identity into a display headline.
- Do not wrap thumbnails in cards or frames.
- Do not add shadows, gradients, or ornamental borders.
- Do not center the composition or fill its empty space.
- Do not mistake image colors for brand palette colors.

## Agent prompt

Build a new page in the Linus Rogge portfolio style. Use Gallery White (#ffffff) as a broad, flat canvas and Ink (#000000) for all interface text and links. Use a compact regular-weight monospace such as Fragment M, or IBM Plex Mono if unavailable. Arrange a short, left-aligned identity or page introduction near the upper-left, with secondary links as plain text. Leave substantial negative space, then place a horizontal strip of consistently cropped project imagery near the lower edge. Let the images provide the color; do not create interface accents from their palette. Keep the layout asymmetric and sparse, with no cards, shadows, gradients, decorative rules, or oversized headings. Maintain small, utilitarian controls and understated interaction labels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Sparse single canvas with an upper-left text block, upper-right circular image, and bottom-aligned thumbnail strip. | plain-text profile links, project thumbnails | monospace text, white space, unframed image strip |

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