diff --git a/README.md b/README.md index 311f046..cd7df9e 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@
+start + # start **The application kernel for [TypeScript](https://www.typescriptlang.org/) — diff --git a/docs/public/logo-dark.svg b/docs/public/logo-dark.svg new file mode 100644 index 0000000..45f5afd --- /dev/null +++ b/docs/public/logo-dark.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/logo-light.svg b/docs/public/logo-light.svg new file mode 100644 index 0000000..b6b390a --- /dev/null +++ b/docs/public/logo-light.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/logo.svg b/docs/public/logo.svg new file mode 100644 index 0000000..45f5afd --- /dev/null +++ b/docs/public/logo.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/superpowers/plans/2026-08-12-logo.md b/docs/superpowers/plans/2026-08-12-logo.md new file mode 100644 index 0000000..10b30b6 --- /dev/null +++ b/docs/superpowers/plans/2026-08-12-logo.md @@ -0,0 +1,308 @@ +# start Logo (Chequered-Flag Beet) Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Ship the approved chequered-flag beet logo as SVG assets in `docs/public/` and put it at the top of the README, following di's asset pattern. + +**Architecture:** Three standalone SVG files — `logo.svg` (dark-canvas master), `logo-dark.svg` (byte-identical copy), `logo-light.svg` (only canvas-dependent values differ: pole grey and check values). The scene geometry is fixed by the approved spec (`docs/superpowers/specs/2026-08-12-logo-design.md`) and is reproduced verbatim in this plan. Verification is visual: a throwaway HTML harness rendered with headless Chrome at 108/32/16 px on both canvases. + +**Tech Stack:** Hand-written SVG (pattern + clipPath), headless Google Chrome for render checks, python3 for the contrast citation. + +## Global Constraints + +- Work in the worktree `/Users/btravers/Projects/btravstack/start-feat-logo`, branch `feat/logo`. Never touch the main checkout at `/Users/btravers/Projects/btravstack/start`. +- Scratch files (harness HTML, screenshots) go in `/private/tmp/claude-501/-Users-btravers-Projects-btravstack-btravstack-github-io/8916e66d-181d-44ba-9bb0-cf72dfb89dd1/scratchpad`, never in the repo. +- Commit messages: plain `docs:` scope (repo convention for docs/assets), imperative mood. A lefthook pre-commit hook runs format/lint; commitlint checks the message. +- `logo.svg` and `logo-dark.svg` must be byte-identical (`cmp` clean). +- The two accent contrast numbers (6.63 dark, 5.38 light) are cited in the asset commit body. +- Out of scope (do NOT add): landing-repo assets, `--pkg-start` theme token, og image, VitePress docs site, favicon wiring. + +--- + +### Task 1: The three SVG assets + +**Files:** + +- Create: `docs/public/logo.svg` +- Create: `docs/public/logo-dark.svg` (copy of `logo.svg`) +- Create: `docs/public/logo-light.svg` +- Scratch: `$SCRATCH/logo-verify.html`, `$SCRATCH/logo-verify.png` (never committed) + +**Interfaces:** + +- Consumes: nothing from other tasks. +- Produces: `docs/public/logo.svg` at intrinsic size 156×160, referenced by Task 2's README ``. + +- [ ] **Step 1: Write the render harness (the failing test)** + +Write this to `$SCRATCH/logo-verify.html` (define `SCRATCH=/private/tmp/claude-501/-Users-btravers-Projects-btravstack-btravstack-github-io/8916e66d-181d-44ba-9bb0-cf72dfb89dd1/scratchpad`). It shows each variant file at 108/32/16 px on its own canvas via ``: + +```html + + + +
+ + + +
+
+ + + +
+``` + +Then symlink the repo next to it so the relative `repo/…` paths resolve: + +```bash +SCRATCH=/private/tmp/claude-501/-Users-btravers-Projects-btravstack-btravstack-github-io/8916e66d-181d-44ba-9bb0-cf72dfb89dd1/scratchpad +ln -sfn /Users/btravers/Projects/btravstack/start-feat-logo "$SCRATCH/repo" +``` + +- [ ] **Step 2: Render the harness and verify it fails** + +```bash +cd "$SCRATCH" && "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \ + --headless --disable-gpu --screenshot=logo-verify.png --window-size=600,400 \ + "file://$SCRATCH/logo-verify.html" +``` + +Read `logo-verify.png`. Expected: FAIL — broken-image glyphs (the three SVGs don't exist yet). + +- [ ] **Step 3: Write `docs/public/logo.svg` (dark-canvas master)** + +Create `docs/public/` and write exactly: + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +- [ ] **Step 4: Copy to `logo-dark.svg` and write `logo-light.svg`** + +```bash +cp docs/public/logo.svg docs/public/logo-dark.svg +``` + +`logo-light.svg` is the same file with exactly four value changes (comment wording, pole grey, the three check fills). Write exactly: + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +- [ ] **Step 5: Re-render the harness and verify it passes** + +Re-run the Step 2 Chrome command and Read `logo-verify.png`. Expected: PASS — + +- both canvases show the beet waving the chequered flag, checks visible on both; +- at 16 px the flag reads as a flag (a distinct check-textured flick above the beet), not a third leaf; +- no clipped edges (nothing touching the image borders). + +If anything is off, fix the SVG and re-render; do not commit a failing render. + +- [ ] **Step 6: Byte-identity and contrast checks** + +```bash +cd /Users/btravers/Projects/btravstack/start-feat-logo +cmp docs/public/logo.svg docs/public/logo-dark.svg && echo IDENTICAL +python3 - <<'EOF' +def srgb(c): + c /= 255 + return c/12.92 if c <= 0.03928 else ((c+0.055)/1.055)**2.4 +def lum(h): + r, g, b = (int(h[i:i+2], 16) for i in (0, 2, 4)) + return 0.2126*srgb(r) + 0.7152*srgb(g) + 0.0722*srgb(b) +def cr(h1, h2): + a, b = sorted((lum(h1), lum(h2)), reverse=True) + return (a+0.05)/(b+0.05) +mix = ''.join(f'{round(int("2FAE4E"[i:i+2],16)*0.70):02X}' for i in (0, 2, 4)) +print(f"dark {cr('2FAE4E','100F12'):.2f} light {cr(mix,'FFFFFF'):.2f} mix #{mix}") +EOF +``` + +Expected: `IDENTICAL` then `dark 6.63 light 5.38 mix #217A37`. + +- [ ] **Step 7: Commit** + +```bash +cd /Users/btravers/Projects/btravstack/start-feat-logo +git add docs/public/logo.svg docs/public/logo-dark.svg docs/public/logo-light.svg +git commit -m "docs: add the chequered-flag beet logo + +The wave pose: one arm high, a real black-and-white chequered flag, +wind strokes in the package green. Accent #2FAE4E: 6.63 vs the dark +card #100F12 (family band 5.00-7.25), 5.38 for its 30%-darkened form +#217A37 vs white." +``` + +--- + +### Task 2: README header image + +**Files:** + +- Modify: `README.md:1-6` (the `
` block) + +**Interfaces:** + +- Consumes: `docs/public/logo.svg` from Task 1 (intrinsic 156×160). +- Produces: nothing further; terminal task. + +- [ ] **Step 1: Verify the current README header (the failing state)** + +```bash +cd /Users/btravers/Projects/btravstack/start-feat-logo && sed -n '1,5p' README.md +``` + +Expected: `
` followed by a blank line then `# start` — no `` yet. + +- [ ] **Step 2: Add the logo image** + +Edit `README.md`: immediately after `
` and its blank line, insert (di's README pattern, scaled to this viewBox's 156:160 ratio): + +```html +start +``` + +so the file begins: + +```markdown +
+ +start + +# start +``` + +- [ ] **Step 3: Verify** + +```bash +sed -n '1,7p' README.md +``` + +Expected: the block above, unchanged title and tagline below it. Then confirm the referenced path exists: + +```bash +test -f docs/public/logo.svg && echo OK +``` + +Expected: `OK`. + +- [ ] **Step 4: Commit** + +```bash +git add README.md +git commit -m "docs: put the logo at the top of the README" +``` diff --git a/docs/superpowers/specs/2026-08-12-logo-design.md b/docs/superpowers/specs/2026-08-12-logo-design.md new file mode 100644 index 0000000..b7d3e80 --- /dev/null +++ b/docs/superpowers/specs/2026-08-12-logo-design.md @@ -0,0 +1,79 @@ +# start logo — the chequered-flag beet + +**Date:** 2026-08-12 +**Status:** approved (concept, pose, and colors picked interactively on a rendered candidate page) + +## Concept + +Every BtravStack project mark is the chibi beet caught mid-scene, with a prop. +For `start`, the scene is **the wave**: the beet thrusts one arm high and waves +a **real chequered racing flag** — black-and-white checks — with pale-green +wind strokes trailing the cloth. "Green means go" stays in the mark through the +wind strokes and the package accent; the cloth itself is the authentic racing +flag. + +Explored and rejected on the way here: the July "liftoff beet" (rocket) concept, +a power-button (⏻) scene, a knife-switch scene, a plain green flag (became the +chequered flag), and green-and-white checks (the user chose authentic +black-and-white). + +## Scene specification + +Wave pose, validated at 108/32/16 px on both canvases: + +- **Beet:** the standard house grammar, geometry lifted from the existing marks + (unthrown's beet paths): body `#CE3D80`, right-side shade `#8E1A52` at 0.85, + leaf tufts `#2C8B4E` / `#3DAE62`, dot eyes `#3A0D24` with white glints, blush + circles `#EE9CC4` at 0.75, root-tail stroke `#8E1A52`. Face: open cheering + smile (`M44,71 Q50.5,79 57,71` stroke `#3A0D24`). +- **Pose:** left arm angled down (rounded rect, `rotate(30 20 62)`), right arm + raised (`rotate(-52 80 62)`), a `#CE3D80` hand circle gripping the pole. + Beet group at `translate(12,52) scale(0.75)` in a `viewBox="0 0 156 160"`. +- **Pole:** `M80,88 L93,12`, stroke width 4, round caps. Neutral grey that + inverts per canvas (dark canvas `#8A94A3`, light canvas `#5A6675`) — the + di needle-shaft rule. +- **Flag:** cloth path `M0,0 C14,-6 30,7 52,-3 L48,18 C27,26 13,13 -2,19 Z` + placed at `translate(92,16) rotate(4)`, filled with a chequered pattern + (`patternUnits="userSpaceOnUse"`, 15×15 tile, two 7.5 squares, + `patternTransform="rotate(-7)"`), clipped to the cloth. A fold shade + (`#000` at 0.18) darkens the fly-end curl. + Check values invert per canvas: **dark** `#EDE9F0` + `#3A3540`, **light** + `#F4F2F7` + `#221F26`. +- **Wind strokes:** three short strokes left of the flag (`#7ED09A`, width 4, + round caps, 0.8 opacity) — the accent's presence in the mark. +- The flag flies well above and to the right of the leaves so it never reads + as a third leaf at favicon size (verified at 16 px). + +## Package accent + +`--pkg-start: #2FAE4E` (true green, hue 135°): + +- vs dark card `#100F12`: **6.63** — inside the family's 5.00–7.25 band. +- 30%-darkened (`#217A37`) vs white: **5.38** — clears 4.5. +- Hue distance from unthrown's teal `#3FB0A5` (172°) and di's blue `#3E7FD4` + (215°) keeps the cool colors distinguishable. + +Cite both numbers wherever the token ships (the `--pkg-entity` / `--pkg-di` +changeset pattern). + +## Deliverables (this effort) + +Following di's exact asset pattern, in this repo: + +- `docs/public/logo.svg` — dark-canvas master (byte-identical to + `logo-dark.svg`), doubles as favicon when the docs site exists. +- `docs/public/logo-dark.svg`, `docs/public/logo-light.svg` — only + canvas-dependent values differ (pole grey, check values). +- README header `` centered above the title, + as di's README does. +- Each SVG opens with a comment block recording the concept, house practice. + +Out of scope (separate, later efforts): landing integration +(`apps/website/public/logos/start-{light,dark}.svg`, the `--pkg-start` token, +a landing panel), the og image, and the docs site itself. + +## Verification + +- Headless-render both variants on their canvases at 108/32/16 px; the flag + must read as a flag (not a leaf) at 16 px. +- The two contrast numbers above are recomputed and cited in the commit.