BRAND DESIGN SYSTEM · VERSION 1.0
VISUAL IDENTITY GUIDELINES
MUSIC FRONTIERS · MUSICFRONTIERS.COM
REEPERBAHN FESTIVAL · HAMBURG · SEPTEMBER 17–18, 2026
COVER
Music Frontiers is where the future of music is built. A collision point for technologists, artists, researchers, and industry leaders — united by the belief that music and innovation are inseparable forces shaping culture.
The brand lives in the tension between analogue warmth and machine precision. Bold. High-contrast. Unapologetically loud. A visual language that commands attention and refuses to be ignored.
Halftone dot patterns, vertical scanlines, circuit-board microgrids at 5–10% opacity.
Pure black as primary canvas. White for critical type. Neon green and signal purple as high-voltage punctuation.
No softness. Typography at scale, asymmetric layouts, aggressive kerning. The brand feels alive.
Bold, condensed, all-caps display use. Logotype, event titles, stage names, poster headlines. Optical tracking at -0.02em for large sizes.
All body copy, captions, UI labels, data, navigation. Light (300) for elegance; regular (400) for body; bold (700) for emphasis.
| Role | Font | Size | Weight | Case | Tracking | Use |
|---|---|---|---|---|---|---|
| DISPLAY XL | Anton | 96–120px | ExtraBold | ALL CAPS | -0.03em | Stage backdrop, hero poster |
| DISPLAY L | Anton | 56–72px | Bold | ALL CAPS | -0.02em | Poster headline, section breaks |
| HEADING 1 | Ubuntu | 36–48px | 700 | Title | -0.01em | Page titles, speaker names |
| HEADING 2 | Ubuntu | 24–30px | 700 | Title | 0em | Section headers, session titles |
| SUBHEADING | Ubuntu | 16–18px | 300 | UPPER | +0.12em | Subtitles, labels, categories |
| BODY | Ubuntu | 14–16px | 400 | Sentence | 0em | Descriptions, running copy |
| CAPTION | Ubuntu | 10–12px | 400 | UPPER | +0.15em | Tags, timestamps, metadata |
| CODE/DATA | Ubuntu Mono | 12–14px | 400 | Mixed | 0em | Tech specs, live data, schedule |
| File | Dimensions | Format | Use Case |
|---|---|---|---|
| Logo_Main_Music_Frontiers_round11.png | 2001 × 731 px | PNG | Master logo with tagline — print & digital primary |
| Logo_Main_Music_Frontiers_round17.png | 2001 × 601 px | PNG | Wordmark only — no tagline, flexible placement |
| YT_title.jpg | 2048 × 1152 px | JPG | YouTube channel art, stage screens, large displays |
| YT_title_.jpg | 1280 × 720 px | JPG | Video thumbnails, social headers, 720p screens |
| YT_title_safe.jpg | 1235 × 338 px | JPG | Email headers, web banners, press releases |
| YT_title_safe.png | 1235 × 338 px | PNG | Overlay use: slides, motion graphics, compositing |
Every animation communicates something: state changes, hierarchy, or sequence. Motion is never decorative for its own sake. If removing it breaks nothing, remove it.
Cut transitions with minimal easing. Use ease-out for entries; linear for looping effects. Avoid bouncy, organic, spring-based curves — they contradict the brand's precision.
The brand permits deliberate glitch aesthetics as a signature motion. Used sparingly on hover states and key transitions — a nod to the machine beneath the surface.
| Token | Duration | Easing | Use Case |
|---|---|---|---|
| --dur-instant | 80ms | linear | Hover states, active press feedback |
| --dur-fast | 160ms | ease-out | Dropdowns, tooltips, small UI |
| --dur-normal | 320ms | ease-out | Panel open, card reveal, modal |
| --dur-slow | 640ms | ease-out | Page transitions, hero entrance |
| --dur-ambient | 1500ms+ | ease-in-out | Looping ambient background effects |
"Two days. 50 speakers. One question: what does music sound like in 10 years?"
"Join us for an exciting multi-day conference exploring the intersection of music and technology."
"She built the algorithm that predicted the next genre shift. Now she's here to talk about what's coming."
"Dr. Smith is an internationally recognized expert in music technology with over 20 years of experience."
"Apply to speak. We want your frontier."
"We warmly invite you to submit a speaker proposal for consideration by our review committee."
/* ── Core Palette ──────────────────────────────────── */ --color-void: #000000; /* Primary background */ --color-neon: #6EFF04; /* Primary — 20% of surface */ --color-neon-dark: #44CC00; /* Neon on light */ --color-signal: #9004FF; /* Secondary brand */ --color-signal-light: #AA44FF; /* Signal hover states */ --color-signal-dark: #6600CC; /* Signal on light BG */ --color-magenta: #FF04D9; /* Highlight / hot accent */ --color-cyan: #04FFCA; /* Accent / cool accent */ --color-orange: #FF6E04; /* Third / warm accent */ --color-white: #FFFFFF; /* Critical text */ --color-charcoal: #111111; /* Card / surface */ --color-surface: #1A1A1A; /* Elevated surface */ --color-gray-60: #666666; /* Muted text */ /* ── Semantic ──────────────────────────────────────── */ --color-bg-primary: var(--color-void); --color-text-primary: var(--color-white); --color-brand: var(--color-neon); --color-accent: var(--color-signal); /* ── Functional ────────────────────────────────────── */ --color-success: #00CC44; --color-warning: #FF6600; --color-error: #CC0033; --color-info: #0066CC;
/* ── Font Families ─────────────────────────────────── */ --font-display: 'Anisette', sans-serif; /* Anisette equivalent */ --font-body: 'Ubuntu', sans-serif; --font-mono: 'Ubuntu Mono', monospace; /* ── Font Sizes ────────────────────────────────────── */ --text-display-xl: clamp(64px, 10vw, 120px); --text-display-l: clamp(48px, 7vw, 72px); --text-h1: clamp(28px, 4vw, 48px); --text-h2: clamp(22px, 3vw, 32px); --text-body: 15px; --text-caption: 11px; /* ── Spacing ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-5: 24px; --space-8: 40px; --space-10: 64px; /* ── Border Radius ─────────────────────────────────── */ --radius-none: 0px; /* Default — all UI elements */ --radius-micro: 2px; /* Badges/tags only */ /* ── Motion ────────────────────────────────────────── */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-normal: 320ms; --dur-slow: 640ms; --ease-sharp: cubic-bezier(0.2, 0, 0.4, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); --ease-glitch: steps(3, end);