Spline

Spline sets restrained Spline Sans headlines on a dark void canvas. Cobalt (#0062ff) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 16px, with 50% and 8px on smaller elements.

spline.design ↗

Colors

Cobalt

#0062ff

Primary actions and links

Soft Cobalt

#569cd6

Secondary accent and highlights

Void

#000000

Page canvas

Bone White

#ffffff

Headlines and body copy

Graphite

#191a1d

Surface or divider

Ash

#888888

Supporting colour

Ember

#ce9178

Supporting colour

Soft Graphite

#3a3a3a

Supporting colour

Verdant

#6a9955

Supporting colour

Type scale

DisplayMake anything 3DSpline Sans · 38px · 500

HeadingA complete platform for real-time interactive designSpline Sans · 36px · 500

SubheadingInteractive WebsitesSpline Sans · 14px · 500

BodyCreate 3D with AI or build with direct controlSpline Sans · 18px · 400

NavCustomersSpline Sans · 16px · 400

Buttons

Explore CommunityGet started — it's free

Style reference measured from the public page at spline.design on 2026-10-12 for design education. Spline and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Spline — Style Reference
> Spline sets restrained Spline Sans headlines on a dark void canvas. Cobalt (#0062ff) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with bone white text and neutral surfaces. The most common corner radius is 16px, with 50% and 8px on smaller elements.

**Theme:** dark · **Source:** https://spline.design (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#0062ff` | `--color-accent` | Primary actions and links |
| Soft Cobalt | `#569cd6` | `--color-secondary` | Secondary accent and highlights |
| Void | `#000000` | `--color-canvas` | Page canvas |
| Bone White | `#ffffff` | `--color-ink` | Headlines and body copy |
| Graphite | `#191a1d` | `--color-surface-1` | Surface or divider |
| Ash | `#888888` | `--color-surface-2` | Supporting colour |
| Ember | `#ce9178` | `--color-surface-3` | Supporting colour |
| Soft Graphite | `#3a3a3a` | `--color-surface-4` | Supporting colour |
| Verdant | `#6a9955` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Spline Sans | 38px | 500 | 1.25 | 0 |
| Heading | Spline Sans | 36px | 500 | 1.22 | 0 |
| Subheading | Spline Sans | 14px | 500 | 1.71 | 0 |
| Body | Spline Sans | 18px | 400 | 1.56 | 0 |
| Nav | Spline Sans | 16px | 400 | 1.15 | 0, capitalize |

Font families on the page: Spline Sans, Spline Sans Mono, ui-monospace. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 16px, 50%, 8px, 12px, 24px
- Primary button: background `#0062ff`, text `#ffffff`, radius 12px, padding 12px 24px, 14px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer