Creator Design System
A token-first design system made by a creator, for creators — practical, opinionated, and themed end-to-end from the same variables.
What this is
A complete, practical design system for a creator's website: tokens, elements, components, sections, whole page layouts — and the same language exported to YouTube thumbnails, banners and social art. Plain CSS, no framework required, themed end-to-end by variables.
Why I built it
I'm a creator too — I publish videos, courses, build logs and trips, and every new page restarted the same arguments: which grey, which radius, where the curriculum goes, what a thumbnail looks like. So I settled the arguments once, wrote them down as tokens and rules, and this documentation is the receipt. Nothing here is theoretical: every component exists because a real page on a real creator site needed it.
Who it's for — and what you can do
Build your whole site
Home, blog, videos, courses with syllabus, series with episode players, projects with build logs, travel with itineraries — every layout is a documented floor plan.
Rebrand in three variables
Change --accent, --font-display and --radius-card and the entire site, player and thumbnail set follow. The token contract is the whole API.
Design your channel with it
The Broadcast layers export thumbnails, series art, end screens, banners and IG posts from the same tokens — site and channel stay one brand.
Ship with any stack
Vanilla CSS, SCSS or Tailwind — same variables, same classes. See Getting started for the five-minute install.
The four magic values
Like any good studio, the system has house values — short enough to say mid-edit, real enough to decide with.
1 · Press record
Done beats perfect. Ship the page with defaults, iterate in public — the system’s defaults are good enough to publish with on day one.
2 · Cut the noise
Every element must earn its frame. One accent, one ask, one inverse band — restraint is the brand, deletion is a feature.
3 · Show the b-roll
Build in public, document honestly: real states, honest loading, honest empty pages. The process is content; the UI never lies.
4 · One more take
Craft is iteration. Tokens make retakes cheap — refine the variable, and every page that used it gets the better take.
The three devices
The signal dot
One vermilion dot per surface. It means live, active, now — never decoration.
The frame
Viewfinder chrome around the thing being shown. It always wraps content.
The slate
Mono, uppercase, letterspaced metadata — the production voice that never shouts.
Why · How · For whom
| Question | Answer |
|---|---|
Why | so one person can run a channel-sized brand without re-deciding it nightly — the full ideology |
How | tokens → elements → components → sections → layouts, all plain CSS — install in five minutes |
For whom | creator-builders: people who film, write, teach or build in public and want their site to look decided |
Rules | the eight principles every layer obeys |