Brain in a Vat secured placements across 31 Spotify playlists during the Q1 campaign cycle, with an average follower count of 124,500 per playlist. Editorial coverage included Filtr, thatgaragepage, and Deep House Nation. The campaign exceeded placement targets by 40% while maintaining a 92% approval rate from curators.
14px / Roman (400) / +0.3px tracking / 1.6 leading / max-width: 72ch
Accent color / inherit weight (400 Roman) / no underline (border-bottom: none) / hover: color changes to text color
Brand
Wordmark
Symbol
Mascots
Mascot 01
Mascot 02
Mascot 03
Mascot 04
Animation
Symbol Animation
Wordmark Animation
Symbol Twirl
Wordmark Warp In
Wordmark Subtle Wave
Rules
Clear space: minimum clear space around the wordmark equals the height of the brain symbol
Use on white or near-white backgrounds (light mode) or on #121212+ dark backgrounds (dark mode)
Never colorize the wordmark
Never separate text from symbol
Never distort proportions
Never place on busy backgrounds
Always pair mascots with service name in NHG Bold
Mascots are black silhouette artwork — use on white/light backgrounds only
Abbreviation: always "BiV" — capital B, lowercase i, capital V. Never "BIV", "biv", or "Biv"
Full name: title case — "Brain in a Vat". Never all-lowercase "brain in a vat"
CSS text-transform:uppercase will break this — write casing manually in HTML
Hero Section
Centered wordmark + tagline. Used on landing pages and the design guide itself. Tagline uses text-wrap: balance to avoid orphaned words on the second line.
Brain in a Vat is a boutique music promotions agency that shapes perception and shifts reality.
Animated variant uses the Ross Aitken wordmark GIF instead of the static PNG. Same layout and sizing. Source GIF is black on transparent, generated per-color via ~/Scripts/maintenance/generate-footer-gifs.sh.
Brain in a Vat is a boutique music promotions agency that shapes perception and shifts reality.
Same as static hero / swap .png for wordmark-animated-black.gif / dark mode: wordmark-animated-white.gif / source: GDrive → Ross Aitken Animated Logo Finals/Gifs/Smaller/
Report Header
Reports use a linear (non-centered) header: wordmark → H1 title → subtitle. Wordmark is 36px height with 32px bottom margin. H1 is 28px/700 (not 34px/900 like page titles). Subtitle adds 48px bottom margin before content.
ARTIST NAME — Track Title [LABEL]
DSP promo campaign report
.wordmark img: 36px height / h1: 28px / 700 weight / 6px bottom margin / .subtitle: 14px / 400 / secondary color / 48px bottom margin / responsive: h1 shrinks to 22px on mobile
Color
Core
Text
#111111
Secondary
#6b6b74
Tertiary
#a0a0a8
Border
#e0e0e0
Border Light
#f0f0f0
Background
#ffffff
BG Hover
#fafafa
Accent Pool
Deep Violet
#5533ff
Cyan
#00ccff
Teal
#14b8a6
Orange
#F97316
Warm Red
#EF4444
Random accent assigned on page load. Cycles through the pool via footer shuffle button.
Data Display
Stat Cards
Total Placements
247
across 5 platforms
Approval Rate
92%
Avg Followers
124K
per playlist
Active Campaigns
18
Table
Report-style placement table: 3 columns, collapsible group headers, subtotal rows, hyperlinked placements in accent color.
Multi-row filter system with label + tag toggles. Three independent dimensions: Status, Type, Platform. Rows filter using AND logic across all three. Tags use data-status, data-type, data-platform attributes.
Independent toggles. Can't deselect last active tag (prevents empty state). Toggling status updates Type and Platform visibility via filterMap.
Type
Independent toggles. Only visible tags can be toggled. Can't deselect last visible active tag. Hidden types auto-activate when they become visible.
Platform
Mutual exclusivity: "All" deselects individuals; selecting an individual deselects "All". If no individuals remain active, snaps back to "All".
filterMap
Truth table object generated at report build time. Keys are status:type:value and status:platform:value. Drives dynamic tag visibility — tags with no matching data for active statuses are hidden via display:none.
Row matching
AND across all three dimensions: statusMatch && typeMatch && platformMatch. Group headers, subtotals, and totals follow their child visibility.
Collapsible group headers with toggle arrow. Groups contain placement rows and end with a subtotal row. Status totals span the full table width. Each row carries data-status, data-type, data-platform, and data-group attributes for filtering and grouping.
Toggles .collapsed class on the .group-header row. All sibling rows with matching data-group (excluding the header itself) are hidden/shown.
Toggle arrow
.group-toggle rotates from ▾ (down) to ▸ (right) via CSS transform: rotate(-90deg) when .collapsed is present.
data-group
Composite key: status-type-platform (e.g. earned-third-party-spotify). Shared by header, data rows, and subtotal.
Curator Platform Icons
SVG platform icons from the icon sprite, shown inline next to curator names in placement tables. Each icon is a hyperlink to the curator's profile on that platform. Icons are 14px, secondary color, accent on hover. Wrapped in .curator-platforms container.
Curator
Followers
Youth Energy
185,702
Whistleface
22,714
.curator-platforms / inline-flex / gap 2px / SVG icons via <use href="#icon-xxx"> / 14px / secondary color / hover: accent / each icon wrapped in <a> linking to curator profile
Chart Stats Block
Stream totals displayed below charts. Single mode shows total streams. Comparison mode shows per-track totals with color-coded labels matching chart lines.
Total Streams
167.6K
Streams — First 158 Days
Like A Cholo
167.6K
Baile Bounce
140.2K
Suelta
18.5K
Single: label 11px uppercase secondary + value 28px / Comparison: flex wrap, per-track color-coded label 13px + value 28px / colors match chart line releaseColors pool
Platform Breakdown Cards (v2)
Cards reordered: reach on top, placement count middle, platform name bottom (14px, prominent). Grouped by Editorial / Third Party with breakdown label.
Before/after with arrow. Percentage badge, absolute delta badge, and progress bar variants.
Placements
84→127
+51%
Acceptance
78%→92%
+14pp
Avg Followers
45K→124K
+176%
Charts
CSS bar chart, SVG sparkline, and dot chart.
Bar Chart
12
Wk 1
34
Wk 2
52
Wk 3
29
Wk 4
SVG Sparkline
Weekly Placements
127Total
Dot Chart
12
Wk 1
34
Wk 2
52
Wk 3
29
Wk 4
Platform Breakdown Cards
Split by Editorial / Third Party with per-platform stat cards. Cards show placements count, reach (when available), and platform name.
With Reach
Editorial
9 placements
10.1M reach
Spotify
8 placements
Apple Music
4 placements
Amazon Music
Third Party
46 placements
4.3M reach
Spotify
7 placements
Apple Music
2 placements
41.1K reach
Deezer
2 placements
2.5K reach
YouTube
Without Reach (single type)
Third Party
27 placements
702.3K reach
Spotify
5 placements
181K reach
YouTube
1 placement
Deezer
Feedback Column
Curator feedback displayed in table cells. Italic secondary text, truncated to one line with ellipsis, expands on hover. Curly quotes auto-applied via CSS ::before/::after on non-empty cells. Empty cells show nothing.
Table headers inside <details> sections stick to the top of the viewport when scrolling. .table-wrap set to overflow: visible on desktop to enable sticky behavior. Mobile overrides with overflow-x: auto for horizontal scroll.
Three D3.js chart functions in assets/charts.js. All render into a target <div> container (selector or element), are responsive via SVG viewBox, and read CSS custom properties for theming. Dark mode triggers a full re-render to pick up updated variables. Requires D3.js v7.
bivStreamTrajectory(container, data, options)
Stream Trajectory Chart
Container
CSS selector or DOM element (e.g. '#chart-trajectory')
Data
[{ date: 'YYYY-MM-DD', streams: Number }, ...]
Options
{ width: 720, height: 320 } (defaults)
Area chart showing daily streams since release. Accent-colored line with monotone X curve. Hover shows vertical crosshair + interpolated dot + area fill at 15% opacity. Y-axis uses abbreviated notation (K/M). X-axis tick interval adapts to data range: daily/weekly/monthly.
Multi-line overlay normalized to days since release. First dataset = current release (accent color, 2.5px solid). Others get unique colors from the accent pool (1.5px, 60% opacity). X-axis capped at primary release's timeline. Legend below chart in 3-column grid. Hover shows crosshair + dots on all lines + area fill on nearest line.
Horizontal bars. Default fill is text color (#111 light / #E5E5E5 dark). highlight: true uses accent color. Labels left-aligned, values right of bar in abbreviated notation. 28px bar height, 8px gap.
All charts: max-width 720px / SVG viewBox / themed via --accent, --text, --secondary, --border-light / dark mode re-renders via JS / abbreviated Y values (K/M)
Chart Toggle Button
Uses .tag.clickable to toggle between chart modes (single trajectory vs. multi-release comparison) in the same container. Text toggles between "Compare Releases" and "Hide Comparison". Active state via .active class. On toggle, re-renders chart and updates stats block below.
Compare ReleasesShowing: single trajectory
.tag.clickable / toggles comparisonActive boolean / re-calls renderStreamChart() / updates #chart-stats with per-track totals in comparison mode
Data Attribute Schema
Placement table rows carry four data attributes for filtering and grouping. Generated at report build time from Airtable data.
data-status
earned (pitched placements) or non-pitched (organic/editorial discovered outside campaign)
Composite key: status-type-platform (e.g. earned-third-party-spotify). Links header, data rows, and subtotal.
Present on: data rows, .group-header, .group-subtotal (all four) / .group-total (data-status only) / filter tags (one each)
SVG Icon Sprite
Hidden SVG block at top of report HTML defines platform icons as <symbol> elements. Referenced inline via <svg><use href="#icon-xxx"/></svg>. Icons are 14px, inherit currentColor, shown in .curator-platforms containers.
icon-spotify
Spotify
icon-apple
Apple Music
icon-youtube
YouTube
icon-deezer
Deezer
icon-amazon
Amazon Music
icon-soundcloud
SoundCloud
icon-beatport
Beatport
icon-tidal
Tidal
icon-traxsource
Traxsource
icon-instagram
Instagram
icon-tiktok
TikTok
icon-twitter
X / Twitter
icon-facebook
Facebook
icon-website
Website (globe)
svg style="display:none" / symbol per icon / use href="#icon-xxx" / .curator-platforms wraps links / 14px / secondary color / hover: accent
CSV & PDF Export
Footer buttons for exporting report data. Both use .footer-btn styling.
CSV
Queries all tr[data-status] rows. Builds CSV with columns: Status, Type, Platform, Placement, Curator, Followers, Feedback. Downloads as Artist - Track - Campaign Report.csv.
PDF
Calls window.print() for native Save as PDF. Print styles hide filters, footer controls, and accent dots. details sections forced open via .section-body { display: block !important }.
Internal only. Not surfaced in client-facing UIs. Ignored when focus is in input or textarea.
e
Toggle expand / collapse all <details> sections. Guide + Reports.
d
Toggle dark mode. Guide + Reports.
Esc
Guide: close active modal/panel. Reports: close all open <details> sections.
Feedback
Alert Banners
3 campaigns are awaiting curator feedback. Check the pipeline for updates.
SubmitHub credits running low. 12 credits remaining for this billing cycle.
Songstats API returned 429. Credential rotation triggered automatically.
Campaign report generated and delivered to client via email.
Callout
Campaign results are updated daily at 3:00 PM EDT via the automated reporting pipeline. Songstats data feeds into the batch email feedback processor, which then correlates with SubmitHub export data.
Callout — Success Variant
Used in reports for campaign highlights. Green left border + green-tinted background. Includes .accent-dot indicator before bold label.
Highlight: Notable third-party placements include Spinnin' Records' New Dance Music Friday (31.7K), Nicky Romero's Protocol Radio (21K), and Digital Empire Records' Tech House 2026 (19.2K).
