BRAND KIT — DEV-ONLY

BeatCamp Brand Assets

Production-sized variants of the waveform mark and BeatCamp wordmark. Right-click any variant → "Save Image As..." to download the SVG. For PNG exports at specific platform sizes, run node scripts/export-brand.mjs while npm run dev is running.

All marks render static on this page — major platforms (YouTube, Instagram, X, TikTok) only accept PNG/JPG profile pics, so static is what gets uploaded. The animated version still pulses on the live landing and can be screen-recorded into an MP4 / GIF for video intros where motion is supported.

Mark — Amber on Dark

1024 × 1024 px (primary profile pic)

The default avatar everywhere. Amber waveform on control-dark stays inside the circular-crop safe zone with ~12% padding. Works against any feed background in both light and dark mode UI.

Mark — Dark on Amber

1024 × 1024 px (high-attention backup)

Inverted treatment for moments where the page already has lots of dark UI (e.g., a TikTok grid). Bold, brand-distinctive, slightly louder.

Mark — Amber on Cream

1024 × 1024 px (light-context variant)

Matches the website hero's cream background. Use when the platform UI is dark (your mark needs the lightness) or for press/PR contexts that want a lighter feel.

Favicon Set

16 / 32 / 48 / 192 / 512 px

Browser-tab favicon, app-icon variants, PWA install. Renders the same mark at each size so you can verify silhouette legibility at thumbnail scales.

16px
32px
48px
192px

Horizontal Lockup

1200 × 400 px (Twitter / X header, generic banner)

Mark + wordmark + tagline for any context where the brand needs to read alongside the program name. Tagline is optional — strip it for tighter formats.

BeatCampFINISH YOUR FIRST REAL-SOUNDING SONG

YouTube Banner — Safe Area

1546 × 423 px (visible-everywhere zone within 2560 × 1440 full banner)

Design within the safe area; the full upload extends past this on desktop. The grid-bg overlay carries the brand system into channel art. Tagline anchors the value prop in case it's the visitor's first BeatCamp surface.

BeatCampFOR PRODUCERS WHO ALREADY MAKE MUSIC

Video Intro — MP4 Workflow

5-SECOND LOOP @ 1920 × 1080 (16:9)

A dedicated /brand-kit/intro page runs a record-ready 5-second composition: waveform pulses in, BeatCamp wordmark slides up, tagline fades in, hold. The loop continues indefinitely so you can grab clean takes mid-record.

  1. Open localhost:3000/brand-kit/intro in a fresh Chrome window. Cmd+Ctrl+F to enter fullscreen (or F11 on other systems) — gives you a clean black background and removes browser chrome from the recording rectangle.
  2. Press Cmd+Shift+5 (macOS) → "Record Selected Portion" → drag a rectangle around the brand stage (the inner 16:9 frame). Click Options → set "Save to" to Desktop, uncheck "Show Floating Thumbnail."
  3. Hit Record. Wait for the loop to start at black (~0.5s before the waveform appears) then capture 5-7 seconds. Stop. macOS saves a .mov file to your Desktop.
  4. Trim and convert in your editor of choice (Premiere, DaVinci, Final Cut, or even QuickTime → File → Export As → 1080p). Export as MP4 H.264 at 30fps for YouTube/Instagram, ProRes for higher-end compositing. WebM works too if you upload directly to a web player.

Optional touches:

  • Add a single kick or 808 hit on the frame where the wordmark appears (~2.5s into the loop). Cements the brand-as-music association.
  • For shorter video stings (3s), record just the front half of the loop and trim to the wordmark settle moment. For longer YouTube intros (10s), loop the export twice with a crossfade.
  • Need a transparent background for compositing? Re-edit app/brand-kit/intro/page.tsx to swap bg-control-dark for bg-transparent and record over a chroma-key green background, or export to WebM with alpha channel via Chrome's MediaRecorder (advanced).