Spline Design System

Overview

Spline's marketing site does something almost no other design-tool brand attempts. Product-as-hero. The hero is literally a Spline scene — a beveled blue tablet rotates next to a yellow rounded tile, a green pill, a magenta rounded square, and a purple-blue block, with the headline placed among them as if it were another object in the composition. The cursor caption reads "Press and drag to edit." Where Figma keeps its marketing surface flat and trusts photography of the canvas, and where most SaaS brands paint a hero gradient and overlay text, Spline inverts the relationship: the marketing canvas IS the editor.

The system's chromatic restraint reinforces the move. There is exactly one brand color — cobalt blue ({colors.primary} — #0062ff) — and it appears just three times in the captured page, all as background fills (the primary CTA pill, an inline highlight, an accent in the feature grid). Every other color visible above the fold belongs to user-created 3D scenes, not the brand chrome. This is the inverse of single-voltage discipline at Airbnb or Cloudflare: instead of holding one accent in reserve against a white canvas, Spline holds one accent in reserve against a pure-black canvas, and lets the product's colors do every other chromatic job. The remaining declared CSS variables ({colors.primary-light}, {colors.accent-purple}, {colors.accent-emerald}) are part of the broader product palette but never appear in the marketing chrome.

Typography is Spline Sans across every tier — a custom proprietary sans that does the work of display, heading, body, button, and label without a second family. Display tops out at 58px in weight 500; body sits at 14-18px in weight 400; there is no heavier weight on the page. The hero h1 at 58px / 500 is the loudest typographic moment in the system, deliberately measured so the 3D scene around it remains the protagonist.

Key Characteristics:

