Web redesign — concept (2026-07-21)

Web redesign — concept (2026-07-21)

Concept direction for apps/web/. Pairs with prd.md (already updated m0011).
Final implementation will be drafted into Stitch after sign-off.

What this is

A redesign of apps/web/ so the product looks like a tool a branding
agency refines, not a service they hire. Same backend, same flow, new
visual + information design. Minimal surface area, maximal restraint.

What this is NOT

• Not a brand-marketing refresh. The wordmark changes; the design system
  changes; the IA changes. Copy on prd.md already updated.
• Not bespoke illustration. No custom motion library. No 3D. No Lottie.
• Not a 6-step wizard. Intake collapses to 3 steps with optional context
  tucked behind a single “Tell us more” affordance.

Brand foundation

• Voice: tool-first. The agency operates it; we don’t consult.
• Moat: white-label, copyright-free, platform-agnostic generated
  audio. Agency ships it on client site / product / app / ads / social
  / retail / phone / decks. Suno / ElevenLabs / Epidemic Sound can’t.
• Output metaphor: “your kit.” Not “your strategy.” The strategy is
  the artifact; the kit is the deliverable.
• Mechanism: a tool the agency refines. UI should feel like a
  studio tool — knobs, previews, regenerate — not a form.

Design tokens

Color

Monochrome ground, maroon pulse, no warm earth palette.

The maroon is the only chroma in the system. Everything else is
monochrome. Background is near-white paper, not the cream that read as
artisan bakery. Type is near-black, not warm brown.

Type

• Wordmark: “brioso.” — lowercase, Fraunces Black (pinned at wght=900, opsz=144 in the variable source), trailing period.
• Type scale (Satoshi): 12 / 14 / 16 / 18 / 20 / 24 / 32 / 44.
• Display (Fraunces): only 44 / 64 / 96 for hero + section openers.
• Line height: 1.4 body, 1.05 display.
• Letter-spacing: -0.02em display, -0.01em H2, 0 body, +0.04em micro.
• Never set body copy in Fraunces; it is a wordmark/display face.

Fraunces is OFL (Undercase Type). Source .ttf files live under
apps/web/public/fonts/source/ (gitignored); the bundled woff2 outputs
in apps/web/public/fonts/ are generated by
scripts/build-fraunces-woff2.py and re-run via bun run build:assets.
Satoshi is OFL/FLF and ships with the full family in
Downloads/Satoshi_Complete.zip.

Spacing

8px base. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.

Radius

Default 12px. Cards 16px. Pills 999px. Inputs 10px.

Motion

The pulse is the only “ambient” motion. Everything else is reactive.

Information architecture

Single product, two entry paths surfaced equally in the top nav.

Home /          Landing — both audiences, with a tab toggle
Strategy /      Free Audio Strategy (logo + URL → PDF)
Studio /       The kit generator ($99 paid intake → kit delivery)
For Musicians / B2C variant of Studio (same engine, simpler copy)
Pricing /      One card: $99 per kit. Free strategy is the lead magnet.
Docs /         (later) — public-facing guides for white-label usage.

Top nav (5 items): Studio · For Musicians · Pricing · Docs · Sign in.
No “Strategy” in the nav — it’s a marketing surface, linked from
hero, not a destination in IA.

Page-by-page

Landing (/)

• Hero: wordmark left-aligned, Fraunces 96px (text-hero), single line.
  Below it, one sentence: the moat — “White-label audio for every place your brand lives.” (Iterate.)
  Right of hero: the pulse. Breathing radial burst, ~360px,
  centered, hollow core. Maroon highlights active spokes.
  No headline adjective soup. No carousel.
• Below hero: a single quiet section. Three columns of one line each.
  • “Generate” (logo + URL)
  • “Refine” (3-step intake, regen)
  • “Ship” (white-label ZIP + guidelines, zero Brioso branding)
• Mid: comparison strip. Suno / ElevenLabs / Epidemic Sound / Brioso.
  Columns: where it can ship. Brioso column wins by being the only one
  with all rows green. No editorializing, the table makes the case.
• Bottom CTA: “Make your kit.” → /studio.
• Footer: minimal. Brand wordmark, two columns (Product / Company),
  social row. No newsletter.

Intake (/studio)

Three steps, one screen tall each. Right rail: live preview of the
emerging kit (logo uploaded → first waveform renders as soon as the
strategy step completes).

1. Brand — logo upload, URL paste, brand name. Required.
2. Vibe — one question: “Pick three words your brand should sound
   like.” Chip-grid. Twenty-eight words total, four columns on desktop,
   three on mobile. Multi-select to three. The chosen words drive
   archetype + emotional-goals inference server-side.
