№ kelseydake-com

Kelseydake

Retro neon explosion: bold, hand-drawn lettering on a vibrant, textured backdrop.

Portfolio Gridplayful maximalism vintage portfoliolight

The layout is a lively arrangement of distinct, visually noisy blocks. Bold typography and vibrant color palettes create a sense of energetic, hand-drawn design. The overall feel is reminiscent of vintage posters and quirky illustration. · illustration grid, cartoon portfolio, maximalist design, vintage illustration, colorful portfolio, graphic design grid, playful layout, character design, bold typography, illustrated portfolio

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: saturated · neon · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#fcdc04
OKLCHoklch(89.4% 0.185 98)
RoleDominant
find sites →
Hex#690e13
OKLCHoklch(33.8% 0.123 25)
RoleSurface
find sites →
Hex#fbdba3
OKLCHoklch(90.5% 0.080 81)
RoleInk
find sites →
Hex#7653a7
OKLCHoklch(51.8% 0.132 301)
RoleAccent
find sites →
Hex#dcb4bc
OKLCHoklch(80.7% 0.047 5)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
body	hobeaux	16px	400	1.4	0	Aa Bb Cc
button	hobeaux	14px	600	1.4	1.36px	Aa Bb Cc

Spacing scale

16px

22px

58px

Radius scale

0px

Export

:root {
  --color-dominant: #fcdc04;
  --color-surface: #690e13;
  --color-ink: #fbdba3;
  --color-accent: #7653a7;
  --color-detail: #dcb4bc;
}

/* CSS variables exposed by source */
:root {
  --dark: #582c12;
  --light: #ffd43a;
  --pad: 8px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Kelseydake.
Reference design system (extracted from the live site):
- Palette: #fcdc04, #690e13, #fbdba3, #7653a7, #dcb4bc
- Typefaces: hobeaux
- Macrostructure: Portfolio Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/kelseydake-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

body

hobeaux

16px

400

1.4

Aa Bb Cc

button

hobeaux

14px

600

1.4

1.36px

Aa Bb Cc

:root { --color-dominant: #fcdc04; --color-surface: #690e13; --color-ink: #fbdba3; --color-accent: #7653a7; --color-detail: #dcb4bc; } /* CSS variables exposed by source */ :root { --dark: #582c12; --light: #ffd43a; --pad: 8px; }

Build a landing page in the visual style of Kelseydake. Reference design system (extracted from the live site): - Palette: #fcdc04, #690e13, #fbdba3, #7653a7, #dcb4bc - Typefaces: hobeaux - Macrostructure: Portfolio Grid Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/kelseydake-com