# Soulwire · Design system migration spec

> Source: https://soulwire.co.uk  ·  Curated by OpenDesign  ·  en

> A perfect example of a 'developer-centric' aesthetic that uses a single typeface and a restricted palette to create a focused, distraction-free personal brand.

## 1. Identity DNA

This design system is built on the premise of a terminal-like personal portfolio. It functions as a clean, direct interface between a creative coder and their work, stripping away all ornamentation to reveal the essential.

**One-liner:** A minimalist, monospaced portfolio for a creative coder and engineer.
**Keywords:** creative coder · generative design · interactive · minimal
**Analogy:** a terminal-like personal portfolio

## 2. Color

The color system is a study in restraint: a strict monochromatic palette built on a near-black background with light gray text. There are no accent colors; contrast and hierarchy are communicated through luminance alone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#16191B` | main background |
| `--ink` | `#E2E6E8` | body text |
| `--muted` | `#E2E6E8` | placeholder |
| `--line` | `rgba(226,230,232,1.0)` | divider |

**Color principle:** Strict monochromatic palette with near-black background and light gray text

The guiding principle is that color serves only to ensure legibility and structure, never decoration.

## 3. Typography

All text is set in Roboto Mono, establishing a consistent, code-like voice. Light weight (300) is used throughout, with uppercase and letter-spacing reserved for section labels.

- **Display:** monospace
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.0 | 300 | 0px | Page headings like 'Hey' and 'Konnichiwa' |

**Type rules:**
- All text is monospaced
- Light weight (300) used throughout
- Uppercase and letter-spacing for section labels

## 4. Spacing

Spacing follows a linear, predictable rhythm, with generous whitespace defining the boundaries between sections and content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Linear and predictable, with generous whitespace between sections

## 5. Surfaces

Surfaces are deliberately flat, with no shadows or borders to imply depth. The interface exists as a single, unadorned plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders

## 6. Layout

The layout skeleton is a centered content column on a full-width dark background. It prioritizes readability through a simple, single-column structure and generous whitespace.

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

**Skeleton:** A centered content column on a full-width dark background

## 7. Motion & Interaction

Motion is restrained and functional, focusing on smooth opacity fades for element transitions. The philosophy is that animation should clarify change, not decorate it.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - Opacity transitions for element appearances

- **Hover:** Pointer cursor on interactive elements
- **Click:** Standard browser behavior
- **Transition:** All properties transition with opacity easing
- **Keyboard:** Standard browser focus

## 8. Voice & Don'ts

The editorial voice is professional, direct, and minimalist, mirroring the clarity of the visual system. Headlines are simple and conversational, while calls to action are plain monospaced text links.

- **Tone:** Professional, direct, and minimalist
- **Headline style:** Simple, conversational, and large
- **CTA style:** Plain monospaced text links
- **Avoid:** Marketing jargon / Excessive decoration / Conversational filler

### Don'ts
- ❌ Don't use serif fonts — screenshot shows monospace fonts exclusively
- ❌ Don't use bright or saturated colors — screenshot shows a strict grayscale palette
- ❌ Don't add shadows or depth — screenshot shows completely flat surfaces
- ❌ Don't use rounded corners on elements — screenshot shows sharp or no corners
- ❌ Don't use a traditional navigation bar — screenshot shows links integrated into the layout
- ❌ Don't use centered text alignment — screenshot shows left-aligned content blocks

It deliberately avoids marketing jargon, excessive decoration, and any conversational filler.

## System Prompt (paste into AI tool)

```
This is a minimalist developer portfolio for a creative coder, featuring a dark, monochromatic color scheme (bg #16191B, ink #E2E6E8) and a strictly monospaced typography system (Roboto Mono). The layout is a centered, single-column structure with generous whitespace and no borders or shadows. Critical donts: do not introduce any serif or sans-serif fonts, do not use any saturated or high-chroma accent colors, and do not add any three-dimensional depth or rounded corners to elements.
```