Brand Kit
The canonical reference for PhantomRack's visual identity. Everything you need to design, build, or extend the brand consistently.
Identity
Logo
The PhantomRack mark is an abstract ghost form, a single SVG path that uses currentColor for flexible theming. Always pair the mark with the wordmark in Cabinet Grotesk.
Always display the mark inside a rounded-lg container with a subtle border. Never render the mark floating without a container.
Cabinet Grotesk Extrabold, uppercase, tracking-widest. Never use a different font for the wordmark. Always pair with the mark.
Maintain at least 1x the mark height as clear space around the full lockup. Never crowd the logo with other elements.
Palette
Colors
A single-accent dark palette. Cyan is the only accent color. Every interactive and highlighted element resolves to it. The zinc scale provides neutral depth. No gradients, no multi-color treatments.
Brand
Page backgrounds, app base
The single accent: hovers, focus rings, highlights, active states
Headings, emphasized text, primary buttons
Elevated surfaces, card backgrounds, inputs
Zinc Scale
Card bg, inputs
Elevated surfaces
Borders, waveform bars
Dimmed elements
Secondary headlines
Body text, labels
Primary body text
Status
Completed states, positive indicators
Pending/isolating states
Failed states, destructive actions
Offline, disabled indicators
Cyan Opacity System
Cyan accent at varying opacities creates depth without introducing new colors. Use these consistently for glows, borders, and backgrounds.
Type System
Typography
Three fonts, non-overlapping roles. Cabinet Grotesk for display, Plus Jakarta Sans for body, JetBrains Mono for UI/technical. Loaded via FontShare.
Cabinet Grotesk
Upload a reference.
Sound like it.
PhantomRack
PhantomRack
Plus Jakarta Sans
Upload a vocal reference. Get a complete Ableton effect chain that matches it. Stock plugins only. Download the .adg and drag it in.
For producers who can hear the gap between their vocals and a professional release. PhantomRack decodes the vocal processing from any reference track and generates a matching effect chain.
Reference-matched vocal chains for Ableton Live.
Reference-matched vocal chains for Ableton Live.
Reference-matched vocal chains for Ableton Live.
Reference-matched vocal chains for Ableton Live.
JetBrains Mono
0 0 25px rgba(213,244,249,0.25)
duration-500 · blur-[120px] · opacity-[0.035]
Heading Scale
UI Patterns
Components
Core UI building blocks. Every component follows the same rules: dark surfaces, white/10 borders at rest, cyan accent on interaction. No color variation.
Buttons
Inputs
Badges
Cards
Card Title
Card body text with hover glow bubble, border transition, and heading color shift. Hover to see the full interaction pattern.
Inline Code
Download the .adg preset. Supports .wav, .mp3, and .flac.
font-mono · text-xs · bg-white/5 · border-white/10 · roundedStructure
Spacing & Layout
Consistent spatial rhythm built on a 4px unit grid. Sections breathe with generous vertical padding. Content never exceeds 1440px.
Border Radius
Motion
Animation
Subtle, functional motion. Transitions serve feedback, not decoration. Everything uses ease-out. Five standard durations cover all use cases.
Accordion, instant feedback
Buttons, links, inputs
Cards, text color, borders
Ambient glow bubbles
Progress bar color
Hover System
Every interactive element hovers toward cyan. This is the single unifying interaction pattern across the entire interface.
Focus Ring
Atmosphere
Decorative Elements
Minimal decorative vocabulary. Three elements create atmosphere without clutter: ambient glows, dot grids, and edge lights.
Large, blurred cyan circles behind content. 3–6% opacity, blur-[100–120px]. Never solid, always atmospheric.
Radial gradient dots at 32px intervals. 3.5% opacity. Applied to hero sections for subtle texture.
1px gradient line from transparent to cyan/20 to transparent. Used as section dividers and top-of-section accents.
Depth
Shadows
Two shadow families: inset shadows for recessed elements (inputs, containers) and glow shadows for elevated/focused elements. All glows use the cyan accent.
Language
Voice & Tone
PhantomRack speaks to producers who understand signal chains, effect racks, and the gap between a demo and a release.
- Direct, short sentences. Lead with the action.
- Use producer vocabulary: chain, rack, reference, mix, signal.
- Technical precision. Name specific plugins, formats, parameters.
- Confidence without hype. The tool works. Let it speak.
- Two-line headline pattern: action line (white) + payoff line (dimmed).
- Never say "AI" in headlines or primary copy. The audience associates AI mixing with robotic output.
- Don't say "fix your vocals" — implies they're broken. Say "match your reference" or "build your chain".
- Don't say "improve" — say "build" or "match" instead.
- No emojis. No exclamation marks. No "amazing" or "revolutionary".
- Don't explain audio engineering basics. The audience knows.
- No filler copy ("We're excited to announce...").
- Don't promise perfection. "Matches" not "perfectly recreates".
Reference
Quick Reference
Copy-paste values for common design decisions.
FontShare CDN
api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,900&f[]=plus-jakarta-sans@300,400,500,600&f[]=jetbrains-mono@400,500&display=swap
Download design tokens, logo marks, and color palette as portable files.