MozaikaDesign system

Spline — Design System

dark · modern · high · custom · confidence 90%

Spline commissioned its own Google font and lives in it: Spline Sans at 58px/500 in white on pure black, 16-18px body, and frosted-glass 50px-radius pills that float over realtime 3D scenes. The interface chrome stays deliberately flat so the rendered gradients, glass and soft shadows of the 3D canvas read as the true brand — the tool's output is the art direction.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/spline.

Tokens

Spline's decoded design system: background #000000, text #FFFFFF, accent #3DDC84, link #3DDC84, primary #96B3FF; type scale h1 58px / h2 36px / body 16px; 4px spacing base; 16px base radius. The single interactive/action color is #333333 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

RoleValue
bg#000000
surface#0F0F0F
border#262626
text#FFFFFF
text_muted#9E9E9E
primary#96B3FF
accent#3DDC84
link#3DDC84
secondary#915EFF
button_bg#333333
button_text#FFFFFF

Using these colors

Typography

Spacing

Radii

Per-section tokens (11)

Export: DESIGN.md

# Spline — Design System

> dark, modern, high, custom

Spline commissioned its own Google font and lives in it: Spline Sans at 58px/500 in white on pure black, 16-18px body, and frosted-glass 50px-radius pills that float over realtime 3D scenes. The interface chrome stays deliberately flat so the rendered gradients, glass and soft shadows of the 3D canvas read as the true brand — the tool's output is the art direction.

## Colors

| Role | Value |
|------|-------|
| bg | `#000000` |
| surface | `#0F0F0F` |
| border | `#262626` |
| text | `#FFFFFF` |
| text_muted | `#9E9E9E` |
| primary | `#96B3FF` |
| accent | `#3DDC84` |
| link | `#3DDC84` |
| secondary | `#915EFF` |
| button_bg | `#333333` |
| button_text | `#FFFFFF` |

**Using these colors**

- **Action color** `#333333` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `accent`, `link` are all `#3DDC84` — one role, not several.
- **accent** `#3DDC84` — accent for emphasis — keep it rare on the page.
- **primary** `#96B3FF` — a brand color — but the call-to-action uses #333333, not this.
- **secondary** `#915EFF` — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

## Typography

- Heading: **Spline Sans**
- Body: **Spline Sans**
- h1: 58px
- h2: 36px
- body: 16px

> **Fonts —** Spline Sans — free, on Google.

## Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px

## Radius
- base: 16px
- button: 50px

## Primary button
- bg `#333333` · text `#FFFFFF` · radius 50px

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.

Export: Tailwind v4 (@theme)

@theme {
  /* action color #333333 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --color-bg: #000000;
  --color-surface: #0F0F0F;
  --color-border: #262626;
  --color-text: #FFFFFF;
  --color-text-muted: #9E9E9E;
  --color-primary: #96B3FF;  /* a brand color — but the call-to-action uses #333333, not this. */
  --color-accent: #3DDC84;  /* accent for emphasis — keep it rare on the page. */
  --color-link: #3DDC84;  /* inline text links and link-styled controls. */
  --color-secondary: #915EFF;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --color-button-bg: #333333;  /* primary-button fill — the main call-to-action color. */
  --color-button-text: #FFFFFF;
  /* fonts: Spline Sans — free, on Google. */
  --font-heading: "Spline Sans", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Spline Sans", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-h1: 58px;
  --text-h2: 36px;
  --text-body: 16px;
  --radius-base: 16px;
  --radius-button: 50px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 12px;
  --spacing-6: 16px;
  --spacing-7: 24px;
  --spacing-8: 32px;
}

Export: CSS variables

:root {
  /* action color #333333 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --bg: #000000;
  --surface: #0F0F0F;
  --border: #262626;
  --text: #FFFFFF;
  --text-muted: #9E9E9E;
  --primary: #96B3FF;  /* a brand color — but the call-to-action uses #333333, not this. */
  --accent: #3DDC84;  /* accent for emphasis — keep it rare on the page. */
  --link: #3DDC84;  /* inline text links and link-styled controls. */
  --secondary: #915EFF;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --button-bg: #333333;  /* primary-button fill — the main call-to-action color. */
  --button-text: #FFFFFF;
  --font-heading: "Spline Sans", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Spline Sans", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 16px;
  --radius-button: 50px;
}
/* fonts: Spline Sans — free, on Google. */