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

# GUSTAVO Faria · Design System

> A graphic portfolio led by oversized type and playful imagery.

**Theme:** light · **Industry:** portfolio · **Source:** https://gustavo.work/ · **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 restrained portfolio pairs an oversized year-span headline with a compact introduction and a dense, ruled project index. A warm portrait image brings an expressive, playful counterpoint to the otherwise monochrome layout.

## North star

Keep the interface almost entirely white and black, then let oversized editorial type and one expressive artwork carry the personality.

## Overview

The page is built on a white canvas with black text and exceptionally pale gray secondary information. A muted peach tone appears as the backdrop for the portrait artwork, adding warmth without becoming a broad interface colour. Typography establishes the hierarchy: an enormous, high-contrast year span dominates the main column, while compact bold project names and small supporting details keep the index functional. The layout is intentionally asymmetric, placing the personal introduction and image in a narrow left rail beside a much wider project area. Fine gray horizontal rules organize the project rows instead of cards or filled panels. The portrait is tightly framed and visually strange, giving the page a personal, art-directed quality. Generous open areas around the headline contrast with the compact listing, creating a rhythm that feels editorial rather than like a conventional agency site.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Page canvas and open space surrounding the headline, introduction, project index, and imagery. |
| Quiet Gray | `#dcdcdc` | `--color-quiet-gray` | neutral | Low-contrast project metadata and secondary labels, deliberately subordinate to project names. |
| Ink | `#000000` | `--color-ink` | brand | Primary typography, navigation labels, project names, links, and the oversized year-span headline. |
| Portrait Peach | `#efc4b2` | `--color-portrait-peach` | surface | Warm background within the portrait artwork; an image-specific colour, not a general interface surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efc4b2` (Portrait Peach) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#dcdcdc` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#efc4b2` | 13.21:1 | AAA |
| `#dcdcdc` | `#ffffff` | 1.37:1 | fail |
| `#dcdcdc` | `#efc4b2` | 1.16:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| custom_21879 | `--font-body` | webfont | 400, 700 | Display headline, body copy, navigation, project links, and supporting labels. | Inter |

- **custom_21879:** Measured in regular and bold; display lettering is very large with tight negative tracking, while interface text stays compact.

### Type scale — Custom (ratio ≈ 3.44, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 142px | 400 | 0.81 | -0.047em | — | custom_21879 | Oversized 2019–2026 year-span headline. |
| h1 | 125px | 400 | 1.02 | 0 | — | custom_49610 | Large heading treatment for the portfolio’s date-range title. |
| body | 12px | 400 | 1.67 | 0 | — | custom_21879 | Compact introduction and project metadata. |
| link | 12px | 700 | 1.67 | 0 | — | custom_21879 | Bold project names and navigation links. |

OpenType features in use: `"dlig" 0, "hlig" 0, "liga" 0, "rlig" 0, "smcp" 0`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1 px.
- Section rhythm — · element gap — · card padding — · max content width —.

An asymmetric two-column composition places identity, short biography, and portrait in a narrow left rail, with the dominant year-span and long project index occupying the broad right area. The headline aligns to the index rather than the page edge. Project rows form a tightly stacked list with names, pale discipline labels, and right-aligned years, separated by thin rules. There is no measured maximum width or section spacing value; preserve the screenshot’s airy margins and contrast between open headline space and dense index content.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface reads as flat: no measured shadows, gradients, or rounded component treatments. Thin pale rules divide project rows, while the portrait and project artwork sit directly on the canvas without card framing. Preserve clear alignment and contrast rather than introducing depth effects.

## Imagery

A prominent, square-ish portrait artwork sits in the left rail, showing a close-cropped face with an irregular, spiky edge against a muted peach ground. Its treatment is surreal and playful rather than polished product photography. Additional project imagery begins below the index and appears as cropped artwork, so keep images expressive and project-led instead of imposing a uniform card system.

## Components

### Top navigation

Small, bold black identity and navigation links sit across the top edge of the content area.

### Biography block

Compact black text in the left rail gives the designer’s role, location, and current work.

### Year-span headline

An oversized 2019–2026 display title anchors the wide right column.

### Project index

A dense list pairs bold black project names with pale gray disciplines and right-aligned years.

### Row separators

Fine gray horizontal rules create structure between otherwise unboxed project entries.

### Portrait artwork

A large face image on a peach ground adds an experimental, personal visual counterpoint.

### Measured component styles

- **Link** (“Flamengo”): transparent background · text #000000 · radius 0px · padding 0px 0px 1px 0px · 700 12px custom_21879

## Do

- Use a white canvas and crisp black primary text.
- Make the main display typography dramatically larger than interface copy.
- Build an asymmetric two-column composition.
- Keep project names bold and metadata faint.
- Separate project rows with fine horizontal rules.
- Use artwork as an expressive, image-specific accent.

## Don't

- Do not turn the page into a centered, uniform card grid.
- Do not promote pale metadata to primary contrast.
- Do not use peach as a site-wide interface colour.
- Do not add unmeasured shadows, gradients, or rounded cards.
- Do not crowd the headline with extra interface elements.
- Do not replace the project index with oversized promotional copy.

## Agent prompt

Build a new portfolio page in GUSTAVO Faria’s visual style. Use Gallery White (#ffffff) as the canvas and Ink (#000000) for primary typography, with Quiet Gray (#dcdcdc) reserved for secondary metadata. Treat Portrait Peach (#efc4b2) as an artwork colour, not a general UI fill. Create an asymmetric layout: a narrow left rail for identity, concise biography, and a bold editorial image; a broad right area for an oversized display headline and a compact, ruled list of work. Keep the project index information-dense, with strong names, faint descriptors, and years aligned consistently. Use generous open space around the headline, flat surfaces, and thin separators. Avoid card styling, decorative shadows, and unnecessary interface chrome.

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