--- version: alpha name: "Spline" website: "https://spline.design" description: >- A 3D design tool whose marketing page IS a Spline scene — floating 3D-rendered shapes (a beveled blue tablet, a rounded orange tile, a green pill, a pink rounded square) hover around a 58px Spline Sans display headline in white on a pure-black canvas, with a single cobalt-blue pill CTA centered between them. Below the fold the page returns to the same near-black surface and shows a 5-by-2 grid of customer-submitted 3D scene thumbnails. Colors come almost entirely from the product itself rather than from brand chrome; the only chromatic move from the marketing system is the cobalt-blue button. The design system runs Spline Sans at modest 400-500 weights, leans on a 16px default corner radius, and trusts the live 3D artifacts above the fold to do every bit of decorative work. seo: title: "Spline Design System for React — cobalt blue on near-black, Spline Sans, 17 components" metaDescription: "Spline's marketing system makes the product the hero — floating 3D-rendered shapes decorate a near-black canvas with a single cobalt-blue pill CTA. Tokens for React, Next.js, and AI coding tools." highlights: - "Product-as-hero — the floating shapes around the headline are Spline scenes, not brand decoration; the marketing surface and the editor canvas use the same near-black floor" - "Single cobalt-blue voltage — #0062ff appears just once above the fold as the CTA pill, the only chromatic brand element on a system where every other color comes from user scenes" - "Spline Sans at modest weights — display sits at 36-58px in weight 500, body at 14-18px in weight 400, no heavy 700+ tier anywhere on the page" - "16px default rounding — buttons sit at 12px, large cards at 24px, customer-logo chips fully circular at 50% radius; the radius scale is generous-soft rather than sharp" - "Hairline-on-black cards — the customer 3D scene grid uses 16px-rounded tiles with no border, no shadow, just dark surfaces lifted against the pure-black floor" tags: - "Design & Creative Tools" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Spline's marketing site does something almost no other design-tool brand attempts: the hero is literally a Spline scene. A beveled blue tablet rotates next to a yellow rounded tile, a green pill, a magenta rounded square, and a purple-blue block — and the headline, "The all-in-one platform for 3D and design," sits at the center as if it were another object placed in the scene. The cursor reads "Press and drag to edit." There is no decorative chrome between the brand and the product; the page IS the product, running in the same engine you would build with. Where Figma keeps its marketing surface flat and trusts photography of the canvas, Spline inverts the relationship — the marketing canvas is the editor. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 17 color tokens drawn from a pure-black canvas and a single cobalt-blue voltage (#0062ff) used exactly once above the fold for the primary CTA pill; 11 typography tokens running Spline Sans (a custom proprietary sans) at modest weights — 58px display at weight 500 is the heaviest typographic moment, with body and labels at 400; 6 corner-radius tokens centered on a 16px default with circular icons at 50%; 8 spacing values on a 4px base; and 17 component definitions covering the cobalt-pill primary button, hairline-edged cards, the dark dropdown menu surface, and the dark text input. Feed this file to an AI coding tool and it reproduces Spline's specific moves: pure-black canvas instead of charcoal, single cobalt-blue accent reserved for the single most important action, generous 16px corner rounding rather than tight 4-8px, and Spline Sans across every tier. The one thing worth borrowing only if your product is itself a visually-rich canvas tool: the willingness to put NO brand chrome above the product. Spline gets away with it because the product is the brand. Most teams need an interstitial layer. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://spline.design" title: "Spline — official site" description: "Spline's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Spline's primary brand color?" answer: "Spline's brand voltage is cobalt blue (#0062ff), wired into the page CSS as --color-blue. It appears exactly three times in the captured marketing page, all as background fills — the primary CTA pill in the hero, a single inline highlight, and a subtle inline accent in the feature grid. Every other color visible on the page (the orange, yellow, green, magenta, purple shapes around the headline) belongs to the user-created 3D scenes, not the brand chrome. This restraint is the brand's typographic signature: one electric blue, one near-black floor, everything else borrowed from the product." - id: "typography" title: "What typeface does Spline use, and what should I use as a substitute?" answer: "Spline runs a custom proprietary sans-serif named Spline Sans across every tier of the system — display, heading, body, button, and even the metadata labels share the same family. Display headlines sit at 36-58px in weight 500; body copy at 14-18px in weight 400; labels at 14px in weight 500. There is no heavier weight on the page. Inter at the same weights is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Spline Sans at the 16-18px body sizes." - id: "canvas-color" title: "Why does Spline use pure black instead of a softer charcoal?" answer: "The canvas is pure #000000, deliberately. Spline's editor itself ships a near-black canvas, and the marketing site uses the same value so the hero scene reads as if it were running in the live editor. Most dark-canvas brands (Linear, Vercel) use a slightly-blue near-black to soften the contrast with white text; Spline keeps the canvas at true black because the 3D-rendered objects above the fold need maximum contrast to read as objects in space rather than flat illustrations. The text-on-canvas contrast is intense by design." - id: "rounded-style" title: "What is Spline's corner-radius philosophy?" answer: "Spline runs a generous-soft radius scale centered on 16px. Cards default to 16px, buttons to 12px, large surface tiles to 24px, and customer-logo chips are fully circular at 50% radius. The scale skips the 4-8px tight tier that dev-tools like Vercel and Linear lean on; even small UI surfaces start at 8px. A pill variant exists at 50-56px for promotional CTAs, but the dominant radius across the page is 16px. The softness makes the dark surfaces feel approachable rather than industrial." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own 3D-platform marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Spline's specific moves: pure-black canvas instead of charcoal, single cobalt-blue voltage reserved for the primary CTA, Spline Sans-equivalent typography at modest weights, and 16px default rounding. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the 'product-as-hero' move only works if your product itself is visually rich enough to carry the marketing — for most SaaS this would feel hollow." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#0062ff" primary-light: "#5797ff" primary-dark: "#217ce5" accent-purple: "#a770ff" accent-emerald: "#008761" ink: "#ffffff" ink-muted: "#888888" canvas: "#000000" surface-1: "#191a1d" hairline: "#ffffff" syntax-blue: "#569cd6" syntax-orange: "#ce9178" syntax-green: "#6a9955" typography: display-xl: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 58px fontWeight: 500 lineHeight: 56px letterSpacing: 0 display-md: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 44px letterSpacing: 0 heading-md: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 30px letterSpacing: 0 body-lg: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-md: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 24px letterSpacing: 0 caption: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "\"Spline Sans\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 16.1px letterSpacing: 0 mono-sm: fontFamily: "ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", monospace" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 rounded: none: "0px" sm: "8px" md: "12px" lg: "16px" xl: "24px" pill: "56px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "56px" button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "56px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 20px" height: "44px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.full}" padding: "8px 16px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px 24px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" card-dark: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "16px" scene-tile: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: "0" logo-chip: backgroundColor: "transparent" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "8px 16px" height: "40px" text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 16px" height: "44px" testimonial-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" code-block: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.mono-sm}" rounded: "{rounded.sm}" padding: "16px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview Spline's marketing site does something almost no other design-tool brand attempts. **Product-as-hero.** The hero is literally a Spline scene — a beveled blue tablet rotates next to a yellow rounded tile, a green pill, a magenta rounded square, and a purple-blue block, with the headline placed among them as if it were another object in the composition. The cursor caption reads "Press and drag to edit." Where Figma keeps its marketing surface flat and trusts photography of the canvas, and where most SaaS brands paint a hero gradient and overlay text, Spline inverts the relationship: the marketing canvas IS the editor. The system's chromatic restraint reinforces the move. There is exactly one brand color — cobalt blue (`{colors.primary}` — #0062ff) — and it appears just three times in the captured page, all as background fills (the primary CTA pill, an inline highlight, an accent in the feature grid). Every other color visible above the fold belongs to user-created 3D scenes, not the brand chrome. This is the inverse of single-voltage discipline at Airbnb or Cloudflare: instead of holding one accent in reserve against a white canvas, Spline holds one accent in reserve against a pure-black canvas, and lets the product's colors do every other chromatic job. The remaining declared CSS variables (`{colors.primary-light}`, `{colors.accent-purple}`, `{colors.accent-emerald}`) are part of the broader product palette but never appear in the marketing chrome. Typography is Spline Sans across every tier — a custom proprietary sans that does the work of display, heading, body, button, and label without a second family. Display tops out at 58px in weight 500; body sits at 14-18px in weight 400; there is no heavier weight on the page. The hero h1 at 58px / 500 is the loudest typographic moment in the system, deliberately measured so the 3D scene around it remains the protagonist. **Key Characteristics:** - Pure black canvas (`{colors.canvas}` — #000000), not the slightly-blue charcoal that Linear and Vercel use — the contrast with the rendered 3D shapes needs to be maximum. - Single cobalt-blue voltage (`{colors.primary}`) reserved for the primary CTA pill above the fold. Three total occurrences on the captured page. - Spline Sans across every typographic tier, with modest weights (400 body / 500 display) — no 700+ moment. - Generous-soft radius scale: 16px default, 12px on buttons, 24px on larger cards, full circles on logo chips and icon buttons. - Customer 3D scene grid (5 x 2) below the fold uses hairline-edged dark tiles with no shadow, no border — depth comes from surface-color contrast against the pure-black floor. - Logo wall (Google, Shopify, Webflow, Microsoft, Meta, Snapchat, Forbes, Burton, etc.) renders all marks in white at uniform size — every customer logo flattens to monochrome to keep brand voltage singular. - Spline Mono (system mono) appears only inside code-style annotations — never in headings or body. ## Colors ### Brand - **Cobalt Primary** (`{colors.primary}` — #0062ff): frequency 3. Used as background only — the primary CTA pill, an inline highlight, a single accent in the feature grid. Wired in CSS as `--color-blue`. The single chromatic brand moment on the page; everything else is either pure white text or 3D-scene colors. - **Cobalt Light** (`{colors.primary-light}` — #5797ff): declared as `--color-blue-lighter`. Not rendered in the captured marketing surface; reserved for the product editor's selection states. - **Cobalt Dark** (`{colors.primary-dark}` — #217ce5): declared as `--color-blue-dark`. Reserved for hover/press states on the primary CTA. - **Accent Purple** (`{colors.accent-purple}` — #a770ff): declared as `--color-purple-bright`. Part of the broader product palette but doesn't appear in the marketing chrome. - **Accent Emerald** (`{colors.accent-emerald}` — #008761): declared as `--color-super-darker`. Reserved for the "Super" subscription tier badge in the product; not rendered in marketing. ### Surface - **Canvas** (`{colors.canvas}` — #000000): pure black, the page floor. Wired as `--color-bg`. Maximum contrast with the rendered 3D shapes is intentional — slightly-blue near-blacks would muddy the depth illusion. - **Surface-1** (`{colors.surface-1}` — #191a1d): frequency 28 — used on the dropdown menus, the dark cards in the scene grid, the text input field, and the testimonial card. Wired as `--color-menu-dropdown`. The single "elevated" dark tone in the system. ### Text - **Ink** (`{colors.ink}` — #ffffff): frequency 710 as text — the dominant text color across every tier. Pure white on pure black, no muted variant for body copy. The contrast is uncompromising. - **Ink Muted** (`{colors.ink-muted}` — #888888): frequency 5 as text — used sparingly for sub-labels and metadata under scene tiles. ### Hairlines - **Hairline** (`{colors.hairline}` — #ffffff at low opacity): frequency 709 as border — the dominant border tone. Since the canvas is pure black, white-with-alpha is the only border color that reads softly without disappearing. ### Syntax (product surface) - **Syntax Blue** (`{colors.syntax-blue}` — #569cd6), **Syntax Orange** (`{colors.syntax-orange}` — #ce9178), **Syntax Green** (`{colors.syntax-green}` — #6a9955): these are VS Code Dark+ palette values that appear in the embedded code-snippet sections showing API examples. Not brand chrome — borrowed from the IDE syntax-highlighting convention. ## Typography ### Font Family The system runs **Spline Sans** for everything — a custom proprietary sans-serif Spline ships with their marketing site. Fallbacks walk `system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif`. There is no separate display family or serif tier; one variable-weight sans does every job. **Spline Mono** (the system monospace stack) appears only inside code-style annotations. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 58px | 500 | 56px | Hero h1 ("The all-in-one platform for 3D and design") | | `{typography.display-md}` | 36px | 500 | 44px | Section h2 ("A complete platform for real-time interactive design") | | `{typography.heading-md}` | 20px | 500 | 30px | Sub-section titles | | `{typography.body-lg}` | 18px | 400 | 28px | Hero sub-paragraph | | `{typography.body-md}` | 16px | 400 | 24px | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | Caption rows beneath scene tiles | | `{typography.label-md}` | 14px | 500 | 24px | h3 / button label / category chip | | `{typography.caption}` | 12px | 400 | 16px | Metadata, dates, small labels | | `{typography.button-md}` | 16px | 400 | 24px | Primary CTA label | | `{typography.nav-link}` | 14px | 400 | 16.1px | Top-nav link labels | | `{typography.mono-sm}` | 14px | 400 | 21px | Code-style annotations only | ### Principles Display weight tops out at 500, never 700+. The hero h1 at 58px / 500 is the loudest typographic moment — deliberately measured so the 3D scene around it remains visually dominant. Body and labels share weight 400. Weight 500 is the system's "emphasis" treatment, used for headings, buttons, and small labels alike — there is no separate semibold tier. ### Note on Font Substitutes Spline Sans is proprietary. **Inter** at the same weights is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Spline Sans at the 16-18px body sizes. If you need a tighter alternative for the 58px display tier, **Geist** (Vercel's open-source sans) has comparable cap height. For the mono tier, the system stack (`ui-monospace, SFMono-Regular, Consolas`) is already what Spline ships. ## Layout ### Spacing System - **Base unit:** 4px (with 8px as the dominant module). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Section padding (vertical):** ~96px between major sections on the dark canvas. - **Card internal padding:** `{spacing.lg}` (24px) on testimonial and large scene tiles; `{spacing.base}` (16px) on the smaller scene-grid tiles. - **Hero padding:** 0 horizontal — the 3D scene extends edge-to-edge, with the headline floating in the centered safe zone. ### Grid & Container - **Max content width:** ~1080px on the hero, ~1280px on the scene grid and logo wall. - **Hero:** full-bleed black canvas with the 3D scene rendered behind the centered headline + CTA stack. - **Scene grid:** 5-column grid at desktop showing customer-submitted 3D scenes (titled "Brand & Marketing," "3D Mockups," "3D Logos," "Animated Characters," etc.), collapsing to 2-column on tablet. - **Logo wall:** 6-column grid of monochrome customer logos (Google, Shopify, accenture, GIPHY, Webflow, OpenAI, Microsoft, Meta, Snap, Forbes, Siemens, Burton). - **"Production-ready" gallery:** 3-column grid of full-color scene thumbnails — the page's only chromatic moment besides the cobalt CTA. ### Rhythm The page alternates between **edge-to-edge product** (the hero scene) and **constrained dark editorial** (typography-anchored sections below the fold). There is no atmospheric gradient between bands — every section terminates on the same pure-black canvas, and depth comes from elevated `{colors.surface-1}` tiles rather than from background-color shifts. ## Elevation The system has essentially **no shadow tier**. The canvas is too dark for traditional drop shadows to read — instead, hierarchy comes from `{colors.surface-1}` cards lifted off the `{colors.canvas}` floor by ~25% lightness contrast alone. The customer scene tiles, dropdown menus, testimonial cards, and input fields all use the same `{colors.surface-1}` tone. - **Flat (no shadow):** body, hero, footer, every editorial band — 99% of surfaces. - **Tonal lift:** `{colors.surface-1}` (#191a1d) cards sit on `{colors.canvas}` (#000000) — the 25-point lightness gap reads as elevation without any shadow being drawn. - **Hairline outlines:** `{colors.hairline}` (white at low opacity) marks dropdown borders and the code-block edge. White-with-alpha is the only border tone that survives on pure black. ## Shapes The radius scale is **generous-soft**, centered on 16px: - `{rounded.none}` 0px — only on code-block annotations. - `{rounded.sm}` 8px — small UI surfaces (dropdown items, input field corners). - `{rounded.md}` 12px — the primary button (`{component.button-primary}`). - `{rounded.lg}` 16px — default rounding for cards, scene tiles, large surfaces. - `{rounded.xl}` 24px — larger feature cards. - `{rounded.pill}` 56px / `{rounded.full}` 9999px — pill CTAs and circular logo chips / icon buttons (50% radius renders as full circle on square elements). There is no 4px tier. Even the smallest surfaces start at 8px. The scale is deliberately soft to keep the dark canvas feeling approachable rather than industrial. ## Components **`button-primary`** — The signature CTA. Cobalt-blue `{colors.primary}` fill, white text, `{rounded.md}` 12px radius, 16x24 padding, 56px height. "Get started — it's free" is the canonical instance, sitting at the center of the hero scene. **`button-primary-hover`** — Background flips to `{colors.primary-dark}` (#217ce5) — a slightly darker cobalt for the press state. **`button-secondary`** — Transparent fill with white text and a 1px white-alpha border. `{rounded.md}` radius, 12x20 padding, 44px height. Used for "Login" in the top nav and "Learn more" tertiary CTAs. **`top-nav`** — Dark `{colors.surface-1}` surface with full pill rounding (`{rounded.full}`), 48px height, 8x16 padding. Floats above the hero scene rather than sitting flush at the page top. Houses the Spline wordmark, the product-nav links (Products, Resources, Community, Customers, Enterprise, Pricing), and the right-aligned Login / Get Started cluster. **`nav-link`** — Transparent background, white text in `{typography.nav-link}` (14px / 400), 8x12 padding. No hover background visible in the captured surface. **`hero-heading`** — White text on the transparent hero, `{typography.display-xl}` (58px / 500). 0 padding horizontally because the 3D scene extends edge-to-edge. **`section-heading`** — White text, `{typography.display-md}` (36px / 500). Used for "A complete platform for real-time interactive design," "Where ideas become production-ready experiences," "Collaborative 3D Design, ready for production." **`body-paragraph`** — Default white text at `{typography.body-lg}` (18px / 400). The hero sub-paragraph and section leads. **`body-paragraph-muted`** — `{colors.ink-muted}` (#888888) text at `{typography.body-md}` for secondary labels under scene tiles. **`card-dark`** — `{colors.surface-1}` fill, white text, `{rounded.lg}` 16px radius, 16px internal padding. The default content card on the dark canvas. **`scene-tile`** — `{colors.surface-1}` fill, `{rounded.lg}` 16px radius, 0 padding (the 3D scene fills the tile edge-to-edge). Used in the 5-column customer scene grid. **`logo-chip`** — Transparent fill, white logo at uniform size, fully circular treatment for the icon-only logos. The customer logo wall renders all marks in monochrome white at 40px height regardless of source color. **`text-input`** — `{colors.surface-1}` fill, white text, `{rounded.md}` 12px radius, 12x16 padding, 44px height. **`testimonial-card`** — `{colors.surface-1}` fill, white text, `{rounded.lg}` 16px radius, 24px padding. The single quote card on the page ("We wanted to appeal to an enterprise audience…"). **`code-block`** — Pure-black `{colors.canvas}` fill, white-alpha hairline border, `{rounded.sm}` 8px radius, 16px padding. Uses `{typography.mono-sm}` with the syntax colors borrowed from VS Code Dark+ (cobalt for keywords, orange for strings, green for comments). **`footer`** — Black canvas, muted-gray text, 48x24 padding. No surface contrast against the page floor — the footer just continues the canvas. ## Do's and Don'ts **Do** treat the brand voltage as a single, scarce cobalt-blue moment. The system has exactly one CTA pill above the fold; multiplying it into multiple cobalt elements would dilute the only chromatic brand signal on the page. **Do** use `{colors.surface-1}` (#191a1d) — NOT a shadow — to lift cards off the pure-black canvas. Shadows don't read on pure black; tonal lift does the entire elevation job. **Do** keep display weight at 500 max. The hero h1 at 58px / 500 is the loudest typographic moment in the system. Bumping to 700 turns the editorial dek into a generic SaaS shout and undercuts the "product is the protagonist" principle. **Do** render the customer-logo wall in monochrome white. Each customer logo in its native brand color would create 12 competing chromatic voices and destroy the single-voltage discipline. **Don't** use the syntax colors (`{colors.syntax-blue}`, `{colors.syntax-orange}`, `{colors.syntax-green}`) anywhere outside code blocks. They are borrowed VS Code values for inline code samples, not part of the brand palette. **Don't** swap the canvas from pure `#000000` to a slightly-blue near-black. The maximum contrast against the rendered 3D shapes is intentional — softening it would make the 3D objects read as flat illustrations rather than as objects in depth. **Don't** introduce a 4px corner radius tier. The system is deliberately generous-soft starting at 8px; adding tight corners would feel borrowed from a dev-tools system (Vercel, Linear) rather than from Spline's own visual identity. **Don't** render multi-color brand decorations around the hero. The "decoration" around Spline's headline is the product itself — replacing the live 3D scene with brand-colored shapes would lose the entire point of the "product-as-hero" move. ## Known Gaps - **Hover and focus states:** documented for `{component.button-primary-hover}` only; the full state matrix (focus rings, disabled tints, error states) is not captured from the marketing surface. - **Form input error states:** `{component.text-input}` carries the resting state; error / validation styling lives inside the product editor and is not exposed on the marketing site. - **Light mode:** the captured marketing surface is dark-only. A light variant exists in the product editor's preference panel but is not represented here. - **Motion:** the hero 3D scene continuously animates (auto-rotation, parallax on mouse-move) but the spec captures end-state values only. Easing curves, rotation rate, and parallax depth live in the live Spline runtime. - **Product surfaces:** this DESIGN.md captures the marketing site only. The Spline editor itself (`my.spline.design`) carries a much richer token system — panel layouts, gizmo colors, viewport gridlines, syntax-aware inspectors — that is not represented here. - **Subscription-tier accents:** the declared `{colors.accent-emerald}` (#008761, wired as `--color-super-darker`) and `{colors.accent-purple}` (#a770ff, wired as `--color-purple-bright`) belong to the "Super" subscription tier and the AI features respectively; neither appears in the captured marketing chrome.