---
name: Spline
description: "This site is worth including as a prime example of a modern, dark-mode design system for a 3D creative tool."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "rgba(255,255,255,0.6)"
  tertiary: "#0062FF"
  neutral: "#888888"
  bg-soft: "#1e1e23"
  bg-quiet: "rgba(255,255,255,0.05)"
  muted-soft: "rgba(255,255,255,0.1)"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "-0.5px"

rounded:
  sm: 4px
  md: 12px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

An all-in-one platform for creating and collaborating on interactive 3D and design experiences.

*A digital playground for building 3D worlds*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.6)`)** — uses `ink-soft` token
- **Accent (`#0062FF`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

Centered layout with a dominant hero section followed by content blocks

*Rhythm:* Standard 4px grid system with generous vertical spacing for major sections

## Elevation & Depth

- 0px 4px 12px rgba(0,0,0,0.5)
- Borders: Subtle 1px borders using rgba(255,255,255,0.1)

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with solid blue background and white text, secondary buttons with dark background
- **card:** Dark, slightly elevated surfaces with subtle borders
- **chip:** Small rounded tags with icons
- **input:** Minimalist with subtle borders
- **hero:** Large centered headline over an interactive 3D canvas background

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```