Brand Kit

The Brand Kit is the self-serve download page for Objectuve's approved logo, icon, and typeface files — built so anyone on the team can grab an on-brand asset without pinging an engineer.

Where it lives

Page: design.objectuve.com/brand-kit (route /brand-kit, design_system/src/pages/BrandKit.vue), linked from the design system's side nav ("Brand Kit").

The design system deploys independently of the weekly release train — any push to master touching design_system/** redeploys it via .github/workflows/design-system.yml's deploy-design-system job. PRs get a 14-day Firebase preview channel from the same workflow's deploy-design-system-preview job.

Who can access it

The design system is internal-only, gated by AuthGate.vue. Two paths in:

1. Clerk SSO, restricted to @objectuve.com accounts — sign in with Clerk; a signed-in user whose primary email doesn't end in @objectuve.com is shown an access-restricted message and can only sign out and retry with an allowed account.
2. Shared password fallback — a password field below the Clerk button, checked client-side against a SHA-256 hash (VITE_DOCS_PASSWORD_HASH) for anyone without a @objectuve.com Clerk account.

What's in the kit

Every asset on the page is generated — there's nothing hand-maintained. The manifest (design_system/src/lib/brandAssets.ts) currently lists 13 assets grouped as:

Group	Assets
Lockup	6 lockups (Integrated, Integrated — on dark, Integrated — mono on dark, Horizontal, Horizontal — on dark, Stacked), each as SVG + PNG at 400w/800w/1600w
Icon	4 icons (gradient, solid, black, white), each as SVG + PNG at 128/256/512/1024
Favicon & App Icon	1 favicon, SVG + 128px PNG
Typeface	2 variable fonts — Outfit (headlines) and Inter (body) — as .woff2

The page also offers a single "Download the whole kit" button — objectuve-brand-kit.zip, everything above bundled together.

How it's built

scripts/build-brand-kit.mjs is the only thing that writes to this surface. It:

1. Copies the canonical source files — never renders or regenerates them:
   • ionic_frontend/src/assets/logo/*.svg (V12 source SVGs)
   • ionic_frontend/src/assets/logo/png/** (Playwright-rendered PNGs, OBJ-2225)
   • docs/public/fonts/*.woff2 (brand variable fonts)
2. Writes the copies into design_system/public/brand/.
3. Zips everything into objectuve-brand-kit.zip (fixed per-entry mtime, so the zip — and therefore the whole build — is byte-for-byte reproducible across machines and runs).
4. Regenerates the typed manifest, design_system/src/lib/brandAssets.ts, that BrandKit.vue renders from — so a listed asset can never 404.

brandAssets.ts and everything in design_system/public/brand/ are generated — don't hand-edit them.

Regenerating after a source SVG change

Run from the repo root:

npm install --no-save archiver
node scripts/build-brand-kit.mjs

Verified working: npm install --no-save archiver pulls the zip library the script needs (not a design_system dependency), then node scripts/build-brand-kit.mjs copies all 13 assets, rebuilds the zip, and rewrites the manifest. Run it again with no source changes and git status shows no diff — the build is deterministic.

Whenever a canonical logo SVG, its rendered PNGs, or a brand font changes, re-run the command above and commit the regenerated design_system/public/brand/ output alongside design_system/src/lib/brandAssets.ts.

See also

• Objectuve Brand Philosophy § Visual Identity § Logo — the brand guide's canonical logo section, which points here for downloads
• Logo Rationale — the design story behind the mark
• Logo refinement — V12 — the current source SVGs' most recent refinement pass

---

Last updated: 2026-09-11