# Danilorodrigues · Design system migration spec

> Source: https://danilorodrigues.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a strong example of a bold, modern design portfolio that balances minimalist structure with expressive, high-impact visuals.

## 1. Identity DNA

Danilorodrigues.com functions as a gallery for a modern designer, where every component is an intentional display surface rather than a navigational tool. The system treats a portfolio not as a series of pages, but as a curated exhibition of work on a dark canvas.

**One-liner:** A bold, expressive portfolio for a visual designer focused on design systems and branding.
**Keywords:** portfolio · design systems · branding · bold · expressive
**Analogy:** A gallery for a modern designer

## 2. Color

The color strategy is one of stark opposition: a solid black ground provides the stage for high-chroma accents. A palette anchored in black and near-white ensures that project-specific hues like blue, neon green, and magenta command full attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#252525` | card background |
| `--ink` | `#EAEAEA` | body text |
| `--ink-soft` | `#878787` | secondary text |
| `--accent` | `#2255FF` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Dark canvas with high-contrast, vibrant accents.

The principle is to never dilute visual impact with intermediary tones; contrast is the system's primary functional and expressive tool.

## 3. Typography

Typography is set in a clean, neutral grotesque sans-serif, treating letterforms as structural elements rather than decorative ones. The scale is deliberately large, establishing a confident, direct voice through bold headlines and ample body text.

- **Display:** neue-haas-grotesk
- **Body:** neue-haas-grotesk

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 90px | 1.0 | 400 | -2px | Main headline |
| body | 18px | 1.3 | 400 | 0px | Body text |
| caption | 13px | 1.2 | 400 | 0px | Small UI text |

## 4. Spacing

Generous whitespace establishes the rhythm, creating deliberate pauses that frame each project card as a focal point.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace, focused on large visual elements.

## 5. Surfaces

Surfaces are defined by flat, graphic planes rather than dimensional cues. Borders are employed not as dividers, but as vibrant, solid-color graphic elements that can carry the accent palette.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Solid borders, often used as vibrant graphic elements.

## 6. Layout

The layout skeleton is a masonry-like grid of large project cards, prioritizing visual impact and varied media presentation over rigid alignment. This structure allows compositions to breathe while maintaining a cohesive, organized system.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Masonry-like grid of large project cards.

## 7. Motion & Interaction

Motion is restrained to functional smoothness, with simple opacity transitions that guide focus without introducing narrative. The philosophy is to enhance clarity through subtle, consistent movement, ensuring the interface itself remains visually quiet.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth scroll
  - Simple opacity transitions

- **Hover:** Subtle opacity change on hover.
- **Click:** Standard click behavior.
- **Transition:** Smooth transitions on all interactive elements.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is professional and confident, communicated through direct, first-person headlines that state expertise plainly. Language avoids playful metaphor in favor of clear, declarative statements about the work.

- **Tone:** Professional and confident.
- **Headline style:** Direct, first-person statement of expertise.
- **CTA style:** Simple directional instruction.
- **Avoid:** Playful language / Overly decorative fonts / Cluttered interfaces

### Don'ts
- ❌ don't use decorative fonts — screenshot shows a clean grotesque sans-serif.
- ❌ don't use muted or pastel colors — screenshot shows a high-contrast black background with vibrant accents.
- ❌ don't use small, cramped typography — screenshot shows large, bold headlines with generous spacing.
- ❌ don't use complex, heavy shadows — screenshot shows a flat, graphic style.
- ❌ don't use a light background for the main interface — screenshot shows a predominantly dark theme.
- ❌ don't use small, cluttered UI elements — screenshot shows a focus on large, visual project showcases.

The system deliberately forgoes decorative fonts, cluttered interfaces, and muted palettes, defining itself as much by these omissions as by its chosen elements.

## System Prompt (paste into AI tool)

```
This is a bold, expressive portfolio site for a Senior Visual Designer. It uses a dark theme (black #000000 background) with high-contrast white (#EAEAEA) text. A vibrant blue (#2255FF) is used as a primary accent, alongside other high-chroma colors like neon green and magenta in project showcases. The typography is a clean, neutral grotesque sans-serif (Neue Haas Grotesk) at a large scale. The layout is a grid of large project cards. Critical donts: don't use decorative fonts, don't use a light background, and don't use muted colors.
```