Skip to content

🌙 Guided — Brand Assets

Status: Asset pack designed and built (8 May 2026). Production wire-up NOT YET DONE — see "Wire-up checklist" below. Source files: ~/.copilot/session-state/ae6d27b9-c51f-4824-a823-799ff9598fb1/files/brand/ Repo destination (when wired up): guided/public/brand/ Live preview: open …/files/brand/preview.html in browser

Decision summary

Sush picked the crescent moon mark (8 May 2026) from a 5-concept exploration. Rationale:

  • Guided is a moon orbiting the home planet (aguidetocloud.com), not a separate planet. The crescent says that explicitly.
  • Distinct from the home planet's identity but family-aligned (same indigo accent, same Inter font stack).
  • Reads at every size from 16px favicon to 200px hero.
  • Works in light + dark + on-indigo + on-charcoal.

Geometry locked: outer circle r=32, inner mask cut at (50, 32) r=29 — a medium-thickness waxing crescent (opens up-right = "growth/progress" symbolism). Tweakable parameters: stroke weight, cut angle, indigo accent.

Other 4 concepts considered & rejected:

# Concept Why not
1 Wordmark + moon dot Too subtle for planetary map at small sizes
3 Lowercase 'g' in circle Too generic — letter-in-circle is everywhere
4 Path arrow + target Arrows are everywhere; target dot helps but not enough
5 Three-dot progression Reads as pagination / loading / EQ at small sizes

Mockups for all five are preserved at ~/.copilot/session-state/.../files/logo-mockups.html for reference if you want to revisit.

Asset inventory

8 SVGs in the locked pack:

