# Cometeer Prototype Starter — Notes for Claude You're in a self-contained folder for building Cometeer-branded prototype pages. The teammate running you here is probably non-engineering — they clone this folder, paste a short brief, and you build them a page. ## Design system (three sources, one truth) 1. **`tokens.json`** in this folder — engineering-canonical token values (mirror of [Sean's gist](https://gist.github.com/seand7565/5c2b249e02cbf642a825e8414683539f)). Source of truth for what every color / font / size resolves to. 2. **Moondust DLS Figma library** (`ujrVRTIth6srOWLXhm0KWs`) — variables + text styles for designers in Figma. 3. **"AI Kit (MCP-friendly)" page in Claude-Kit** (`aWT68n9nxtNBJVX8rntJaI`) — flat, named semantic inventory. Frame names = token names. `get_metadata` enumerates every token; `get_screenshot` for visuals. Read [`CLAUDE-KIT-TOKENS.md`](./CLAUDE-KIT-TOKENS.md) before building for the 3 known Figma↔gist mismatches (`theme.accent.emphasisDarker`, `theme.accent.emphasisVariant`, `theme.info.emphasis`). ## Templates to start from Inside the AI Kit page, the "04 — Templates" section points at 4 layouts: | Template | Node ID | Use for | |---------------------|----------|---------------------------------------------| | Landing — Desktop | `1:3797` | Single-purpose campaign / launch pages | | Landing — Mobile | `1:3745` | Mobile-first landing reference | | Homepage — Desktop | `1:4888` | Multi-section marketing home | | Homepage — Mobile | `1:3878` | Mobile-first home reference | Pull a `get_screenshot` of the right one for visual reference before laying out the page. ## Build constraints - **Named tokens only — never raw hex.** Use `primary.cream` (resolves to `#F3F5E8` via `tokens.json`), not `#F3F5E8`. - `theme.*` tokens for semantic intent: buttons, cards, alerts, status. - `primary.*` / `secondary.*` for brand palette: backgrounds, hero accents. - Domain palettes from `tokens.json` (not in the AI Kit but valid): `colors.coffee.{light,medium,dark}` for roast levels, `colors.roaster.` for roaster brand colors. - **Typography**: `Agipo` for display + `h1`–`h4`. `BauTF` for body. Family names are case-sensitive: `Agipo`, `BauTF` (Regular / Medium / Bold variants registered in `_fonts/cometeer.css`). - The `.cometeer-fonts` opt-in class on `` forces brand fonts everywhere. It's **greedy** — any element with `"hero"`, `"display"`, or `"headline"` in its class gets Agipo, **including descendants**. Re-assert `font-family: var(--font-sans)` on body copy inside `.hero` / display sections to avoid Agipo bleeding into paragraphs (see the Bird Rock page in the parent repo for the exact override pattern). - Pure static HTML/CSS/JS. **No build step**, no framework, no `package.json`. - Single `index.html` in this folder. Self-contained inline CSS is fine. ## Local preview + deploy ```bash python3 -m http.server 8765 # → http://localhost:8765/ vercel deploy --prod # First run: prompts "Set up and deploy?" → yes # Creates the teammate's own Vercel project under their account. # URL lands at https://.vercel.app/ ``` ## Figma MCP gotchas - If `get_metadata` / `get_screenshot` returns "**Enable Dev Mode MCP Server**" instructions: the teammate hasn't enabled the MCP yet. Direct them to the README's setup section. Don't try to work around — you need the MCP to read the AI Kit. - If those calls return **403 / "not found" / permission error**: the teammate isn't on the Cometeer Figma team yet. Tell them to ask Toan for a Viewer invite (free seat on Pro tier). Don't try to work around. - If they return **"session expired"** intermittently: you're hitting Figma's per-minute rate limit (Pro tier: 10 calls/min). Wait ~60s and retry. `whoami` is exempt — use it to test connectivity vs. blocked state. ## What's in this folder ``` starter/ ├── README.md ← teammate-facing setup + paste-ready prompt ├── CLAUDE.md ← this file (Claude reads it on startup) ├── CLAUDE-KIT-TOKENS.md ← full token reference + known mismatches ├── tokens.json ← canonical token values ├── _fonts/ │ ├── cometeer.css ← @font-face for Agipo + BauTF; link from index.html │ ├── agipo/ │ └── bautf/ ├── assets/ │ └── cometeer-wordmark.svg ├── index.html ← starter handshake page (replace with your build) ├── .gitignore └── .vercelignore ```