spline.design
Browser-based 3D design tool with 3D throughout its site. spline.design's landing page is built with Three.js and set in Spline Sans, ui-monospace, Spline Sans Mono. Its palette centers on #191A1D, #569CD6, #888888.
Visit spline.design ↗
Analyze it yourself →
Color palette
What we detected
| Detected animation / 3D libraries | Three.js |
|---|---|
| Fonts | Spline Sans, ui-monospace, Spline Sans Mono |
| Mobile-ready | Yes (viewport meta present) |
| Structured data (JSON-LD) | Not found |
| Social profiles linked | X / Twitter, Instagram, YouTube, TikTok |
| Images on landing page | 39 |
| Links on landing page | 80 |
| Load time (our browser) | 10.2s |
Use this palette as CSS variables
:root {
--spline-color-1: #191A1D;
--spline-color-2: #569CD6;
--spline-color-3: #888888;
--spline-color-4: #5865F2;
--spline-color-5: #0062FF;
--spline-color-6: #3DDC84;
--spline-font: "Spline Sans", system-ui, sans-serif;
}Rebuild something in this style with Claude
Paste this into Claude Code, Claude, ChatGPT or Cursor with Enrichr connected. It borrows the system, not the content: your copy, your brand, spline.design's rhythm.
Use Enrichr to extract the design system from https://spline.design.
Write tokens.css from the captured values (palette, type scale,
spacing, radii, easings), then build a hero in that style using
my own copy. List anything you had to guess.spline.design design FAQ
What font does spline.design use?
spline.design's landing page loads Spline Sans, ui-monospace, Spline Sans Mono. A font you can see on a site is licensed to that site, so check the foundry's terms or pick a free alternative before using it yourself.
What colors does spline.design use?
The most used colors on spline.design's landing page are #191A1D, #569CD6, #888888, #5865F2, #0062FF, #3DDC84, ranked by how often they appear in the rendered page.
Does spline.design use GSAP, Three.js or another animation library?
Yes. We detected Three.js running on the landing page.
How do I get spline.design's full design system?
Connect Enrichr to Claude, ChatGPT or Cursor and ask for the design system of https://spline.design. It captures the rendered page and returns the full token set (type scale, spacing, radii, easings) plus animation timings and any WebGL shaders.
Try it free — 25 credits a month →
More from the gallery
oryzo.aigithub.comcloudflare.comneon.com
Captured 2026-10-14 from the site's public landing page. Only publicly observable information is shown, and it can change as the site does. All names and trademarks belong to their owners; Enrichr is not affiliated with spline.design.