Accent

#C15F3C

Muted

#B1ADA1

Surface

#F4F3EE

White

#FFFFFF

Success

Warning

Error

Info

Pixel font = Silkscreen // used for headings, nav, buttons, labels, badges, section titles

Body font = IBM Plex Sans // used for paragraph text, descriptions, long-form only

display 20px_

Silkscreen - hero title, page title

heading 1 16px

Silkscreen - section headers like "free stuff_"

heading 2 13px

Silkscreen - card titles, nav brand

label 11px

Silkscreen - nav links, button text, badge text

micro 9px

Silkscreen - timestamps, fine print

Body 15px - this is what paragraphs and descriptions look like. IBM Plex Sans stays readable while pixel font handles all the personality.

IBM Plex Sans 400 - descriptions, bios, long text

Small 13px - captions, helper text, metadata

IBM Plex Sans 400

All buttons use Silkscreen pixel font. Radius always 0px (sharp square). Hover: slight translateY(-1px).

DEFAULT FREE NEW AI LIVE SERIES 01

sveltekit supabase flutter claude api

terminal greeting_

> system.boot()

> loading vibecodes...

> welcome, builder._

xp / progress bar_

SERIES PROGRESS 5 / 8 EP

status indicator_

BUILDING

PLANNING

SHIPPED

ticker / marquee_

CURRENTLY BUILDING: UNFLTRD // NEXT UP: KOREA TRIP APP // FOLLOW THE BUILD ON TIKTOK // CURRENTLY BUILDING: UNFLTRD // NEXT UP: KOREA TRIP APP // FOLLOW THE BUILD ON TIKTOK

toast / notification_

+1 XP new episode published

NEW spec sheet generator is live

INFO 3 free generations remaining

stat counters_

12

EPISODES

3

FREE TOOLS

2

SERIES

command palette / cta block_

ready to build?

grab the free spec sheet prompt and start shipping.

footer_

vibecodes_ // 2026

built with vibes and claude

vibecodes_

free stuff series about

AI FREE

spec sheet generator

paste your app idea, get a full prd with design system, data models, and ai prompts. powered by claude.

claude api prd