---
name: Cydstumpel Nl
description: "A strong example of an expressive, developer-focused portfolio that successfully blends bold typography with playful, editorial layout principles."
version: alpha

colors:
  background: "#FFF5EE"
  primary: "#111111"
  tertiary: "#D9533F"
  neutral: "#111111"
  line: "rgba(17,17,17,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.8px"
  heading:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.48px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "-0.48px"

rounded:
  sm: 4px
  md: 8px
  lg: 28px
  pill: 120px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, expressive portfolio site for a creative developer and speaker.

*A playful and bold showcase of a creative developer's portfolio.*

## Colors

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

- **Background (`#FFF5EE`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Accent (`#D9533F`)** — uses `accent` token
- **Muted (`#111111`)** — uses `muted` token
- **Borders (`rgba(17,17,17,1.0)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Consistent 4px base with generous spacing for card layouts.

## Elevation & Depth

- None: None
- None: None
- Borders: Prominent 2px solid borders on cards, using the accent red, blue, and black colors.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 28px
- `pill`: 120px

## Components

- **button:** Bold, uppercase text buttons, often with a distinct border-radius and hover effects.
- **card:** Cards with thick, colored borders, folded corner details, and pill-shaped tags.
- **chip:** Small, rounded pills for tags like CSS, JS, and ANIMATION.
- **input:** Not clearly visible in the provided screenshots.
- **hero:** A massive, horizontally scrolling marquee with overlapping text and a central illustration.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```