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

# Lorenzo Dal Dosso · Design System

> A quiet canvas for oversized, pixel-cut typography.

**Theme:** light · **Industry:** portfolio · **Source:** https://lorenzodaldosso.it/ · **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 portfolio homepage built around an ivory canvas, oversized black lettering, and thin section dividers. Pixel-like cutouts in the wordmark and service marquee add a distinctive digital signature.

## North star

Keep the warm canvas and thin rules quiet so oversized, pixel-notched typography carries the identity.

## Overview

The page uses a warm off-white canvas (#fffcf0) as a nearly continuous background, giving its large, near-black typography (#000310) room to dominate. A hairline gray (#595959) divider separates the masthead, introductory progress panel, and oversized service marquee without introducing card-like blocks. The wordmark and service names are the main visual assets: custom-looking geometric lettering is interrupted by checkerboard or pixel-cut details, while the rest of the interface stays quiet and legible. Small navigation labels sit at the top edge, with the large centered name below them. The hero’s numbered endpoints and thin progress track create a structured, horizontal composition. Typography is deliberately contrast-led: extremely large display text against tiny utility labels. Spacing feels open and section-based rather than modular; content spans broadly across the viewport, and the marquee is visibly cropped at the edges. There is no prominent photography or decorative color system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fffcf0` | `--color-gallery-ivory` | surface | Page canvas throughout; the warm near-white field supports the sparse, typography-led composition. |
| Midnight Ink | `#000310` | `--color-midnight-ink` | brand | Primary wordmark, oversized display lettering, headings, and the dark progress-track fill. |
| Soft Graphite | `#595959` | `--color-soft-graphite` | semantic | Muted utility text and understated hairline dividers between horizontal page bands. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Small navigation or consent-interface text and button surfaces; not a dominant page color. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Black text in the small privacy-control interface; a peripheral utility color, not the main brand ink. |

### Semantic aliases

`--color-canvas` → `#fffcf0` (Gallery Ivory) · `--color-surface` → `#000310` (Midnight Ink) · `--color-text` → `#000310` (Midnight Ink) · `--color-text-muted` → `#595959` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#595959` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000310` | `#fffcf0` | 20.02:1 | AAA |
| `#595959` | `#fffcf0` | 6.82:1 | AA |
| `#595959` | `#000310` | 2.94:1 | fail |
| `#ffffff` | `#fffcf0` | 1.03:1 | fail |
| `#ffffff` | `#000310` | 20.58:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| LDD | `--font-display` | webfont | 400 | Oversized display wordmark, service marquee, and large hero numerals. | Space Grotesk |
| NeueMontreal-Regular | `--font-neuemontreal-regular` | webfont | 400 | Small navigation labels and compact captions. | Inter |
| -apple-system | `--font-body` | system | 700 | Bold body copy, small buttons, and compact link or privacy-control text. | Inter |

- **LDD:** Regular weight with very large, clean forms; capitalize display text and preserve pixel-cut letter details where present.
- **NeueMontreal-Regular:** Regular weight, restrained utility styling, and capitalization for navigation labels; keep labels visually subordinate.
- **-apple-system:** Bold utility text with no tracked-out lettering; keep it small relative to the display typography.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 135px | 400 | 2.22 | 0 | capitalize | LDD | Oversized name, service words, and prominent hero numerals. |
| body | 14px | 700 | 2.71 | 0 | — | -apple-system | Short introductory statement and compact explanatory text. |
| caption | 12px | 400 | 1 | 0 | — | NeueMontreal-Regular | Small supporting labels and secondary interface copy. |
| button | 10px | 700 | 1 | 0 | — | -apple-system | Compact consent or utility controls. |
| nav | 12px | 400 | 1 | 0 | capitalize | NeueMontreal-Regular | Top-edge navigation and version labels. |
| link | 10px | 700 | 1 | 0 | — | -apple-system | Small utility links and interactive text. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 5, 10, 15, 16, 30, 35, 58 px.
- Section rhythm 58px · element gap 3px · card padding — · max content width 864px.

A broad, centered composition organized into horizontal bands, with a measured page maximum width of 864px. The masthead places tiny navigation at the upper edge and a large centered wordmark beneath it. Thin rules divide the title area from the introduction/progress strip and the service marquee. The hero uses widely separated numbered endpoints around a central progress line and short caption. Large marquee lettering runs beyond the viewport edges, while small utility text remains sparse. Comfortable spacing and low content density keep the typographic elements prominent.

## Shape & elevation

- Radius: button `4px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px`
- Motion: standard transition `2s ease-out` on interactive elements.

The page is predominantly flat, with no card stack or visible depth effects. Thin gray rules provide the main separation between content bands, while the progress track is outlined rather than raised. A subtle hairline shadow is measured on a small consent control only; do not use broad shadows or layered panels.

## Imagery

No photography, product imagery, or illustration is visible in the measured first viewport. The visual interest comes from typographic forms and the checkerboard-like cutouts integrated into the logo and service words. Keep the presentation flat and graphic; avoid adding decorative images or mockups that would compete with the wordmark and scrolling service text.

## Components

### Top navigation

Tiny utility labels sit at the left, center, and right edges of the masthead, including menu, version, and contact links.

### Oversized wordmark

A large centered name dominates the first band; selected letters contain pixel-like checkerboard cutouts.

### Progress introduction

A short centered statement sits above a thin outlined horizontal track, with large numbered markers at opposite ends.

### Section dividers

Fine gray horizontal rules separate the masthead, progress area, and service marquee without enclosing content in cards.

### Service marquee

Large black service words run horizontally across the canvas, separated by centered dots and clipped at viewport edges.

### Privacy utility

Small consent and privacy controls appear near the lower portion of the page, remaining visually secondary.

### Measured component styles

- **Primary button** (“Your consent preferences for tracking te”): background #ffffff · text #000000 · radius 4px · padding 0px · 700 14px -apple-system · shadow rgba(0, 0, 0, 0.15) 0px 0px 0px 1px
- **Link** (“Support”): transparent background · text #000310 · radius 0px · padding 0px · 400 135px LDD · capitalize
- **Navigation item** (“Menu Close”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12px NeueMontreal-Regular

## Do

- Use #fffcf0 as the uninterrupted warm canvas.
- Let #000310 oversized typography lead the composition.
- Separate major horizontal bands with thin #595959 rules.
- Keep navigation and utility labels very small and unobtrusive.
- Use pixel-cut details sparingly within prominent lettering.
- Allow the service marquee to extend and crop beyond viewport edges.

## Don't

- Do not add bright accent colors or gradients.
- Do not turn the layout into a card grid.
- Do not add prominent photography or decorative illustrations.
- Do not use heavy shadows or layered panels.
- Do not crowd the open space with explanatory copy.
- Do not make utility controls compete with the wordmark.

## Agent prompt

Build a new portfolio page in Lorenzo Dal Dosso’s restrained typographic style. Use Gallery Ivory (#fffcf0) as the page canvas and Midnight Ink (#000310) for the main wordmark, headings, and oversized display text. Reserve Soft Graphite (#595959) for muted labels and thin horizontal dividers; keep Paper White (#ffffff) and Pure Black (#000000) confined to small utility controls. Organize content as broad horizontal bands with generous breathing room, tiny edge-aligned navigation, a centered oversized title, and a compact progress or introductory strip. Use large, regular geometric sans-serif display lettering and small quiet utility text. Add subtle pixel-cut typographic details only where they reinforce the identity. Keep the page flat, avoid prominent imagery, cards, gradients, and heavy shadows, and let large marquee text crop at the viewport edges.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Horizontal masthead, centered oversized wordmark, numbered progress strip, then a viewport-cropped service marquee. | Edge-aligned navigation, Progress indicator, Scroll invitation | Pixel-cut wordmark, Thin horizontal dividers, Oversized service marquee |

## Source CSS custom properties (selected)

```css
--c-text: #000310;
--c-background: #fffcf0;
--swiper-theme-color: #007aff;
```

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