---
version: alpha
name: Lorenzo Dal Dosso
description: "Editorial portfolio minimalism: a warm cream canvas with near-black ink, oversized fluid display type (up to 180px) set in a custom grotesque, and a single electric-blue accent reserved for links and interaction. No borders, no shadows; hierarchy comes from scale and whitespace alone."

colors:
  # Canvas + ink
  background: "#fffcf0"
  surface: "#fffcf0"
  ink: "#000310"
  ink-secondary: "#4d4d4d"

  # Accent — interaction only
  primary: "#0033ff"
  link-hover: "#0000ff"

  # Hairlines
  border: "#dadada"

  # On-color
  on-primary: "#fffcf0"
  on-ink: "#fffcf0"

typography:
  display-mega:
    fontFamily: "LDD, 'Space Grotesk', Arial, sans-serif"
    fontSize: 180px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -2px
  display-hero:
    fontFamily: "LDD, 'Space Grotesk', Arial, sans-serif"
    fontSize: 70px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -1px
  section-heading:
    fontFamily: "LDD, 'Space Grotesk', Arial, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading:
    fontFamily: "NeueMontreal-Regular, 'Space Grotesk', Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px
  sub-heading:
    fontFamily: "NeueMontreal-Regular, 'Space Grotesk', Arial, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "NeueMontreal-Regular, 'Space Grotesk', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "NeueMontreal-Regular, 'Space Grotesk', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "NeueMontreal-Regular, 'Space Grotesk', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  micro:
    fontFamily: "NeueMontreal-Regular, 'Space Grotesk', Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 100px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  # Text link — the only place the accent lives
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body}"

  # Primary action — ink fill, cream text
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Accent action
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Ghost / outline action — hairline only
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Top navigation — borderless, scale-driven
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 24px 40px

  # List row — separated by hairline rules
  list-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.sub-heading}"
    padding: 24px 0px
    borderColor: "{colors.border}"

  # Caption / meta label
  meta:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"

  # Eyebrow micro label
  eyebrow:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.micro}"
---

# Lorenzo Dal Dosso Design System

## Overview

Lorenzo Dal Dosso's portfolio is editorial minimalism in its most disciplined form: a single warm canvas, a single ink, a single accent, and type doing nearly all the work. The page sits on a soft cream paper color (`{colors.background}`) rather than pure white, which immediately reads as considered and analog — closer to a printed broadsheet than a SaaS dashboard. Against that warmth, the ink (`{colors.ink}`) is an almost-black with the faintest blue cast, never a flat `#000000`. The result is a surface that feels quiet, expensive, and confident.

The defining gesture is scale. Display type runs enormous — up to 180px, and fluidly larger via `9.375vw` — set in a custom grotesque named "LDD" that gives the name and headlines their identity. Body and supporting copy use Neue Montreal, a clean neo-grotesque, kept at a humble 16–20px so the contrast between the two registers (giant headline / modest paragraph) carries the entire hierarchy. There is no decorative furniture: no cards, no drop shadows, no rounded chrome. Separation is achieved with whitespace and the occasional hairline rule (`{colors.border}`).

Color is used as punctuation, not decoration. The electric blue (`{colors.primary}`) appears only on links and interactive elements — it is the one moment of saturation on an otherwise monochrome page, and it earns attention precisely because it is rationed. Secondary copy and metadata drop to a muted gray (`{colors.ink-secondary}`), keeping the document legible without competing with the headline type.

This is a system that trusts typography and restraint. Everything that could be a border, a fill, or a shadow has been removed; what remains is paper, ink, scale, and one blue accent.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of pure white — analog, editorial feel
- Near-black ink (`{colors.ink}`) with a faint blue cast, never flat black
- Oversized fluid display type up to 180px / `9.375vw` in the custom "LDD" grotesque
- Neue Montreal body kept small (16–20px) so scale contrast carries hierarchy
- A single electric-blue accent (`{colors.primary}`) reserved exclusively for links/interaction
- No shadows, no card chrome — hairline rules (`{colors.border}`) and whitespace only
- Sharp, squared corners throughout (`{rounded.none}`)

## Colors

### Canvas & Ink
- **Cream Paper** (`{colors.background}`): The page and surface color. Warm off-white that anchors the editorial mood.
- **Near Black** (`{colors.ink}`): Primary text, headlines. An almost-black with a faint blue undertone, not `#000000`.
- **Muted Gray** (`{colors.ink-secondary}`): Secondary copy, metadata, captions.

### Accent
- **Electric Blue** (`{colors.primary}`): Links and interactive elements — the only saturated color on the page.
- **Link Hover** (`{colors.link-hover}`): Pure-blue hover deepening for links.

