# Cydstumpel Nl · Design system migration spec

> Source: https://cydstumpel.nl  ·  Curated by OpenDesign  ·  en

> A strong example of an expressive, developer-focused portfolio that successfully blends bold typography with playful, editorial layout principles.

## 1. Identity DNA

The design for Cydstumpel.nl is built as a playful and bold showcase of a creative developer's portfolio. It is a space where technical craft and expressive editorial style intersect, forming a personal brand that is both confident and accessible.

**One-liner:** A bold, expressive portfolio site for a creative developer and speaker.
**Keywords:** Creative Developer · Conference Speaker · Accessible · Motion Design · Award-Winning
**Analogy:** A playful and bold showcase of a creative developer's portfolio.

## 2. Color

The color system is anchored by a warm, off-white background that provides a soft canvas for bold, high-contrast elements. A dominant high-chroma red accent is paired with black ink, while a secondary palette supports distinct content cards.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF5EE` | main background |
| `--ink` | `#111111` | body text |
| `--muted` | `#111111` | placeholder |
| `--accent` | `#D9533F` | single accent |
| `--line` | `rgba(17,17,17,1.0)` | divider |

**Color principle:** Warm, off-white background with bold black and high-chroma red accents, plus a secondary palette for content cards.

The principle is one of warmth and deliberate emphasis, using a saturated accent to draw the eye to key interactive and content areas.

## 3. Typography

The typographic voice is built on a dynamic pairing: a bold, condensed grotesque-sans for expressive display text and a transitional-serif for body copy and italic accents. This contrast defines the site's editorial character.

- **Display:** grotesque-sans
- **Body:** transitional-serif
- **Mono:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1.8px | Large marquee and section titles |
| heading | 40px | 1.1 | 700 | -0.48px | Blog post titles and secondary headings |
| body | 16px | 1.6 | 400 | -0.48px | Main content text and navigation |

## 4. Spacing

Layout rhythm follows a consistent 4px base, creating a structured yet generous spacing system for its card-based grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous spacing for card layouts.

## 5. Surfaces

Depth is achieved not through soft gradients, but through graphic, offset shadows and prominent, colored borders. Cards are defined by their thick 2px solid borders and folded corner details.

- **Radius:** sm 4px · md 8px · lg 28px · pill 120px
- **Shadows:**
  - None: None
  - None: None
- **Borders:** Prominent 2px solid borders on cards, using the accent red, blue, and black colors.

## 6. Layout

The structural skeleton is an asymmetric, editorial-style layout that breaks from the conventional grid. It is dominated by a large, overlapping marquee element and organized into a 3-column card grid.

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

**Skeleton:** Asymmetric, editorial-style layout with a large, overlapping marquee and a 3-column card grid.

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, purposeful transitions that respond to user interaction. Animations for state changes like hover and focus are subtle, using specific easing curves for border-radius and opacity.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Smooth transitions on hover and focus states
  - Border-radius morphing on interactive elements
  - Subtle opacity fades

- **Hover:** Subtle state changes, likely involving color or border transitions.
- **Click:** Active states for buttons and links.
- **Transition:** All properties transition smoothly, with specific easing curves for border-radius and opacity.
- **Keyboard:** Visible focus states, likely with custom outlines.

## 8. Voice & Don'ts

The editorial voice is confident, playful, and professional, conveyed through bold, uppercase headlines and direct, action-oriented CTAs. The system deliberately avoids passive language, generic corporate jargon, and an overly formal tone.

- **Tone:** Confident, playful, and professional.
- **Headline style:** Bold, uppercase, and highly expressive, using condensed sans-serif and italic serif fonts.
- **CTA style:** Direct, uppercase, and action-oriented, often inside bordered containers.
- **Avoid:** Passive language / Generic corporate jargon / Overly formal tone

### Don'ts
- ❌ Don't use a flat, corporate layout — the screenshot shows an expressive, overlapping editorial style with a massive marquee.
- ❌ Don't use a cold, dark color palette — the screenshot shows a warm, off-white background with a bold red accent.
- ❌ Don't use standard, system fonts — the screenshot shows a combination of bold condensed grotesque and elegant transitional serif fonts.
- ❌ Don't use thin, 1px borders — the screenshot shows prominent, 2px solid borders on cards and containers.
- ❌ Don't use subtle, muted colors for everything — the screenshot uses a high-chroma red as a dominant accent color.
- ❌ Don't use a purely grid-based, symmetric layout — the screenshot shows an overlapping, asymmetrical arrangement of elements.

It deliberately avoids flat, corporate layouts, cold color palettes, and thin, subtle borders in favor of its characteristic boldness.

## System Prompt (paste into AI tool)

```
This is a bold, expressive portfolio site for a creative developer and conference speaker. It features a warm off-white background (#FFF5EE) with a dominant high-chroma red accent (#D9533F) and black ink (#111111). The typography combines a bold, condensed grotesque-sans for display text with a transitional-serif for body copy and italic accents. The layout is asymmetric and editorial, highlighted by a massive, horizontally scrolling marquee. Critical donts: avoid flat corporate layouts, avoid cold color palettes, and avoid thin, subtle borders. The site uses prominent 2px solid borders on its card components, which also feature folded corner details.
```