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

# Doug–Alves · Design System

> A quiet portfolio shaped by oversized type and considered work.

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

Doug–Alves presents a designer’s portfolio through an oversized typographic opening, a featured project, and a detailed professional profile. A dark introductory field gives way to white and pale blush content, keeping the work and career details easy to scan.

## North star

Let oversized, quiet typography and broad tonal fields frame the work, then keep supporting information small, aligned, and easy to scan.

## Overview

The visual strategy is restrained and editorial: a nearly black-brown opening establishes atmosphere, while bright white and pale blush panels carry the portfolio content. A giant, lightweight masthead dominates the first viewport; small, muted text arranged in aligned columns provides an intentional contrast in scale. The single measured webfont handles the page’s display and utility typography, with regular weight and compact tracking keeping even the dense résumé lists visually controlled. Content alternates between spacious, high-impact project imagery and tightly organized text rather than relying on decorative interface elements. The featured project is shown as a large photographic spread, with its own printed graphics and colors treated as artwork, not brand palette. Subtle horizontal rules separate information bands and tables. The overall rhythm moves from sparse introduction to image-led work and then a dense, pale profile section, using broad color fields and generous breathing room instead of shadows or rounded cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Graphite | `#333333` | `--color-soft-graphite` | neutral | Primary text color for content on the light portfolio and profile sections. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and clean section field; also appears in the oversized opening title. |
| Blush Paper | `#fff5f2` | `--color-blush-paper` | surface | Pale warm background for the biography, contact details, experience, and awards. |
| Roast Ink | `#1d1610` | `--color-roast-ink` | brand | Dominant dark-brown opening and introductory information field. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Inverse surface measured on an individual card; keep secondary to the dark-brown page opening. |
| Charcoal Detail | `#282828` | `--color-charcoal-detail` | neutral | Secondary text color measured on a dark card; not a prominent page-wide color. |
| Deep Text | `#191919` | `--color-deep-text` | neutral | Muted text and link color for supporting content on light surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fff5f2` (Blush Paper) · `--color-surface-2` → `#1d1610` (Roast Ink) · `--color-surface-3` → `#000000` (Pure Black) · `--color-text` → `#333333` (Soft Graphite) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#191919` (Deep Text)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#fff5f2` | 11.79:1 | AAA |
| `#333333` | `#1d1610` | 1.42:1 | fail |
| `#333333` | `#000000` | 1.66:1 | fail |
| `#ffffff` | `#fff5f2` | 1.07:1 | fail |
| `#ffffff` | `#1d1610` | 17.88:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#191919` | `#ffffff` | 17.58:1 | AAA |
| `#191919` | `#fff5f2` | 16.41:1 | AAA |
| `#191919` | `#1d1610` | 1.02:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| wtqc | `--font-body` | webfont | 400 | Single measured webfont used across display, headings, body copy, and links. | Inter |

- **wtqc:** Regular weight throughout; use extremely large display type, compact tracked small text, and natural capitalization.

### Type scale — Custom (ratio ≈ 2.542, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 197px | 400 | 1.04 | -0.003em | — | wtqc | Oversized portfolio wordmark across the dark opening. |
| h1 | 72px | 400 | 1 | -0.014em | — | wtqc | Primary page or section heading, including the profile introduction. |
| h2 | 28px | 400 | 1.29 | -0.021em | — | wtqc | Secondary headings and prominent supporting statements. |
| body | 12px | 400 | 1.33 | -0.033em | — | wtqc | Compact profile, résumé, and project information. |
| link | 12px | 400 | 1.33 | -0.033em | — | wtqc | Small utility and social links. |

OpenType features in use: `"dlig" 0, "hlig" 0, "liga" 0, "rlig" 0, "smcp" 0`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1 px.
- Section rhythm — · element gap — · card padding — · max content width —.

Use broad, full-width color fields rather than a visibly boxed site frame. The opening aligns a giant masthead near the top, then places compact introduction details in four evenly distributed columns separated by thin horizontal rules. Follow with a simple section heading and a wide featured-project image. The pale profile area uses a strong introductory statement followed by carefully aligned information columns and dense award lists. No page maximum width or spacing scale is measured; match the screenshot’s generous upper breathing room and tighter lower information layout.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is predominantly flat, built from uninterrupted dark, white, and blush color fields. Use thin horizontal rules to divide information rows rather than shadows, card outlines, or rounded containers. Keep project imagery as a strong, edge-to-edge layer between the section heading and profile content.

## Imagery

Use large, editorial project photography as the principal visual content, especially a close, angled view of printed design work that fills its section. Preserve the source image’s crop and its embedded typography and color as project artwork, not as interface styling. The opening remains typographic rather than image-led; no illustration or 3D treatment defines the brand.

## Components

### Oversized masthead

A single enormous, light-weight wordmark spans the dark opening; keep its scale and tight visual fit as the dominant first impression.

### Introductory detail grid

Small muted text is distributed across four columns and two rows, with thin horizontal separators on the dark background.

### Latest work heading

A concise, left-aligned title on a white band introduces the featured project.

### Featured project image

A broad photographic spread shows printed design material with an angled crop and visible artwork details.

### Profile statement

A prominent text block on blush paper summarizes location, current role, and design practice.

### Experience and awards lists

Dense, small-text career and recognition details use aligned columns and fine horizontal dividers.

### Social links

Minimal text links such as Instagram and LinkedIn sit within the introductory information grid.

### Measured component styles

- **Link** (“Instagram”): transparent background · text #fffaf9 · radius 0px · padding 0px 0px 1px 0px · 400 12px wtqc
- **Card**: background #000000 · text #282828 · radius 0px · padding 0px · 400 16px -apple-system

## Do

- Use Roast Ink #1d1610 for the dominant introductory field.
- Reserve Blush Paper #fff5f2 for the dense profile and résumé content.
- Make the opening masthead dramatically larger than supporting text.
- Keep utility copy compact, regular-weight, and aligned in columns.
- Use thin rules to distinguish information bands.
- Show featured work with a large, editorial crop.

## Don't

- Do not add gradients or decorative accent colors.
- Do not turn the information grid into rounded cards.
- Do not add heavy shadows or ornamental borders.
- Do not let project artwork colors redefine the site palette.
- Do not make the compact profile details compete with the masthead.
- Do not force the design into a dense, uniform card grid.

## Agent prompt

Build a new designer-portfolio page in Doug–Alves’s restrained editorial style. Use Roast Ink (#1d1610) as a substantial opening field, Gallery White (#ffffff) for clean transitions, and Blush Paper (#fff5f2) for detailed profile content. Set a very large, regular-weight masthead above compact, muted introductory details arranged in aligned columns. Use the measured wtqc webfont when available, with Inter as a free substitute; keep small copy tightly set without making it bold. Introduce featured work with a simple heading and a wide project photograph. Treat colors inside that image as artwork, not interface accents. Organize career details in orderly columns with fine rules. Keep surfaces flat and square, avoid shadows and decorative cards, and preserve a clear shift from sparse opening to dense résumé content.

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