# Hugoferradas · Design system migration spec

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

> This site is an excellent example of a restrained, typography-focused portfolio that uses minimalism to highlight the designer's work and professional identity.

## 1. Identity DNA

The system is built as a calm, typographic gallery for a creative director—a space where restraint becomes the primary expressive tool. Every decision, from color to cadence, serves to frame the work and the designer's identity without visual competition.

**One-liner:** A refined personal portfolio for a Brand Designer and Creative Director, featuring a bilingual layout with bold typography and a restrained color palette.
**Keywords:** Designer · Portfolio · Minimal · Bilingual · Typography
**Analogy:** A calm, typographic gallery for a creative director

## 2. Color

The palette is a study in stark contrast: a solid black canvas serves as the ground for crisp white typography. This monochrome foundation ensures maximum readability and a premium, focused atmosphere.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome with stark white text on a solid black background, occasionally featuring subtle accents like the pale yellow logo.

The guiding principle is that depth and hierarchy are established through typographic weight and scale, not through color variation.

## 3. Typography

The typographic voice is bifurcated for clarity and authority. A transitional serif font, with Times New Roman as a fallback, commands the headlines with classic elegance, while a clean grotesque sans-serif, specifically Roboto, handles body text for optimal legibility.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.28 | 700 | -0.5px | Main headline introducing the designer |

**Type rules:**
- Headlines use a classic serif font (Times New Roman fallback) for elegance and authority.
- Body text uses a clean sans-serif (Roboto) for maximum readability against the dark background.
- Typography is left-aligned with generous line heights to maintain a clean, breathable layout.

## 4. Spacing

Vertical rhythm is established through deliberate, generous padding and consistent margins between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 60 px
- **Rhythm:** Vertical rhythm is established through generous top/bottom padding on main sections and consistent margins between text blocks.

## 5. Surfaces

Depth is conveyed purely through the hierarchy of type and the stark contrast of the color palette. The design is flat and borderless, rejecting drop shadows and decorative edges in favor of typographic presence.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders are used; depth is created entirely through typography and color contrast.

## 6. Layout

The layout skeleton is a full-width black canvas. Centered within it, a single content column is strictly left-aligned, avoiding edge-to-edge text and creating a focused, spacious reading environment.

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

**Skeleton:** Full-width black canvas with a centered, left-aligned content block that avoids edge-to-edge text.

## 7. Motion & Interaction

Motion is minimal and purposeful, designed to feel smooth and professional rather than decorative. A global transition property ensures all interactive state changes, like hover effects on text links, are seamlessly animated.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - All elements have a transition property applied, suggesting smooth state changes on hover or interaction.

- **Hover:** Subtle cursor interactions are implied by the global transition property.
- **Click:** Standard link behavior for professional affiliations (R/GA, Stink Studios).
- **Transition:** A global 'all' transition ensures smooth visual updates across the interface.
- **Keyboard:** Standard tab order through interactive text links.

## 8. Voice & Don'ts

The editorial voice is professional, concise, and confident. It speaks through direct, personal headlines set in a classic serif and through understated, underlined text links that serve as implicit calls to action.

- **Tone:** Professional, concise, and confident
- **Headline style:** Direct and personal, using a classic serif font to establish authority.
- **CTA style:** Implicit; professional affiliations are presented as underlined text links.
- **Avoid:** Avoid overly casual language / Avoid complex navigation menus / Avoid cluttered layouts / Avoid using multiple competing accent colors / Avoid using decorative fonts for body text

### Don'ts
- ❌ Don't use a light or colorful background — screenshot shows a stark black (#000000) canvas instead.
- ❌ Don't use sans-serif fonts for headlines — screenshot shows a transitional serif (Times New Roman) instead.
- ❌ Don't use drop shadows or complex borders — screenshot shows a flat, borderless design instead.
- ❌ Don't use a prominent, high-chroma accent color — screenshot shows a neutral monochrome palette instead.
- ❌ Don't use small, dense text — screenshot shows generous line-heights and large font sizes for readability.
- ❌ Don't center-align all text — screenshot shows left-aligned paragraphs and headlines instead.

It deliberately avoids casual language, complex navigation, cluttered layouts, competing accent colors, and decorative body fonts.

## System Prompt (paste into AI tool)

```
This is a refined personal portfolio for a Brand Designer and Creative Director. It uses a high-contrast, monochrome palette with a solid black background (#000000) and crisp white text (#FFFFFF). The typography mixes a transitional serif for headlines with a grotesque sans-serif for body copy, creating a balance of elegance and modern readability. The layout is spacious and strictly left-aligned, avoiding clutter. Critical design rules: never use a light background, always use a serif font for main headlines, and maintain generous vertical spacing between content blocks to preserve the minimalist aesthetic.
```
