creatordesign system
/
GitHub★
creator
still rolling GitHub
Projects collection
Collections · Creator Design System

Projects collection

GitHub-style repo cards, a sidebar carrying the live URL and the ask, and the one atom the collection genuinely needed — a proportional language bar.

The collection with the most borrowed parts and the fewest of its own. A repo card is .c-project; the sidebar is four .col-widgets; the log is .buildlog. Exactly one atom had to be added for it, and it was the language bar.

Open /projects → Open a project page → Its build log →

The repo card

Read off a real GitHub listing rather than invented: owner/name with the owner receding, the description, topics as pills, then one footer line carrying the language dot, stars, forks, licence, the live URL and last activity. .c-project already shipped the logo tile and the stack row — what was missing was everything in the footer that makes a repo card a repo card rather than a blog card with a logo on it.

imswarnil/creator-design-system

A token-first CSS design system for creators — tokens, components, sections and twelve collections built on top of them.

cssdesign-systemdesign-tokensui-kit
CSS 128 14 MIT Live at creator.imswarnil.com Updated 2d ago

.c.c-project — __logo · __stack · __foot

The one new atom

A repository's language breakdown is a proportional bar, and this system had only a single-value one. .progress-split is that: segments that sum to the whole, each carrying its own --value and --seg colour so the palette lives in the markup with the data. It asks "of what", where .progress asks "how far".

CSS 62.4%Python 28.1%JavaScript 8.2%Other 1.3%

.progress.progress-split + .progress__seg + .progress__key — the legend is not optional; a bar of unlabelled colour is decoration

The sidebar is where the actions live

Content in the main column, the repo's own facts in the rail — the live URL, the topics, the counts, the releases and the ask. Everything a reader wants to act on rather than read. The last widget is the one most portfolio sites bury on a contact page: a project page is where somebody decides they want to work with you.

.col-widget ×5 · .stats-bare · .progress-split · .list-group-flush · .col-widget-accent for the hire-me block

Two sequences, two components

The index shows four repos across seven years on the generic horizontal .tl, because across several projects that is a history. A single project page shows .buildlog, because ▸ start, numbered middles and ✓ ship are exactly the subject there. Same idea, different clothes — which is the whole argument of Timeline.

  1. 2026Creator Design System
    CSS
  2. 2026creator-cli
    Python
  3. 2025Component Playground
    JavaScript
  4. 2025Fieldnote
    CSS

.tl.tl-h — the history, on the index

  1. Ship v1Jul 22, 2026
  2. Six collections, one contractJul 18, 2026
  3. The docs siteJul 09, 2026
  4. Components passJun 28, 2026

.buildlog — the build log, on the project page