DESIGN.md · Analysis

Splice

splice.com · 26 Sept 2026 · 47 colors · InterVariable, Open Sans

Splice

Splice is a cloud-based music production platform offering royalty-free sounds, samples, presets, and plugins. The design system embodies a tech-forward, minimalist aesthetic with a vibrant primary accent that commands attention on a neutral canvas.

Colors

surface#ffffff

surface-dim#f5f5f5

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f0f0f0

surface-container#e8e8e8

surface-container-high#e0e0e0

surface-container-highest#d0d0d0

on-surface#1c1c1c

on-surface-variant#63656d

inverse-surface#1c1c1c

inverse-on-surface#ffffff

outline#c8c9cc

outline-variant#a6a8ad

surface-tint#1253ff

primary#1253ff

on-primary#ffffff

primary-container#e5e5e8

on-primary-container#0029cc

inverse-primary#2561ff

secondary#0033ff

on-secondary#ffffff

secondary-container#e5e5e8

on-secondary-container#001f99

tertiary#1c1c1c

on-tertiary#ffffff

tertiary-container#45464d

on-tertiary-container#ffffff

error#e81d01

on-error#ffffff

error-container#ffb4ab

on-error-container#b61701

primary-fixed#e5e5e8

primary-fixed-dim#c8c9cc

on-primary-fixed#0029cc

on-primary-fixed-variant#001f99

secondary-fixed#e5e5e8

secondary-fixed-dim#c8c9cc

on-secondary-fixed#001f99

on-secondary-fixed-variant#0029cc

tertiary-fixed#45464d

tertiary-fixed-dim#2f2f2f

on-tertiary-fixed#ffffff

on-tertiary-fixed-variant#e0e0e0

background#ffffff

on-background#1c1c1c

surface-variant#e5e5e8

Typography

display: fontFamily: InterVariable · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: InterVariable · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: InterVariable · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: InterVariable · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: InterVariable · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: InterVariable · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Open Sans · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Open Sans · fontSize: 12px · fontWeight: 700 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

