---
name: Hugoferradas
description: "This site is an excellent example of a restrained, typography-focused portfolio that uses minimalism to highlight the designer's work and professional identity."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.28
    fontWeight: 700
    letterSpacing: "-0.5px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A refined personal portfolio for a Brand Designer and Creative Director, featuring a bilingual layout with bold typography and a restrained color palette.

*A calm, typographic gallery for a creative director*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Vertical rhythm is established through generous top/bottom padding on main sections and consistent margins between text blocks.

## Elevation & Depth

- Borders: No visible borders are used; depth is created entirely through typography and color contrast.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** No traditional buttons visible; navigation is handled via text links and a minimal toggle icon.
- **card:** The 'ST·S·2·OS' element acts as a graphic card with a subtle background color shift and large custom typography.
- **hero:** A minimalist text-based hero section featuring a large serif headline and a concise professional summary.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```