Cometeer Design System, for AI.
How the Cometeer design system maps to Claude Code + Figma MCP — three sources, one truth. Build with named tokens, regenerate from Moondust.
Three sources, one truth.
Three layers, one direction of flow. Each layer serves a different audience.
tokens.json
JSON tree readable by any tool. Resolves references like {colors.neutral.300} → #f3f5e8. Powers production CSS and Tailwind.
Moondust DLS
Variables + text styles consumed by every Cometeer Figma file. Polished kit for designers — light/dark, component variants.
AI Kit page
Inside the Claude-Kit Figma file. Frame names are the API — get_metadata returns a self-documenting inventory.
One element, three names.
Every design primitive appears in some subset of the three sources. Pick a row, find which source owns it, copy the right name into your code.
| Primitive | tokens.json (canonical) | Moondust DLS (Figma) | AI Kit page (Figma) |
|---|---|---|---|
| Colors — primary / secondary / system e.g. cream, frosted-gold, success |
colors.primary.cream |
Primary/CreamVariables |
primary/creamLive-bound swatch |
| Colors — theme.* semantic e.g. bg.surface, accent.emphasis |
colors.theme.background.surface |
Not modeled | theme/background/surfaceRaw hex (matches gist) |
| Typography roles e.g. h1, body large, caption |
typography.h1 |
Text style Heading/1/DesktopNative |
Heading/1/DesktopCloned sample |
| Brand fonts Agipo · BauTF |
fonts.agipo · fonts.sans |
Embedded | Cloned text only |
| Coffee profiles / roasters / gradients | colors.profile.*colors.roaster.*colors.gradient.* |
Not in scope | Not in scope |
| Breakpoints · spacing · scale | breakpoints.*spacing.* |
Not in scope | Not in scope |
Live-bound: AI Kit fill is connected to the Moondust variable by key. Changes there propagate here. Raw hex: value matches the gist but isn't variable-bound.
3 disagreements between Figma library and gist.
The AI Kit page tags these with ⚠ badges on the affected swatches.
| Token | Figma has | Gist has | Recommendation |
|---|---|---|---|
theme.accent.emphasisDarker |
#2C2B2B (grey.800) |
#1A1A1A (grey.900) |
Fix Figma. Library duplicates accent.emphasis — bug. |
theme.accent.emphasisVariant |
#D8DACF (neutral.500) |
#F3F5E8 (neutral.300) |
Needs design call. Both values look suspicious. |
theme.info.emphasis |
#3F90E5 (blue.500) |
#F0F7FF (blue.50) |
Fix gist. Lightest tint — inconsistent with the rest of the .emphasis pattern. |
Three tiers, one direction.
Use the tier that matches your job: globals for brand surfaces, theme for semantic intent. Never literal hex.
| Raw scale | Global | Theme (semantic intent) |
|---|---|---|
colors.neutral.300 |
primary.cream | theme.bg.surface · theme.bg.canvas · theme.input.background · theme.fg.onEmphasis |
colors.grey.800 |
primary.black | theme.fg.default · theme.accent.emphasis · theme.warning.fg · theme.error.fg · theme.info.fg · theme.success.fg |
colors.gold.400 |
primary.frostedGold | theme.accent.default |
Type roles, rendered at size.
Every Cometeer text style — shown the way it actually renders. Agipo for display + headings, BauTF for body, captions, hyperlinks.
Starting a new project.
Drop this prompt into Claude Code (or any LLM session with Figma MCP + repo access):
Build a Cometeer-branded <page or feature>. The brand is documented in three places:
1. tokens.json at the repo root — engineering canonical (Tailwind-derived JSON)
2. Moondust DLS Figma library (ujrVRTIth6srOWLXhm0KWs) — variables + text styles
3. "AI Kit (MCP-friendly)" page in Claude-Kit (aWT68n9nxtNBJVX8rntJaI) — flat semantic inventory.
Use get_metadata on the page to enumerate every token; get_screenshot for visual lookups.
Constraints:
- Use named tokens, never raw hex (`primary.cream`, not `#F3F5E8`)
- Semantic intent (buttons/cards/alerts) → use `theme.*` tokens
- Brand palette (backgrounds, hero accents) → use `primary.*` or `secondary.*`
- Typography: Agipo for display + headings, BauTF for body. Family names are
case-sensitive: `Agipo`, `BauTF-Regular`, `BauTF-Medium`.
- Read CLAUDE-KIT-TOKENS.md before starting for the 3 known Figma↔gist mismatches.Bootstrap checklist
- Copy color tokens from
tokens.jsoninto CSS custom properties (lowercase + dashes:--primary-cream,--theme-bg-surface). @font-facedeclare Agipo + BauTF — hot-link/_fonts/cometeer.cssor drop the files in/fonts/.- Apply
font-family: 'BauTF', system-ui, sans-serifto body; reserve Agipo for headings. - Set body background to
--theme-bg-surface(=primary.cream) for the default Cometeer look.
Updating the AI Kit from Moondust.
The AI Kit page is a derived projection — never edit it by hand. Regenerate when a variable is added/renamed, a token value changes in the gist, or a mismatch gets resolved.
Rebuild the "AI Kit (MCP-friendly)" page in the Claude-Kit Figma file
(fileKey aWT68n9nxtNBJVX8rntJaI) using scripts/figma/build-ai-kit.js.
Steps:
1. Read scripts/figma/build-ai-kit.js to get the token data + binding map.
2. Read tokens.json for any updated values.
3. In Moondust DLS (ujrVRTIth6srOWLXhm0KWs), re-query the variable catalog
(name → key) so the binding map stays current if Moondust changed.
4. Delete the existing "AI Kit (MCP-friendly)" page on Claude-Kit.
5. Rebuild in 4 use_figma calls (Page title + Colors, Layout fix, Typography
— cloning Agipo/BauTF samples from the source page "Pulls from Moondust DLS",
Brand Assets + Templates + Index).
6. Re-bind every Global swatch to its Moondust variable via importVariableByKeyAsync.
7. Take a verifying screenshot and report any swatches that failed to bind.If you update Moondust variables, re-publish the library (Assets panel → Publish library → check Variable collection). Subscribers won't see your edits until you publish.