# Spline — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core (published tokens)

| 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 |

### The white-alpha ladder (the system's real "greys")

| 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` |

### Surfaces

| 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) |

### Accent & product colours

| 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 |

### Plan-tier colours

| 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).

## 3. Typography Rules

- One family: `"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.

## 4. Component Stylings

**Announcement bar** — full-width on black, a 14/500 white label plus a 60%-white description and an arrow glyph.

**Nav** — 56px, fully transparent (no fill, no backdrop-filter, no border), floating directly on the 3D scene. Six links at 16/400 in `#ffffffb3`, three with chevrons, then two pills.

**Buttons** — two radii: **50px pills** in the nav, **12px rounded rectangles** in content:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Nav log-in | `#ffffff0d` | `#ffffffb3` | 1px `#ffffff0d` | 50px | 42px | 10px 16px | 16/400 |
| Nav get-started | `#ffffff33` | `#ffffff` | none | 50px | 40px | 10px 16px | 16/500 |
| Primary CTA | `#0062ff` | `#ffffff` | none | 12px | 52px | 16px 24px | 16/400 |
| Secondary | `#ffffff26` | `#ffffff` | none | 12px | 40px | 10px 20px | 16/400 |
| Utility (copy code) | `#ffffff1a` | `#ffffffe6` | none | 8px | 40px | 12px 14px | 16/400 |

**Panels / cards** — `rgba(255,255,255,.08)` with `backdrop-filter: blur(24px)`, hovering to `.08 + .03`. Radii from the scale below.

**Hint pill** — a large frosted pill floating over the canvas ("Drag with two fingers to orbit"), the same white-alpha recipe at a large radius.

**Inputs** — not captured (no exposed form fields on the landing page).

## 5. Layout Principles

Centered hero — headline, 2-line sub, one blue CTA — floating over a full-viewport WebGL scene with a hint pill near the bottom edge. Nav is transparent and centred rather than edge-to-edge. Content below is a grid of category cards whose titles run at only 14/24, deliberately smaller than typical, so the 3D thumbnails dominate. Radius census: `8 / 12 / 16 / 24 / 32 / 50 / 56 / 99px / 50%`.

## 6. Depth & Elevation

Radius scale: `8px` (utility) / `12px` (CTA, cards) / `16px` / `24px` / `32px` / `50px` (nav pill) / `56px` / `99px` / `50%`.

**No box-shadow recipes exist on this page** — the census returned empty. Depth is created entirely by:

- `backdrop-filter: blur(24px)` on panels and pills (frosted chrome over live 3D)
- `backdrop-filter: blur(100px)` for a large ambient bloom
- the white-alpha ladder itself — stacking `.03` on `.08` reads as elevation

This is the system's most distinctive structural choice: translucency replaces elevation.

## 7. Motion

Short and uniform: `color 0.2s`, `background-color 0.2s`, and `transform 0.2s ease-out` on interactive elements, plus a general `all` transition. The hero scene animates continuously in WebGL and responds to pointer orbit. No entrance-animation or scroll-jacking library detected.

## 8. Backgrounds, Effects & WebGL

The defining layer. **3 `<canvas>` elements** render live WebGL scenes (Spline's own runtime) and **12 `<video>` elements** carry product motion. Effects are exclusively translucency-based:

- `backdrop-filter: blur(24px)` — frosted panels, pills, dropdowns
- `backdrop-filter: blur(100px)` — ambient bloom
- `#1e1e23cc` — the one tinted (non-white-alpha) surface, for dropdowns

**No CSS gradients were found anywhere on the page**, and no grain or noise texture. All colour and light in the composition comes from the rendered 3D scene, not from CSS.

## 9. Do's and Don'ts

### Do
- Put chrome on a pure `#000` canvas and let a live 3D scene supply the colour.
- Build every grey from the white-alpha ladder (`#ffffff03` &rarr; `#ffffffe6`), not from hex greys.
- Use `backdrop-filter: blur(24px)` frosted surfaces instead of box-shadows.
- Keep Spline Sans at 400-500 with **normal tracking at every size**, including 58px display.
- Express hierarchy through alpha steps (100 / 90 / 70 / 60%) rather than colour.
- Reserve `#0062ff` for the single primary CTA.
- Use 50px pills in the nav and 12px rectangles in content.

### Don't
- Don't add box-shadows — this system has none.
- Don't use CSS gradients; there are none on the page.
- Don't introduce hex grey values for chrome.
- Don't apply negative tracking, or push weight past 500.
- Don't spend purple, pink, red, yellow or green on chrome — they are product, plan-tier and illustration colours.
- Don't give the nav a solid fill or a border; it floats transparent over the scene.

## 10. Responsive Behavior

Not captured — the page's styles are compiled with Lightning CSS and no media-query census was resolved from the accessible stylesheets. The `--lightningcss-light` / `--lightningcss-dark` tokens are present but empty, so no light-theme variant is published.

## 11. Agent Prompt Guide

- Canvas `#000` · Text `#fff` · Nav text `#ffffffb3` · Body `#fff9` · Panel `rgba(255,255,255,.08)` · Button `#ffffff0d` · Accent `#0062ff`
- Font: Spline Sans only, 400/500, normal tracking · Body: 12/16 · Radius: 12px CTA / 50px nav pill / 8px utility · Control height: 52px CTA, 40-42px nav
- Focus: not captured · Hover: panel `.08 + .03`, button `#ffffff0f` · Transition `color/background-color 0.2s`, `transform 0.2s ease-out`

<spline_design_language>
A pure-black #000 canvas under live WebGL, where the 3D scene supplies all the colour and the interface stays near-monochrome. The defining move is that every grey is drawn from a published white-alpha ladder (#ffffff03, #ffffff0d, #ffffff1a, #fff3, #fff6, #fff9, #ffffffb3, #fffc, #ffffffe6) rather than hex greys, so chrome floats translucently over whatever is rendering behind it: panels are rgba(255,255,255,.08) with backdrop-filter blur(24px), hovering to .08+.03, with a blur(100px) ambient bloom. There are NO box-shadows and NO CSS gradients anywhere — translucency replaces elevation entirely. Type is one family, Spline Sans, capped at weight 500 with NORMAL tracking at every size including the 58/72 hero; hierarchy comes from alpha steps (100/90/70/60%) rather than colour, and body copy sits small at 12/16. The nav is fully transparent — no fill, no border, no blur — floating on the scene at 56px with 16/400 links in #ffffffb3. Controls split by radius: 50px frosted pills in the nav (42px log-in on #ffffff0d, 40px get-started on #ffffff33) versus 12px rectangles in content, where a single saturated blue #0062ff at 52px is the only filled CTA. Purple #a770ff, pink #ff5cab, red #fd585b, yellow #ffb01f and green #47b35f exist only as product, illustration and plan-tier colours (super #00a376, team #915eff), never as chrome. Motion is uniform: color and background-color 0.2s, transform 0.2s ease-out. Feels: dark, weightless, cinematic, tool-like. Avoid: box-shadows, CSS gradients, hex greys for chrome, negative tracking or weights above 500, a solid or bordered nav, and spending the product hues on interface elements.
</spline_design_language>