Skip to content

CreatorTrack Design System Bundle, Preview Authoring Brief

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

Purpose: self-contained HTML preview cards of CreatorTrack's real UI, synced to a claude.ai/design Design System project via the native DesignSync tool. Each card renders standalone in a sandboxed pane: NO external requests (no CDN, no fonts, no images), NO JavaScript required (static HTML + CSS only).

Hard contract (every preview file)

  1. First line, EXACTLY: <!-- @dsCard group="<Group>" --> where <Group> is one of Foundation or Components.
  2. Then a full standalone document body fragment: <style> block, then markup. Do NOT emit <!DOCTYPE>, <html>, <head>, <body> wrappers; just the marker comment, one <style>, then content markup.
  3. The <style> block MUST begin by inlining the COMPLETE contents of /home/justinwieb/forge/design-systems/creatortrack/tokens.css (the :root dark tokens, the :root[data-theme="light"] block, and the utility CSS). Component CSS goes after it. Never restate a token value; always var(--token).
  4. Root wrapper for every card: <div class="ds-card" style="background:var(--bg);color:var(--txt);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh);padding:24px;"> All content inside it.
  5. Variants are labeled with a small caption row above each example: <div style="font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.05em;color:var(--mut3);margin:16px 0 8px;">Label</div>
  6. Fidelity source of truth: read the REAL component source in /home/justinwieb/creatortrack/components/<Name>/<Name>.tsx and its studio.tsx (the studio entry lists canonical variants/controls). Reproduce the rendered look in plain HTML+CSS. Match paddings, radii, font sizes, colors exactly as the component computes them from tokens. Hover/focus states: render them as separate static examples (e.g. a row shown with the hover background applied inline), do not rely on real :hover.
  7. No raw hex or magic px where a token exists. Local one-off metrics that the component itself hardcodes may be hardcoded here too (they are part of the component, not theme).
  8. Keep each file under 64KB.

Output location

/home/justinwieb/forge/design-systems/creatortrack/previews/<name>.html (flat dir, kebab-case names, exactly the filename assigned to you).

Notes

  • Dark theme is the default render; do not set data-theme. Only colors.html also shows the light palette (it demonstrates both by scoping a wrapper with data-theme="light" on an inner div; note CSS :root[data-theme=...] won't apply to a div, so for that one card restate the light surface tokens on a .light-scope class copied from tokens.css, clearly commented).
  • The app is a Notion-style dark suite. Density and subtlety matter: 1px var(--line) borders, quiet muted text, small radii, soft elevation.