---
title: "Spline design system"
variant: extended
source: https://spline.design/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/spline-design)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Spline · Design System

> A dark canvas for vivid, interactive 3D.

**Theme:** dark · **Industry:** design · **Source:** https://spline.design/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Spline presents a browser-based 3D design platform through a black canvas, restrained interface chrome, and colorful rendered objects. Centered product messaging gives way to community work, feature panels, integrations, testimonials, and clear conversion paths.

## North star

Keep the interface quiet and dark so colorful, tangible 3D work remains the unmistakable focal point.

## Overview

The visual strategy pairs a nearly black canvas with restrained gray interface surfaces, letting colorful 3D work carry most of the visual energy. #e6e6e6 and white establish a crisp hierarchy for centered headlines, navigation, and calls to action; muted grays support secondary copy without competing with the renders. Blue is reserved for prominent conversion buttons, while sampled warm and green accents are minor text colors rather than defining brand surfaces. Spline Sans gives headings and interface copy a consistent, contemporary voice, with monospace used for code. The layout alternates centered introductions with compact modular grids and wide product demonstrations. Generous black space separates dense content groups, while dark cards, subtle hairlines, and rounded corners keep examples organized. The hero's floating, saturated 3D shapes are illustrative product imagery, not a page-wide background color system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and section background, framing the hero, product content, and footer. |
| Graphite Hairline | `#1a1a1a` | `--color-graphite-hairline` | surface | Frequent subtle card outlines and dark media or link surfaces. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted headings, footer copy, and supporting text against black. |
| Soft Chalk | `#e6e6e6` | `--color-soft-chalk` | neutral | Primary heading and body text on the dark canvas. |
| Night Panel | `#141414` | `--color-night-panel` | surface | Subtle dark section and secondary surface, barely differentiated from the canvas. |
| Silver Copy | `#a1a1a1` | `--color-silver-copy` | neutral | Secondary paragraph text and subdued descriptive content. |
| Spline Blue | `#0062ff` | `--color-spline-blue` | accent | Primary blue conversion buttons, including community and free-start calls to action. |
| Pale Gray | `#cccccc` | `--color-pale-gray` | neutral | Occasional secondary heading and body copy; not a dominant surface color. |
| Interface White | `#ffffff` | `--color-interface-white` | neutral | Navigation, high-contrast links, button labels, and selected headings. |
| Ash Detail | `#888888` | `--color-ash-detail` | neutral | Infrequent subdued text details within the dark interface. |
| Code Terracotta | `#ce9178` | `--color-code-terracotta` | semantic | Small syntax-like text accent; secondary to the black-and-gray brand palette. |
| Mist Navigation | `#b3b3b3` | `--color-mist-navigation` | neutral | Occasional navigation and button text in softer white-gray. |
| Code Leaf | `#6a9955` | `--color-code-leaf` | semantic | Minor syntax-like green text accent, not a section or illustration background. |
| Charcoal Control | `#2c2c2c` | `--color-charcoal-control` | surface | Dark secondary button and link surfaces, including subdued Learn more controls. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#141414` (Night Panel) · `--color-surface-2` → `#1a1a1a` (Graphite Hairline) · `--color-text` → `#e6e6e6` (Soft Chalk) · `--color-text-muted` → `#999999` (Quiet Gray) · `--color-text-subtle` → `#a1a1a1` (Silver Copy) · `--color-border` → `#1a1a1a` (Graphite Hairline) · `--color-accent` → `#0062ff` (Spline Blue) · `--color-accent-2` → `#ce9178` (Code Terracotta) · `--color-accent-3` → `#6a9955` (Code Leaf) · `--color-on-accent` → `#ffffff` (Interface White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e6e6e6` | `#000000` | 16.83:1 | AAA |
| `#e6e6e6` | `#141414` | 14.76:1 | AAA |
| `#e6e6e6` | `#1a1a1a` | 13.94:1 | AAA |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#141414` | 6.47:1 | AA |
| `#999999` | `#1a1a1a` | 6.11:1 | AA |
| `#a1a1a1` | `#000000` | 8.13:1 | AAA |
| `#a1a1a1` | `#141414` | 7.13:1 | AAA |
| `#a1a1a1` | `#1a1a1a` | 6.74:1 | AA |
| `#0062ff` | `#000000` | 4.19:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Spline Sans | `--font-body` | webfont | 400, 500 | Headings, paragraphs, navigation, links, and buttons throughout the page. | Inter |
| ui-monospace | `--font-mono` | system | 400 | Code examples and technical snippets in integration or embed content. | Roboto Mono |

