# Spline · Design system migration spec

> Source: https://spline.design  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a modern, dark-mode design system for a 3D creative tool.

## 1. Identity DNA

Spline's design system is a digital playground for building 3D worlds, where a high-contrast dark mode serves as the foundational stage. Its identity is built on a deliberate tension between a vast, deep black canvas and the sharp, vibrant blue accent that acts as the primary call to action and focal point.

**One-liner:** An all-in-one platform for creating and collaborating on interactive 3D and design experiences.
**Keywords:** interactive · 3D · design · platform · collaborative
**Analogy:** A digital playground for building 3D worlds

## 2. Color

The palette is anchored by a deep black background, creating a sense of infinite depth for 3D content. A single, vibrant blue (#0062FF) cuts through the darkness, used strategically for interactive elements and to guide the eye.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#1e1e23` | card background |
| `--bg-quiet` | `rgba(255,255,255,0.05)` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.6)` | secondary text |
| `--muted` | `#888888` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.1)` | weak hint |
| `--accent` | `#0062FF` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with a vibrant blue accent and multi-colored 3D elements for visual impact.

The system enforces a strict high-contrast principle, using subtle white-based borders and multi-colored 3D elements only as supplementary visual interest.

## 3. Typography

Typography is handled with a clean humanist sans-serif, Spline Sans, chosen for its clarity and modern character. The system maintains tight letter spacing for large display text while establishing a reliable 16px standard for body copy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.35 | 400 | -0.5px | Main hero headline |

**Type rules:**
- Use system-ui fallbacks for reliability
- Maintain tight letter spacing for large display text
- Use 16px as the standard body size

## 4. Spacing

A standard 4px grid provides the underlying rhythm for all spacing decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 150 px
- **Rhythm:** Standard 4px grid system with generous vertical spacing for major sections

## 5. Surfaces

Surfaces are defined by depth through subtle shadows and a single-pixel border treatment. This creates a clear visual hierarchy, elevating interactive components slightly above the primary dark canvas.

- **Radius:** sm 4px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - 0px 4px 12px rgba(0,0,0,0.5)
- **Borders:** Subtle 1px borders using rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is centered and spacious, designed to frame and showcase 3D content. A dominant hero section commands initial attention, followed by content blocks that maintain generous vertical spacing.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered layout with a dominant hero section followed by content blocks

## 7. Motion & Interaction

Motion philosophy favors subtlety and feedback over decoration. Transitions are smooth and consistent, primarily using a 0.2s ease-in-out for color and background changes.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle color transitions on hover
  - Smooth background color changes

- **Hover:** Subtle color shifts and cursor pointer
- **Click:** Immediate feedback with standard button press states
- **Transition:** Smooth 0.2s ease-in-out for color and background changes
- **Keyboard:** Standard focus outlines for accessibility

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, with direct, benefit-oriented headlines. Calls to action are encouraging and action-focused, always communicating a clear value proposition.

- **Tone:** Professional yet approachable
- **Headline style:** Direct and benefit-oriented
- **CTA style:** Encouraging and action-focused with clear value proposition
- **Avoid:** Jargon-heavy technical language / Aggressive sales pitches / Passive or hesitant phrasing

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a deep black background as the primary canvas
- ❌ Don't use red or orange as primary accents — screenshot uses a specific vibrant blue
- ❌ Don't use serif fonts for headlines — screenshot uses a clean humanist sans-serif
- ❌ Don't use sharp rectangular buttons — screenshot shows pill-shaped and rounded buttons
- ❌ Don't clutter the hero section — screenshot maintains a clean, centered layout with ample whitespace
- ❌ Don't use flat, static elements — screenshot features interactive 3D objects and a grid floor

The system deliberately avoids cluttered layouts, serif typography for headlines, and the use of red or orange as dominant accent colors.

## System Prompt (paste into AI tool)

```
This is a design system for Spline, a 3D and interactive design platform. The visual identity is built on a high-contrast dark mode aesthetic (#000000 background) with a primary accent of vibrant blue (#0062FF). Typography uses a clean humanist-sans-serif (Spline Sans) at a standard 16px base size. Critical constraints: never use light or white backgrounds as the primary canvas, avoid using red or orange as the dominant accent color, and always use pill-shaped or rounded buttons instead of sharp rectangles. The layout is centered and spacious, with a focus on showcasing 3D content. Interactions should be smooth and subtle, using 0.2s transitions for most color changes.
```
