@buttonschool/create-wireframe 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 Button School
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -10,12 +10,20 @@ cd my-app
 pnpm dev
 ```
 
+Or with npm or yarn: `npm create @buttonschool/wireframe my-app` / `yarn create @buttonschool/wireframe my-app`. The CLI runs the matching install command (pnpm, npm, or yarn). Then `pnpm build` and `pnpm preview` (or `npm run build` / `npm run preview`) to build and preview production.
+
 ## What’s included
 
 - **Vite** – dev server with HMR, `pnpm dev` / `pnpm build` / `pnpm preview`
+- **Two-page starter** – Start (small word game, Spelling Bee–style) and token showcase; CSS is linked from HTML (`<link>` in each page’s head); every root-level `.html` file is automatically a page (add a file and a nav link, no config change)
 - **Design tokens** – `src/kit/tokens.css`: grayscale palette, semantic color aliases, spacing scale, border radius, typography (Comic Neue)
 - **Comic Neue** – via [@fontsource/comic-neue](https://fontsource.org/fonts/comic-neue) (OFL-1.1)
 - **Lucide** – dependency only; [Lucide icons](https://lucide.dev) – import and render as SVG as needed
 - **AGENTS.md** – short instructions for AI/code-gen (tokens location, dev server, icons)
+- **Accessibility** – starter includes basic a11y: live regions, current-page marking on nav, and visually hidden labels where needed; extend as you build.
 
 First version: tokens + font + icons only, no component CSS. Not opinionated; add your own structure.
+
+## License
+
+ISC.

package/index.js

@@ -8,6 +8,14 @@ import { spawn } from "child_process";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const templateDir = join(__dirname, "template");
 
+function getPackageManager() {
+  const execPath = process.env.npm_execpath || "";
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (execPath.includes("pnpm") || userAgent.startsWith("pnpm/")) return "pnpm";
+  if (execPath.includes("yarn") || userAgent.startsWith("yarn/")) return "yarn";
+  return "npm";
+}
+
 const projectName = process.argv[2];
 if (!projectName) {
   console.error("Usage: pnpm create @buttonschool/wireframe <project-name>");
@@ -27,12 +35,17 @@ const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
 pkg.name = projectName;
 writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
 
-const child = spawn("pnpm", ["install"], {
+const pm = getPackageManager();
+const installCmd = pm === "pnpm" ? "pnpm" : pm === "yarn" ? "yarn" : "npm";
+const installArgs = pm === "npm" ? ["install"] : ["install"];
+const devCmd = pm === "pnpm" ? "pnpm dev" : pm === "yarn" ? "yarn dev" : "npm run dev";
+
+const child = spawn(installCmd, installArgs, {
   cwd: targetDir,
   stdio: "inherit",
   shell: true,
 });
 child.on("close", (code) => {
   if (code !== 0) process.exit(code);
-  console.log(`\nDone. Run:\n  cd ${projectName}\n  pnpm dev\n`);
+  console.log(`\nDone. Run:\n  cd ${projectName}\n  ${devCmd}\n`);
 });

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@buttonschool/create-wireframe",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Scaffold a Vite-based wireframe prototype with tokens, Comic Neue, and Lucide",
   "type": "module",
   "bin": "index.js",
   "files": [
     "template",
-    "index.js"
+    "index.js",
+    "LICENSE"
   ],
+  "license": "ISC",
   "engines": {
     "node": ">=18"
   },

package/template/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true

package/template/AGENTS.md

@@ -2,10 +2,16 @@
 
 This is a **wireframe prototype** scaffold. Stack: **Vite** (vanilla JS), design tokens, **Comic Neue** font, and **Lucide** icons. Keep structure minimal; suitable for code-gen and rapid iteration.
 
+The project starts with **two HTML pages**: **Start** (`index.html`) has a small word game (Spelling Bee–style); **Tokens** (`tokens.html`) showcases the design tokens. Both share a nav linking to each other. Styles are linked from each page’s `<head>` via `<link rel="stylesheet" href="/src/styles/main.css">`. Prefer writing markup in HTML files and using JS only for behavior. To add a page: add a new `.html` file at the project root and add a link to it in the nav; no need to edit Vite config (every root-level HTML file is automatically a page).
+
+## Styles
+
+Styles are organized under `src/styles/`: `main.css` (orchestration), `base.css`, `layout.css`, `components/` (e.g. nav, button), and `pages/` (home, tokens-showcase). To remove or add a page or component, edit the corresponding file and the `@import` list in `styles/main.css`.
+
 ## Tokens
 
 - **Location:** `src/kit/tokens.css`
-- **Usage:** CSS custom properties on `:root` with `--wire-*` prefix: colors (grayscale + semantic aliases), spacing (`--wire-space-*`), radius (`--wire-radius-*`), typography (`--wire-font-family`, `--wire-line-height`). Use them in your CSS, e.g. `color: var(--wire-text-primary);`, `padding: var(--wire-space-md);`.
+- **Usage:** CSS custom properties on `:root` with `--wire-*` prefix: colors (grayscale + semantic aliases), spacing (`--wire-space-*`), radius (`--wire-radius-*`), typography (`--wire-font-family`, `--wire-line-height`), font sizes (`--wire-text-xs` through `--wire-text-2xl`, plus semantic aliases like `--wire-text-body`, `--wire-text-heading`, `--wire-text-subheading`, `--wire-text-caption`, `--wire-text-label`), and sizing (`--wire-size-icon-sm`, `--wire-size-icon-md`, `--wire-size-icon-lg`, `--wire-size-avatar-sm`, `--wire-size-avatar-md`, `--wire-size-avatar-lg`). Use them in your CSS, e.g. `color: var(--wire-text-primary);`, `padding: var(--wire-space-md);`, `font-size: var(--wire-text-body);`, `width: var(--wire-size-icon-md); height: var(--wire-size-icon-md);`.
 
 ## Dev server
 
@@ -13,4 +19,8 @@ This is a **wireframe prototype** scaffold. Stack: **Vite** (vanilla JS), design
 
 ## Icons
 
-- **Lucide** is installed. Import icons and render as SVG (e.g. use the `lucide` package API or copy SVGs from [Lucide](https://lucide.dev)). Prefer semantic icon names; keep icons consistent with wireframe style.
+- **Lucide** is installed. Import icons and render as SVG (e.g. use the `lucide` package API or copy SVGs from [Lucide](https://lucide.dev)). Prefer semantic icon names; keep icons consistent with wireframe style. Example: the Start page uses `data-lucide="crown"` in the HTML and `createIcons({ icons: { Crown } })` from `lucide` in JS to render the crown icon.
+
+## Accessibility
+
+The starter includes basic a11y: `aria-live` for dynamic feedback, `aria-current="page"` on the nav, and `.visually-hidden` for labels. Extend with focus management, landmarks, and ARIA as needed.

package/template/index.html

@@ -3,10 +3,34 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/styles/main.css" />
     <title>Wireframe</title>
   </head>
   <body>
-    <div id="app"></div>
+    <nav class="site-nav">
+      <a href="/" aria-current="page">Start</a>
+      <a href="/tokens.html">Tokens</a>
+    </nav>
+    <main class="game-area">
+      <p class="bee-score" aria-live="polite"><i data-lucide="crown" class="bee-score-icon" aria-hidden="true"></i><span class="bee-score-value">0</span><span class="bee-score-label visually-hidden"> points</span></p>
+      <div class="bee-honeycomb" aria-hidden="true"></div>
+      <div class="bee-input-row">
+        <label for="bee-word" class="visually-hidden">Your word</label>
+        <input
+          type="text"
+          id="bee-word"
+          class="bee-input"
+          placeholder="Enter a word"
+          autocomplete="off"
+          autocapitalize="off"
+          maxlength="15"
+        />
+        <button type="button" class="bee-submit">Guess</button>
+      </div>
+      <p class="bee-feedback" aria-live="polite"></p>
+      <h2 class="bee-found-heading">Found words</h2>
+      <ul class="bee-found-list" aria-live="polite"></ul>
+    </main>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package/template/src/game.js

@@ -0,0 +1,271 @@
+/**
+ * Spelling Bee clone – pangram WIREFRAME.
+ * Letters: W, I, R, E, F, A, M. Center letter E (required in every word).
+ */
+
+import { createIcons, Crown } from "lucide";
+
+const LETTERS = ["W", "I", "R", "E", "F", "A", "M"];
+const CENTER_LETTER = "E";
+const MIN_LENGTH = 4;
+const STORAGE_KEY = "wireframe-bee-found";
+
+const WORD_LIST = new Set([
+  "aerie",
+  "aerier",
+  "afar",
+  "afear",
+  "affair",
+  "affirm",
+  "affirmer",
+  "afire",
+  "aimer",
+  "airer",
+  "airfare",
+  "airframe",
+  "airier",
+  "area",
+  "arear",
+  "aria",
+  "arrear",
+  "aware",
+  "awarer",
+  "eerie",
+  "eerier",
+  "emir",
+  "ewer",
+  "faerie",
+  "fair",
+  "fairer",
+  "fame",
+  "fare",
+  "farer",
+  "farm",
+  "farmer",
+  "farmwife",
+  "farrier",
+  "fear",
+  "fearer",
+  "femme",
+  "ferm",
+  "fermi",
+  "fewer",
+  "fief",
+  "fierier",
+  "fife",
+  "fifer",
+  "fire",
+  "firearm",
+  "firer",
+  "firm",
+  "firmer",
+  "firmware",
+  "frame",
+  "framer",
+  "free",
+  "freer",
+  "freeware",
+  "friar",
+  "frier",
+  "iffier",
+  "imam",
+  "mafia",
+  "maim",
+  "maimer",
+  "mama",
+  "mamma",
+  "mare",
+  "marm",
+  "marrer",
+  "marrier",
+  "meme",
+  "mere",
+  "merer",
+  "merrier",
+  "miff",
+  "miffier",
+  "mime",
+  "mimer",
+  "mire",
+  "raffia",
+  "rammer",
+  "rare",
+  "rarefier",
+  "rarer",
+  "rawer",
+  "reaffirm",
+  "ream",
+  "reamer",
+  "rear",
+  "rearer",
+  "rearm",
+  "reef",
+  "reefer",
+  "refer",
+  "referee",
+  "referrer",
+  "refire",
+  "reframe",
+  "reifier",
+  "rewarm",
+  "rewear",
+  "rewire",
+  "rife",
+  "riff",
+  "riffraff",
+  "rime",
+  "rimer",
+  "rimfire",
+  "rimmer",
+  "wafer",
+  "waif",
+  "ware",
+  "warfare",
+  "warfarer",
+  "warier",
+  "warm",
+  "warmer",
+  "wear",
+  "wearer",
+  "wearier",
+  "weer",
+  "weir",
+  "were",
+  "wife",
+  "wire",
+  "wireframe",
+  "wirer",
+  "wirier",
+  "wrier",
+]);
+
+function isPangram(word) {
+  const lower = word.toLowerCase();
+  return LETTERS.every((letter) => lower.includes(letter.toLowerCase()));
+}
+
+function usesOnlyLetters(word) {
+  const allowed = new Set(LETTERS.map((l) => l.toLowerCase()));
+  return [...word.toLowerCase()].every((ch) => allowed.has(ch));
+}
+
+function hasCenterLetter(word) {
+  return word.toLowerCase().includes(CENTER_LETTER.toLowerCase());
+}
+
+function scoreWord(word) {
+  const len = word.length;
+  if (len < MIN_LENGTH) return 0;
+  let pts = len === 4 ? 1 : len === 5 ? 2 : len === 6 ? 3 : 4;
+  if (isPangram(word)) pts += 7;
+  return pts;
+}
+
+function validate(word) {
+  const w = word.trim().toLowerCase();
+  if (!w) return { ok: false, message: "" };
+  if (w.length < MIN_LENGTH) return { ok: false, message: "Too short." };
+  if (!hasCenterLetter(w)) return { ok: false, message: "Missing center letter." };
+  if (!usesOnlyLetters(w)) return { ok: false, message: "Invalid letters." };
+  if (!WORD_LIST.has(w)) return { ok: false, message: "Not in word list." };
+  return { ok: true, word: w };
+}
+
+function init() {
+  createIcons({ icons: { Crown } });
+
+  const area = document.querySelector(".game-area");
+  if (!area) return;
+
+  const scoreEl = area.querySelector(".bee-score");
+  const honeycombEl = area.querySelector(".bee-honeycomb");
+  const inputEl = area.querySelector(".bee-input");
+  const submitBtn = area.querySelector(".bee-submit");
+  const feedbackEl = area.querySelector(".bee-feedback");
+  const foundListEl = area.querySelector(".bee-found-list");
+
+  if (!scoreEl || !honeycombEl || !inputEl || !submitBtn || !feedbackEl || !foundListEl) return;
+
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+  const loaded = Array.isArray(saved)
+    ? saved.filter((w) => typeof w === "string" && WORD_LIST.has(w.toLowerCase()))
+    : [];
+  const foundOrdered = [...new Set(loaded)];
+  const found = new Set(foundOrdered);
+  let totalScore = foundOrdered.reduce((sum, w) => sum + scoreWord(w), 0);
+
+  function setFeedback(text, success = false, error = false) {
+    feedbackEl.textContent = text;
+    feedbackEl.classList.toggle("bee-feedback--success", success);
+    feedbackEl.classList.toggle("bee-feedback--error", error);
+  }
+
+  function updateScore() {
+    const val = scoreEl.querySelector(".bee-score-value");
+    if (val) val.textContent = totalScore;
+  }
+
+  function saveFound() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(foundOrdered));
+  }
+
+  function renderFoundWords() {
+    foundListEl.innerHTML = "";
+    const sorted = [...foundOrdered].sort((a, b) => a.localeCompare(b));
+    sorted.forEach((word) => {
+      const li = document.createElement("li");
+      li.textContent = word;
+      if (isPangram(word)) li.classList.add("bee-pangram");
+      foundListEl.appendChild(li);
+    });
+  }
+
+  function submitWord() {
+    const raw = inputEl.value;
+    const result = validate(raw);
+    if (!result.ok) {
+      setFeedback(result.message || "Try again.", false, true);
+      return;
+    }
+    const { word } = result;
+    if (found.has(word)) {
+      setFeedback("Already found.", false, true);
+      return;
+    }
+    foundOrdered.push(word);
+    found.add(word);
+    totalScore += scoreWord(word);
+    saveFound();
+    setFeedback(isPangram(word) ? "Pangram!" : "Good!", true, false);
+    inputEl.value = "";
+    inputEl.focus();
+    updateScore();
+    renderFoundWords();
+  }
+
+  submitBtn.addEventListener("click", submitWord);
+  inputEl.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") submitWord();
+  });
+
+  honeycombEl.innerHTML = "";
+  const outer = LETTERS.filter((l) => l !== CENTER_LETTER);
+  const centerNode = document.createElement("span");
+  centerNode.className = "bee-letter bee-letter--center";
+  centerNode.textContent = CENTER_LETTER;
+  centerNode.setAttribute("aria-hidden", "true");
+  honeycombEl.appendChild(centerNode);
+  outer.forEach((letter) => {
+    const span = document.createElement("span");
+    span.className = "bee-letter";
+    span.textContent = letter;
+    span.setAttribute("aria-hidden", "true");
+    honeycombEl.appendChild(span);
+  });
+
+  updateScore();
+  renderFoundWords();
+  setFeedback("Make words with the letters. Use the center letter in every word.");
+}
+
+init();

package/template/src/kit/tokens.css

@@ -29,7 +29,24 @@
   --wire-font-weight-bold: 700;
   --wire-line-height: 1.4;
 
+  /* Type scale (rem), adapted from AUI wireframe kit */
+  --wire-text-2xs: 0.625rem;
+  --wire-text-xs: 0.75rem;
+  --wire-text-sm: 0.875rem;
+  --wire-text-base: 1rem;
+  --wire-text-lg: 1.125rem;
+  --wire-text-xl: 1.25rem;
+  --wire-text-2xl: 1.5rem;
+
+  /* Semantic type aliases */
+  --wire-text-body: var(--wire-text-sm);
+  --wire-text-caption: var(--wire-text-xs);
+  --wire-text-label: var(--wire-text-2xs);
+  --wire-text-heading: var(--wire-text-2xl);
+  --wire-text-subheading: var(--wire-text-xl);
+
   /* Spacing scale */
+  --wire-space-2xs: 2px;
   --wire-space-xs: 4px;
   --wire-space-sm: 8px;
   --wire-space-md: 12px;
@@ -43,4 +60,12 @@
   --wire-radius-md: 6px;
   --wire-radius-lg: 8px;
   --wire-radius-full: 50%;
+
+  /* Sizing – icons (square) and avatars (diameter) */
+  --wire-size-icon-sm: 1rem;
+  --wire-size-icon-md: 1.25rem;
+  --wire-size-icon-lg: 1.5rem;
+  --wire-size-avatar-sm: 1.5rem;
+  --wire-size-avatar-md: 2rem;
+  --wire-size-avatar-lg: 2.5rem;
 }

package/template/src/main.js

@@ -1,6 +1 @@
-import "./style.css";
-
-document.querySelector("#app").innerHTML = `
-  <h1>Wireframe</h1>
-  <p>Edit <code>src/main.js</code> and save. Vite will hot-reload.</p>
-`;
+import "./game.js";

package/template/src/{style.css → styles/base.css}

@@ -1,13 +1,13 @@
-@import "./kit/tokens.css";
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 body {
+  margin: 0;
   font-family: var(--wire-font-family);
   line-height: var(--wire-line-height);
   color: var(--wire-text-primary);
-  background-color: var(--wire-surface);
-  margin: 0;
-}
-
-#app {
-  padding: var(--wire-space-xl);
+  background-color: var(--wire-bg);
 }

package/template/src/styles/components/nav.css

@@ -0,0 +1,21 @@
+.site-nav {
+  display: flex;
+  gap: var(--wire-space-lg);
+  padding: var(--wire-space-md) var(--wire-space-xl);
+  border-bottom: 2px solid var(--wire-border-light);
+  background-color: var(--wire-surface);
+}
+
+.site-nav a {
+  color: var(--wire-text-secondary);
+  text-decoration: none;
+}
+
+.site-nav a:hover {
+  color: var(--wire-text-primary);
+}
+
+.site-nav a[aria-current="page"] {
+  color: var(--wire-text-primary);
+  font-weight: var(--wire-font-weight-bold);
+}

package/template/src/styles/layout.css

@@ -0,0 +1,5 @@
+main {
+  max-width: 60ch;
+  margin: 0 auto;
+  padding: var(--wire-space-xl);
+}

package/template/src/styles/main.css

@@ -0,0 +1,6 @@
+@import "../kit/tokens.css";
+@import "base.css";
+@import "layout.css";
+@import "components/nav.css";
+@import "pages/start.css";
+@import "pages/tokens-showcase.css";

package/template/src/styles/pages/start.css

@@ -0,0 +1,226 @@
+/* Start page – Spelling Bee game */
+
+.visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.game-area {
+  max-inline-size: 36rem;
+  margin-inline: auto;
+}
+
+.game-area .bee-score {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--wire-space-sm);
+  font-size: var(--wire-text-xl);
+  margin-block-end: var(--wire-space-lg);
+}
+
+.game-area .bee-score-icon {
+  width: var(--wire-size-icon-md);
+  height: var(--wire-size-icon-md);
+  flex-shrink: 0;
+  color: var(--wire-text-muted);
+}
+
+.game-area .bee-score-value {
+  font-weight: var(--wire-font-weight-bold);
+}
+
+.game-area .bee-score-label {
+  font-size: var(--wire-text-body);
+  font-weight: var(--wire-font-weight-normal);
+  color: var(--wire-text-muted);
+}
+
+/* Honeycomb: 7 letters, pointy-top hexes via ::before, absolute positioning */
+.bee-honeycomb {
+  --width: 3.25em;
+  --height: calc(var(--width) * 0.8660254);
+  --gap: var(--wire-space-xs);
+  position: relative;
+  height: calc(3 * var(--height) + 2 * var(--gap));
+  width: calc(2.5 * var(--width) + 2 * 1.1547 * var(--gap));
+  margin-block-end: var(--wire-space-2xl);
+  margin-inline: auto;
+}
+
+/* DOM order: 1=E(center), 2=W, 3=I, 4=R, 5=F, 6=A, 7=M */
+.bee-honeycomb .bee-letter:nth-child(2) {
+  transform: translate(0, calc(-1 * var(--height) - var(--gap)));
+}
+.bee-honeycomb .bee-letter:nth-child(3) {
+  transform: translate(
+    calc(0.75 * var(--width) + 1.1547 * var(--gap)),
+    calc(-0.5 * var(--height) - 0.5 * var(--gap))
+  );
+}
+.bee-honeycomb .bee-letter:nth-child(4) {
+  transform: translate(
+    calc(0.75 * var(--width) + 1.1547 * var(--gap)),
+    calc(0.5 * var(--height) + 0.5 * var(--gap))
+  );
+}
+.bee-honeycomb .bee-letter:nth-child(5) {
+  transform: translate(
+    calc(-0.75 * var(--width) - 1.1547 * var(--gap)),
+    calc(-0.5 * var(--height) - 0.5 * var(--gap))
+  );
+}
+.bee-honeycomb .bee-letter:nth-child(6) {
+  transform: translate(
+    calc(-0.75 * var(--width) - 1.1547 * var(--gap)),
+    calc(0.5 * var(--height) + 0.5 * var(--gap))
+  );
+}
+.bee-honeycomb .bee-letter:nth-child(7) {
+  transform: translate(0, calc(var(--height) + var(--gap)));
+}
+
+.bee-letter {
+  --bee-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--width);
+  height: var(--height);
+  margin-left: calc(-0.5 * var(--width));
+  margin-top: calc(-0.5 * var(--height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: var(--wire-text-xl);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-text-primary);
+}
+
+.bee-letter::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  z-index: -1;
+  background-color: var(--wire-white);
+  clip-path: var(--bee-hex);
+  -webkit-clip-path: var(--bee-hex);
+}
+
+.bee-letter::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-color: var(--wire-black);
+  clip-path: var(--bee-hex);
+  -webkit-clip-path: var(--bee-hex);
+}
+
+.bee-letter.bee-letter--center {
+  color: var(--wire-white);
+  z-index: 1;
+}
+
+.bee-letter.bee-letter--center::before {
+  background-color: var(--wire-dark);
+}
+
+/* Word input row */
+.bee-input-row {
+  display: flex;
+  gap: var(--wire-space-sm);
+  margin-block-end: var(--wire-space-md);
+}
+
+.bee-input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: var(--wire-space-md) var(--wire-space-lg);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-primary);
+  background-color: var(--wire-surface);
+  border: 2px solid var(--wire-border);
+  border-radius: var(--wire-radius-lg);
+}
+
+.bee-input::placeholder {
+  color: var(--wire-text-placeholder);
+}
+
+.bee-input:focus {
+  outline: none;
+  border-color: var(--wire-dark);
+}
+
+.bee-submit {
+  padding: var(--wire-space-md) var(--wire-space-xl);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-white);
+  background-color: var(--wire-dark);
+  border: 2px solid var(--wire-dark);
+  border-radius: var(--wire-radius-lg);
+  cursor: pointer;
+}
+
+.bee-submit:hover {
+  background-color: var(--wire-black);
+  border-color: var(--wire-black);
+}
+
+/* Feedback message */
+.bee-feedback {
+  min-block-size: 1.5em;
+  margin-block-end: var(--wire-space-lg);
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-secondary);
+}
+
+.bee-feedback.bee-feedback--success {
+  color: var(--wire-text-primary);
+  font-weight: var(--wire-font-weight-bold);
+}
+
+.bee-feedback.bee-feedback--error {
+  color: var(--wire-text-primary);
+}
+
+/* Found words list */
+.bee-found-heading {
+  font-size: var(--wire-text-sm);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-text-muted);
+  margin-block-end: var(--wire-space-sm);
+}
+
+.bee-found-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wire-space-xs) var(--wire-space-lg);
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-secondary);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.bee-found-list li {
+  display: flex;
+  align-items: center;
+  gap: var(--wire-space-xs);
+}
+
+.bee-found-list .bee-pangram {
+  font-weight: var(--wire-font-weight-bold);
+}

package/template/src/styles/pages/tokens-showcase.css

@@ -0,0 +1,222 @@
+.token-showcase-intro {
+  margin-block-end: var(--wire-space-2xl);
+  color: var(--wire-text-muted);
+}
+
+.token-showcase code {
+  padding: var(--wire-space-2xs) var(--wire-space-xs);
+  background-color: var(--wire-surface-alt);
+  border-radius: var(--wire-radius-sm);
+  font-size: var(--wire-text-sm);
+}
+
+.showcase-section {
+  margin-block-end: var(--wire-space-3xl);
+}
+
+.showcase-section h2 {
+  font-size: var(--wire-text-subheading);
+  margin-block-end: var(--wire-space-md);
+  color: var(--wire-text-secondary);
+}
+
+.showcase-section h3 {
+  font-size: var(--wire-text-base);
+  font-weight: var(--wire-font-weight-bold);
+  margin-block: var(--wire-space-lg) var(--wire-space-sm);
+  color: var(--wire-text-secondary);
+}
+
+.text-muted {
+  color: var(--wire-text-muted);
+  font-size: var(--wire-text-sm);
+  margin-block-start: var(--wire-space-md);
+}
+
+.colors-two-col {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wire-space-2xl);
+}
+
+@media (min-width: 600px) {
+  .colors-two-col {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.colors-two-col .swatches {
+  margin: 0;
+}
+
+.swatches {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wire-space-sm);
+}
+
+.swatch {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wire-space-md);
+  margin: 0;
+}
+
+.swatch .swatch-sample {
+  width: 3rem;
+  height: 3rem;
+  aspect-ratio: 1;
+  border-radius: var(--wire-radius-md);
+  flex-shrink: 0;
+  border: 1px solid var(--wire-dark);
+}
+
+.swatch figcaption {
+  font-size: var(--wire-text-xs);
+  color: var(--wire-text-muted);
+}
+
+.spacing-demos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wire-space-sm);
+}
+
+.spacing-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wire-space-md);
+}
+
+.spacing-figure .spacing-visual {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.spacing-figure .spacing-block {
+  width: 2rem;
+  height: 2rem;
+  aspect-ratio: 1;
+  background-color: var(--wire-dark);
+  border-radius: var(--wire-radius-sm);
+  flex-shrink: 0;
+}
+
+.spacing-figure figcaption {
+  font-size: var(--wire-text-xs);
+  color: var(--wire-text-muted);
+}
+
+.typography-two-col {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wire-space-2xl);
+}
+
+@media (min-width: 600px) {
+  .typography-two-col {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.sizing-two-col {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wire-space-2xl);
+}
+
+@media (min-width: 600px) {
+  .sizing-two-col {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.sizing-demos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wire-space-sm);
+}
+
+.sizing-subsection {
+  margin: 0;
+}
+
+.sizing-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wire-space-md);
+}
+
+.sizing-figure .icon-sample {
+  background-color: var(--wire-mid);
+  border-radius: var(--wire-radius-sm);
+  flex-shrink: 0;
+}
+
+.sizing-figure .avatar-sample {
+  background-color: var(--wire-dark);
+  border-radius: var(--wire-radius-full);
+  flex-shrink: 0;
+}
+
+.sizing-figure figcaption {
+  font-size: var(--wire-text-xs);
+  color: var(--wire-text-muted);
+}
+
+.radius-demos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wire-space-sm);
+}
+
+.radius-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wire-space-md);
+}
+
+.radius-figure .radius-sample {
+  width: 3rem;
+  height: 3rem;
+  aspect-ratio: 1;
+  background-color: var(--wire-dark);
+  color: var(--wire-white);
+  font-size: var(--wire-text-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.radius-figure figcaption {
+  font-size: var(--wire-text-xs);
+  color: var(--wire-text-muted);
+}
+
+.type-sample {
+  margin-block-end: var(--wire-space-sm);
+}
+
+.type-scale-heading {
+  font-size: var(--wire-text-base);
+  font-weight: var(--wire-font-weight-bold);
+  margin-block: var(--wire-space-lg) var(--wire-space-sm);
+  color: var(--wire-text-secondary);
+}
+
+.type-scale-line {
+  margin-block-end: var(--wire-space-xs);
+}
+
+.type-scale-line:last-of-type {
+  margin-block-end: 0;
+}

package/template/tokens.html

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/styles/main.css" />
+    <title>Tokens – Wireframe</title>
+  </head>
+  <body>
+    <nav class="site-nav">
+      <a href="/">Start</a>
+      <a href="/tokens.html" aria-current="page">Tokens</a>
+    </nav>
+    <main class="token-showcase">
+      <h1>Design tokens</h1>
+      <p class="token-showcase-intro">This page shows the wireframe kit tokens. Use them in your CSS with <code>var(--wire-*)</code>.</p>
+
+      <section class="showcase-section">
+        <h2>Colors</h2>
+        <div class="colors-two-col">
+          <div>
+            <h3>Base colors</h3>
+            <div class="swatches">
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-black);"></div>
+                <figcaption><code>--wire-black</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-dark);"></div>
+                <figcaption><code>--wire-dark</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-mid);"></div>
+                <figcaption><code>--wire-mid</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-light);"></div>
+                <figcaption><code>--wire-light</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-lighter);"></div>
+                <figcaption><code>--wire-lighter</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-bg);"></div>
+                <figcaption><code>--wire-bg</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-white);"></div>
+                <figcaption><code>--wire-white</code></figcaption>
+              </figure>
+            </div>
+          </div>
+          <div>
+            <h3>Semantic colors</h3>
+            <div class="swatches">
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-text-primary);"></div>
+                <figcaption><code>--wire-text-primary</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-text-secondary);"></div>
+                <figcaption><code>--wire-text-secondary</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-text-muted);"></div>
+                <figcaption><code>--wire-text-muted</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-text-placeholder);"></div>
+                <figcaption><code>--wire-text-placeholder</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-surface);"></div>
+                <figcaption><code>--wire-surface</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-surface-alt);"></div>
+                <figcaption><code>--wire-surface-alt</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-border);"></div>
+                <figcaption><code>--wire-border</code></figcaption>
+              </figure>
+              <figure class="swatch">
+                <div class="swatch-sample" style="background-color: var(--wire-border-light);"></div>
+                <figcaption><code>--wire-border-light</code></figcaption>
+              </figure>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Spacing</h2>
+        <p class="text-muted">Gap between the two blocks is the token value.</p>
+        <div class="spacing-demos">
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-xs);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-xs</code></figcaption>
+          </figure>
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-sm);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-sm</code></figcaption>
+          </figure>
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-md);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-md</code></figcaption>
+          </figure>
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-lg);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-lg</code></figcaption>
+          </figure>
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-xl);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-xl</code></figcaption>
+          </figure>
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-2xl);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-2xl</code></figcaption>
+          </figure>
+          <figure class="spacing-figure">
+            <div class="spacing-visual" style="gap: var(--wire-space-3xl);">
+              <div class="spacing-block"></div>
+              <div class="spacing-block"></div>
+            </div>
+            <figcaption><code>--wire-space-3xl</code></figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Typography</h2>
+        <p class="type-sample" style="font-weight: var(--wire-font-weight-normal);">Comic Neue, normal weight (400).</p>
+        <p class="type-sample" style="font-weight: var(--wire-font-weight-bold);">Comic Neue, bold (700).</p>
+        <div class="typography-two-col">
+          <div>
+            <h3 class="type-scale-heading">Type scale</h3>
+            <div class="type-scale">
+              <p class="type-scale-line" style="font-size: var(--wire-text-2xs);">Sample text <code>--wire-text-2xs</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-xs);">Sample text <code>--wire-text-xs</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-sm);">Sample text <code>--wire-text-sm</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-base);">Sample text <code>--wire-text-base</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-lg);">Sample text <code>--wire-text-lg</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-xl);">Sample text <code>--wire-text-xl</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-2xl);">Sample text <code>--wire-text-2xl</code></p>
+            </div>
+          </div>
+          <div>
+            <h3 class="type-scale-heading">Semantic type</h3>
+            <div class="type-scale">
+              <p class="type-scale-line" style="font-size: var(--wire-text-body);">Body text <code>--wire-text-body</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-heading);">Heading <code>--wire-text-heading</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-subheading);">Subheading <code>--wire-text-subheading</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-caption);">Caption <code>--wire-text-caption</code></p>
+              <p class="type-scale-line" style="font-size: var(--wire-text-label);">Label <code>--wire-text-label</code></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Border radius</h2>
+        <div class="radius-demos">
+          <figure class="radius-figure">
+            <div class="radius-sample" style="border-radius: var(--wire-radius-sm);">sm</div>
+            <figcaption><code>--wire-radius-sm</code></figcaption>
+          </figure>
+          <figure class="radius-figure">
+            <div class="radius-sample" style="border-radius: var(--wire-radius-md);">md</div>
+            <figcaption><code>--wire-radius-md</code></figcaption>
+          </figure>
+          <figure class="radius-figure">
+            <div class="radius-sample" style="border-radius: var(--wire-radius-lg);">lg</div>
+            <figcaption><code>--wire-radius-lg</code></figcaption>
+          </figure>
+          <figure class="radius-figure">
+            <div class="radius-sample" style="border-radius: var(--wire-radius-full);">full</div>
+            <figcaption><code>--wire-radius-full</code></figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Sizing</h2>
+        <div class="sizing-two-col">
+          <div class="sizing-subsection">
+            <h3>Icon sizes</h3>
+            <div class="sizing-demos">
+              <figure class="sizing-figure">
+                <div class="icon-sample" style="width: var(--wire-size-icon-sm); height: var(--wire-size-icon-sm);"></div>
+                <figcaption><code>--wire-size-icon-sm</code></figcaption>
+              </figure>
+              <figure class="sizing-figure">
+                <div class="icon-sample" style="width: var(--wire-size-icon-md); height: var(--wire-size-icon-md);"></div>
+                <figcaption><code>--wire-size-icon-md</code></figcaption>
+              </figure>
+              <figure class="sizing-figure">
+                <div class="icon-sample" style="width: var(--wire-size-icon-lg); height: var(--wire-size-icon-lg);"></div>
+                <figcaption><code>--wire-size-icon-lg</code></figcaption>
+              </figure>
+            </div>
+          </div>
+          <div class="sizing-subsection">
+            <h3>Avatar sizes</h3>
+            <div class="sizing-demos">
+              <figure class="sizing-figure">
+                <div class="avatar-sample" style="width: var(--wire-size-avatar-sm); height: var(--wire-size-avatar-sm);"></div>
+                <figcaption><code>--wire-size-avatar-sm</code></figcaption>
+              </figure>
+              <figure class="sizing-figure">
+                <div class="avatar-sample" style="width: var(--wire-size-avatar-md); height: var(--wire-size-avatar-md);"></div>
+                <figcaption><code>--wire-size-avatar-md</code></figcaption>
+              </figure>
+              <figure class="sizing-figure">
+                <div class="avatar-sample" style="width: var(--wire-size-avatar-lg); height: var(--wire-size-avatar-lg);"></div>
+                <figcaption><code>--wire-size-avatar-lg</code></figcaption>
+              </figure>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/template/vite.config.js

@@ -1,3 +1,15 @@
+import { readdirSync } from "fs";
+import { resolve } from "path";
 import { defineConfig } from "vite";
 
-export default defineConfig({});
+const root = __dirname;
+const htmlFiles = readdirSync(root).filter((f) => f.endsWith(".html"));
+const input = Object.fromEntries(
+  htmlFiles.map((f) => [f.replace(/\.html$/, ""), resolve(root, f)])
+);
+
+export default defineConfig({
+  build: {
+    rollupOptions: { input },
+  },
+});