← OpenDesign CURATED · OPEN · FREE
Spline
An all-in-one platform for creating and collaborating on interactive 3D and design experiences.
design 3d tool
01
Identity DNA
interactive 3D design platform collaborative
A digital playground for building 3D worlds
02
Color
#0062FFAccent
#ffffffInk
rgba(255,255,255,0.6)Ink soft
#000000BG
#1e1e23BG soft
rgba(255,255,255,0.05)BG quiet
#888888Muted
rgba(255,255,255,0.1)Line
High-contrast dark mode with a vibrant blue accent and multi-colored 3D elements for visual impact.
03
Typography
humanist-sans · monospace
Use system-ui fallbacks for reliability · Maintain tight letter spacing for large display text · Use 16px as the standard body size
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
150px
Standard 4px grid system with generous vertical spacing for major sections
05
Surfaces
sm · 4px
md · 12px
lg · 16px
pill · 999px
Subtle 1px borders using rgba(255,255,255,0.1)
0px 4px 12px rgba(0,0,0,0.5)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered layout with a dominant hero section followed by content blocks
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1.0) easing
Subtle color transitions on hover · Smooth background color changes
Subtle color shifts and cursor pointer · Immediate feedback with standard button press states
08
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 09
Voice & Don'ts
Tone Professional yet approachable Headlines Direct and benefit-oriented CTAs Encouraging and action-focused with clear value proposition 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 Avoid: Jargon-heavy technical language Avoid: Aggressive sales pitches Avoid: Passive or hesitant phrasing 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
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.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is worth including as a prime example of a modern, dark-mode design system for a 3D creative tool.