### Hairlines
- **Border Gray** (`{colors.border}`): Thin divider rules between list rows and sections.

### On-Color
- **On Primary** (`{colors.on-primary}`): Cream text on the blue accent fill.
- **On Ink** (`{colors.on-ink}`): Cream text on the ink fill.

## Typography

### Font Family
- **Display**: `LDD` — a custom grotesque for the name and headlines. Closest web/Google substitute: **Space Grotesk**.
- **Text**: `NeueMontreal-Regular` — a clean neo-grotesque for body and supporting copy. Closest Google substitute: **Space Grotesk**.
- **Weights**: only 400 (text) and 700 (display) are used — a strict two-weight system.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-mega}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-mega` | 180px name / hero billboard, maximum scale |
| `display-hero` | 70px primary headline |
| `section-heading` | 60px section titles |
| `heading` | 40px Neue Montreal sub-headings |
| `sub-heading` | 30px list-row titles |
| `body-large` | 20px lead paragraphs |
| `body` | 16px standard reading + links |
| `caption` | 12px metadata |
| `micro` | 10px eyebrows / labels |

### Principles
- **Scale is the hierarchy**: the leap from 16px body to 180px display does the structural work no border or color would.
- **Two weights only**: 400 for everything readable, 700 for display. No semibold middle ground.
- **Fluid display**: headlines scale with the viewport (`9.375vw`, `calc(...vw...)`) so the billboard impact survives across widths.
- **Body stays humble**: Neue Montreal never grows large or bold — it is the quiet counterweight to the giant grotesque.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous, with large jumps (`{spacing.3xl}` 100px, `{spacing.4xl}` 160px) for the wide editorial gutters between sections.

### Grid & Container
- Single-column, left-aligned editorial flow
- Wide margins; content breathes against the cream canvas
- List sections separated by full-width hairline rules (`{colors.border}`)

### Whitespace Philosophy
- **Paper, not panels**: there are no cards or boxes — sections float on the cream field, divided only by space and thin rules.
- **Big type, big air**: oversized headlines are counterbalanced by generous vertical spacing so nothing feels crowded.
- **Rationed accent**: blue appears only where you can act; everywhere else is ink-on-cream calm.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, containers — squared, editorial |
| `xs` | 2px | Rare small softening |
| `sm` | 4px | Minor UI elements |
| `pill` | 9999px | Reserved for any pill tag/toggle |

Corners are essentially square across the system — the sharp edges reinforce the printed, editorial character.

## Components

The full component spec lives in the `components:` token block above.

### Links
- **`link`** — Electric blue (`{colors.primary}`), the only accented element. Deepens to pure blue (`{colors.link-hover}`) on hover.

### Buttons
- **`button-primary`** — Ink fill, cream text, squared corners.
- **`button-accent`** — Blue fill, cream text, for emphasis.
- **`button-ghost`** — Transparent with a single `{colors.border}` hairline.

### Navigation
- **`nav-bar`** — Borderless, sits on the cream canvas; relies on type and spacing, not chrome.

### Lists
- **`list-row`** — Editorial rows separated by `{colors.border}` hairlines, titled in `{typography.sub-heading}`.

### Meta
- **`meta`** / **`eyebrow`** — Muted gray small/micro labels for metadata and section eyebrows.

## Do's and Don'ts

### Do
- Keep the canvas warm cream (`{colors.background}`), not pure white
- Use `{colors.ink}` (faint-blue near-black), never `#000000`
- Push display type as large as the layout allows — scale is the identity
- Reserve `{colors.primary}` blue strictly for links and interaction
- Use only the two weights: 400 text, 700 display
- Separate sections with whitespace and hairline rules, not boxes

### Don't
- Don't add drop shadows or card chrome — the page is flat by design
- Don't round corners heavily — keep them squared
- Don't use the blue accent decoratively
- Don't introduce a third typeface or extra weights
- Don't shrink the display type — losing scale loses the identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Display type scales via vw; single column, tight margins |
| Tablet | 600–1024px | Headlines grow; wider gutters |
| Desktop | >1024px | Full 180px display scale, maximum whitespace |

### Collapsing Strategy
- Display headlines are fluid (`9.375vw`, `calc(...vw...)`) so they shrink gracefully on small screens while keeping billboard presence
- Navigation simplifies to a minimal set of links
- List rows stack full-width with their hairline dividers intact
- Section spacing compresses from 160px toward ~64px on mobile

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lorenzo Dal Dosso. Brand names and trademarks belong to their respective owners.