brand-assets
The atom trap + the tiny-circle trap. Crossing orbit ellipses read as an atom, not a
cosmos — for "many things" use scattered dots with NO connecting orbit lines. And an
auth-provider logo (Google consent) is shown tiny inside a circle, so it must be a
text-free square — a wordmark is illegible there. Learned shipping ThousandWorlds
Explorer (2026-06-28): the first orbital mark read as an atom; replaced with a
magnifier-over-scattered-worlds. Operator also wants this baked in because every product
needs the full set at the end.
When you activate
At finishing / pre-launch, or any time a product still ships a default favicon and an
unbranded auth screen. Make the whole set one deliberate step — not a scramble the night
before launch.
Core principles
- One SVG is the source of truth. Design the mark once as
docs/logo.svg; the app,
README, email, and favicon all reference that single file (import it — never copy it).
- Design in SVG, rasterize with
rsvg-convert (brew install librsvg):
rsvg-convert -w 512 -h 512 docs/logo.svg -o docs/logo.png.
- Two concepts, operator picks. Offer two distinct directions, render both at large AND
favicon size, and let the operator choose before you generate the rest.
- Legible at 26px. The silhouette must read at favicon size — verify by rendering small.
- Echo the product. Pull the palette from what the app already shows (a chart's colours,
the hero) so the icon and the product visually rhyme.
Pipeline
- Brief — product name, one-line essence, 2–4 brand colours (lift them from the app).
- Concept — author two distinct logo SVGs (240×240, rounded-square icon). Avoid generic
or ambiguous reads (see the atom trap). Show both at ~96px and ~26px; operator picks one.
- Finalize — the chosen SVG becomes canonical
docs/logo.svg; retire the rejects.
- Generate the set (all from
docs/logo.svg via rsvg-convert):
docs/logo.png — 512px square app icon.public/favicon.svg + public/favicon-32.png + public/apple-touch-icon.png (180px).docs/logo-lockup.{svg,png} — horizontal: icon + wordmark, for header / email.docs/logo-<provider>-auth.png — the square, text-free mark for Google/etc. consent.
- Wire — favicon
<link>s in index.html; the icon beside the wordmark in the header;
import the one SVG everywhere (no duplicate files).
- Verify — renders in the browser, legible small, and the production build bundles the
assets (
dist/assets/*.svg, dist/favicon.svg). Then hand the operator the exact file to
upload to each auth provider's branding screen.
Artifacts (persist per product)
docs/logo.svg · docs/logo.png · docs/logo-lockup.{svg,png} ·
docs/logo-<provider>-auth.png · public/favicon.svg · public/favicon-32.png ·
public/apple-touch-icon.png — plus the index.html + header wiring.
Output
The full set above, wired and verified, and a one-line "upload docs/logo-google-auth.png
to Google → Branding" hand-off. Note: the auth-screen domain line (e.g. the
…supabase.co text on Google's account chooser) is an auth/go-live concern, not an asset —
that needs a custom auth domain + OAuth verification, so point the operator to /go-live.
1---2name: brand-assets3description: Generate a product's full brand-asset set at finishing time — two logo concepts to choose from, then the square app icon, favicon set, horizontal lockup, and a separate square auth-provider logo. One SVG source of truth, rendered with rsvg-convert. Every product needs all of these before launch.4---56# brand-assets78> **The atom trap + the tiny-circle trap.** Crossing orbit ellipses read as an *atom*, not a9> cosmos — for "many things" use scattered dots with NO connecting orbit lines. And an10> auth-provider logo (Google consent) is shown tiny inside a circle, so it must be a11> **text-free square** — a wordmark is illegible there. Learned shipping ThousandWorlds12> Explorer (2026-06-28): the first orbital mark read as an atom; replaced with a13> magnifier-over-scattered-worlds. Operator also wants this baked in because *every* product14> needs the full set at the end.1516## When you activate1718At finishing / pre-launch, or any time a product still ships a default favicon and an19unbranded auth screen. Make the whole set one deliberate step — not a scramble the night20before launch.2122## Core principles2324- **One SVG is the source of truth.** Design the mark once as `docs/logo.svg`; the app,25 README, email, and favicon all reference that single file (import it — never copy it).26- **Design in SVG, rasterize with `rsvg-convert`** (`brew install librsvg`):27 `rsvg-convert -w 512 -h 512 docs/logo.svg -o docs/logo.png`.28- **Two concepts, operator picks.** Offer two distinct directions, render both at large AND29 favicon size, and let the operator choose before you generate the rest.30- **Legible at 26px.** The silhouette must read at favicon size — verify by rendering small.31- **Echo the product.** Pull the palette from what the app already shows (a chart's colours,32 the hero) so the icon and the product visually rhyme.3334## Pipeline35361. **Brief** — product name, one-line essence, 2–4 brand colours (lift them from the app).372. **Concept** — author two distinct logo SVGs (240×240, rounded-square icon). Avoid generic38 or ambiguous reads (see the atom trap). Show both at ~96px and ~26px; operator picks one.393. **Finalize** — the chosen SVG becomes canonical `docs/logo.svg`; retire the rejects.404. **Generate the set** (all from `docs/logo.svg` via rsvg-convert):41 - `docs/logo.png` — 512px square app icon.42 - `public/favicon.svg` + `public/favicon-32.png` + `public/apple-touch-icon.png` (180px).43 - `docs/logo-lockup.{svg,png}` — horizontal: icon + wordmark, for header / email.44 - `docs/logo-<provider>-auth.png` — the **square, text-free** mark for Google/etc. consent.455. **Wire** — favicon `<link>`s in `index.html`; the icon beside the wordmark in the header;46 import the one SVG everywhere (no duplicate files).476. **Verify** — renders in the browser, legible small, and the production build bundles the48 assets (`dist/assets/*.svg`, `dist/favicon.svg`). Then hand the operator the exact file to49 upload to each auth provider's branding screen.5051## Artifacts (persist per product)5253`docs/logo.svg` · `docs/logo.png` · `docs/logo-lockup.{svg,png}` ·54`docs/logo-<provider>-auth.png` · `public/favicon.svg` · `public/favicon-32.png` ·55`public/apple-touch-icon.png` — plus the `index.html` + header wiring.5657## Output5859The full set above, wired and verified, and a one-line "upload `docs/logo-google-auth.png`60to Google → Branding" hand-off. Note: the auth-screen *domain* line (e.g. the61`…supabase.co` text on Google's account chooser) is an auth/go-live concern, not an asset —62that needs a custom auth domain + OAuth verification, so point the operator to `/go-live`.
hamza-ali-shahjahan