# Lorenzodaldosso It · Design system migration spec

> Source: https://www.lorenzodaldosso.it  ·  Curated by OpenDesign  ·  en

> The site is worth including as a prime example of typography-driven portfolio design that achieves high impact through extreme scale and strict visual restraint.

## 1. Identity DNA

This portfolio operates on a principle of typographic conviction, where the scale of a single headline carries the weight of a full visual system. It is a minimalist tech portfolio that uses oversized typography and monochromatic constraints to convey precision, much like a single, perfectly machined component defines the engineering of a complex machine.

**One-liner:** Minimalist IT specialist portfolio featuring massive display typography and a strict monochromatic palette.
**Keywords:** Professional · Technical · IT Specialist · Clean · Bold
**Analogy:** A minimalist tech portfolio that uses oversized typography and monochromatic constraints to convey precision.

## 2. Color

The color system is one of absolute restraint, employing a strict high-contrast monochromatic palette. A deep near-black is set against a warm off-white, creating a stark canvas where every typographic decision is amplified.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFCF0` | main background |
| `--ink` | `#000310` | body text |
| `--muted` | `#545454` | placeholder |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** Strict high-contrast monochromatic palette using a deep near-black on a warm off-white.

The principle is clear: remove color as a variable to let form and weight dictate the entire hierarchy.

## 3. Typography

Type here is not merely a carrier of information but the primary structural element. The voice is defined by massive display headings and large numeric counters, set in bold, geometric treatments that dominate the viewport.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 135px | 1.0 | 400 | 0px | Massive display headings and large numeric counters |
| body | 14px | 1.4 | 400 | 0px | Body text and navigation elements |

## 4. Spacing

Rhythm is established through generous horizontal padding and deliberate vertical separation, creating clear breathing room for the oversized typographic forms.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous horizontal padding (57.6px) and clear vertical separation.

## 5. Surfaces

Depth is suggested with minimal intervention, using a single, diffuse shadow value sparingly. Borders are reduced to occasional 1px horizontal dividers, acting as subtle calipers rather than containers.

- **Radius:** sm 4px · md 8px · lg 32px · pill 999px
- **Shadows:**
  - 0px 8px 48px 0px rgba(0, 0, 0, 0.15)
- **Borders:** 1px solid borders are used sparingly, primarily for horizontal dividers.

## 6. Layout

The skeletal layout is anchored by full-width display typography, its gravity centered along a horizontal dividing line. This structure forgoes conventional grids in favor of a typographic axis.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width display typography anchored by a central horizontal dividing line.

## 7. Motion & Interaction

Motion is applied with deliberation, using smooth, extended transform animations. Governed by a custom easing curve, the 1.4-second durations prioritize a refined, measured feel over quick reactivity.

- **Durations:** micro 220ms · small 400ms · medium 1400ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth transform animations with a 1.4s duration and custom easing.

- **Hover:** Standard pointer cursor indicating interactive elements.
- **Click:** Standard click interactions on navigation and interactive elements.
- **Transition:** Global transitions applied across elements for smooth state changes.
- **Keyboard:** Standard keyboard navigation focus states.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and slightly playful, mirrored in the boldness of the headline style and the clarity of the CTAs. This system deliberately avoids decorative distractions and the comfort of standard components.

- **Tone:** Direct, professional, and slightly playful.
- **Headline style:** Extremely large, sentence-case typography with bold or custom geometric treatments.
- **CTA style:** Clear, action-oriented text on high-contrast pill buttons.
- **Avoid:** Avoid decorative elements that distract from the core typography. / Avoid bright, multi-colored palettes. / Avoid small, cramped text layouts. / Avoid standard grid-based card components.

### Don'ts
- ❌ Don't use a multi-color palette — screenshot shows strict black, off-white, and gray.
- ❌ Don't use small display sizes — screenshot shows display text dominating the viewport.
- ❌ Don't use sharp rectangular buttons — screenshot shows pill-shaped buttons with large radii.
- ❌ Don't use complex decorative icons — screenshot shows pixelated geometric shapes and numbers.
- ❌ Don't use standard centered hero layouts — screenshot shows massive left-aligned display text.
- ❌ Don't use heavily shadowed elements — screenshot shows a mostly flat aesthetic with minimal elevation.

It is defined as much by what it excludes—multi-color palettes, small text, and complex cards—as by what it includes.

## System Prompt (paste into AI tool)

```
This is a minimalist IT specialist portfolio site characterized by massive, dominant display typography and a strict monochromatic palette of deep near-black (#000310) and warm off-white (#FFFCF0). The layout relies heavily on oversized text and generous whitespace to convey technical precision. Key critical donts: never use a multi-color palette, never use small display typography, and never use standard rectangular UI components. The design DNA is defined by its bold restraint and typographic expression.
```