A pure-black 3D tool brand that is near-monochrome by design: the live WebGL scene supplies every colour while the interface is built entirely from a published white-alpha ladder rather than hex greys, with frosted backdrop-blur panels standing in for elevation — there are no box-shadows and no CSS gradients anywhere — one Spline Sans held at 400-500 with normal tracking even at 58px, and a single saturated blue reserved for the one primary CTA.
Browse Spline in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: spline.design (live DOM, computed styles + published CSS custom properties), 2026-07-19. Coverage: home / platform landing. Logged-in 3D editor not captured (needs login). Note: the surface is pure-black and near-monochrome, not the "vivid gradients" the category suggests — no CSS gradient was found anywhere on the page.
Spline puts a pure #000 canvas under live WebGL and lets the 3D scene supply every bit of colour — the UI itself is almost entirely white-at-varying-alpha. That is the defining idea: instead of hex greys, the whole interface is built from a published alpha ladder (#ffffff03 through #ffffffe6), so chrome floats translucently over whatever the scene is doing behind it. Buttons are frosted white-alpha pills, panels are rgba(255,255,255,.08) with blur(24px), and ambient depth comes from a blur(100px) bloom rather than shadows — there are no box-shadows on the page at all. One saturated blue #0062ff marks the single primary CTA. Spline Sans, held at 400/500, keeps the type quiet so the 3D work reads as the content. Feels: dark, weightless, cinematic, tool-like.
| Token | Value | Role / usage |
|---|---|---|
--color-bg | #000 | Page canvas — pure black |
--color-bg-transparent | #1110 | Transparent black |
--color-text-main | #fff | Headlines, primary text |
--color-text-navigation | #ffffffb3 (70%) | Nav links |
--color-text-paragraph | #fff9 (60%) | Body copy |
--color-white | #fff | Base for the whole alpha ladder |
| Token | Value |
|---|---|
--color-white-001 | #ffffff03 |
--color-white-003 | #ffffff08 |
--color-white-005 | #ffffff0d |
--color-white-008 | #ffffff14 |
--color-white-010 | #ffffff1a |
--color-white-020 | #fff3 |
--color-white-040 | #fff6 |
--color-white-060 | #fff9 |
--color-white-070 | #ffffffb3 |
--color-white-080 | #fffc |
--color-white-090 | #ffffffe6 |
| Token | Value | Role / usage |
|---|---|---|
--color-btn-bg | #ffffff0d | Button rest fill |
--color-btn-bg-highlight | #ffffff0f | Button highlight |
--color-panel-bg | rgba(255,255,255,.08) | Floating panel |
--color-panel-bg-hover | rgba(255,255,255,calc(.08 + .03)) | Panel hover (computed step) |
--color-menu-dropdown | #1e1e23cc | Dropdown surface (the one non-white tint) |
| Token | Value | Role / usage |
|---|---|---|
--color-blue | #0062ff | THE primary CTA fill |
--color-blue-lighter | #5797ff | Hover / lighter blue |
--color-blue-dark | #217ce5 | Pressed / darker blue |
--color-blue-ios | #5966f3 | Alternate blue-violet |
--color-purple-bright | #a770ff | Accent |
--color-purple | #8f66ff21 | Purple tint wash |
--color-pink | #ff5cab | Accent |
--color-red | #fd585b | Error / accent |
--color-yellow | #ffb01f | Warning / accent |
--color-green-bright | #47b35f | Success |
--color-green | #49bc541a | Green tint wash |
--color-bg-pink | #ffe6e6 | Pale illustration ground |
--color-bg-greenish | #c1f6e8 | Pale illustration ground |
| Token | Value |
|---|---|
--color-free / -darker | rgba(255,255,255,.08) / calc(.08 + .03) |
--color-super / -darker / -lighter | #00a376 / #008761 / #38e2b3 |
--color-team / -darker / -lighter | #915eff / #7448d4 / #d680ff |
Rules. Chrome is built from the white-alpha ladder, never from hex greys — this is what lets it float over live 3D. Blue #0062ff is the only saturated fill in the interface; every other hue (purple, pink, red, yellow, green) is a product/plan or illustration colour, not chrome. Plan tiers are the one place a second saturated colour is allowed (super green, team purple).
"Spline Sans", system-ui, sans-serif — no serif, no display face, no separate mono.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 58/72 | 500 | normal |
| Section h2 | 36/44 | 500 | normal (#ffffff at 90%) |
| Card h3 | 14/24 | 500 | normal (#ffffff at 90%) |
| Banner h4 | 14/20 | 500 | normal |
| Body / paragraph | 12/16 | 400 | normal (#ffffff at 90%) |
| Nav link | 16 | 400 | normal (#ffffffb3) |
| Button label | 16 | 400 (500 on the nav fill) | normal |
Patterns: the weight ceiling is 500 and tracking is normal at every size — no negative tracking anywhere, which is unusual at a 58px display size and is part of why the type reads as neutral tool chrome rather than brand voice. Hierarchy is carried by size and by *alpha* (100% → 90% → 70% → 60%) rather than by colour or weight. Line-height stays generous on display (58/72). Sentence case throughout.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.