Spline Design System

Spline's marketing site does something almost no other design-tool brand attempts: 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 — and the headline, "The all-in-one platform for 3D and design," sits at the center as if it were another object placed in the scene. The cursor reads "Press and drag to edit." There is no decorative chrome between the brand and the product; the page IS the product, running in the same engine you would build with. Where Figma keeps its marketing surface flat and trusts photography of the canvas, Spline inverts the relationship — the marketing canvas is the editor.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 17 color tokens drawn from a pure-black canvas and a single cobalt-blue voltage (#0062ff) used exactly once above the fold for the primary CTA pill; 11 typography tokens running Spline Sans (a custom proprietary sans) at modest weights — 58px display at weight 500 is the heaviest typographic moment, with body and labels at 400; 6 corner-radius tokens centered on a 16px default with circular icons at 50%; 8 spacing values on a 4px base; and 17 component definitions covering the cobalt-pill primary button, hairline-edged cards, the dark dropdown menu surface, and the dark text input.

Feed this file to an AI coding tool and it reproduces Spline's specific moves: pure-black canvas instead of charcoal, single cobalt-blue accent reserved for the single most important action, generous 16px corner rounding rather than tight 4-8px, and Spline Sans across every tier. The one thing worth borrowing only if your product is itself a visually-rich canvas tool: the willingness to put NO brand chrome above the product. Spline gets away with it because the product is the brand. Most teams need an interstitial layer.