# Kevinbrenkman · Design system migration spec

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

> A masterclass in restrained, typography-driven portfolio design where the framework intentionally disappears to elevate the showcased work.

## 1. Identity DNA

Kevin Brenkman's design system operates like a well-built gallery space: a refined, minimal structure that lets the work speak for itself. This is a design-led web development practice for creative partners, where the system's architecture is deliberately subdued to frame the portfolio.

**One-liner:** A design-led web development practice for creative partners.
**Keywords:** design-led · web development · practice · creative partners
**Analogy:** A refined, minimal studio portfolio that lets the work speak for itself.

## 2. Color

The color system is a stark, high-contrast monochrome foundation. It uses white, black, and subtle grays to ensure project imagery remains the primary focus, deferring entirely to the showcased work.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F8F8` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#3B3B3B` | secondary text |
| `--muted` | `#DFDFDF` | placeholder |
| `--muted-soft` | `rgba(59, 59, 59, 0.3)` | weak hint |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast monochrome foundation that defers entirely to the project imagery.

This principle of chromatic restraint ensures no palette choice competes with the portfolio's content.

## 3. Typography

Typographic voice is clean and consistent, handled entirely by a grotesque-sans-serif category. The system maintains a uniform font weight of 400 across all elements, establishing a direct, professional tone without decorative flourish.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 400 | 0.25px | Project titles and hero text |
| body | 14px | 1.3 | 400 | 0.25px | Body copy, descriptions, and navigation |

**Type rules:**
- Use grotesque-sans for all primary text.
- Maintain uniform font weight of 400 across all elements.
- Apply consistent letter spacing of 0.25px for all body and display text.

## 4. Spacing

Rhythm is governed by a strict 4px base unit, creating tight, consistent padding around text elements for a controlled vertical cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px base unit with tight, consistent padding around text elements.

## 5. Surfaces

Depth is almost entirely absent. Surfaces are flat, relying on thin 1px solid borders for subtle separation rather than shadows or complex layering.

- **Radius:** sm 2px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - none
- **Borders:** Thin 1px solid borders using rgba(59, 59, 59, 0.3) for subtle separation.

## 6. Layout

The layout skeleton is full-width and edge-to-edge, with project images spanning the entire viewport width. Text is constrained to a comfortable reading measure, creating a clear hierarchy between immersive imagery and legible content.

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

**Skeleton:** Full-width, edge-to-edge layout with project images spanning the entire viewport width and text constrained to a comfortable reading measure.

## 7. Motion & Interaction

Motion philosophy is understated and functional. Transitions for padding and opacity on hover states are smooth and predictable, using a consistent 0.4s ease to signal interactivity without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Transitions for padding and opacity on hover states.
  - Transform animations for interactive elements.

- **Hover:** Subtle padding or opacity transitions to indicate interactivity.
- **Click:** Immediate response with no complex state changes.
- **Transition:** Consistent 0.4s ease for padding and opacity transitions.
- **Keyboard:** Standard focus and tab navigation for links and interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and understated. Headlines are clear, concise, and descriptive, while calls to action are subtle, inline text links rather than prominent buttons.

- **Tone:** Professional, direct, and understated.
- **Headline style:** Clear, concise, and descriptive project titles.
- **CTA style:** Subtle, inline text links rather than prominent buttons.
- **Avoid:** Marketing jargon or aggressive sales language. / Overly decorative elements or distracting animations. / Bright, saturated accent colors that compete with project imagery.

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows a strictly monochrome palette with no dominant high-chroma colors.
- ❌ Don't use heavy font weights — screenshot shows a uniform font weight of 400 across all text.
- ❌ Don't use complex shadows or depth — screenshot shows flat, borderless or subtly bordered layouts.
- ❌ Don't use rounded corners extensively — screenshot shows sharp, minimal 2px border radii.
- ❌ Don't use aggressive calls to action — screenshot shows subtle, inline text links instead of prominent buttons.
- ❌ Don't use decorative typography — screenshot shows a clean, consistent grotesque sans-serif font.

They deliberately avoid bright accent colors, heavy font weights, complex shadows, and aggressive sales language to maintain the system's focused minimalism.

## System Prompt (paste into AI tool)

```
Design a clean, professional portfolio website for a creative studio. Use a high-contrast monochrome palette with a white background (#FFFFFF), black text (#000000), and subtle grays (#F8F8F8, #DFDFDF). Set the primary typography to a grotesque sans-serif category with a uniform weight of 400 and consistent letter spacing of 0.25px. The layout should be full-width and edge-to-edge, with project imagery taking center stage and minimal, restrained UI elements. Critical donts: never use bright, saturated accent colors; never use bold or heavy font weights; never add complex shadows or decorative UI elements; never use aggressive calls to action; never use rounded corners beyond a minimal 2px radius; never use decorative typography.
```