Splice is a cloud-based music production ecosystem that democratizes access to professional-grade sounds, samples, presets, and plugins. The design system embodies a "Tech-Minimalist" aesthetic: a clean, neutral canvas (white surfaces with dark headers at #1c1c1c) punctuated by a vibrant, electric primary blue (#1253ff) that commands attention on CTAs, links, and interactive states. The brand personality is confident, direct, and production-focused—speaking to both novice producers and seasoned professionals with equal clarity. Voice: precise, action-oriented, never condescending. Example sentence: "Drop your sample pack, set your price, and start earning royalties today."

Colors

The color system is built on a high-contrast, minimalist foundation with a single dominant accent. Primary (#1253ff) is the signature interaction color, deployed on all primary CTAs ('Try now'), links, focus states, and active navigation elements. It commands visual hierarchy through saturation and contrast against the neutral surface. Secondary (#0033ff) provides a deeper blue for selected states and emphasis. Tertiary (#1c1c1c) is the dark neutral used for headers, dark-mode surfaces, and text on light backgrounds. The surface stack ranges from pure white (#ffffff) for the main canvas through grays (#f5f5f5 to #d0d0d0) for container hierarchy. Error (#e81d01) is reserved for destructive actions and validation failures. All interactive elements use the primary blue on hover (transition: b

Typography

The type system pairs InterVariable (body and display) with Open Sans (labels and UI text), creating a technical yet approachable voice. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary content with generous 24–28px line-height for readability. Label-sm (12px, 700 weight, 0.05em tracking) is used for button text, badges, and UI labels—the uppercase, tight tracking reinforces the technical, production-focused brand voice. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) when placed over busy backgrounds or images to ensure legibility. All headlines use negat

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, ensuring content scales gracefully from mobile to desktop. The primary container max-width is 950px for marketing pages, 900px for product detail pages. Spacing is semantic: lg (40px) separates major sections (hero to features, features to testimonials), md (24px) divides subsections and card groups, sm (12px) provides breathing room within components. The gutter is consistently 24px on both sides, creating a 48px total margin on desktop. White-space is generous—the design avoids cramping; negative space around primary CTAs (Try now button) is at least lg (40px) to draw focus. The header uses a fixed dark background (#1c1c1c) with 10px padding top, anchoring navigation and logo at the top of the viewport.

Elevation & Depth

Depth is conveyed through a subtle shadow and border system rather than dramatic layering. Level 1 (Base): flat surfaces with no shadow, 1px border at #c8c9cc (outline). Level 2 (Cards, Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 1px border at outline. Level 3 (Modals, Elevated Panels): box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.35), 1px border at outline. On hover, cards and buttons transition to Level 2 shadow (100ms ease-in-out) and shift the border to primary (#1253ff), signaling interactivity. The header uses no shadow, relying on its dark background (#1c1c1c) and the white body su

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the precision of music production software while maintaining approachability. Buttons and inputs use lg (1rem / 16px) border-radius, creating a friendly, modern appearance without excessive softness. Cards use md (0.75rem / 12px) for a balanced, professional look. Badges and pills use full (9999px) for maximum roundness, emphasizing their role as discrete, contained elements. The DEFAULT radius (0.5rem / 8px) is used for smaller interactive elements and subtle UI components. This graduated scale ens

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#1253ff on white, 48px height, 12px 24px padding, label-sm typography) use a solid fill with no border. On hover, the background shifts to #2561ff (inverse-primary) with a 100ms ease-in-out transition. Active state is #0029cc. Secondary buttons are transparent with a 1px outline (#c8c9cc), text in primary blue, and a hover state that fills the background with surface-container-high (#e0e0e0). Tertiary buttons (#1c1c1c background) are used for dark-mode or secondary contexts. All buttons have a minimum touch target of 48px height and 44px width for accessibility.

Containers & Surfaces Cards are the primary container for content. Standard cards have a white background (#ffffff), 1px border at #c8c9cc, 24

Do's and Don'ts

**Do**

Do use primary blue (#1253ff) exclusively for CTAs, links, and active states—it is the brand's signature accent and must remain visually distinct.
Do maintain at least 40px (lg spacing) of white-space around primary CTAs to ensure they command attention and are easy to tap.
Do apply the label-sm typography (12px, 700 weight, 0.05em tracking) to all button text and UI labels for consistency and technical precision.
Do use the full rounded (9999px) border-radius for badges and pills to signal their discrete, contained nature.
Do transition all interactive elements (buttons, cards, inputs) over 100ms with ease-in-out timing to signal state change without feeling sluggish.

**Don't**

Don't use secondary blue (#0033ff) or tertiary dark (#1c1c1c) as primary interaction colors—reserve them for selected states and dark backgrounds only.
Don't apply shadows deeper than lg (1px 2px 8px 0 rgba(0, 0, 0, 0.35)) on standard cards; excessive depth flattens the visual hierarchy.
Don't mix InterVariable and Open Sans in the same headline or body paragraph—use InterVariable for body/display, Open Sans only for labels and UI text.
Don't use border-radius smaller than DEFAULT (8px) on buttons or inputs; the brand requires a minimum softness to feel approachable.

---
version: alpha
name: Splice
description: >-
  Splice is a cloud-based music production platform offering royalty-free sounds, samples, presets, and plugins. The
  design system embodies a tech-forward, minimalist aesthetic with a vibrant primary accent that commands attention on a
  neutral canvas.
logo:
  src: https://splicedotcom-static-staging.splice.com/images/splice-logo.webp
colors:
  surface: '#ffffff'
  surface-dim: '#f5f5f5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f0f0f0'
  surface-container: '#e8e8e8'
  surface-container-high: '#e0e0e0'
  surface-container-highest: '#d0d0d0'
  on-surface: '#1c1c1c'
  on-surface-variant: '#63656d'
  inverse-surface: '#1c1c1c'
  inverse-on-surface: '#ffffff'
  outline: '#c8c9cc'
  outline-variant: '#a6a8ad'
  surface-tint: '#1253ff'
  primary: '#1253ff'
  on-primary: '#ffffff'
  primary-container: '#e5e5e8'
  on-primary-container: '#0029cc'
  inverse-primary: '#2561ff'
  secondary: '#0033ff'
  on-secondary: '#ffffff'
  secondary-container: '#e5e5e8'
  on-secondary-container: '#001f99'
  tertiary: '#1c1c1c'
  on-tertiary: '#ffffff'
  tertiary-container: '#45464d'
  on-tertiary-container: '#ffffff'
  error: '#e81d01'
  on-error: '#ffffff'
  error-container: '#ffb4ab'
  on-error-container: '#b61701'
  primary-fixed: '#e5e5e8'
  primary-fixed-dim: '#c8c9cc'
  on-primary-fixed: '#0029cc'
  on-primary-fixed-variant: '#001f99'
  secondary-fixed: '#e5e5e8'
  secondary-fixed-dim: '#c8c9cc'
  on-secondary-fixed: '#001f99'
  on-secondary-fixed-variant: '#0029cc'
  tertiary-fixed: '#45464d'
  tertiary-fixed-dim: '#2f2f2f'
  on-tertiary-fixed: '#ffffff'
  on-tertiary-fixed-variant: '#e0e0e0'
  background: '#ffffff'
  on-background: '#1c1c1c'
  surface-variant: '#e5e5e8'
typography:
  display:
    fontFamily: InterVariable
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: InterVariable
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: InterVariable
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: InterVariable
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: InterVariable
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: InterVariable
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 1px 2px 8px 0 rgba(0, 0, 0, 0.35)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: none
    boxShadow: none
    transition: background-color 100ms ease-in-out
  button-primary-hover:
    backgroundColor: '{colors.inverse-primary}'
    textColor: '{colors.on-primary}'
  button-primary-active:
    backgroundColor: '#0029cc'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: 1px solid {colors.outline}
    transition: all 100ms ease-in-out
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    borderColor: '{colors.primary}'
  button-tertiary:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: none
  button-tertiary-hover:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline}
    boxShadow: '{elevation.sm}'
    transition: all 100ms ease-in-out
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.md}'
    borderColor: '{colors.primary}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.outline}
    height: 40px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(18, 83, 255, 0.1)
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    transition: background-color 100ms ease-in-out
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. Primary buttons (#1253ff on white, 48px height, 12px 24px padding, label-sm typography) use a solid fill with no border. On hover, the background shifts to #2561ff (inverse-primary) with a 100ms ease-in-out transition. Active state is #0029cc. Secondary buttons are transparent with a 1px outline (#c8c9cc), text in primary blue, and a hover state that fills the background with surface-container-high (#e0e0e0). Tertiary buttons (#1c1c1c background) are used for dark-mode or secondary contexts. All buttons have a minimum touch target of 48px height and 44px width for accessibility.

### Containers & Surfaces
Cards are the primary container for content. Standard cards have a white background (#ffffff), 1px border at #c8c9cc, 24

## Do's and Don'ts

**Do**
- Do use primary blue (#1253ff) exclusively for CTAs, links, and active states—it is the brand's signature accent and must remain visually distinct.
- Do maintain at least 40px (lg spacing) of white-space around primary CTAs to ensure they command attention and are easy to tap.
- Do apply the label-sm typography (12px, 700 weight, 0.05em tracking) to all button text and UI labels for consistency and technical precision.
- Do use the full rounded (9999px) border-radius for badges and pills to signal their discrete, contained nature.
- Do transition all interactive elements (buttons, cards, inputs) over 100ms with ease-in-out timing to signal state change without feeling sluggish.

**Don't**
- Don't use secondary blue (#0033ff) or tertiary dark (#1c1c1c) as primary interaction colors—reserve them for selected states and dark backgrounds only.
- Don't apply shadows deeper than lg (1px 2px 8px 0 rgba(0, 0, 0, 0.35)) on standard cards; excessive depth flattens the visual hierarchy.
- Don't mix InterVariable and Open Sans in the same headline or body paragraph—use InterVariable for body/display, Open Sans only for labels and UI text.
- Don't use border-radius smaller than DEFAULT (8px) on buttons or inputs; the brand requires a minimum softness to feel approachable.

Edit, then copy or download.