# Delba de Oliveira · Design system migration spec

> Source: https://delba.dev  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a text-first, editorial portfolio where typography and spacing do all the work.

## 1. Identity DNA

The design system for Delba de Oliveira's portfolio functions like a well-typeset academic thesis: its authority comes not from decoration but from the disciplined arrangement of type and whitespace. Every decision serves the primary goal of presenting developer education content with clarity and gravitas.

**One-liner:** A clean, typography-focused portfolio for a developer education specialist.
**Keywords:** minimal · developer-education · editorial · clean · text-heavy
**Analogy:** A well-typeset academic thesis

## 2. Color

The color palette is strictly monochromatic, built on a foundation of black and dark grays set against a warm, off-white background (#FAF9F7). This high-contrast scheme ensures maximum legibility for text-heavy content while maintaining a calm, focused atmosphere.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF9F7` | main background |
| `--ink` | `#2A2A29` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High contrast on a warm neutral background

The guiding principle is high contrast on a warm neutral, prioritizing reading comfort over chromatic expression.

## 3. Typography

A single transitional-serif family is used for all typographic functions, from the large display titles down to the fine print. This unified voice reinforces the editorial aesthetic, using weight and scale—not font changes—to establish hierarchy.

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 500 | -0.02em | Page titles |
| headline | 24px | 1.3 | 600 | normal | Section headers |
| body | 18px | 1.6 | 400 | normal | Main text |
| small | 16px | 1.6 | 400 | normal | List items and fine print |

**Type rules:**
- Use a single serif family for both display and body to maintain the editorial aesthetic.
- Ensure strong visual weight hierarchy for headings.
- Use underlines for inline links to maintain readability within text blocks.

## 4. Spacing

Vertical rhythm is the system's backbone, with generous spacing separating distinct content sections to create a clear reading cadence.

- **Base unit:** 8px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections with tight rhythm within lists.

## 5. Surfaces

Surfaces are intentionally flat, with no shadows or container borders to interrupt the content flow. Depth is communicated through hierarchy and proximity alone.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** None, except for a subtle top border on the mobile layout.

## 6. Layout

The layout skeleton is a two-column asymmetric grid on desktop, which gracefully collapses to a single column for mobile. This structure provides a simple yet flexible framework for organizing text-based content.

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

**Skeleton:** Two-column asymmetric grid on desktop, single column on mobile.

## 7. Motion & Interaction

The motion philosophy is one of deliberate restraint, reflecting the site's focus on static, readable content. Interactions are limited to standard link behaviors, with no decorative animation to distract from the material.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Minimal to no visible motion observed.

- **Hover:** Links likely change color or underline style.
- **Click:** Standard link navigation.
- **Transition:** All elements have a transition property applied.
- **Keyboard:** Standard focus states for links and buttons.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and straightforward, using clear, descriptive language that avoids jargon and overly casual slang.

- **Tone:** Professional, direct, and straightforward.
- **Headline style:** Clear and descriptive section titles.
- **CTA style:** Conversational and action-oriented.
- **Avoid:** Avoid jargon-heavy or overly complex language. / Avoid decorative elements that distract from the content. / Avoid casual slang or overly enthusiastic tone.

### Don'ts
- ❌ Don't use decorative gradients — screenshot shows flat, solid backgrounds.
- ❌ Don't use rounded container borders — screenshot shows sharp, square edges.
- ❌ Don't use a bright, high-chroma accent color — screenshot shows a strictly monochromatic palette.
- ❌ Don't use a sans-serif for body text — screenshot shows serif for both display and body.
- ❌ Don't use complex cards or panels — screenshot shows simple, unboxed content blocks.
- ❌ Don't use drop shadows on UI elements — screenshot shows completely flat design.

The system deliberately excludes decorative gradients, rounded container borders, high-chroma accents, and drop shadows, committing fully to a flat, text-first presentation.

## System Prompt (paste into AI tool)

```
This design is a refined, editorial-style portfolio for a developer education specialist. It utilizes a monochromatic palette of black and dark grays on a warm off-white (#FAF9F7) background. Typography is the core element, using a transitional-serif for both headings and body text. Layout is a clean, two-column asymmetric grid on desktop, focusing on readability. Critical don'ts include: avoid decorative gradients, avoid rounded container borders, and do not use high-chroma accent colors.
```