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

# Eduardo del Fraile · Design System

> A restrained frame for expressive design work

**Theme:** light · **Industry:** portfolio · **Source:** https://eduardodelfraile.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._

Eduardo del Fraile’s homepage pairs a quiet gray interface with a dense, continuously scrolling portfolio of branding, packaging, and product design. Compact uppercase navigation and project labels keep attention on the highly varied images.

## North star

Keep the interface quiet and consistent so a dense, varied portfolio grid—not the chrome—commands attention.

## Overview

The page uses a controlled grayscale foundation: #dddddd forms the main portfolio field, #c8c8c8 appears in card and loading-like areas, and #515151 supplies the text and navigation. These measured interface colors stay neutral while the portfolio imagery introduces vivid reds, yellows, blues, and product-specific palettes; those image colors are not treated as the site’s brand palette. Circular is used throughout in bold uppercase display text, with visibly tracked navigation and small project captions. The header places a large EDF monogram at left, category links centrally, and About and Contact at right. Below it, a compact three-column masonry composition mixes portrait and landscape media with consistent gutters and labels directly under images. The long page is a continuous gallery rather than a sequence of promotional sections. Flat surfaces, sharp corners, and restrained spacing let the work carry the visual variety.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Graphite | `#515151` | `--color-studio-graphite` | brand | Primary text, project captions, navigation, and the large EDF wordmark. |
| Soft Concrete | `#c8c8c8` | `--color-soft-concrete` | surface | Measured card and placeholder-like gray; secondary neutral within the portfolio canvas. |
| Gallery Mist | `#dddddd` | `--color-gallery-mist` | neutral | Main page and gallery background, forming the quiet field behind the project imagery. |

### Semantic aliases

`--color-canvas` → `#c8c8c8` (Soft Concrete) · `--color-surface` → `#dddddd` (Gallery Mist) · `--color-text` → `#515151` (Studio Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#515151` | `#c8c8c8` | 4.74:1 | AA |
| `#515151` | `#dddddd` | 5.84:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Circular | `--font-body` | webfont | 700 | Wordmark, navigation, project labels, and compact interface text. | Montserrat |

- **Circular:** Bold weight dominates; display and navigation use uppercase with open tracking, while project captions stay small and uppercase.

### Type scale — Custom (ratio ≈ 1.692, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 22px | 700 | 1 | 0.04em | uppercase | Circular | Large uppercase studio wordmark at the top left. |
| body | 13px | 700 | 1.4 | 0.03em | uppercase | Circular | Compact uppercase project labels and supporting interface copy. |
| button | 22px | 700 | 1 | 0.04em | uppercase | Circular | Text-led uppercase category links without filled button styling. |
| nav | 22px | 700 | 1 | 0.04em | uppercase | Circular | Bold uppercase portfolio categories and About navigation. |
| eyebrow | 13px | 700 | 1.4 | 0.03em | uppercase | Circular | Small uppercase captions identifying each portfolio project. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 10, 12, 34, 112 px.
- Section rhythm 34px · element gap 12px · card padding — · max content width —.

A compact header spans the top, with the studio mark aligned left, primary categories centered, and About/Contact aligned right. The gallery begins directly below in three vertical masonry columns, with staggered image heights and labels beneath each work. It continues as a long, dense, single-page feed. Keep gutters consistent and let images retain varied proportions; no measured maximum width is available, so avoid imposing an invented fixed value.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is essentially flat: measured cards have no border, radius, or shadow. Use the gray gallery field as the only persistent surface, and let each project image provide its own internal depth, lighting, and background. Keep the image-to-page relationship clean rather than adding decorative frames.

## Imagery

The page is defined by a large assortment of project imagery: packaging, bottles, books, identity work, objects, and rendered products. Mix photographic, graphic, and 3D work in the masonry columns, preserving each image’s original color and aspect ratio. Captions are small and sit close to their corresponding images.

## Components

### Studio wordmark

Oversized EDF initials at the header’s left, set in bold #515151 uppercase type.

### Primary navigation

Centered, text-only BRANDING, PACKAGING, and PRODUCT links in bold uppercase Circular.

### Utility navigation

ABOUT and CONTACT sit at the right side of the header, aligned on the same visual row.

### Portfolio masonry

Three staggered columns of image-led projects, with changing media heights and consistent gaps.

### Project caption

Small bold uppercase project name directly beneath each image, using #515151.

### Project tile

Flat, square-corner image area with no measured border or shadow; image colors vary by project.

### Measured component styles

- **Primary button** (“BRANDING”): transparent background · text #515151 · radius 0px · padding 0px · 700 22px Circular · uppercase
- **Link** (“MAHOU PAPÁ MAMÁ”): transparent background · text #515151 · radius 0px · padding 0px · 400 16px Circular
- **Card**: background #c8c8c8 · text #515151 · radius 0px · padding 0px · 400 16px Circular
- **Navigation item** (“BRANDING PACKAGING PRODUCT”): transparent background · text #515151 · radius 0px · padding 0px · 400 16px Circular

## Do

- Use #dddddd as the calm gallery background.
- Keep interface text in #515151.
- Build a staggered, image-led masonry gallery.
- Preserve each project image’s intrinsic proportions.
- Place compact uppercase labels close below images.
- Keep the header simple and horizontally balanced.

## Don't

- Do not turn project-image colors into interface accents.
- Do not add rounded cards, shadows, or decorative borders.
- Do not make captions compete with the artwork.
- Do not force every project into identical image dimensions.
- Do not introduce filled CTA buttons into the navigation.
- Do not break the portfolio into unrelated promotional bands.

## Agent prompt

Build a new design-studio portfolio page using this restrained visual language. Use Gallery Mist (#dddddd) as the main canvas, Soft Concrete (#c8c8c8) only as a supporting neutral surface, and Studio Graphite (#515151) for the wordmark, navigation, and captions. Set the interface in bold, tracked uppercase sans-serif, using Circular or a close substitute. Create a compact horizontal header with a studio mark, centered category links, and right-aligned utility links. Below it, make a dense three-column masonry gallery with varied image proportions and small labels directly beneath each item. Keep the frame flat, sharp-cornered, and free of shadows or decorative borders. Allow artwork to supply its own vivid colors; keep the surrounding interface neutral and unobtrusive.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Compact header above a long, three-column staggered masonry gallery with project captions beneath images. | category navigation, scrollable portfolio, project links | three-column masonry, uppercase captions, neutral gallery canvas |

## Source CSS custom properties (selected)

```css
--color-text: #515151;
--color-bg: #ddd;
--color-bg-dark: #747474;
--color-skeleton: #c8c8c8;
--color-skeleton-light: #d6d6d6;
--color-overlay-bg: #ddd;
--color-peel-under: #1a1a1a;
--color-footer-border: #3d3c392b;
```

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