• Pure black canvas ({colors.canvas} — #000000), not the slightly-blue charcoal that Linear and Vercel use — the contrast with the rendered 3D shapes needs to be maximum.
• Single cobalt-blue voltage ({colors.primary}) reserved for the primary CTA pill above the fold. Three total occurrences on the captured page.
• Spline Sans across every typographic tier, with modest weights (400 body / 500 display) — no 700+ moment.
• Generous-soft radius scale: 16px default, 12px on buttons, 24px on larger cards, full circles on logo chips and icon buttons.
• Customer 3D scene grid (5 x 2) below the fold uses hairline-edged dark tiles with no shadow, no border — depth comes from surface-color contrast against the pure-black floor.
• Logo wall (Google, Shopify, Webflow, Microsoft, Meta, Snapchat, Forbes, Burton, etc.) renders all marks in white at uniform size — every customer logo flattens to monochrome to keep brand voltage singular.
• Spline Mono (system mono) appears only inside code-style annotations — never in headings or body.

Colors

Brand

• Cobalt Primary ({colors.primary} — #0062ff): frequency 3. Used as background only — the primary CTA pill, an inline highlight, a single accent in the feature grid. Wired in CSS as --color-blue. The single chromatic brand moment on the page; everything else is either pure white text or 3D-scene colors.
• Cobalt Light ({colors.primary-light} — #5797ff): declared as --color-blue-lighter. Not rendered in the captured marketing surface; reserved for the product editor's selection states.
• Cobalt Dark ({colors.primary-dark} — #217ce5): declared as --color-blue-dark. Reserved for hover/press states on the primary CTA.
• Accent Purple ({colors.accent-purple} — #a770ff): declared as --color-purple-bright. Part of the broader product palette but doesn't appear in the marketing chrome.
• Accent Emerald ({colors.accent-emerald} — #008761): declared as --color-super-darker. Reserved for the "Super" subscription tier badge in the product; not rendered in marketing.

Surface

• Canvas ({colors.canvas} — #000000): pure black, the page floor. Wired as --color-bg. Maximum contrast with the rendered 3D shapes is intentional — slightly-blue near-blacks would muddy the depth illusion.
• Surface-1 ({colors.surface-1} — #191a1d): frequency 28 — used on the dropdown menus, the dark cards in the scene grid, the text input field, and the testimonial card. Wired as --color-menu-dropdown. The single "elevated" dark tone in the system.

Text

• Ink ({colors.ink} — #ffffff): frequency 710 as text — the dominant text color across every tier. Pure white on pure black, no muted variant for body copy. The contrast is uncompromising.
• Ink Muted ({colors.ink-muted} — #888888): frequency 5 as text — used sparingly for sub-labels and metadata under scene tiles.

Hairlines

• Hairline ({colors.hairline} — #ffffff at low opacity): frequency 709 as border — the dominant border tone. Since the canvas is pure black, white-with-alpha is the only border color that reads softly without disappearing.

Syntax (product surface)

• Syntax Blue ({colors.syntax-blue} — #569cd6), Syntax Orange ({colors.syntax-orange} — #ce9178), Syntax Green ({colors.syntax-green} — #6a9955): these are VS Code Dark+ palette values that appear in the embedded code-snippet sections showing API examples. Not brand chrome — borrowed from the IDE syntax-highlighting convention.

Typography

Font Family

The system runs Spline Sans for everything — a custom proprietary sans-serif Spline ships with their marketing site. Fallbacks walk system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif. There is no separate display family or serif tier; one variable-weight sans does every job. Spline Mono (the system monospace stack) appears only inside code-style annotations.

Hierarchy

Principles

Display weight tops out at 500, never 700+. The hero h1 at 58px / 500 is the loudest typographic moment — deliberately measured so the 3D scene around it remains visually dominant. Body and labels share weight 400. Weight 500 is the system's "emphasis" treatment, used for headings, buttons, and small labels alike — there is no separate semibold tier.

Note on Font Substitutes

Spline Sans is proprietary. Inter at the same weights is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Spline Sans at the 16-18px body sizes. If you need a tighter alternative for the 58px display tier, Geist (Vercel's open-source sans) has comparable cap height. For the mono tier, the system stack (ui-monospace, SFMono-Regular, Consolas) is already what Spline ships.

Layout

Spacing System

• Base unit: 4px (with 8px as the dominant module).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Section padding (vertical): ~96px between major sections on the dark canvas.
• Card internal padding: {spacing.lg} (24px) on testimonial and large scene tiles; {spacing.base} (16px) on the smaller scene-grid tiles.
• Hero padding: 0 horizontal — the 3D scene extends edge-to-edge, with the headline floating in the centered safe zone.

Grid & Container

• Max content width: ~1080px on the hero, ~1280px on the scene grid and logo wall.
• Hero: full-bleed black canvas with the 3D scene rendered behind the centered headline + CTA stack.
• Scene grid: 5-column grid at desktop showing customer-submitted 3D scenes (titled "Brand & Marketing," "3D Mockups," "3D Logos," "Animated Characters," etc.), collapsing to 2-column on tablet.
• Logo wall: 6-column grid of monochrome customer logos (Google, Shopify, accenture, GIPHY, Webflow, OpenAI, Microsoft, Meta, Snap, Forbes, Siemens, Burton).
• "Production-ready" gallery: 3-column grid of full-color scene thumbnails — the page's only chromatic moment besides the cobalt CTA.

Rhythm

The page alternates between edge-to-edge product (the hero scene) and constrained dark editorial (typography-anchored sections below the fold). There is no atmospheric gradient between bands — every section terminates on the same pure-black canvas, and depth comes from elevated {colors.surface-1} tiles rather than from background-color shifts.

Elevation

The system has essentially no shadow tier. The canvas is too dark for traditional drop shadows to read — instead, hierarchy comes from {colors.surface-1} cards lifted off the {colors.canvas} floor by ~25% lightness contrast alone. The customer scene tiles, dropdown menus, testimonial cards, and input fields all use the same {colors.surface-1} tone.

• Flat (no shadow): body, hero, footer, every editorial band — 99% of surfaces.
• Tonal lift: {colors.surface-1} (#191a1d) cards sit on {colors.canvas} (#000000) — the 25-point lightness gap reads as elevation without any shadow being drawn.
• Hairline outlines: {colors.hairline} (white at low opacity) marks dropdown borders and the code-block edge. White-with-alpha is the only border tone that survives on pure black.

Shapes

The radius scale is generous-soft, centered on 16px:

• {rounded.none} 0px — only on code-block annotations.
• {rounded.sm} 8px — small UI surfaces (dropdown items, input field corners).
• {rounded.md} 12px — the primary button ({component.button-primary}).
• {rounded.lg} 16px — default rounding for cards, scene tiles, large surfaces.
• {rounded.xl} 24px — larger feature cards.
• {rounded.pill} 56px / {rounded.full} 9999px — pill CTAs and circular logo chips / icon buttons (50% radius renders as full circle on square elements).

There is no 4px tier. Even the smallest surfaces start at 8px. The scale is deliberately soft to keep the dark canvas feeling approachable rather than industrial.

Components

button-primary — The signature CTA. Cobalt-blue {colors.primary} fill, white text, {rounded.md} 12px radius, 16x24 padding, 56px height. "Get started — it's free" is the canonical instance, sitting at the center of the hero scene.

button-primary-hover — Background flips to {colors.primary-dark} (#217ce5) — a slightly darker cobalt for the press state.

button-secondary — Transparent fill with white text and a 1px white-alpha border. {rounded.md} radius, 12x20 padding, 44px height. Used for "Login" in the top nav and "Learn more" tertiary CTAs.

top-nav — Dark {colors.surface-1} surface with full pill rounding ({rounded.full}), 48px height, 8x16 padding. Floats above the hero scene rather than sitting flush at the page top. Houses the Spline wordmark, the product-nav links (Products, Resources, Community, Customers, Enterprise, Pricing), and the right-aligned Login / Get Started cluster.

nav-link — Transparent background, white text in {typography.nav-link} (14px / 400), 8x12 padding. No hover background visible in the captured surface.

hero-heading — White text on the transparent hero, {typography.display-xl} (58px / 500). 0 padding horizontally because the 3D scene extends edge-to-edge.

section-heading — White text, {typography.display-md} (36px / 500). Used for "A complete platform for real-time interactive design," "Where ideas become production-ready experiences," "Collaborative 3D Design, ready for production."

body-paragraph — Default white text at {typography.body-lg} (18px / 400). The hero sub-paragraph and section leads.

body-paragraph-muted — {colors.ink-muted} (#888888) text at {typography.body-md} for secondary labels under scene tiles.

card-dark — {colors.surface-1} fill, white text, {rounded.lg} 16px radius, 16px internal padding. The default content card on the dark canvas.

scene-tile — {colors.surface-1} fill, {rounded.lg} 16px radius, 0 padding (the 3D scene fills the tile edge-to-edge). Used in the 5-column customer scene grid.

logo-chip — Transparent fill, white logo at uniform size, fully circular treatment for the icon-only logos. The customer logo wall renders all marks in monochrome white at 40px height regardless of source color.

text-input — {colors.surface-1} fill, white text, {rounded.md} 12px radius, 12x16 padding, 44px height.

testimonial-card — {colors.surface-1} fill, white text, {rounded.lg} 16px radius, 24px padding. The single quote card on the page ("We wanted to appeal to an enterprise audience…").

code-block — Pure-black {colors.canvas} fill, white-alpha hairline border, {rounded.sm} 8px radius, 16px padding. Uses {typography.mono-sm} with the syntax colors borrowed from VS Code Dark+ (cobalt for keywords, orange for strings, green for comments).

footer — Black canvas, muted-gray text, 48x24 padding. No surface contrast against the page floor — the footer just continues the canvas.

Do's and Don'ts

Do treat the brand voltage as a single, scarce cobalt-blue moment. The system has exactly one CTA pill above the fold; multiplying it into multiple cobalt elements would dilute the only chromatic brand signal on the page.

Do use {colors.surface-1} (#191a1d) — NOT a shadow — to lift cards off the pure-black canvas. Shadows don't read on pure black; tonal lift does the entire elevation job.

Do keep display weight at 500 max. The hero h1 at 58px / 500 is the loudest typographic moment in the system. Bumping to 700 turns the editorial dek into a generic SaaS shout and undercuts the "product is the protagonist" principle.

Do render the customer-logo wall in monochrome white. Each customer logo in its native brand color would create 12 competing chromatic voices and destroy the single-voltage discipline.

Don't use the syntax colors ({colors.syntax-blue}, {colors.syntax-orange}, {colors.syntax-green}) anywhere outside code blocks. They are borrowed VS Code values for inline code samples, not part of the brand palette.

Don't swap the canvas from pure #000000 to a slightly-blue near-black. The maximum contrast against the rendered 3D shapes is intentional — softening it would make the 3D objects read as flat illustrations rather than as objects in depth.

Don't introduce a 4px corner radius tier. The system is deliberately generous-soft starting at 8px; adding tight corners would feel borrowed from a dev-tools system (Vercel, Linear) rather than from Spline's own visual identity.

Don't render multi-color brand decorations around the hero. The "decoration" around Spline's headline is the product itself — replacing the live 3D scene with brand-colored shapes would lose the entire point of the "product-as-hero" move.

Known Gaps

• Hover and focus states: documented for {component.button-primary-hover} only; the full state matrix (focus rings, disabled tints, error states) is not captured from the marketing surface.
• Form input error states: {component.text-input} carries the resting state; error / validation styling lives inside the product editor and is not exposed on the marketing site.
• Light mode: the captured marketing surface is dark-only. A light variant exists in the product editor's preference panel but is not represented here.
• Motion: the hero 3D scene continuously animates (auto-rotation, parallax on mouse-move) but the spec captures end-state values only. Easing curves, rotation rate, and parallax depth live in the live Spline runtime.
• Product surfaces: this DESIGN.md captures the marketing site only. The Spline editor itself (my.spline.design) carries a much richer token system — panel layouts, gizmo colors, viewport gridlines, syntax-aware inspectors — that is not represented here.
• Subscription-tier accents: the declared {colors.accent-emerald} (#008761, wired as --color-super-darker) and {colors.accent-purple} (#a770ff, wired as --color-purple-bright) belong to the "Super" subscription tier and the AI features respectively; neither appears in the captured marketing chrome.