- **Spline Sans:** Mostly regular with medium-weight headings; natural capitalization and neutral, untracked letterforms.
- **ui-monospace:** Regular monospace for code; keep technical text visually distinct from the sans-serif interface.

### Type scale — Minor Third (ratio ≈ 1.221, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.35 | 0 | — | Spline Sans | Centered hero headline and primary page-level statement. |
| h2 | 38.5px | 500 | 1.25 | 0 | — | Spline Sans | Centered section introductions and major product feature headings. |
| h3 | 36px | 500 | 1.22 | 0 | — | Spline Sans | Feature, showcase, and lower-level content headings. |
| h4 | 24px | 400 | 1.5 | 0 | — | Spline Sans | Compact card titles and supporting section labels. |
| body | 18px | 400 | 1.56 | 0 | — | Spline Sans | Main explanatory paragraphs and product descriptions. |
| caption | 16px | 400 | 1.5 | 0 | — | Spline Sans | Small labels, credits, and supporting card copy. |
| button | 14px | 400 | 1.15 | 0 | — | Spline Sans | Short labels on primary and secondary action controls. |
| nav | 16px | 400 | 1.15 | 0 | capitalize | Spline Sans | Top-level navigation and menu labels. |
| link | 14px | 400 | 1.15 | 0 | — | Spline Sans | Inline links and compact secondary actions. |
| code | 14px | 400 | 1.5 | 0 | — | ui-monospace | Embed snippets and technical implementation examples. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40 px.
- Section rhythm 32px · element gap 12px · card padding — · max content width 1080px.

Use a centered content area capped at the measured 1080px maximum, with a compact 12-column rhythm where grids appear. The hero centers its message and input over a full-bleed black stage. Lower sections alternate centered introductions with paired product content and modular card grids. Maintain a compact measured spacing system, but preserve conspicuous black breathing room between major blocks. Align most headings centrally; let feature-card copy align to the card's content. The page is long-form and dense in examples, yet its generous dark intervals keep the overall composition calm.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `50%` · nav `9999px` · link `16px` · xs `8px` · sm `12px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `inset` (card): `rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface favors flat black surfaces and subtle contrast over pronounced elevation. Cards use dark fills, thin near-black borders, and restrained rounding; the measured card shadow is a faint inset white outline. Layer 3D renders and interface screenshots inside panels, but avoid heavy drop shadows or bright borders that compete with the artwork.

## Imagery

Treat 3D renders as the page's signature artwork: saturated, softly lit forms float against black in the hero, while product demos show the actual design interface and interactive scenes. Use media previews and community-created work in compact galleries. Feature cards may pair concise copy with small rendered objects. Keep imagery carefully framed within dark rounded panels; don't mistake illustration colors for the site's UI palette.

## Components

### Top navigation

Centered horizontal menu with white or muted labels, a colorful brand mark, and compact pill-shaped Log In and Get Started controls.

### Hero prompt

Centered headline and supporting line above a wide dark prompt field, with subdued placeholder text and small utility controls.

### Primary CTA

Use Spline Blue #0062ff with white text and a measured 12px radius; the main free-start action has measured 16px type.

### Community gallery

Compact grid of creator-made 3D and interactive website thumbnails, each presented as a dark media card with a short title and credit.

### Feature cards

Dark rounded panels combine concise feature copy, optional checklists, and a 3D render or product visual.

### Testimonial

Centered customer quote with company mark, concise attribution, and a small portrait, surrounded by ample black space.

### Integration showcase

Pair a rendered or interactive preview with a dark code panel; use monospace text for embed snippets and compact integration marks.

### Measured component styles

