# Richardekwonye · Design system migration spec

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

> Excellent example of typographic-driven portfolio design that prioritizes clarity and professional presentation over visual complexity.

## 1. Identity DNA

This design system is an architectural blueprint for a digital portfolio, where every structural decision serves the craft of clarity. Like a well-detailed construction drawing, the system prioritizes the integrity of negative space and the bold expression of form over ornamental detail.

**One-liner:** Minimalist creative developer portfolio with bold typographic expression
**Keywords:** minimal · professional · typographic · design-engineer
**Analogy:** A well-structured architectural blueprint for a digital portfolio

## 2. Color

The palette is a strict monochrome dialogue between pure black and a single warm neutral background. This high-contrast pairing creates a focused stage where typography becomes the primary visual actor.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E1DFDD` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High contrast monochrome with warm neutral background

The principle is one of absolute restraint, using only the necessary tones to achieve maximum visual weight and professional gravitas.

## 3. Typography

Typographic voice is delivered through a geometric sans-serif with extreme scale contrast, from monumental display sizes to functional body text. A strict uppercase rule for all headings enforces a confident, declarative tone throughout the interface.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 144px | 0.875 | 500 | -2px | Hero titles and large typographic elements |
| h2 | 40px | 1.25 | 500 | -0.5px | Secondary headings and navigation elements |
| body | 16px | 1.15 | 400 | 0px | Regular body text and descriptions |

**Type rules:**
- All headings and display text are uppercase
- Tight letter-spacing on large typography
- Weight contrast between 400 for body and 500 for headings

## 4. Spacing

Vertical rhythm is established on a precise 4px grid, with generous whitespace acting as a structural element rather than empty space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 170 px
- **Rhythm:** Vertical rhythm based on 4px grid with generous whitespace

## 5. Surfaces

Surfaces are defined by absence. There are no borders, shadows, or decorative edges; the clean, flat plane allows content to sit edge-to-edge with absolute purity.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders; clean edge-to-edge layout

## 6. Layout

The layout skeleton is an asymmetric grid that favors purposeful imbalance over rigid symmetry. Generous negative space carves out clear zones for content, creating a composition that feels both open and meticulously structured.

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

**Skeleton:** Asymmetric grid with generous negative space

## 7. Motion & Interaction

Motion philosophy treats animation as a functional refinement, not a decorative feature. All transitions are smooth, one-second cubic-bezier transforms that provide subtle, professional feedback on interaction.

- **Durations:** micro 220ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.62, 0.05, 0.01, 0.99)`
- **Patterns:**
  - Smooth transform transitions on scroll
  - All elements have transition properties defined

- **Hover:** Cursor pointer on interactive elements
- **Click:** Immediate response with visual feedback
- **Transition:** 1 second cubic-bezier transform animations
- **Keyboard:** Standard navigation support

## 8. Voice & Don'ts

The editorial voice is confident, professional, and deliberately understated, matching the system's minimalist rigor. Language is direct, favoring bold, uppercase statements that communicate with clarity and conviction.

- **Tone:** Confident, professional, understated
- **Headline style:** Bold, uppercase, direct statements
- **CTA style:** Minimal text navigation without buttons
- **Avoid:** Decorative elements / Complex animations / Bright colors / Cluttered layouts

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp rectangular edges
- ❌ Don't add drop shadows — screenshot shows flat, shadowless surfaces
- ❌ Don't use multiple colors — screenshot shows only black and warm gray
- ❌ Don't create dense layouts — screenshot shows generous whitespace
- ❌ Don't use lowercase headlines — screenshot shows all uppercase text
- ❌ Don't add decorative borders — screenshot shows borderless design

The system's defining strength lies in what it deliberately omits: decorative flourishes, complex animations, and visual clutter that would dilute its typographic and spatial precision.

## System Prompt (paste into AI tool)

```
This is a minimalist creative developer portfolio for Richard Ekwonye, currently Design Engineer at Stripe. The design uses a strict monochrome palette with warm neutral background (#E1DFDD) and black text (#000000). Typography is geometric sans-serif (PP Neue Montreal) with extreme scale contrast, featuring 144px display type alongside 16px body text. Critical design principles: maintain uppercase treatment for all headings, preserve generous whitespace (170px vertical padding), avoid any decorative elements or borders, use sharp rectangular shapes without border-radius, and implement smooth 1-second cubic-bezier transitions. The layout is asymmetric with a 12-column grid, focusing on typographic expression over visual decoration.
```