# Bpowell · Design system migration spec

> Source: https://www.bpowell.co  ·  Curated by OpenDesign  ·  en

> A perfect example of the 'Swiss-style' portfolio, demonstrating how extreme restraint and bold typography can create a high-end, premium feel.

## 1. Identity DNA

Bpowell operates like a high-end design monograph: every element is chosen for its typographic weight and spatial presence. The system is built on a strict minimal vocabulary where boldness emerges from restraint, not decoration.

**One-liner:** A minimalist portfolio driven by bold typography and extreme whitespace.
**Keywords:** minimal · typographic · portfolio · bold · editorial
**Analogy:** A high-end design monograph

## 2. Color

The palette is a binary of deep black ink on pure white space, creating maximum contrast without color. This monochrome discipline forces all visual hierarchy into scale, weight, and negative space.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#111111` | body text |
| `--ink-soft` | `#373737` | secondary text |
| `--line` | `rgba(17,17,17,0.1)` | divider |

**Color principle:** Strict monochrome palette relying on contrast between deep black text and pure white space

The principle is absolute: color never competes with content; it only provides the steepest possible contrast for legibility.

## 3. Typography

Typography carries the entire expressive load of the system, using bold, grotesque sans-serif faces with tight negative tracking at display sizes. The high-contrast jump between massive headings and refined body text creates a clear hierarchy without decorative elements.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 86px | 1.0 | 500 | -2.88px | Hero and section headings |
| body | 26px | 1.15 | 500 | 0px | Navigation and subheaders |

**Type rules:**
- Tight negative letter-spacing on display sizes
- Medium weight used for primary emphasis
- High-contrast sizing jump between header and body

## 4. Spacing

Rhythm is asymmetrical, built from large, intentional blocks of negative space that isolate and frame content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetrical, using large blocks of negative space to separate content sections

## 5. Surfaces

Surfaces are flat and borderless, defined only by their typographic content and the white space around them. The only graphic borders are the 2px solid lines beneath interactive text links, a subtle signal of affordance.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** None used for primary surfaces; 2px solid borders appear on interactive links

## 6. Layout

The skeleton is an asymmetrical grid that privileges typographic columns over uniform modules. A multi-column header gives way to expansive, single-column content blocks, creating a deliberate pace for reading and viewing.

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

**Skeleton:** Asymmetrical grid with a multi-column header and large single-column content blocks

## 7. Motion & Interaction

Motion is invisible but omnipresent, governed by a single, uniform CSS transition applied globally to all elements. The philosophy is one of smooth, immediate response—no theatrical entrances, just seamless state changes.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - All elements have a CSS transition applied for smooth state changes

- **Hover:** Subtle opacity or color shift on text links
- **Click:** Immediate navigation transition
- **Transition:** Uniform 'all' transition applied globally
- **Keyboard:** Standard focus states for accessibility

## 8. Voice & Don'ts

The editorial voice is quietly confident, professional, and refined, communicating through minimalist headlines built entirely on scale. CTAs are understated, using simple text links that rely on subtle underlines for clarity.

- **Tone:** Quietly confident, professional, and refined
- **Headline style:** Minimalist, relying entirely on scale and typography without decorative elements
- **CTA style:** Understated, utilizing simple text links with subtle underlines
- **Avoid:** Colorful accents / Drop shadows / Complex gradients / Rounded containers / Illustrations / Busy layouts

### Don'ts
- ❌ don't use drop shadows — screenshot shows flat, shadowless surfaces
- ❌ don't use multi-color palettes — screenshot shows strictly monochrome black and white
- ❌ don't use rounded corners on containers — screenshot shows sharp, square edges
- ❌ don't use centered text alignment for the main content — screenshot shows left-aligned typography
- ❌ don't use decorative serif fonts — screenshot shows strictly sans-serif typography
- ❌ don't use small, timid display text — screenshot shows massive, dominant headings

The system deliberately omits color accents, drop shadows, complex gradients, rounded corners, and decorative illustrations.

## System Prompt (paste into AI tool)

```
This is a premium, minimalist portfolio for a designer and filmmaker. It features a strict monochrome palette using deep black (#111111) for text and pure white (#FFFFFF) for backgrounds. The typography relies heavily on bold, grotesque sans-serif display fonts with negative letter-spacing and tight line-height. Critical constraints: no drop shadows, no rounded corners on layouts, no colored accents, no centered alignment, no serif fonts, and no decorative illustrations. The focus is entirely on scale, whitespace, and clean typography.
```