Brand Blue
#0066ccPrimary action background, link underlines, heading accents, card fills on light surfaces — the single chromatic voice that powers CTAs, active states, and iconography
MetaMusic
metamusic.caWebsite preview
The design language
MetaMusic speaks in a paper-warm, editorial tone: a cream canvas (#f4f1ea) hosts oversized display headlines (up to 120px) that read like a museum wall label, while one vivid blue (#0066cc) and one deep indigo (#0e2575) carry all functional weight. Surfaces stack from cream → white → light-blue wash → indigo panel, creating a gentle warm-to-cool gradient as the eye scrolls. The defining texture is a hard 4px solid black offset shadow (zero blur) — a flat, almost sticker-like treatment that gives buttons and cards a tactile, printed feel rather than a soft Material elevation. Typography is monolinear and quiet: Maison Neue at every UI role, Spoof reserved for a single 22px accent heading, all set tight with negative tracking at display sizes. Components stay spacious (24px card radius, 40px internal padding) and never compete with the massive hero type; illustrated document and music icons float on warm peach circles as the only decorative voice.
Color palette
brand
Deep Indigo
#0e2575Dark section backgrounds (feature/why panels), hero image frames — the only place a full-bleed surface goes deep and saturated
Midnight Card
#213680Elevated card surface when sitting on Deep Indigo backgrounds — one step lighter than the panel to separate without using shadow
accent
Lavender Mist
#e6e0f8Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Ice Blue
#e9f4ffAlternate light surface wash, subtle card background variant — the cool counterpoint to Paper Cream
Peach Blush
#f7e1d5Icon circle backgrounds in audience/feature cards — the only warm accent that breaks the cream-on-cream
neutral
Charcoal Ink
#101820Body text and dark-surface secondary fills — slightly cooler than pure black, anchors reading text without harshness
Paper Cream
#f4f1eaPrimary page canvas — the warm base that gives the whole site its editorial, printed feel
White
#ffffffCard surfaces, nav background, button text on blue, input fills — the clean highlight layer above cream
Ash Border
#d6d6d6Hairline dividers, subtle borders on neutral surfaces — the quietest structural line
Typography
Type scale
Minor Third (1.2) · 18px basedisplay-lg
120px · 500 · 0.95 · -3.6px trackingThe quick brown fox jumps
display
80px · 500 · 1.05 · -1.6px trackingThe quick brown fox jumps
display-sm
56px · 500 · 1.05 · -1.12px trackingThe quick brown fox jumps
heading-lg
40px · 500 · 1.1 · -0.4px trackingThe quick brown fox jumps
heading
32px · 500 · 1.2 · -0.32px trackingThe quick brown fox jumps
text-26
26px · 600 · 1.4The quick brown fox jumps
heading-sm
22px · 500 · 1.2 · -0.2px trackingThe quick brown fox jumps
subheading
19px · 400 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Maison Neue
- Weights
- 400, 500, 600
- Sizes
- 12, 14, 16, 19, 22, 26, 32, 40, 56, 80, 120
- Line height
- 0.95, 1.05, 1.10, 1.20, 1.35, 1.40, 1.50
- Letter spacing
- -0.0300em, -0.0200em, -0.0100em
- Fallback
- Inter, Söhne, or IBM Plex Sans
The sole workhorse font across body, nav, headings, buttons, inputs, cards, and footers. Weight 400 carries body and UI labels; 500 steps up to subheadings and nav; 600 owns display sizes (56–120px). The type behaves like a neo-grotesque with humanist warmth — readable at 12px, monumental at 120px. Negative tracking tightens aggressively at display sizes (-0.03em at 120px, -0.02em at 56–80px, -0.01em at 32–40px) so headlines sit visually compact despite their scale.
Additional typeface
Spoof
- Weights
- 500
- Sizes
- 22
- Line height
- 0.90
- Letter spacing
- -0.0200em
- Fallback
- GT America, Druk Wide, or Söhne Breit
Reserved for a single accent heading or card label at 22px / weight 500. Its ultra-tight 0.90 leading and -0.02em tracking create a display-quality mark at a mid size — used as a typographic exclamation point, never as a workhorse. Free substitute: GT America or a tight condensed sans like Druk Wide.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 40px
- Element gap
- 24px
Border radius
nav
8pxcards
24pxbadges
9999pxinputs
8pxbuttons
9999pxSpacing scale
2px8px12px16px18px24px32px40px48px72px80px88px96px120px128px136px160pxGuidelines
Do
- Use Maison Neue for all UI text; reserve Spoof for one accent heading at 22px per page maximum
- Apply the hard 4px black offset shadow only to interactive controls (buttons, nav items) — never to cards or images
- Stack the surface system in order: Paper Cream canvas → White card → Ice Blue wash → Midnight Card on Deep Indigo; never mix more than two surface levels in one viewport
- Set display headlines at 80–120px with letter-spacing -0.02em to -0.03em; the tight tracking is what makes the oversized type feel intentional rather than bloated
- Use the 24px radius for all cards and the 9999px pill for all buttons and tags; 8px is reserved for inputs only
- Place Peach Blush icon circles only inside audience/feature cards — never on dark indigo surfaces where they would clash
- Use Card Padding 40px and Section Gap 80px as the rhythm; the 8px base unit governs all internal gaps
Don’t
- Do not use soft, blurred drop shadows — the hard 4px solid offset is the only elevation language in this system
- Do not introduce new chromatic colors; Brand Blue and Deep Indigo are the only saturated voices, and they must not share a surface
- Do not set display type without negative letter-spacing; positive tracking at 56px+ destroys the editorial feel
- Do not use 8px radius on cards or 24px radius on inputs — the three-tier radius system (24px / 9999px / 8px) is strict
- Do not place text directly on Peach Blush or Lavender Mist without checking contrast — both are surface washes, not text backgrounds
- Do not add a second outlined pill button to the same view; the Log-in outline is a one-per-header accent
- Do not center body text longer than a single line; the editorial system relies on left-aligned, ragged-right reading
Components
Display Headline
Hero and section-opening textMaison Neue weight 600, sizes 80–120px, lineHeight 0.95–1.05, letter-spacing -0.02em to -0.03em. Color: Charcoal Ink (#101820) on cream, White on indigo. Sets the editorial voice — monumental, tight, and unadorned.
Section Heading
Mid-page section titlesMaison Neue weight 600 at 56px, lineHeight 1.05, letter-spacing -0.02em. Color: Charcoal Ink on cream surfaces, White on indigo. The 56px step is the most repeated display size across interior sections.
Accent Eyebrow Label
Small blue label above section headingsMaison Neue weight 500 at 16–19px, color Brand Blue (#0066cc), no uppercase. Acts as the 'Discover MetaMusic' / 'Who's it for?' pre-title — a short functional punctuation that introduces each section.
Primary CTA Button
Filled blue action buttonBackground Brand Blue (#0066cc), text White, Maison Neue weight 500 at 16px, padding 16px 24px, border-radius 9999px (pill), hard 4px black offset shadow. One per view maximum.
Outline Nav Button
Log-in / portal entry in headerWhite background, Black 1px border, Charcoal Ink text, Maison Neue weight 500 at 16px, padding 12px 24px, border-radius 9999px, hard 4px black offset shadow. The only outlined pill in the system — sits in the header as a secondary entry point.
Ghost Arrow Button
Card continuation controlCircular 40px Black (#000000) background, White right-arrow icon, no border, no shadow. Sits in the bottom-right corner of feature cards to signal 'continue' without a full CTA treatment.
Feature Card on Indigo
Numbered step card in dark sectionsBackground Midnight Card (#213680), padding 40px, border-radius 24px, no shadow. Top-left has a 32px Brand Blue circle with white numeral. Title: White Maison Neue weight 500 at 22px. Body: White at 16px.
Audience Card
Audience / "who's it for" cardBackground White, padding 40px, border-radius 24px, no shadow. Left side: 48px Peach Blush (#f7e1d5) circle with Brand Blue line-icon. Right: Charcoal Ink title (Maison Neue 500, 19px) and body (16px, 400).
Text Input
Form fieldsBackground White, border 1px Lavender Mist (#e6e0f8), border-radius 8px, padding 16px, Maison Neue 400 at 16px. Focus: border becomes Brand Blue. No floating labels.
Notification Banner
Top-of-page announcement barBackground Lavender Mist (#e6e0f8), full-width, padding 8px, Charcoal Ink text at 12–14px, small close × on the right. The only persistent banner in the system.
Illustration Icon Circle
Decorative music/document icon48–64px Peach Blush (#f7e1d5) circle with a Brand Blue line-art icon inside (document, magnifying glass, music note). Always paired with or floats near headlines; never used as a functional control.
Top Navigation Bar
Primary site navigationWhite background, 64px height, Maison Neue weight 500 at 16px for links. Logo (Maison Neue wordmark + mark) on the left, links centered/left-aligned, Outline Nav Button on the right. Bottom hairline border in Ash Border (#d6d6d6).
Language/Region Toggle
Globe icon with language code in headerNo background, Charcoal Ink globe icon + 2-letter language code at 14px, right-aligned in nav. Minimal — never wrapped in a button chrome.
Surfaces & elevation
Level 0
Paper Cream Canvas
#f4f1eaPrimary page background — the warm editorial base
Level 1
White Card
#ffffffStandard card and nav surface on cream canvas
Level 2
Ice Blue Wash
#e9f4ffAlternate light surface for secondary cards and callout boxes
Level 3
Lavender Mist
#e6e0f8Input field backgrounds, notification banner tint
Level 4
Peach Blush
#f7e1d5Icon circle containers in feature/audience cards
Level 5
Midnight Card
#213680Elevated card on deep indigo panels
Level 6
Deep Indigo Panel
#0e2575Full-bleed dark feature section background
Elevation is deliberately flat. The only shadow in the system is a hard 4px solid black offset (zero blur) reserved for interactive controls — buttons and nav items get a sticker-like drop that implies a printed paper cutout rather than Material depth. Cards rely on background color contrast (white on cream, midnight on indigo) and 24px radius to separate themselves; they never use shadow. This keeps the editorial feel intact and avoids any glassmorphism or soft-elevation vocabulary.
Buttons, nav buttons, pill controls
0px 4px 0px 0px #000000
Layout & imagery
Layout
The page model is max-width contained at ~1280px, centered, with generous outer gutters. The hero is a left-aligned oversized headline stack on Paper Cream with floating illustration accents to the right — no full-bleed image, no video. The site alternates between warm cream bands (audience, features) and a single full-width Deep Indigo section ('Why use MetaMusic?'), creating a clear warm→cool progression as the user scrolls. Section rhythm uses 80px vertical gaps with no visible dividers — separation comes from surface color shifts alone. The audience section uses a 2-column split: oversized left-aligned heading on the left, stacked white cards on the right. Feature sections use a 3–4 column card grid on the dark indigo panel. Navigation is a single 64px white top bar — no sticky variant, no sidebar, no mega-menu. The overall density is spacious and editorial: one or two primary elements per viewport, never more.
Imagery
Visuals are illustrations, not photography — flat, line-art icons drawn in Brand Blue (#0066cc) depicting documents, magnifying glasses, music notes, cassette tapes, and microphones. Icons always sit inside Peach Blush (#f7e1d5) circles on cream surfaces, or float freely near headlines in the hero. The illustration style is geometric and monoweight, never filled, never gradient-shaded. No product screenshots, no lifestyle photography, no 3D renders. Image density is low — illustrations appear as single accents (one per hero, one per card) rather than as galleries. The visual language reads like editorial spot illustrations in a music-industry magazine.
Design notes
Agent Guide
Quick Color Reference: - Text: #101820 (Charcoal Ink) on cream, #ffffff on indigo - Background: #f4f1ea (Paper Cream) for pages, #0e2575 (Deep Indigo) for dark sections - Border: #d6d6d6 (Ash) for hairlines, #0066cc (Brand Blue) for interactive borders - Accent: #0066cc (Brand Blue) — the only chromatic voice - Icon wash: #f7e1d5 (Peach Blush) circles for decorative icons - primary action: #0066cc (outlined action border) Example Component Prompts: 1. Create a hero section: Paper Cream (#f4f1ea) background, max-width 1280px centered. Accent eyebrow 'Discover MetaMusic' in Brand Blue (#0066cc) Maison Neue 500 at 16px. Headline 'Take control of your music metadata' in Charcoal Ink (#101820) Maison Neue 600 at 80px, lineHeight 1.05, letter-spacing -1.6px. Two cards below at 40px padding, 24px radius: left card is Brand Blue (#0066cc) background with white text 'Create a MetaMusic Beta account' plus a 40px Black circular arrow button; right card is White background with 1px Ash Border, Charcoal Ink text, same arrow button. 2. Create an audience section: Paper Cream background, 2-column layout. Left column: Accent eyebrow 'Who's it for?' in Brand Blue 16px, then 'MetaMusic is for everyone involved in local music!' in Charcoal Ink Maison Neue 600 at 56px, lineHeight 1.05, letter-spacing -1.12px. Right column: 4 stacked White cards, each 40px padding, 24px radius, containing a 48px Peach Blush (#f7e1d5) circle with a Brand Blue line-icon, a 19px Maison Neue 500 title, and 16px body text. 3. Create a dark feature section: Deep Indigo (#0e2575) full-width background, white text. Centered heading 'Why use MetaMusic?' in White Maison Neue 600 at 56px, with a Brand Blue link 'Discover MetaMusic's metadata management tool →' below. 4-column grid of Midnight Card (#213680) cards, 40px padding, 24px radius. Each card has a 32px Brand Blue circle with a white numeral (1–4) top-left, a White Maison Neue 500 title at 22px, and White body at 16px. 4. Create a text input: White background, 1px Lavender Mist (#e6e0f8) border, 8px radius, 16px padding, Maison Neue 400 at 16px, Charcoal Ink text. Focus state: border becomes Brand Blue (#0066cc), no shadow change. 5. Create the top navigation: White background, 64px height, Ash Border (#d6d6d6) 1px bottom hairline. Left: Brand Blue mark + Maison Neue 600 wordmark. Center-left: nav links (Discover the Tool, Help and training sessions, Resources, News, Contact us) in Maison Neue 500 at 16px Charcoal Ink. Right: Outline Nav Button — White background, 1px Black border, Charcoal Ink 'Log-in to the portal' text, 9999px radius, 12px 24px padding, 0px 4px 0px 0px #000000 shadow. Far right: globe icon + 'Fr' in Maison Neue 400 at 14px.
Typography Voice
Maison Neue is the entire voice of the interface — it carries from 12px helper text to 120px hero without ever changing its humanist character. The signature move is the negative letter-spacing ramp: -0.01em at 32–40px, -0.02em at 56–80px, -0.03em at 120px. This tracking compression is what makes the display type feel designed rather than defaulted. Spoof appears once per page maximum at 22px weight 500 — think of it as a typographic period at the end of a headline, not a body face. Never set body text at 0.90 line-height or display text at 1.5; the line-height scale is tightly coupled to size (0.95 at 120px → 1.5 at 12px).
Similar brands
Splice
Editorial cream/white canvas with oversized sans-serif headlines and a single blue brand accent; the same museum-label approach to hero typography
Bandcamp
Warm paper-like base color with generous spacing, large confident type, and minimal decoration — music-industry tools that prioritize readability over flash
Notion
Clean light surfaces, generous card padding (40px), 24px card radius, and a single functional accent color for actions and links
Linear
Pill-shaped buttons with hard-offset shadows and a single chromatic accent on a near-white canvas — the same sticker-flat button treatment
Squarespace
Oversized display type with tight negative tracking, generous section gaps, and a warm neutral canvas that signals editorial credibility
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
