# Spline

> `spline@1.0.0`

Spline is a browser-based 3D design and collaboration tool — Figma for three dimensions, with scene-based modeling, animation, and interactive 3D export. The brand voice is craft-forward, playful, and rendered-3D-confident. Visually, the identity is the cube mark in Spline Orange (#FF8B14) on a clean canvas with near-black body text and large 3D hero compositions.


**Tags:** `saas`, `design-tools`, `spline`, `three-d`

## Atoms

### Palette

**Spline** · `spline@1.0.0` · Proprietary — All Rights Reserved

> Spline's brand palette, anchored on Spline Orange (#FF8B14) — the signature warm orange that carries the 3D-cube mark. The institutional voice pairs that orange with a clean white canvas and near-black body text on marketing surfaces, with strong use of 3D rendered hero imagery. Spline holds to a single committed brand hue. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `spline-orange` | Spline Orange | `#FF8B14` |
| `spline-white` | Spline White | `#FFFFFF` |
| `spline-black` | Spline Black | `#0E0E10` |
| `spline-canvas-dark` | Spline Canvas Dark | `#0E0E10` |
| `spline-surface-light` | Spline Surface Light | `#F5F5F7` |
| `spline-surface-dark` | Spline Surface Dark | `#1E1E22` |
| `spline-text-secondary` | Spline Text Secondary | `#6B6B73` |
| `spline-text-tertiary` | Spline Text Tertiary | `#9D9DA8` |
| `spline-orange-hover` | Spline Orange Hover | `#FFA640` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `spline-white` | `#FFFFFF` |
| `surface` | `spline-surface-light` | `#F5F5F7` |
| `surface-elevated` | `spline-white` | `#FFFFFF` |
| `text-primary` | `spline-black` | `#0E0E10` |
| `text-secondary` | `spline-text-secondary` | `#6B6B73` |
| `text-tertiary` | `spline-text-tertiary` | `#9D9DA8` |
| `primary` | `spline-orange` | `#FF8B14` |
| `primary-hover` | `spline-orange-hover` | `#FFA640` |
| `accent` | `spline-orange` | `#FF8B14` |
| `accent-hover` | `spline-orange-hover` | `#FFA640` |
| `warning` | `spline-orange` | `#FF8B14` |
| `warning-hover` | `spline-orange-hover` | `#FFA640` |
| `error` | `spline-orange` | `#FF8B14` |
| `success` | `spline-orange` | `#FF8B14` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `spline-canvas-dark` | `#0E0E10` |
| `surface` | `spline-surface-dark` | `#1E1E22` |
| `surface-elevated` | `spline-surface-dark` | `#1E1E22` |
| `text-primary` | `spline-white` | `#FFFFFF` |
| `text-secondary` | `spline-text-tertiary` | `#9D9DA8` |
| `text-tertiary` | `spline-text-secondary` | `#6B6B73` |
| `primary` | `spline-orange` | `#FF8B14` |
| `primary-hover` | `spline-orange-hover` | `#FFA640` |
| `accent` | `spline-orange` | `#FF8B14` |
| `accent-hover` | `spline-orange-hover` | `#FFA640` |
| `warning` | `spline-orange` | `#FF8B14` |
| `warning-hover` | `spline-orange-hover` | `#FFA640` |
| `error` | `spline-orange` | `#FF8B14` |
| `success` | `spline-orange` | `#FF8B14` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `spline-orange` | `#FF8B14` |
| `on-identity` | `spline-white` | `#FFFFFF` |
| `primary` | `spline-orange` | `#FF8B14` |
| `primary-hover` | `spline-orange-hover` | `#FFA640` |
| `accent` | `spline-orange` | `#FF8B14` |
| `accent-hover` | `spline-orange-hover` | `#FFA640` |
| `success` | `spline-orange` | `#FF8B14` |
| `warning` | `spline-orange` | `#FF8B14` |
| `error` | `spline-orange` | `#FF8B14` |
| `background-light` | `spline-white` | `#FFFFFF` |
| `background-dark` | `spline-canvas-dark` | `#0E0E10` |
| `surface-light` | `spline-surface-light` | `#F5F5F7` |
| `surface-dark` | `spline-surface-dark` | `#1E1E22` |
| `text-primary-light` | `spline-black` | `#0E0E10` |
| `text-primary-dark` | `spline-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** spline-orange, spline-white, spline-black
- **forbidden:** any-non-brand-color

> The Spline cube mark renders in Spline Orange as the canonical fill. Recoloring the mark into off-brand hues violates Spline's brand-use guidance. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Spline's brand surfaces prohibit stretching, rotating, recoloring, or applying decorative effects to the cube mark. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Spline Black (#0E0E10) on Spline White (#FFFFFF) clears AA at very high contrast. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, place the orange cube against the dark canvas (clears AA at large sizes) or use a monochrome white variant for small wordmark lockups. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Spline's trademark guidance forbids use of the Spline name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Spline-skinned surfaces must clear AA on body text; Spline Orange must not be used as a body-text color on light backgrounds because it fails AA. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Spline's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident, craft- forward voice of the brand. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** spline-white, spline-black, spline-surface-light

> Spline Orange is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, craft-forward voice of the brand surface. 

## Provenance

- **Source:** <https://spline.design/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Spline and the Spline logo are trademarks of Spline, Inc. The primary brand color Spline Orange (#FF8B14) is documented on Spline's brand surfaces. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Spline name and mark is governed by Spline's brand-use guidance at spline.design. 
- **Imported:** `2026-05-18`
- **Notes:** Spline's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. 

---

*Generated by the brand-atoms converter. Source: `spline@1.0.0` from the encyclopedia.*