Skip to content

CreatorTrack Design System

URL: https://mkdocs.justinsforge.com/design-systems/creatortrack/README/

Canonical visual kit for CreatorTrack (the Notion-style dark Suite at workspace.justinsforge.com / app.creatortrack.ai). Synced from the repo at /home/justinwieb/creatortrack by Forge via the DesignSync tool.

What's here

  • tokens/tokens.css: verbatim copy of the app's app/theme.css, the single source of truth for every color, radius, spacing, elevation, font, and metric token. Dark is default; :root[data-theme="light"] block flips the light palette.
  • previews/*.html: self-contained rendered cards of the real components (Foundation: colors, typography, spacing/radii/elevation; Components: buttons, inputs, segmented, select/chips, menu, modal/drawer, alert/progress, stat cards, data grid, sidebar, topbar). Each reproduces the shipped component's computed styles, token-only.

How to use (for any Claude session)

When mocking up new CreatorTrack UI: pull tokens/tokens.css plus the 2-3 preview files closest to what you're building, and match their density conventions (1px --line borders, muted inks, --r-lg cards, soft --elev-* shadows). Never hardcode a hex or px that has a token.

Sync policy: incremental, one component at a time, from the Forge bundle at forge/design-systems/creatortrack/. Never wholesale-replace this project.