CURATED · OPEN · FREE

Cydstumpel Nl

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

01

Identity DNA

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

02

Color

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

03

Typography

grotesque-sans · transitional-serif

• display80px · 400
• heading40px · 700
• body16px · 400

04

Spacing

Consistent 4px base with generous spacing for card layouts.

05

Surfaces

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

None: None · None: None

06

Layout

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

07

Motion & Interaction

Smooth transitions on hover and focus states · Border-radius morphing on interactive elements · Subtle opacity fades

Subtle state changes, likely involving color or border transitions. · Active states for buttons and links.

08

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.

09

Voice & Don'ts

• Tone Confident, playful, and professional.
• Headlines Bold, uppercase, and highly expressive, using condensed sans-serif and italic serif fonts.
• CTAs Direct, uppercase, and action-oriented, often inside bordered containers.

• 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.
• Avoid: Passive language
• Avoid: Generic corporate jargon
• Avoid: Overly formal tone

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko