Creator Design System
A token-first CSS design system with six real collections built on top of it — this page is one of them.
CSSDesign systemsPython
Resume collection
The fourth collection, and a single page rather than five routes: a full-width summary, then experience, education and projects beside a skills rail — none of it a new component, all of it .col-order, .card and .badge.
Not a collection at all, in the end — a resume is not a group of resumes, with nothing to narrow and nothing to be halfway through, so it moved into collection/_pages/ with the site's other one-offs (home, about, contact, the legal pages). One route, a full-width summary, then a two-column .grid-rail: experience, education and projects in the main column, skills in the rail.
The summary
Name, role, a one-line pitch and the ways to reach the person — the block every other section on the page is supporting detail for.
Swarnil Singhai
Senior Product Engineer
I build design systems and the sites that run on them.
hello@swarnil.dev+1 555 0100Remote · UTC+5:30swarnil.dev
.rsm-summary — from /resume, unchanged
The career timeline is .col-order
A trip, a syllabus and a career all turn out to be the same shape: a first thing, a last thing, and a sequence between them. Rather than invent a timeline, the resume reuses .col-order — the series route's spine — and adds only what it did not already have: an icon marking which kind of entry this is, in place of the plain dot.
- 2023 — NowSenior Product Engineer · Northwind Studio
Owns the design system this page is built with: tokens, components and the collections that ship on top of them.
- 2021 — 2023Frontend Engineer · Fieldnote
Rebuilt the marketing site on a token-first stylesheet, cutting shipped CSS by two thirds with no framework underneath it.
.col-order + .rsm-order__icon — the briefcase is the only new pixel
Education, the same spine again
Same component, same icon treatment, a graduation cap instead of a briefcase. 10th, 12th and a bachelor's are one row shape, not three — a school swaps a place for a stream and a percentage for a CGPA, but nothing about the shape changes.
10th — Delhi Public School, R.K. PuramNew Delhi
12th — Delhi Public School, R.K. PuramNew Delhi
B.Tech — Indian Institute of Technology, DelhiComputer Science & Engineering
.col-order — unmodified
Projects is not a new component either
A project is an unordered set, not a sequence — so it is the shared .card, gridded two-up, the same component travel and course already put in a row of three.
Fieldnote CMS migration
Rebuilt a marketing site's content layer without a framework, cutting shipped CSS by two thirds.
CSSPerformance
.card in a .grid-2
Skills is not a new component
A resume's skill list is a cluster of the shared .badge, because inventing a chip for a page that already has one would be exactly the mistake the collection contract warns against.
CSSDesign systemsAccessibilityJavaScriptPerformance
.badge, in a .cluster
The page head, with the download in it
A résumé is the one page whose primary action is "give me the file", so the download sits in the .page-head actions rather than at the bottom, with a bare stats row under it.
Swarnil Singhai
Senior Product Engineer — design systems, and the sites that run on them.
.page-head-sm + .hero__actions + .stats-bare
Resume icons
Five, on the same 24×24 grid at 1.5px, currentColor only — briefcase, graduation cap, calendar, phone and download.
briefcasegraduation-capcalendarphonedownload
icons/resume/ — inline them, or use a sprite when you need theming