Hello-Brands/hello-sugar-design-skill

---

name: hello-sugar-design description: Builds a self-contained, on-brand Hello Sugar HTML artifact that is NOT a slide deck — an ROI/analysis page, one-pager, microsite, landing page, report, calculator, or dashboard. Carries the Hello Sugar design system (cream/red/rose tokens, LiebeLotte + Montserrat fonts, a component + Chart.js catalog, voice rules) so the page is on-brand instantly. Use when the user wants to create, build, make, or redesign a Hello Sugar web page, branded HTML, landing/report page, one-pager, microsite, calculator, or data/analysis page. Keywords: Hello Sugar web page, branded HTML, on-brand page, ROI page, one-pager, microsite, dashboard, report, design system, HS tokens, Montserrat, LiebeLotte, cream/red palette, Chart.js brand theme. NOT for slide decks (use hello-sugar-deck) or React app UI.

Hello Sugar design (web artifacts)

Turn a topic into a polished, on-brand Hello Sugar HTML artifact — a scrolling page, not slides: ROI/analysis pages, one-pagers, microsites, reports, calculators, dashboards. Self-contained folder (fonts + logos + CSS tokens + components inline) that opens in any browser, on-brand by default.

When to use

The user wants a Hello Sugar web page / branded HTML / one-pager / report / calculator / dashboard (e.g. "build a membership ROI page", "branded laser LTV one-pager"). For slides, use hello-sugar-deck instead. For React/Tailwind app UI, use the tokens in ~/Brand/HelloSugar/BRAND-GUIDELINES.md directly.

NEVER (the landmines — read first)

• NEVER use absolute asset paths (/assets/...). Artifacts open from file:// and host anywhere, so paths must be relative (assets/...) or fonts/logos 404. (This is the opposite of the deck skill.)
• NEVER round numbers on a data page. Exact figures with decimals; every headline must reconcile to its own factors — an owner will check with a calculator. Label any estimate as an estimate; never present a web/benchmark figure as Hello Sugar data.
• NEVER aggregate a BigQuery table before sampling it — many tables have generic _COL_0..N columns; SELECT * … LIMIT 6 to map columns first, or the numbers are silently wrong.
• NEVER use gendered language (she/her/he/him) on any owner-, franchisee-, or public-facing page. Singular they/their or "the member/client". (Clientele skews female → default neutral.)
• NEVER use LiebeLotte (cursive) below ~2.5rem — it's illegible small. Hero .display only, max two per page. Every other heading/label is Montserrat.
• NEVER pair --hs-red with --hs-rose-deep in the same zone (they fight) and never use Chart.js default blue/teal — chart colors come from HS.colors. One red hero element per zone.
• NEVER ship <meta robots noindex> on a public marketing page — it's the right default for internal/ owner artifacts, but delete it when the page is meant to be found.
• NEVER hand-write the @font-face/CSS — compose from the template's classes; don't rewrite its <style>.

Workflow

Lighter than a deck — design-only (no data-pipeline gates, no Vercel hub). Four steps.

1 · Scope

Define: artifact type (ROI page / one-pager / report / calculator / dashboard); audience and internal vs public (sets noindex + gender-neutral strictness + tone); the one decision or takeaway the page drives and the single comparison that proves it; scope (franchisor ~250 vs owned corporate); a kebab-case name. Ask only high-value unknowns — don't over-ask. Default to franchisor scope and gender-neutral copy for any owner/public audience.

2 · Content & data

If data-backed, pull a real number for every claim (BigQuery first via mcp__bigquery__execute_sql, then Krisp / Obsidian / web as the topic needs). Sample tables before aggregating; reconcile headlines to known anchors; flag anything not reproducible. No rounding.

3 · Build

Load references/design-system.md (tokens, full component catalog, Chart.js theme, voice). Scaffold:

scripts/scaffold_page.py --name <name> --title "<Title>" --audience "<Aud>" \
  --dir ~/Brand/HelloSugar/pages          # add --inline-fonts for a single shareable file

Compose the page as a stack of bands (<section class="band [bg-*]"><div class="wrap">…</div></section>), rotating backgrounds for rhythm. Lead each quantitative point with a visual comparison (stat tiles, .decay bars, a chart) — not prose. For charts, enable Chart.js + hs-charts.js and color via HS.colors. Cite source/method in a .note on every data section. Keep asset paths relative.

4 · Verify

Open file://…/<name>.html (or screenshot for a phone review):

scripts/shoot_page.py ~/Brand/HelloSugar/pages/<name>/<name>.html

Check: no placeholders ({{…}}, "00.0", "Eyebrow Label") remain; for owner/public pages grep -ioE "\b(she|her|hers|he|him|his)\b" is empty; every data section has a source note; headlines reconcile; fonts + logos resolve; cursive only large; contrast holds on dark bands. Report the file path / live URL.

Bundled resources

• assets/page-template.html — self-contained on-brand page skeleton (fonts + tokens + ~18 components + scroll-reveal + print). (Build)
• assets/hs-charts.js — Chart.js v4 brand theme: HS.colors, HS.fill, HS.opts. (Build, data pages)
• assets/fonts/, assets/logos/ — brand fonts (incl. Fifita) and logos (Color/White/Full/Black).
• references/design-system.md — tokens, web type scale, full component catalog, chart theming, voice. (Build)
• scripts/scaffold_page.py — copy template + assets into an artifact folder; --inline-fonts = single file. (Build)
• scripts/shoot_page.py — full-page PNG of the artifact for visual QA / phone review. (Verify)

Relationship to hello-sugar-deck

Same brand DNA (tokens, fonts, voice, the never-round / gender-neutral / red-vs-rose rules), different surface: decks are fixed-viewport slides published to the Vercel hub; this builds scrolling, self-contained web artifacts. Asset paths are relative here, absolute there. Charts are HTML/Chart.js here, CSS-only there.