Build

Use in code

HeyGoal is one HTML file with vanilla JS. The system ships as plain CSS and one small script, so there is no build step.

1. Load the fonts and the stylesheetassets/css/fonts.css (Bricolage Grotesque and Inter, local files) and assets/css/heygoal.css — the generated token block plus every component and pattern rule. In the single-file app, paste their contents into the page's <style>.
2. Set the theme and motion on <html>data-wd-theme="dark" or "light" (dark is the default) and data-motion="full" or "reduced". Never use data-theme in the app — the claude.ai host writes it.
3. Write the app's markupComponents are class names: .btn, .icon-btn, .pill, .seg, .input, .check, .me, .nav… Open any preview on the Components page and copy its markup.
4. Color only through tokensvar(--surface), var(--text), var(--accent-text). If a value has no token, add it to tokens.w3c.json, run node tools/build-tokens.mjs in the source folder and paste the new block.
5. IconsLoad assets/js/heygoal-icons.js; HG_ICONS.ico('plus') returns an inline SVG in currentColor. Sizes 16, 20 or 24 only (.ico.sm, .ico, .ico.lg).

Minimal page

<!DOCTYPE html>
<html lang="en" data-wd-theme="dark" data-motion="full">
<head>
  <link rel="stylesheet" href="assets/css/fonts.css">
  <link rel="stylesheet" href="assets/css/heygoal.css">
  <script src="assets/js/heygoal-icons.js"></script>
</head>
<body style="background:var(--bg);color:var(--text);font:var(--type-body)">
  <button class="btn primary" id="add"></button>
  <script>
    document.getElementById('add').innerHTML =
      HG_ICONS.ico('plus').replace('class="ico"', 'class="ico sm"') + 'Add task';
  </script>
</body>
</html>

Switching the accent

Settings writes one line; the text, ring and on-accent colors follow automatically and stay AA for all 18 swatches:

document.documentElement.style.setProperty('--accent', 'var(--coral)');

1.19.0 names still work

--muted-2, --r, --pill, --display, --font, --ease, --t-fast, --t, --t-slow, --logo-ink, --logo-blue, --topbar and --topbar-blur resolve through aliases for two minor versions. --muted-2 and --r-lg are deprecated.