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

# Danilo Rodrigues · Design System

> Quiet dark canvas, vivid work, oversized type.

**Theme:** dark · **Industry:** portfolio · **Source:** https://danilorodrigues.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 restrained dark portfolio introduces Danilo Rodrigues through oversized typography and a vivid lime animated motif. Long-form project galleries then let richly colored client work carry the visual emphasis.

## North star

Keep the interface quiet and typographically direct so the vivid, varied portfolio imagery remains the main event.

## Overview

The page uses a dark, restrained shell that gives the portfolio work room to supply most of the color. The opening viewport pairs a nearly black field with a large electric-lime circular motif and oversized, regular-weight white introductory type. Below, a charcoal canvas hosts concise biography and project captions, while black image frames visually contain the case-study artwork. Neue Haas Grotesk keeps navigation, descriptions, and display copy in one coherent sans-serif voice; the type grows large for the introduction and remains compact in project metadata. The layout is editorial and long-form: a sparse introduction gives way to alternating two-column project details and broad, stacked media. Images vary between campaign photography, brand layouts, digital mockups, and motion-derived graphics, retaining their own palettes rather than imposing a uniform filter. Flat surfaces, generous breathing room, and minimal decorative UI keep attention on the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Canvas | `#252525` | `--color-graphite-canvas` | surface | Primary charcoal canvas and broad bands framing the biography and project-gallery sections. |
| Soft Chalk | `#eaeaea` | `--color-soft-chalk` | neutral | Main navigation, headings, and body copy against the dark page. |
| Gallery Black | `#000000` | `--color-gallery-black` | surface | Black section surfaces and image mats that contain portfolio media. |
| Paper White | `#f2f2f2` | `--color-paper-white` | neutral | Secondary measured text and heading color on dark backgrounds. |
| Muted Stone | `#878787` | `--color-muted-stone` | semantic | Low-emphasis text such as subdued inline details and contact information. |

### Semantic aliases

`--color-canvas` → `#252525` (Graphite Canvas) · `--color-surface` → `#000000` (Gallery Black) · `--color-text` → `#f2f2f2` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f2f2f2` | `#252525` | 13.69:1 | AAA |
| `#f2f2f2` | `#000000` | 18.76:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Grotesk | `--font-body` | webfont | 400 | Navigation, large introductory statement, biography, captions, and project metadata. | Inter |

- **Neue Haas Grotesk:** Regular weight throughout; clean sans-serif forms, generally untracked, with sentence case and occasional uppercase project lettering.

### Type scale — Augmented Fourth (ratio ≈ 1.384, base 19.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 71.5px | 400 | 1 | 0 | — | Neue Haas Grotesk | Oversized opening statement layered over the lime circular motif. |
| h1 | 31px | 400 | 1.1 | 0 | — | Neue Haas Grotesk | Primary introduction and prominent page-level copy. |
| h2 | 26px | 400 | 1 | 0 | — | Neue Haas Grotesk | Secondary project or content headings. |
| h3 | 23.5px | 400 | 1.3 | 0 | — | Neue Haas Grotesk | Project captions and supporting section text. |
| body | 19.5px | 400 | 1.2 | 0 | — | Neue Haas Grotesk | Biography, descriptions, navigation, and project credits. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 13, 22, 26, 32, 45, 83, 130 px.
- Section rhythm 32px · element gap — · card padding — · max content width 1375px.

The page is a long, single-column portfolio with a measured maximum content width of 1375px and a comfortable density. The opening viewport uses a slim four-part navigation row above a centered graphic and left-aligned statement. Biography copy sits in a narrow column with substantial empty space. Project introductions use two columns for title and credits, followed by broad media panels stacked vertically. Charcoal bands separate phases of the page, and the measured section rhythm uses a 32px section gap.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadows or radius system. Black panels and charcoal bands create contrast through surface changes rather than elevation. Images sit as crisp, rectangular blocks; artwork may include its own mockup depth, texture, or lighting, but those effects belong to the case studies rather than the surrounding UI.

## Imagery

Case studies dominate the lower page: campaign photography, sneaker visuals, brand systems, responsive layouts, phone mockups, and 3D scenes. Artwork is presented in large rectangular panels, often against black, with varied internal compositions and vivid colors retained as supplied. The opening lime circle is a simple graphic motif, not a general page palette.

## Components

### Top navigation

Sparse horizontal row with the DR monogram, role, selected-work years, and a scroll cue in light text.

### Intro statement

Large regular-weight white text overlaps a bright lime circular graphic on the black opening canvas.

### Biography block

Compact left-aligned biography and contact copy on a black surface, with subdued inline details.

### Project caption row

Two-column project description and credits on charcoal, with a small downward continuation cue.

### Case-study media panel

Large rectangular artwork framed by a black mat, often followed by more stacked panels.

### Inline contact link

Simple text link embedded in biography copy, using muted text rather than a button treatment.

### Measured component styles

- **Link** (“BUCK”): transparent background · text #000000 · radius 0px · padding 0px 0px 3.1px 0px · 400 31.104px Neue Haas Grotesk

## Do

- Use a near-black or charcoal page shell.
- Reserve the lime motif for a deliberate focal graphic.
- Set introductory copy large and regular-weight.
- Give each project its own broad media panels.
- Separate project titles from credits with a clear two-column row.
- Keep interface details quieter than the featured work.

## Don't

- Do not turn portfolio artwork colors into global UI accents.
- Do not add gradients or shadows to the interface without evidence.
- Do not crowd the introduction with controls.
- Do not apply rounded cards to rectangular media panels.
- Do not make captions compete with the case-study imagery.
- Do not force a uniform color treatment onto varied project assets.

## Agent prompt

Build a new portfolio page in this restrained editorial style. Use Graphite Canvas (#252525) and Gallery Black (#000000) for the page shell and media areas, with Soft Chalk (#eaeaea) for primary text and Muted Stone (#878787) for quiet secondary details. Treat Paper White (#f2f2f2) as a measured text color, not a new accent. Use a clean regular-weight grotesk, with an oversized introductory statement and compact project captions. Keep navigation sparse, biography copy narrow, and project metadata in a two-column row. Present case studies as large, sharp-cornered image panels, allowing each project’s artwork to retain its own palette. Favor flat surfaces and open spacing; avoid decorative borders, shadows, generic cards, and extra interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Black opening viewport with sparse top navigation, centered circular motif, and left-aligned oversized statement. | Scroll cue, Selected-work navigation | Light text on black, Lime circular graphic, Oversized typography |
| 2 | contact | Two-column section with a narrow biography block and ample surrounding dark space. | Inline email contact, Scroll-led discovery | Compact copy, Muted inline details |
| 3 | other | Two-column project description and credits row on a charcoal band. | Project attribution, Downward continuation cue | Small editorial text, Split caption layout |
| 4 | gallery | Single-column sequence of broad rectangular campaign images on dark panels. | Long-form image browsing | Black image mats, Mixed-width artwork, Stacked media |
| 5 | other | Two-column project description and credits row on charcoal. | Project attribution, Downward continuation cue | Small editorial text, Split caption layout |
| 6 | gallery | Single-column run of large media panels with black surroundings. | Long-form image browsing | Dark image frames, Motion-inspired graphics, Repeated gallery panels |
| 7 | other | Two-column branding description and contributor credits on charcoal. | Project attribution, Downward continuation cue | Editorial caption row, Compact supporting copy |
| 8 | gallery | Single-column case-study media sequence with broad, dark-framed panels. | Long-form image browsing | Brand-system compositions, Device mockups, Large image panels |

## Source CSS custom properties (selected)

```css
--following-animation-duration: 450ms;
```

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