Signal Blue
#528fffViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Splice
splice.comWebsite preview
The design language
Splice operates as a midnight recording studio: deep charcoal canvases, near-borderless surfaces, and a single electric blue accent that cuts through the darkness like a signal light. Typography splits between SoehneBreit at whisper-weight for editorial headlines and Inter Variable as the dense workhorse, creating a deliberate contrast between performance and utility. Components stay flat and weightless — cards sit on near-identical surface tones, shadows are replaced by hairline inset strokes, and elevation comes from the photography itself. Color is rationed: one blue carries links and interactive elements, a saturated yellow-green appears as rare text punctuation, and everything else recedes into grayscale. The product — sound — is the only thing that ever gets loud.
Color palette
brand
Button Blue
#1253ffViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
accent
Voltage Yellow
#f1f607Rare text accent — highlight punctuation, featured labels, emphasis. Used sparingly, only when a word needs to flash against the dark canvas. Never on backgrounds
neutral
Carbon
#121214Primary page canvas, card surfaces, input fields, footer. The dominant working surface at 425 occurrences across every context
Obsidian
#000000Deepest dark — image containers, nav surface, full-bleed backgrounds. Creates the bottom of the surface stack
Platinum
#ffffffPrimary text, inverted button text, icon fills. The only true white in the system; appears 1506 times across every text context
Graphite
#232426Dominant canvas background, secondary button surface. Sits one step lighter than Carbon, used when a surface needs to feel like a different plane without using shadow
Fog
#a6a8adMuted text, nav items, secondary labels, inactive links. The first step down from white in the type hierarchy
Ash
#c8c9ccButton borders, icon strokes, hairline dividers, ghost control outlines. The border that doesn't feel like a border
Slate
#63656dBorders, dividers, inactive controls. Darker than Ash for when a divider needs to recede further
Iron
#45464dElevated surfaces, button borders, nav separators. The highest dark in the stack — used for the 1px inset stroke that replaces shadows
Typography
Type scale
Minor Third (1.2) · 13px basedisplay
54px · 400 · 1.25 · -0.81px trackingThe quick brown fox jumps
heading-lg
48px · 400 · 1.25 · -0.72px trackingThe quick brown fox jumps
heading
36px · 400 · 1.25 · -0.54px trackingThe quick brown fox jumps
heading-sm
28px · 400 · 1.25 · -0.42px trackingThe quick brown fox jumps
text-26
26px · 700 · 1.43The quick brown fox jumps
subheading
20px · 700 · 1.25 · -0.3px trackingThe quick brown fox jumps
text-18
18px · 500 · 1.2The quick brown fox jumps
body
16px · 500 · 1.5 · -0.24px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
InterVariable (custom)
- Weights
- 400, 500, 600, 700
- Sizes
- 12, 13, 14, 16, 18, 20, 26
- Line height
- 1.20, 1.25, 1.43, 1.50
- Letter spacing
- -0.0150em
- Fallback
- Inter
Workhorse for all UI text — body, nav, buttons, inputs, cards, footer. The variable axis allows weight shifts (400→500→600→700) within a single family. Universal -0.015em tracking creates a compact, efficient reading rhythm across every size.
Additional typeface
SoehneBreit (custom)
- Weights
- 400
- Sizes
- 14, 28, 36, 48, 54
- Line height
- 1.25, 1.43
- Letter spacing
- -0.0150em, 0.0710em
- Fallback
- Inter (with +2% horizontal scaling and 0.071em tracking on uppercase)
Editorial display headlines. The wider, geometric cut of SoehneBreit at weight 400 creates a distinctive voice — headlines don't shout, they announce with quiet authority. The 0.071em tracking (applied at 14px) appears on uppercase eyebrow labels, creating the system's only wide-tracked text. Weight 400 only — bold is never used.
Additional typeface
Soehne (custom)
- Weights
- 400
- Sizes
- 20
- Line height
- 1.25
- Letter spacing
- -0.0150em
- Fallback
- Inter
Subheadings — bridges the gap between SoehneBreit display and Inter body. Used at 20px for secondary headings that need editorial weight without display scale.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 80px
- Card padding
- 20-32px
- Element gap
- 8-16px
Border radius
nav
1440pxcards
4pximages
4pxinputs
4pxbuttons
8pxpill-buttons
60pxSpacing scale
4px5px8px10px11px14px16px20px32px43px45px48px64px80px120px173pxGuidelines
Do
- Use #528fff Signal Blue for all links and interactive text — it is the system's only persistent color voice
- Apply -0.015em letter-spacing to all text at all sizes for the compact reading rhythm
- Use SoehneBreit weight 400 for headlines — never bold, the whisper-weight is the voice
- Separate surfaces with 1px borders in #45464d or #232426, never with drop shadows
- Use 8px radius for standard buttons and 60px for pill-shaped interactive elements
- Apply 0.071em tracking to uppercase SoehneBreit labels at 14px for the editorial eyebrow pattern
- Let photography provide all visual elevation — full-bleed images carry the weight that shadows would
Don’t
- Never use #f1f607 Voltage Yellow on backgrounds — it is text-only punctuation
- Don't add drop shadows to cards or panels — the system is intentionally flat
- Never set SoehneBreit to bold weight — it only exists at 400 in this system
- Don't introduce new accent colors — the palette is grayscale plus two signals (blue, yellow-green)
- Avoid pure white backgrounds — the canvas is always Carbon #121214 or Graphite #232426
- Don't center-align body text — left-align for editorial reading rhythm
- Never use more than one chromatic color per component — the system rations color
Components
Promotional Banner
Top-of-page announcement stripFull-width #528fff background, centered white text at 14px Inter weight 400, with an inline link. Padding 8-14px vertical. Sits above the navigation as a separate band.
Navigation Bar
Primary site navigationBlack (#000000) background, sticky to top. Logo left, link group center (Fog #a6a8ad, 14px Inter, 16-20px horizontal spacing), utility actions right. Inner pill elements use 1440px radius (fully rounded). Height approximately 60px.
Filled Button (Primary)
Interactive action trigger#1253ff background, #ffffff text, 8px border-radius, 16px vertical / 20px horizontal padding. Inter weight 500-600 at 14px. The system's solid interactive element — deeper and more grounded than the Signal Blue links.
Ghost Button
Secondary interactive triggerTransparent background, #c8c9cc or #ffffff border (1px), #ffffff text, 8px border-radius, 8px vertical / 20px horizontal padding. Inter weight 400-500 at 14px. Used for actions that should not compete with the filled button.
Pill Button
Rounded utility button60px border-radius, compact padding (8-10px vertical, 16-20px horizontal). Used for tag-like actions, filter pills, and small interactive chips. Typically #ffffff fill with #000000 text when inverted, or transparent with #ffffff text on dark.
Hero Section
Full-bleed landing visualFull-viewport-width photograph (no radius, edge-to-edge). Overlaid text sits left-aligned, 48-54px SoehneBreit weight 400 in #ffffff with -0.72 to -0.81px letter-spacing. Body text at 16-18px Inter in #ffffff or rgba white. A filled blue button sits below the headline at 20px from the last line.
Content Card
Grouped content surface#121214 background, 4px border-radius, 20-32px padding, optional 1px #232426 or #45464d hairline border. No drop shadow. Content sits flat on the canvas, separated only by the surface tone shift and border line.
Input Field
Text input control#121214 background, 1px #45464d border, 4px border-radius, 12-14px vertical / 16px horizontal padding. Inter weight 400 at 14px. Placeholder text in Fog #a6a8ad. No focus glow — the border simply shifts to Signal Blue #528fff on focus.
Inline Link
Text-level navigation#528fff color, Inter weight 400-500 at 14-16px, no underline by default. Underline appears on hover at 1px offset. The system's most-used color — 351 occurrences.
Footer
Site-bottom content#000000 background, 48px+ vertical padding, Inter 12-14px in Fog #a6a8ad for body text. Links in #ffffff. Minimal visual weight — the footer recedes.
Surfaces & elevation
Level 0
Graphite Canvas
#232426Page background — the dominant working surface
Level 1
Carbon
#121214Card surfaces, sections, input fields
Level 2
Obsidian
#000000Deepest dark — full-bleed images, nav surface
Level 3
Iron
#45464dElevated borders, inset strokes, the system's only 'raised' element
Elevation is intentionally absent. The only shadow in the system is a 1px inset stroke (rgba(0,0,0,0.07) 0px 0px 0px 1px inset) used to create hairline separation on dark surfaces. Cards don't float — they sit on near-identical tones, differentiated only by the 1px border between Carbon and the slightly lighter Iron. This creates a flat, weightless feel appropriate for a creative tool that needs to stay out of the way of the work. If something needs to feel important, it gets a photograph, not a shadow.
Layout & imagery
Layout
Full-bleed layout with no content max-width constraint — the nav, hero, and footer all span the full viewport. The hero is a single full-bleed photograph with left-aligned text overlaid in the lower-left quadrant, following a classic editorial pattern. Body content sits centered or left-aligned within the full-width canvas. The promotional banner at the very top is a separate full-width band. Section rhythm is spacious — 80px between major sections, with breathing room around photography. Navigation is a dark sticky top bar with a separated promotional strip above it. The grid is not rigidly columnar at the page level; content blocks are positioned with generous margins, and the only grid structure appears in card clusters and feature lists.
Imagery
Photography is the hero: full-bleed, atmospheric, and moody. The signature treatment is interior spaces — rooms, studios, domestic environments — captured in dramatic colored light (the green-tinted room in the hero is characteristic). Photography is high-key in color but low-key in contrast, creating a cinematic, almost editorial feel. Images are edge-to-edge with 4px radius or no radius at all, never contained in rounded cards. Product screenshots and illustrations are absent — the photography IS the product communication. The visual density is image-heavy at the hero level, transitioning to text-dominant in body sections.
Design notes
Agent Guide
primary action: no distinct CTA color **Quick Color Reference** - text: #ffffff - background: #121214 - border: #45464d - accent: #528fff - button fill: #1253ff - highlight: #f1f607 **Example Component Prompts** 1. Create a full-bleed hero section: a large dark-toned photograph filling the entire viewport with no border-radius. Overlaid in the lower-left, a headline at 54px SoehneBreit weight 400, #ffffff, letter-spacing -0.81px. Below it, a filled blue button (#1253ff background, #ffffff text, 8px radius, 16px 20px padding, Inter weight 500 at 14px). 2. Create a content card: #121214 background, 4px border-radius, 1px #45464d border, 24px padding. Headline at 28px SoehneBreit weight 400 in #ffffff, body text at 16px Inter weight 400 in Fog #a6a8ad. No drop shadow. 3. Create a ghost button: transparent background, 1px #c8c9cc border, #ffffff text, 8px radius, 8px 20px padding, Inter weight 400 at 14px. Include a small play icon (▷) in white to the left of the text. 4. Create a navigation bar: #000000 background, 60px height, sticky to top. Logo (wordmark in #ffffff, Inter weight 700 at 16px) on the left, nav links (#a6a8ad, Inter weight 400 at 14px, 20px horizontal gap) in the center, and a filled blue button (#1253ff, 8px radius, Inter 14px weight 500) on the right. 5. Create an input field: #121214 background, 1px #45464d border, 4px border-radius, 12px 16px padding. Placeholder text 'Search samples...' in #a6a8ad, Inter weight 400 at 14px. On focus, border shifts to #528fff.
Similar brands
Spotify
Dark-mode media platform with a near-monochrome palette and a single green accent — the same rationed-color approach where the product (audio) is the only loud element
Bandcamp
Dark music marketplace with editorial typography and full-bleed album photography — similar weightless surface treatment with hairline separation instead of shadows
Native Instruments
Music production tools with dark UI, condensed type, and minimal chrome — the same professional-tools-meets-creative-tool balance
Ableton
Dark-mode creative software with weightless surfaces and photography-led marketing — the same philosophy of letting the medium (sound/light) do the visual heavy lifting
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