3. Context (optional) — single collapsible panel. “Tell us more.”
   Inside: long-form prompt, brand voice notes, references. Default
   closed; agent feels short by default.

Submit → strategy doc lands in ~/library (B2C) or ~/clients/:slug
(B2B) → payment → generation → kit delivery.

Strategy doc (/strategy/:slug)

The free deliverable. Public read-only URL.

• Hero: brand name (Fraunces 64, text-display), one-line summary (Satoshi 18).
• Body: Audio Strategy document. Five sections: Brand in sound /
  Personality / Archetype / Emotional goals / Sonic palette.
• Each section renders with a small inline waveform glyph next to the
  header — 24px, monochrome. Subtle.
• Bottom CTA: “Generate your kit — $99” → /studio?prefill=:slug.

Kit delivery (/studio/:id/kit)

The product. The artifact.

• Top: brand wordmark left, “kit.” right (lowercase, Fraunces, period).
• Audio blocks (3–5). Each block has:
  • Title (Fraunces 32): e.g., “Hero loop” / “Loading state” /
    “Hold music” / “Notification chime” / “Son outro”.
  • Live waveform (wavesurfer.js, maroon playhead).
  • Duration, BPM, key, mood chips.
  • Action row: Play · Regenerate · Download (.flac + .mp3) ·
    Mark for client.
• Right rail: package export. White-label ZIP preview.
  • Files: logo/ folder (SVG + PNG), audio/ (flac + mp3), guidelines.pdf.
  • Branding toggle: “Strip Brioso from export” — on by default.
  • Download button: maroon, primary.
• Below: usage table. Where this kit can ship (web / product / app /
  social / retail / phone / decks). Each row: green check. This is the
  moat made visible at the deliverable.

B2C variant (/for-musicians)

Same /studio engine, different surface copy. Top of the page replaces
the agency framing with personal-music framing. Same 3-step intake
minus the brand-logo step (replaced with track title). Kit delivery
renders the same. No white-label toggle — it’s their own music.

Components

Build small. Reuse shadcn primitives in apps/web/components/ui/.
Custom-built (in apps/web/components/brioso/):

• Pulse — the radial burst. SVG, ~80 lines. Props: size, phase,
  highlightSpokes. Animates via CSS custom properties + requestAnimationFrame.
  ~30 lines of motion logic.
• Wordmark — Fraunces, “brioso.”, trailing period. Single SVG (auto-generated paths from the variable source), no JS.
• KitCard — one audio block in the kit. wavesurfer.js inside, action
  row beneath.
• ChipGrid — multi-select to N, used in intake vibe step.
• MaroonButton — primary CTA, single component, used everywhere a CTA
  appears. No “variants.” One visual treatment, monochrome hover.

Reused as-is (no rebuild):

• shadcn Button, Input, Dialog, Tabs, Tooltip, Sheet.
• react-hook-form + zod for intake validation (already in app).
• wavesurfer.js for playback.
• Stripe Checkout (already wired).

Motion details — the pulse

• 36 spokes around a hollow core.
• Per-spoke base length, base phase offset, base amplitude.
• Animation: amplitude breathes from 0.6 → 1.0 → 0.6 over 6s (sine).
• Phase offsets per spoke give the breathing a “heartbeat” — not a
  metronome.
• Rotation: 360° over 60s, linear, infinite.
• Maroon highlight: a small subset of spokes (e.g., 6) ride the peak of
  the breathe — when amplitude is highest, they fire to maroon. The rest
  stay ink.
• Implementation: SVG, <line> per spoke, transform="rotate(...)",
  stroke-dasharray modulated by amplitude via CSS variables. JS only
  sets transform: rotate(...) and the amplitude CSS var per frame.
• Respect prefers-reduced-motion: skip rotation, slower breathe, no
  maroon cycling.

Out of scope (this pass)

• Account dashboard polish (deferred — kit delivery is the primary surface).
• Agency multi-client management UI (future — for v2).
• Public docs site (linked from kit delivery, built later).
• Animations beyond the pulse + standard hover/enter.
• A “blog” or any content marketing surface.
• A/B testing infrastructure.

Open after sign-off

• Display-face migration is resolved — Fraunces (OFL) ships six static
  72pt cuts + the variable source under apps/web/public/fonts/source/,
  rebuild via bun run build:assets.
• Final hero copy + comparison table copy.
• Implementation plan broken into Stitch-shaped chunks.
• GitHub Project issue: file under project briosoco/projects/1 with
  the Epic: “Web redesign v2.”