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

# Arthur Simonini · Design System

> A monochrome portfolio composed like a score.

**Theme:** light · **Industry:** portfolio · **Source:** https://arthursimonini.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 composer’s portfolio pairs oversized, high-contrast serif typography with a restrained black-and-white palette. Thin rules and carefully ordered archives give film, television, advertising, and music work the feel of a printed catalogue.

## North star

Use black type, white space, oversized editorial serif lettering, and fine rules to make a structured archive feel like a printed score.

## Overview

The page is built from only two measured colours: White Canvas (#ffffff) fills the page, while Black Ink (#000000) carries the typography, outlines, and rules. The result feels closer to a carefully typeset print catalogue than a conventional portfolio. Oversized, uppercase display lettering establishes the composer’s name and repeats in project labels; a quieter serif supports track names, credits, and other supporting copy. Thin black hairlines divide repeated rows and archive entries without adding card-like framing. The layout moves between a broad typographic opening, a compact list of audio selections, dense image grids, and long chronological lists. Photography and cover artwork supply tonal variety, but remain content within the black-and-white framework rather than defining a separate brand palette. Generous blank areas give the opening identity room to breathe, while dense archives use repetition and alignment to stay scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Black Ink | `#000000` | `--color-black-ink` | brand | Primary text, oversized titles, archive labels, navigation, and the fine rules outlining repeated rows. |
| White Canvas | `#ffffff` | `--color-white-canvas` | surface | Page canvas and consistent background behind every portfolio section. |

### Semantic aliases

`--color-canvas` → `#ffffff` (White Canvas) · `--color-surface` → `#000000` (Black Ink) · `--color-text` → `#000000` (Black Ink) · `--color-border` → `#000000` (Black Ink)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| LifeLTStd-Roman | `--font-body` | webfont | 400 | Body copy and supporting text, including audio-track labels and secondary details. | Lora |
| RomieLigatures-Regular | `--font-display` | webfont | 400 | Display titles, uppercase navigation, project names, and prominent archive labels. | Bodoni Moda |

- **LifeLTStd-Roman:** Roman serif at regular weight; keep supporting copy readable and unembellished, with natural casing.
- **RomieLigatures-Regular:** Regular-weight high-contrast serif; use uppercase for display and navigation, with editorial ligature character.

### Type scale — Custom (ratio ≈ 3.046, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 167px | 400 | 0.73 | 0 | uppercase | RomieLigatures-Regular | Oversized uppercase identity lettering and repeated project marquees. |
| h1 | 65px | 400 | 0.9 | 0 | uppercase | RomieLigatures-Regular | Large uppercase section or project titles. |
| body | 18px | 400 | 1.2 | 0 | — | LifeLTStd-Roman | Track names, dates, credits, and supporting copy. |
| nav | 65px | 400 | 0.9 | 0 | uppercase | RomieLigatures-Regular | Prominent uppercase navigation and portfolio categories. |

OpenType features in use: `"kern"`, `"dlig", "kern"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 10, 15, 62 px.
- Section rhythm 60px · element gap 15px · card padding 8px · max content width 1410px.

The measured desktop maximum content width is 1410px. Content is primarily left-aligned, with a split identity header and a two-column film or advertising archive; other sections switch to a single-column list or image grid. The page alternates a spacious opening with tightly packed catalogues. A measured section gap of 60px sets the broad rhythm, while the repeated rows and media grids provide their own close internal cadence. Keep the presentation flat and let rules establish structure.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.7, 0, 0.3, 1)` on interactive elements.

The interface is flat: measured shadows are absent and component radii are zero. Use fine black horizontal rules to separate typography-led rows and timeline entries; avoid elevated cards and ornamental layering. Image artwork is the principal source of visual depth, while the white canvas stays uninterrupted between sections.

## Imagery

Use documentary-style project imagery, film posters, album artwork, and performance photographs. The screenshot shows mostly monochrome or subdued images, with varied original artwork retained in its own rectangular frame. Arrange covers in a dense, consistent grid, and use narrow horizontal crops for the performance archive. Avoid decorative 3D, gradients, or generic stock imagery.

## Components

### Identity masthead

Large uppercase serif name above a compact, ruled row of category links; keep the identity typography prominent and the canvas white.

### Scrolling project marquee

Repeat oversized uppercase project names in horizontal rows, paired with small category labels and thin black separators.

### Audio track list

Single-column track titles in serif text, divided by fine rules, with short durations aligned to the far edge.

### Poster gallery

A dense rectangular grid of film and television artwork; let each image retain its source composition and contrast.

### Chronological credit list

Compact rows combine a client or channel mark, a small year, a large serif project title, and a right-aligned plus indicator.

### Year-indexed archive

Mix prominent year labels with aligned cover-art thumbnails to make a long portfolio archive browseable.

### Expandable project row

Use a ruled, single-line title row with a plus affordance for long-form credits or project details.

### Measured component styles

- **Card** (“2025”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 15px 0px · 400 64.8px RomieLigatures-Regular · uppercase
- **Navigation item** (“B.O.”): transparent background · text #000000 · radius 0px · padding 0px · 400 64.8px RomieLigatures-Regular · uppercase

## Do

- Use only #000000 and #ffffff for the interface palette.
- Set major identity and project labels in high-contrast serif typography.
- Use uppercase display lettering for prominent titles and navigation.
- Separate repeated list entries with thin black rules.
- Keep archive artwork in clean rectangular grids.
- Use generous blank canvas around major identity moments.

## Don't

- Do not add unmeasured accent colours to interface elements.
- Do not introduce gradients, shadows, or rounded cards.
- Do not replace the editorial serif character with geometric sans-serif display type.
- Do not place every project inside a boxed card.
- Do not let image treatments overpower the monochrome page framework.
- Do not make dense archives visually indistinguishable; preserve year and row alignment.

## Agent prompt

Build a new portfolio page in Arthur Simonini’s restrained editorial style. Use White Canvas (#ffffff) across the page and Black Ink (#000000) for type, links, and fine dividing rules; do not add interface accent colours. Pair an expressive high-contrast serif display face, similar to Bodoni Moda, with a readable serif body face such as Lora. Use oversized uppercase headings, compact supporting labels, and deliberately varied density: spacious identity areas, ruled single-column lists, and tightly aligned artwork grids. Keep everything flat, square-cornered, and free of shadows. Treat project images as the content, not as decoration, and preserve their rectangular framing. Make long archives scannable through consistent year, title, and action alignment. Favor generous white intervals between major blocks and fine hairlines within repeated rows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Two-part masthead with a prominent name and a smaller category-link row. | Persistent identity, Category navigation | Oversized uppercase serif, Fine horizontal rules, White canvas |
| 2 | other | Wide, repeated horizontal title rows spanning a multi-column band. | Repeated project discovery, Category cues | Large serif titles, Small category labels, Thin separators |
| 3 | other | Single-column track list below a compact play control. | Inline audio preview, Track duration cues | Ruled list rows, Serif track names, Edge-aligned durations |
| 4 | gallery | Dense, multi-column grid of rectangular poster artwork. | Visual browsing, Project discovery | Poster thumbnails, Tight image grid, Unboxed media |
| 5 | content-feed | Chronological, ruled project rows with a channel mark, year, title, and trailing affordance. | Chronological browsing, Expandable entries | Small years, Large serif titles, Plus indicators, Thin row rules |
| 6 | gallery | Year labels interspersed with aligned artwork thumbnails in a long single-column archive. | Browse by year, Visual project index | Mixed year and image grid, Rectangular artwork, Repeated alignment |
| 7 | content-feed | Two-column project list with a small client mark and year paired with each title. | Client-led browsing, Expandable entries | Ruled title rows, Brand marks, Right-side plus indicators |
| 8 | timeline | Single-column sequence of years with narrow, horizontal performance images. | Browse performances by year | Year labels, Wide image strips, Fine separators |
| 9 | footer | Single-column ruled list of biographical, contact, social, and credit links. | Contact access, Secondary navigation | Large serif link labels, Thin horizontal rules, Open white space |

## Source CSS custom properties (selected)

```css
--color-text: #000;
--color-link: #000;
--color-bg: #fff;
--color-grey: grey;
--font-d: 18px;
--font-xxs-d: 0.5rem;
--font-xs-d: 0.75rem;
--font-sm-d: 1rem;
--font-md-d: 1.5rem;
--font-lg-d: 2rem;
--font-xl-d: 4.5vw;
--font-xxl-d: 11.6vw;
--font-m: 18px;
--font-xxs-m: 0.5rem;
--font-xs-m: 0.75rem;
--font-sm-m: 1rem;
--font-md-m: 1.5rem;
--font-lg-m: 2rem;
--font-xl-m: 10.8vw;
--font-xxl-m: 10.8vw;
--space-d: 21.6px;
--space-xxs-d: 0.6rem;
--space-xs-d: 0.9rem;
--space-sm-d: 1.2rem;
--space-md-d: 1.8rem;
--space-lg-d: 2.4rem;
--space-xl-d: 5.4vw;
--space-xxl-d: 13.92vw;
--space-m: 21.6px;
--space-xxs-m: 0.6rem;
--space-xs-m: 0.9rem;
--space-sm-m: 1.2rem;
--space-md-m: 1.8rem;
--space-lg-m: 2.4rem;
--space-xl-m: 12.96vw;
--space-xxl-m: 12.96vw;
```

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