# Angelvaliente · Design system migration spec

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

> This site is a perfect example of 'less is more' in design studio portfolios, using extreme restraint to elevate the presented work.

## 1. Identity DNA

The Angel Valiente system operates with the deliberate stillness of a curated gallery, where the architecture recedes to let the exhibited work hold the viewer's full attention. It is a design language of subtraction, defining its presence through the quality of what is absent rather than what is applied. The analogy is clear: the website is the white-walled, perfectly lit room; the portfolio is the art.

**One-liner:** Minimalist design studio portfolio.
**Keywords:** studio · design · furniture · minimal · portfolio
**Analogy:** A curated gallery of a design studio's work, prioritizing the object and the space.

## 2. Color

Color is used not as decoration but as a neutral container, a stark monochromatic field of white and black. The warmth that appears comes directly from the photography itself, which provides the palette's only true chromatic variation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#565656` | secondary text |
| `--muted` | `#B4B4B4` | placeholder |
| `--line` | `rgba(0,0,0,0.75)` | divider |

**Color principle:** Stark, high-contrast palette dominated by black and white with warm neutrals from photography.

The principle is absolute restraint, ensuring the designer's own work—not the interface—provides all visual complexity and emotion.

## 3. Typography

Typography is a uniform, architectural element, set in the humanist-sans Favorit. Every word is presented in uppercase with wide tracking and a consistent regular weight, creating a texture that is structural and deliberate rather than expressive.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.3 | 400 | 1.5px | Main title and navigation |
| body | 17px | 1.4 | 400 | 1.3px | Project titles and subtitles |

**Type rules:**
- All text is uppercase.
- Generous letter-spacing is applied to all text.
- Font weight is strictly regular (400).

## 4. Spacing

Spacing establishes a quiet, consistent rhythm, governed by a uniform padding that gives interactive elements a clean, clickable footprint without visual noise.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 26px padding applied to interactive elements.

## 5. Surfaces

Surfaces are flat and borderless, with no shadows or delineating lines to create depth. Separation between elements is achieved purely through layout, generous white space, and the juxtaposition of large photographic blocks.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible UI borders; separation is achieved through layout and photography.

## 6. Layout

The layout skeleton is an asymmetric masonry grid, arranging portfolio items in a dynamic yet balanced composition. This structure allows large-scale photography to dominate, creating a gallery-like flow that prioritizes visual impact over rigid order.

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

**Skeleton:** Asymmetric masonry or grid layout for portfolio items.

## 7. Motion & Interaction

Motion is functional and subdued, existing only to smooth the passage between states without drawing attention to itself. Content fades into view, and interactive elements shift opacity on hover, maintaining the site's pervasive calm.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Fade-in and fade-out transitions for content loading.
  - Smooth opacity changes on hover or interaction.

- **Hover:** Subtle changes, possibly opacity or slight movement.
- **Click:** Direct navigation to project details.
- **Transition:** All properties transition with a base 150ms duration.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is minimal and direct, with headlines and calls-to-action delivered as understated, uppercase text. It avoids explanation, ornamentation, and any typographic flourish that would compete with the visual work.

- **Tone:** Minimal, professional, and direct.
- **Headline style:** Uppercase, wide-tracked, and regular weight.
- **CTA style:** Understated, often just text or an icon.
- **Avoid:** Excessive punctuation / Explanatory text / Bold or italic styling / Decorative elements

### Don'ts
- ❌ Don't use bold or italic typefaces — screenshot shows only regular weight text.
- ❌ Don't use decorative borders or boxes — screenshot shows a borderless, clean layout.
- ❌ Don't use a busy or multi-colored background — screenshot shows plain white or warm beige backgrounds.
- ❌ Don't use lowercase for navigation or titles — screenshot shows all text is uppercase.
- ❌ Don't use complex shadows or 3D effects — screenshot shows flat photography and UI.
- ❌ Don't use a high-chroma accent color — screenshot shows a neutral palette with color coming from photography.

What is deliberately excluded—bold or italic text, decorative borders, high-chroma accents, and complex effects—is as critical to the system's identity as what is included.

## System Prompt (paste into AI tool)

```
This is a minimalist design studio portfolio website. The design DNA is defined by extreme restraint, prioritizing high-quality photography and a stark, high-contrast palette of white (#FFFFFF) and black (#000000). Typography uses a humanist-sans category (Favorit), set entirely in uppercase with wide letter-spacing (1.5px) and a regular weight (400). Key hex colors include #F5F5F5 for soft backgrounds and #565656 for secondary ink. Critical donts include: never use bold or italic text, never use decorative borders or boxy UI elements, and never introduce a high-chroma accent color that isn't present in the photography. The layout is spacious and gallery-like, with generous padding (26px) on interactive elements. The overall feel is sophisticated, architectural, and gallery-like.
```
