# Dougalves Work · Design system migration spec

> Source: https://dougalves.work  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of using extreme typographic scale and a restricted color palette to create a powerful, premium aesthetic.

## 1. Identity DNA

The system draws its identity from a curated gallery monograph, where oversized display type sets the tone. It is a high-contrast, typographically driven portfolio that operates with the quiet authority of a well-edited art book.

**One-liner:** A high-contrast, typographically driven portfolio for a visual designer.
**Keywords:** minimal · editorial · typographic · professional · monochrome
**Analogy:** A curated gallery monograph with oversized display type.

## 2. Color

Color is used not for decoration but for stark legibility and atmosphere. The strict high-contrast monochrome palette uses warm undertones to soften the starkness of its binary values.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1D1610` | main background |
| `--ink` | `#FFFBF9` | body text |
| `--ink-soft` | `#FFFBF9A6` | secondary text |
| `--line` | `rgba(40,40,40,0.1)` | divider |

**Color principle:** Strict high-contrast monochrome with warm undertones.

The governing principle is a complete reliance on value contrast, with bright accents being a deliberate exclusion.

## 3. Typography

The typographic voice is defined by a rigid two-font system: a geometric sans-serif for massive, authoritative headlines and a clean neo-grotesque for body copy. This pairing creates a clear hierarchy where form follows the content's structural role.

- **Display:** geometric-sans
- **Body:** neo-grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 197px | 1.0 | 400 | -1px | Hero headline |
| heading | 16px | 1.1 | 400 | -0.4px | Section labels |
| body | 16px | 1.1 | 400 | -0.4px | Body text |

## 4. Spacing

Rhythm is established through a deliberate tension between tight vertical line spacing and generous horizontal measure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Tight vertical rhythm with generous horizontal spacing.

## 5. Surfaces

Surfaces are presented as flat planes of color, without shadows or borders to suggest depth. The architecture is defined purely by the grid and the weight of the type upon it.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** None visible.

## 6. Layout

The layout skeleton is a rigid 4-column grid on desktop, which consolidates to a 2-column structure on mobile. This framework provides the essential structure for the typographic content, with horizontal spacing being a key compositional element.

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

**Skeleton:** A rigid 4-column grid on desktop, collapsing to 2 columns on mobile.

## 7. Motion & Interaction

Motion is used sparingly to mark transitions and reveals, not to decorate. All animations follow a smooth, professional easing curve, ensuring a consistent and composed feel to all state changes.

- **Durations:** micro 200ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0.24, 0.4, 1)`
- **Patterns:**
  - Smooth reveal on scroll.
  - Cubic-bezier transitions for transform properties.

- **Hover:** Subtle opacity or transform changes.
- **Click:** Immediate transition.
- **Transition:** All properties transitioned smoothly.
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and minimalist, matching the visual restraint. Headlines are massive and geometric, while calls to action are plain text, devoid of any visual container or emphasis.

- **Tone:** Direct, professional, and minimalist.
- **Headline style:** Massive, low-tracked, uppercase geometric sans.
- **CTA style:** Plain text with no visual emphasis.
- **Avoid:** Decorative elements / Excessive padding / Bright accent colors / Drop shadows / Complex grids / Italicized text

### Don'ts
- ❌ don't use drop shadows — screenshot shows flat surfaces without depth cues
- ❌ don't use rounded buttons — screenshot shows text-only links without borders or radii
- ❌ don't use multiple font families — screenshot shows a strict two-font system (geometric display, neo-grotesque body)
- ❌ don't use bright accent colors — screenshot shows a strict monochrome palette of dark brown and off-white
- ❌ don't use large line heights for body text — screenshot shows tight, compact line spacing
- ❌ don't use decorative borders — screenshot shows minimal horizontal lines used only for strict separation

The system deliberately rejects decorative elements, bright accents, and complex visual cues, placing its entire faith in typography, scale, and monochrome contrast.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio site for a visual designer, using a dark, warm brown background (#1D1610) and off-white (#FFFBF9) text. The typography is dominated by a massive, geometric sans-serif display font for the hero, paired with a clean neo-grotesque for body text. The layout is a strict, grid-based structure with generous horizontal spacing and tight vertical rhythm. Key critical donts: avoid using any bright accent colors or drop shadows, as the design relies entirely on high-contrast monochrome and flat surfaces. Do not use rounded buttons or decorative borders; interactions are handled through text-only links and subtle opacity changes. Finally, avoid excessive padding or complex visual elements that would distract from the typographic focus.
```