- **Primary button** (“Explore Community”): background #0062ff · text #ffffff · radius 12px · padding 12px 24px · 500 14px Spline Sans
- **Secondary button** (“Log In”): background #0d0d0d · text #ffffff · border 1px solid #0d0d0d · radius 50px · padding 10px 16px · 400 16px Spline Sans · capitalize
- **Link** (“Interactive Websites @DesignGabor”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Spline Sans
- **Input**: transparent background · text #ffffff · radius 0px · padding 2px 8px 0px 8px · 400 15px Spline Sans
- **Card**: background #191a1d · text #ffffff · radius 16px · padding 0px · 400 16px Spline Sans
- **Navigation item** (“Products Resources Community Customers E”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Spline Sans

## Do

- Use black as the persistent canvas for the page.
- Keep navigation and section introductions visually restrained.
- Let saturated 3D renders provide most of the color.
- Use blue only for high-priority conversion actions.
- Organize examples in dark, subtly bordered rounded cards.
- Separate major content groups with generous black space.

## Don't

- Don't apply bright gradients to large interface surfaces.
- Don't treat artwork colors as core brand colors.
- Don't use heavy shadows or bright card outlines.
- Don't make every section or card equally prominent.
- Don't replace the quiet dark canvas with alternating bright bands.
- Don't use decorative typography that competes with product imagery.

## Agent prompt

Build a new Spline-style product page on a deep black canvas using Canvas Black (#000000) as the dominant surface. Set headlines and core copy in Spline Sans or a close sans-serif alternative; use Interface White (#ffffff) and Soft Chalk (#e6e6e6) for primary contrast, with Quiet Gray (#999999) for supporting text. Reserve Spline Blue (#0062ff) for the main conversion action. Create a centered hero, then alternate concise centered introductions with product demonstrations, modular dark feature cards, and community or customer proof. Use Graphite Hairline (#1a1a1a) and Night Panel (#141414) for subtle card separation, restrained rounded corners, and minimal elevation. Make vivid, high-quality 3D media the visual focal point. Keep the interface uncluttered, spacing deliberate, and major sections separated by black breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero with centered message and prompt field, framed by floating 3D objects. | prompt-led entry, top navigation, primary sign-in and start actions | black canvas, centered typography, floating 3D shapes, dark input panel |
| 2 | gallery | Centered section heading above compact thumbnail grids, brand marks, project examples, and a customer quote. | browse community examples, discover customer work, social proof | dark thumbnail cards, logo cloud, centered testimonial, black section spacing |
| 3 | feature-grid | Centered product introduction, broad demo media, paired feature cards, and a testimonial. | learn feature benefits, view product demonstration, read customer quote | dark feature panels, embedded 3D media, short checklists, rounded card grid |
| 4 | feature-grid | Centered Hana introduction, large media area, paired feature cards, followed by integrations and conversion content. | explore product capabilities, review platform integrations, start free | product media showcase, feature card grid, integration marks, blue CTA |

## Source CSS custom properties (selected)

```css
--color-bg: #000;
--color-bg-transparent: #1110;
--color-text-main: #fff;
--color-text-navigation: #ffffffb3;
--color-text-paragraph: #fff9;
--color-blue: #0062ff;
--color-blue-lighter: #5797ff;
--color-blue-dark: #217ce5;
--color-blue-ios: #5966f3;
--color-red: #fd585b;
--color-yellow: #ffb01f;
--color-purple: #8f66ff21;
--color-purple-bright: #a770ff;
--color-green: #49bc541a;
--color-green-bright: #47b35f;
--color-pink: #ff5cab;
--color-white: #fff;
--color-bg-pink: #ffe6e6;
--color-bg-greenish: #c1f6e8;
--color-btn-bg: #ffffff0d;
--color-btn-bg-highlight: #ffffff0f;
--panel-bg-alpha: .08;
--color-panel-bg: rgba(255, 255, 255, .08);
--color-panel-bg-hover: rgba(255, 255, 255, calc(.08 + .03));
--color-menu-dropdown: #1e1e23cc;
--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;
--color-free: rgba(255, 255, 255, .08);
--color-free-darker: rgba(255, 255, 255, calc(.08 + .03));
--color-super: #00a376;
--color-super-darker: #008761;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/spline-design