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

# Niccolò Miranda · Design System

> A tactile paper portfolio led by expressive type.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.niccolomiranda.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 one-page designer portfolio styled like an oversized printed editorial spread, with warm paper tones, dramatic condensed typography, and a tightly composed grid. Illustrated portraits, project previews, awards, testimonials, and contact links unfold as parts of one continuous visual story.

## North star

Treat the page as a single printed editorial spread: let oversized type, warm paper, and an asymmetric grid do the work.

## Overview

The page is built around a warm, uninterrupted paper-colored canvas (#cdc6be) and near-black ink (#1d1d1b), with black hairlines and restrained gray dividers organizing the spread rather than creating decorative UI. Canopee supplies the oversized, tightly tracked, uppercase display voice; Editorial New provides lighter, readable supporting copy and navigation. The typography is the dominant graphic device: words become blocks, captions sit close to imagery, and large display panels alternate with compact editorial details. A broad, asymmetrical grid brings project thumbnails, short descriptions, portraits, awards, testimonials, and calls to action into a continuous horizontal-print sensibility. Portraits and project artwork add richer colors, but those colors belong to the media, not the core palette. Generous canvas around dense content preserves the feel of a considered magazine layout. Borders remain crisp and mostly flat, with only subtle card shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#1d1d1b` | `--color-deep-ink` | brand | Primary text, navigation, headline panels, and dark project frames against the warm canvas. |
| Warm Paper | `#cdc6be` | `--color-warm-paper` | surface | Dominant page canvas and the consistent paper-like field behind the portfolio. |
| Print Black | `#000000` | `--color-print-black` | neutral | Crisp card and media outlines; use sparingly for strong editorial separation. |
| Soft Stock | `#e2dedb` | `--color-soft-stock` | surface | Pale media or inset surface; secondary to the canvas and not a defining section band. |
| Muted Graphite | `#75726d` | `--color-muted-graphite` | semantic | Subdued link and navigation details, including the fine outline around a rounded work link. |

### Semantic aliases

`--color-canvas` → `#cdc6be` (Warm Paper) · `--color-surface` → `#1d1d1b` (Deep Ink) · `--color-surface-2` → `#e2dedb` (Soft Stock) · `--color-text` → `#1d1d1b` (Deep Ink) · `--color-border` → `#000000` (Print Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1b` | `#cdc6be` | 9.98:1 | AAA |
| `#1d1d1b` | `#e2dedb` | 12.63:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Editorial New | `--font-body` | webfont | 300 | Light body copy, captions, navigation, and conversational text. | Cormorant Garamond |
| Canopee | `--font-display` | webfont | 400 | Oversized display lettering, section headlines, and uppercase text links. | Bodoni Moda |

- **Editorial New:** Use a light editorial weight; keep sentence case for prose and avoid overpowering the display type.
- **Canopee:** Use dramatic high-contrast serif forms, tight negative tracking, and frequent uppercase treatment.

### Type scale — Custom (ratio ≈ 1.911, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 446.5px | 400 | 0.65 | -0.05em | uppercase | Canopee | Oversized uppercase wordmarks and full-width typographic panels. |
| h1 | 122.5px | 400 | 0.78 | -0.05em | uppercase | Canopee | Primary portfolio identity and the most prominent display heading. |
| h2 | 86.5px | 300 | 1.33 | -0.04em | — | Editorial New | Large, lighter editorial statements and supporting section introductions. |
| h3 | 72px | 400 | 1 | -0.045em | uppercase | Canopee | Uppercase section headlines and prominent project or service labels. |
| h4 | 65px | 400 | 1 | -0.05em | uppercase | Canopee | Smaller uppercase subheads and editorial callouts. |
| body | 17.5px | 300 | 1.25 | -0.01em | — | Editorial New | Project descriptions, biography, and portfolio narrative. |
| caption | 16px | 300 | 1.11 | 0 | — | Editorial New | Compact image notes, award labels, and supporting metadata. |
| nav | 17.5px | 300 | 1.25 | -0.01em | — | Editorial New | Light-weight site navigation and project text links. |
| link | 21.5px | 400 | 1 | -0.029em | uppercase | Canopee | Uppercase social and action links in the display face. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 3, 4, 7, 10, 12, 14, 17, 29, 36, 43, 65, 115 px.
- Section rhythm 43px · element gap 43px · card padding 41px · max content width 1382px.

Use a broad, centered editorial canvas with a measured maximum width of 1382px. Arrange content in an asymmetric multi-column grid, mixing full-width typographic panels with narrow copy columns, image blocks, and compact metadata. Align thin vertical and horizontal rules to the grid. The page feels spacious overall, but individual spreads can be dense: keep captions close to images and let large display text provide visual pauses. Maintain a measured 43px section and element rhythm where applicable.

## Shape & elevation

- Radius: card `12px` · nav `3px` · link `9999px` · xs `3px` · sm `7px` · md `12px` · pill `9999px`
- Shadow `sm` (card): `rgba(29, 29, 27, 0.2) -4px 4px 6px 0px`
- Shadow `sm-2` (card): `rgba(29, 29, 27, 0.2) -5px 3px 6px 0px`

The visual system is mostly flat, like printed matter. Use thin, dark rules to divide columns and define media edges; selected quote cards have a measured 12px corner radius and subtle near-black shadows. Keep layering restrained, letting image crops and oversized type establish hierarchy instead of floating panels.

## Imagery

Use project previews and illustrated self-portraits as editorial content, not as generic decorative backgrounds. Crop images into clear rectangular frames and let their color and subject matter contrast with the restrained paper-and-ink palette. Artwork may be vivid or richly shaded; keep surrounding interface colors quiet. The page mixes artwork, project imagery, and image-led portfolio previews.

## Components

### Editorial project preview

A rectangular project image sits beside or above a compact uppercase title and short Editorial New description, separated from neighboring content by fine rules.

### Display wordmark panel

A wide near-black rectangle carries enormous Canopee uppercase lettering, creating a high-impact typographic break in the paper-colored page.

### Portrait feature

Large illustrated portrait crops pair with bold uppercase role statements and smaller biography copy in an asymmetric editorial arrangement.

### Circular work link

A rounded all-work link uses dark type, a muted gray outline, and a restrained outline treatment rather than a filled button.

### Testimonial cards

Compact quote cards use near-black copy, dark borders, measured 12px rounding, and subtle shadows while staying visually integrated with the page.

### Awards strip

A horizontal row of award labels and prominent counts is organized by fine rules and strong typographic contrast.

### Footer contact line

A large editorial contact statement pairs with a dark Email Me treatment and a compact utility-link row.

### Measured component styles

- **Primary button** (“Email Me”): background #1d1d1b · text #1d1d1b · radius 0px · padding 7.2px 11.5px 11.5px 11.5px · 300 30.96px Editorial New
- **Link** (“TWITTER”): transparent background · text #1d1d1b · radius 0px · padding 0px · 400 21.6px Canopee · uppercase
- **Card** (““Blurring the line between design & dev,”): transparent background · text #1d1d1b · border 2px solid #000000 · radius 11.52px · padding 36px 43.2px 43.2px 43.2px · 300 30.96px Editorial New · shadow rgba(29, 29, 27, 0.2) -4px 4px 6px 0px
- **Navigation item** (“The Books of Ye is a conceptual NFT web ”): transparent background · text #1d1d1b · radius 0px · padding 0px · 300 30.96px Editorial New

## Do

- Keep the warm paper canvas and near-black ink as the dominant palette.
- Let oversized, tightly tracked serif display type lead the hierarchy.
- Build content as an asymmetric editorial grid with visible alignment.
- Use fine rules to separate columns and content blocks.
- Keep prose light, readable, and close to its related imagery.
- Treat vivid artwork colors as image content, not interface colors.

## Don't

- Do not introduce gradients or bright interface accent colors.
- Do not turn the editorial grid into generic rounded dashboard cards.
- Do not center every block or make the layout uniformly symmetrical.
- Do not use heavy shadows as the main source of hierarchy.
- Do not set all supporting copy in oversized display typography.
- Do not isolate project imagery from its captions and editorial context.

## Agent prompt

Build a new portfolio page as a continuous printed editorial spread. Use Warm Paper (#cdc6be) for the canvas and Deep Ink (#1d1d1b) for primary text, navigation, and display panels. Reserve Print Black (#000000) for crisp outlines and use Muted Graphite (#75726d) only for subdued details; Soft Stock (#e2dedb) is a secondary inset surface, not a new section theme. Use a high-contrast serif display face similar to Canopee for huge, tightly tracked uppercase headlines, and a light editorial serif like Editorial New for prose, captions, and navigation. Compose an asymmetric multi-column grid with thin dividers, image-led project blocks, portrait artwork, and compact metadata. Keep most surfaces flat, use rounded shadowed cards sparingly, and let typography and alignment establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A single continuous paper-toned page with an asymmetric editorial grid, oversized type panels, image blocks, and fine divider rules. | Sideways project browsing cue, Linked work previews, Prominent email contact | Warm paper canvas, Oversized uppercase serif display, Thin grid dividers, Image-led editorial blocks |

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