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

# Claudio Guglieri · Design System

> A stark black canvas for bold creative work.

**Theme:** dark · **Industry:** portfolio · **Source:** https://guglieri.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 dark portfolio homepage pairs oversized white typography with a vivid cursor-themed 3D showcase. Restrained navigation and contact details lead into a cinematic next-project preview.

## North star

Keep the interface nearly black and quiet so oversized white type and one expressive project image dominate.

## Overview

The page is built around a near-total black canvas (#000000), making white display text and the featured artwork carry nearly all the visual emphasis. Grey text establishes hierarchy for the quiet introduction and navigation, while white is reserved for key headings and high-contrast controls. The type system uses a heavy, tightly tracked sans serif with compact line spacing; the hero title is large and deliberately broken across lines. Layout is spacious and asymmetrical: introductory details sit in two distant columns, followed by a small horizontal navigation and a two-column hero where text and artwork occupy separate sides. The cursor project’s glossy, dimensional objects inject bright colour, but those colours belong to the project imagery rather than the site palette. Thin dark separators keep the contact area and next-project preview distinct without adding card-like framing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | brand | Near-black page canvas spanning the header, hero, contact area, and section backgrounds. |
| Quiet Charcoal | `#454545` | `--color-quiet-charcoal` | neutral | Muted navigation and secondary text against the black canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary headings, identity text, and the bright pill-shaped hero control. |
| Soft Ash | `#b7b7b7` | `--color-soft-ash` | neutral | Secondary informational copy, including the short introductory profile text. |
| Button Black | `#111111` | `--color-button-black` | surface | Measured dark button fill and occasional small UI text; visually subtle on the canvas. |
| Slate Grey | `#575757` | `--color-slate-grey` | neutral | Low-emphasis text within the restrained navigation and supporting copy. |
| Pale Silver | `#e5e5e5` | `--color-pale-silver` | neutral | Light secondary text detail; not a defining surface colour. |
| Mist White | `#f5f5f5` | `--color-mist-white` | surface | Minor measured light area; not a recurring page background. |
| Graphite | `#1c1c1c` | `--color-graphite` | neutral | Subtle dark detail in small text and headings, blending into the black theme. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#454545` (Quiet Charcoal) · `--color-text-subtle` → `#b7b7b7` (Soft Ash)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#454545` | `#000000` | 2.19:1 | fail |
| `#b7b7b7` | `#000000` | 10.47:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Raveo Variable Variable | `--font-body` | webfont | 1000 | Primary display, headings, body copy, and captions throughout the page. | Inter |
| Inter Display | `--font-inter-display` | webfont | 400 | Minor supporting text and isolated interface details. | Inter |

- **Raveo Variable Variable:** Very heavy measured weight; tight negative tracking on display and headings, with compact line spacing and sentence case.
- **Inter Display:** Measured as a small share of page typography; use sparingly and retain the restrained sans-serif character.

### Type scale — Golden Ratio (ratio ≈ 1.66, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 1000 | 1.06 | -0.04em | — | Raveo Variable Variable | Oversized hero or project title with tightly set lines. |
| h1 | 32px | 1000 | 1.2 | -0.02em | — | Raveo Variable Variable | Primary section heading and prominent contact statement. |
| h2 | 22px | 1000 | 1.18 | -0.02em | — | Raveo Variable Variable | Secondary project and contact headings. |
| body | 14px | 1000 | 1.6 | -0.02em | — | Raveo Variable Variable | Introductory profile copy and supporting descriptions. |
| caption | 12px | 1000 | 1.2 | 0 | — | Raveo Variable Variable | Compact navigation labels and minor interface notes. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 14, 16, 24, 40, 116 px.
- Section rhythm 116px · element gap 10px · card padding — · max content width —.

Use a spacious, full-width black composition with content arranged in two columns where the page allows. The introductory identity and profile sit far apart across the top; a compact horizontal navigation follows beneath a fine divider. The hero places its large text and small control to one side while the project artwork occupies the other, extending broadly across the lower area. Keep section transitions generous and nearly borderless. The measured page uses a spacious rhythm; no reliable maximum content width is specified.

## Shape & elevation

- Radius: button `9999px` · link `8px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: black backgrounds, light typography, and no measured shadow system. Fine dark horizontal separators subtly mark transitions without turning sections into cards. Depth comes from the featured artwork itself, whose glossy 3D forms have dimensional highlights and dark edging; keep interface elements visually unraised.

## Imagery

The featured project uses glossy, dimensional cursor and hand forms against black, mixing mostly white objects with saturated colour accents. Treat this as project artwork, not as the brand palette. Frame it broadly beneath the hero copy so its scattered silhouettes feel tactile and playful. The next-project area uses a monochrome, cinematic studio photograph with a short overlay title, contrasting the polished 3D objects with documentary imagery.

## Components

### Identity and intro

A compact name and local-time note align opposite a muted, multi-line profile statement across the black header.

### Section navigation

A small horizontal row of text links follows the header divider; the current NEW item is bright while other labels recede into grey.

### Project hero

An oversized two-line white title sits beside a broad cursor-art showcase on a black field.

### Pill action

A white rounded control with a dark arrow sits below the hero heading, paired with a minimal progress mark.

### Contact block

Contact prompt and email occupy one column, with stacked social links in the other; keep the typography direct and uncluttered.

### Next-project preview

A wide monochrome studio image is introduced by a short overlaid Next — About title.

### Measured component styles

- **Primary button** (“Submit”): background #111111 · text #000000 · radius 40px · padding 0px · 400 12px sans-serif
- **Secondary button**: background #ffffff · text #0000ee · radius 28px · padding 0px 40px · 400 12px sans-serif
- **Link** (“NEW”): transparent background · text #0000ee · radius 8px · padding 8px · 400 12px sans-serif
- **Input**: transparent background · text #111111 · radius 0px · padding 0px · 400 14px Arial

## Do

- Use #000000 as the dominant page canvas.
- Set key headings in bright white with bold, tight typography.
- Keep navigation and supporting copy subdued in measured greys.
- Give project artwork broad space to read as the visual focus.
- Separate major areas with restrained, dark hairlines.
- Use expressive media while keeping interface chrome minimal.

## Don't

- Do not add bright brand-colour UI accents.
- Do not turn sections into elevated cards.
- Do not make navigation compete with the project title.
- Do not treat the illustration’s saturated colours as site-wide colours.
- Do not crowd the page with dense copy or controls.
- Do not invent layout measurements absent from the measured data.

## Agent prompt

Build a portfolio page with a near-black #000000 canvas and a quiet, editorial presence. Use Gallery White (#ffffff) for oversized, heavy project headings and key controls; use Quiet Charcoal (#454545), Soft Ash (#b7b7b7), and Slate Grey (#575757) for lower-priority navigation and supporting text. Set a compact identity/profile header in two distant columns, then a restrained horizontal navigation separated by a fine dark rule. Create a spacious two-column hero with a large, tightly tracked title, a white pill action, and broad expressive project media. Keep the media’s vivid colours confined to the artwork. Follow with a simple contact block and a cinematic next-project image. Avoid cards, shadows, extra accents, and invented dimensions; preserve strong contrast and generous breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Two-column project hero with oversized title and controls beside broad, full-bleed cursor artwork. | Project navigation, Primary arrow action, Progress indicator | Black canvas, Bold white heading, Rounded white control, Glossy 3D artwork |
| 2 | contact | Two-column contact details and social links lead into a wide monochrome next-project image. | Email contact, Social links, Next-project navigation | Black section band, Stacked text links, Image title overlay |

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