File Purpose Viewbox Notes
guided-mark.svg Primary mark — indigo crescent 80×80 Hardcoded fill="#6366F1". Use this for branded contexts (light bg).
guided-mark-mono.svg currentColor variant 80×80 Inherits text colour. Use for places that should adapt to text (footers, monochrome headers).
guided-mark-on-dark.svg White crescent 80×80 Hardcoded fill="#FFFFFF". Use on indigo / charcoal backgrounds.
guided-lockup.svg Horizontal lockup — mark + wordmark 240×60 For header nav, primary brand surface. Wordmark uses currentColor.
guided-lockup-stacked.svg Vertical lockup 200×200 For hero banners, footer, app open screens.
guided-favicon.svg Browser tab icon 32×32 Has indigo rounded-square background + white crescent for legibility at 16–32px.
guided-apple-touch.svg iOS app icon 180×180 Full-bleed indigo bg + white crescent, with safe-area padding for iOS rounded mask.
guided-og-image.svg Social card 1200×630 Hero composition with crescent + wordmark + tagline + URL. Must be rendered to PNG before production use (Twitter/LinkedIn/OG don't reliably render SVG).

Wire-up checklist (the next session that ships brand)

Step 1 — copy SVGs to product repo

# From session-state
cp ~/.copilot/session-state/ae6d27b9-c51f-4824-a823-799ff9598fb1/files/brand/*.svg \
   C:/ssClawy/guided/public/brand/

After copy, verify git status shows 8 untracked SVGs in public/brand/. Commit them with:

brand: stage Guided crescent asset pack (not yet referenced)

Step 2 — render PNG variants (required for browsers / social platforms)

PNGs are required for:

  • favicon-32.png, favicon-16.png — legacy IE / older Chrome / fallback for browsers that don't render SVG favicons
  • apple-touch-icon.png (180×180) — iOS Safari requires PNG, won't accept SVG
  • og-image.png (1200×630) — Twitter, LinkedIn, Slack, Facebook all require PNG/JPG for OG cards

Use Node + sharp or @resvg/resvg-js:

// scripts/render-brand-pngs.mjs (pattern, write this when wiring up)
import { readFileSync, writeFileSync } from 'fs';
import { Resvg } from '@resvg/resvg-js';

function render(svgPath, outPath, width) {
  const svg = readFileSync(svgPath, 'utf8');
  const resvg = new Resvg(svg, { fitTo: { mode: 'width', value: width } });
  writeFileSync(outPath, resvg.render().asPng());
}

render('public/brand/guided-favicon.svg', 'public/favicon-32.png', 32);
render('public/brand/guided-favicon.svg', 'public/favicon-16.png', 16);
render('public/brand/guided-apple-touch.svg', 'public/apple-touch-icon.png', 180);
render('public/brand/guided-og-image.svg', 'public/brand/og-image.png', 1200);

If @resvg/resvg-js install fails on Windows ARM64 (known issue with native binaries), fall back to sharp or use a one-shot online tool like https://cloudconvert.com/svg-to-png. Generated PNGs go in:

  • public/favicon-32.png, public/favicon-16.png (root)
  • public/apple-touch-icon.png (root, iOS picks it up automatically)
  • public/brand/og-image.png (referenced in BaseLayout)

Step 3 — replace the default favicon

The current public/favicon.svg is the Astro scaffold default (not Sush's brand) — confirmed 8 May 2026. Replace it:

# From guided/
copy public/brand/guided-favicon.svg public/favicon.svg

Step 4 — update BaseLayout <head>

src/layouts/BaseLayout.astro currently has no explicit <link rel="icon"> tag — browsers fall back to /favicon.ico and /favicon.svg. Add explicit links for clarity + apple-touch:

<!-- After the canonical link, around line 90 -->
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}favicon.svg`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${import.meta.env.BASE_URL}favicon-32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${import.meta.env.BASE_URL}favicon-16.png`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${import.meta.env.BASE_URL}apple-touch-icon.png`} />

For OG image — find the existing ogImageURL variable (around line 100) and update its default to the new crescent PNG:

const ogImageURL = ogImage
  ? new URL(ogImage, Astro.site).toString()
  : new URL(`${import.meta.env.BASE_URL}brand/og-image.png`, Astro.site).toString();

Step 5 — swap nav lockup (Header.astro)

Currently guided/src/components/layout/Header.astro uses Earth's logo via cross-domain reference (/images/logo_agtc_dark_1.webp) per the cosmos "One Body Two Organs" rule.

Decision needed when wiring up: keep the cross-domain Earth logo for cohesion, OR swap to Guided's own lockup?

The cosmos-nav-playbook says moons share the parent's chrome. So the safer call is to keep Earth's logo on Guided's nav. The crescent then lives in: - favicon (browser tab) - apple-touch-icon (iOS home screen) - OG image (social cards) - About page hero / hero header (optional, where Guided self-identifies)

If Sush wants the crescent in the nav instead of Earth's logo, edit Header.astro to use <img src={${base}brand/guided-lockup.svg}> — but that breaks One Body Two Organs. Confirm with Sush before doing this.

Step 6 — verify

cd guided
npx astro dev --port 4322
# Visit http://localhost:4322/guided/
# Check: favicon in browser tab, view-source confirms <link rel> tags, og:image meta
# Open share preview in https://www.opengraph.xyz/ once deployed

Run both test suites. Build clean. Pre-push smoke. Commit. Push. Cloudflare auto-build. Post-deploy smoke.

Design tokens used

  • Primary indigo: #6366F1 (light) / #818CF8 (dark) — matches Zen System
  • Foreground for mono: uses currentColor (CSS inherits)
  • Wordmark font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif — matches BaseLayout's preloaded Inter
  • No gradients, no glows, no backdrop-filter — Zen System guardrails enforced
  • Wordmark: 600 weight, -0.5px letter-spacing for the lockup
  • Tagline (OG image): 500 weight headline + 400 weight subhead

Tweakable parameters (if Sush asks for adjustments)

Parameter Current How to change
Crescent thickness medium (cut r=29 inside outer r=32) Increase cut r → thinner crescent; decrease cut r → thicker
Crescent angle waxing up-right (cut at cx=50, cy=32) Move cut to cx=50, cy=40 = horizontal C; cy=48 = waxing down-right
Accent colour #6366F1 Edit each SVG. For mark-mono, no change needed (uses currentColor)
Wordmark font system-ui stack Replace font-family in lockup SVGs
Wordmark weight 600 Edit font-weight in lockup SVGs
OG image tagline "$9, not $79." Edit text in guided-og-image.svg

Open questions

  1. Should the cosmos planet rail show Guided? Currently the rail has Earth, Brain Bar, Shift, Plain AI. Guided isn't in the list because it's a moon, not a sibling planet. If Sush wants Guided visible in cross-cosmos navigation, it'd need its own entry in planets.json files across cosmos-aware sites.
  2. Should Guided's favicon supersede Earth's aguidetocloud.com favicon when navigating between Earth and Guided? Browsers cache favicons per-origin. Guided is on the same origin (/guided/ subpath of aguidetocloud.com), so currently uses Earth's favicon. If we change Guided's favicon, the whole aguidetocloud.com origin gets the new favicon.
  3. PNG render automation in CI? The PNG variants need to regenerate if SVGs change. A prebuild script that runs render-brand-pngs.mjs before astro build would catch this. Worth doing if brand SVGs become a moving target.
  • Logo concept exploration: ~/.copilot/session-state/.../files/logo-mockups.html (5 concepts)
  • Crescent asset preview: ~/.copilot/session-state/.../files/brand/preview.html (real-world contexts: browser tab, iOS dock, social card, nav, cert grid)
  • Cosmos system context: cosmos-nav-playbook.md
  • Zen design tokens: zen-system-quickref.md
  • Voice + tone (lowercase rules, when proper nouns stay capitalised): voice-and-tone.md