--- version: alpha name: Spline description: 3D design tool with a cinematic dark canvas — near-black void, custom Spline Sans typeface, electric-blue CTA, frosted-glass cards, and a rich CSS variable palette of neon accents that mirror the palette of any 3D scene you could create inside the tool. colors: # Canvas / surfaces background: "#0d0e10" # near-black, slightly warmer than pure black surface: "#191a1d" # raised card surface (css palette: --color-surface) surface-hover: "#1e1f23" # hover state on dark cards # Text ink: "#ffffff" # primary text, headings ink-secondary: "#888888" # secondary / muted body text ink-dim: "#b3b3b3" # opaque approx of rgba(255,255,255,0.70) — Google format requires hex # Brand accent primary: "#0062ff" # Spline Blue — CTAs, links, community accents on-primary: "#ffffff" # text on blue primary buttons primary-hover: "#0076ff" # brighter blue on hover # Gradient / accent palette (from CSS variables, used in feature sections) accent-blue-light: "#5797ff" # --color-blue-lighter — feature highlights accent-purple: "#a770ff" # --color-purple-bright — Team plan accent accent-purple-dark: "#7448d4" # --color-team-darker accent-purple-team: "#915eff" # --color-team accent-green: "#47b35f" # --color-green-bright — success / growth signals accent-green-teal: "#00a376" # --color-super — Super plan primary accent-teal-light: "#38e2b3" # --color-super-lighter — Super plan lighter accent-pink: "#ff5cab" # --color-pink — playful feature callouts accent-yellow: "#ffb01f" # --color-yellow — warning / attention accent-red: "#fd585b" # --color-red — destructive / error # Borders (opaque approximations of rgba border values) border: "#242527" # opaque approx of rgba(255,255,255,0.08) over #191a1d — Google format requires hex border-subtle: "#191b1d" # opaque approx of rgba(255,255,255,0.01) over near-black border-medium: "#2e3033" # opaque approx of rgba(255,255,255,0.10) over near-black # Glass / frosted overlays (opaque approximations) glass-dim: "#252629" # opaque approx of rgba(255,255,255,0.10) over dark — Google format requires hex glass-medium: "#333538" # opaque approx of rgba(255,255,255,0.15) over dark # Focus / interactive ring focus-ring: "#0062ff" # matches primary — blue ring on interactive elements typography: display-hero: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 58px fontWeight: 500 lineHeight: 1.24 letterSpacing: -0.5px heading-section: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 1.35 letterSpacing: -0.3px heading-feature: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.22 letterSpacing: -0.2px heading-card: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px heading-card-medium: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.15 letterSpacing: 0px sub-heading: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0px body-large: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0px body: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0px body-medium: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0px button-ui: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0px label: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0px caption: fontFamily: "Spline Sans, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0px mono-code: fontFamily: "Spline Sans Mono, ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px spacing: xs: 6px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 40px 4xl: 56px 5xl: 80px 6xl: 150px rounded: none: 0px sm: 8px md: 12px lg: 16px xl: 24px pill: 56px full: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 16px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-ghost: backgroundColor: "{colors.glass-medium}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px button-ghost-hover: backgroundColor: "{colors.glass-dim}" textColor: "{colors.ink}" button-dim: backgroundColor: "{colors.glass-dim}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 12px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" padding: 16px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" card-feature: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px card-showcase: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 0px badge-plan: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 12px badge-plan-team: backgroundColor: "{colors.accent-purple}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 12px badge-plan-super: backgroundColor: "{colors.accent-green-teal}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 12px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" code-block: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.mono-code}" rounded: "{rounded.sm}" padding: 12px section-label: textColor: "{colors.ink-secondary}" typography: "{typography.label}" padding: 0px --- # Spline Design System ## Overview Spline's website is a cinematic portal into a three-dimensional world — and it knows it. The entire experience is anchored on a near-black canvas (`{colors.background}`) that is neither a pure void nor a warm charcoal, but something in between: a dark room where the walls themselves seem to glow with latent depth. Against this backdrop, white type, frosted-glass cards, and product demos of glowing 3D scenes create the impression that you are already inside the tool, not just reading about it. The typography is a statement of authorship. Spline uses its own typeface — Spline Sans — a clean geometric sans-serif that carries quiet authority at weight 500 for headings and relaxes into weight 400 for body text. There is nothing compressed or baroque about it: letter-spacing is neutral (no extreme negative tracking, no deliberate squeezing), and line-heights read as generous for comfortable multi-line display. The typeface says "we built a tool, we named the font after it, and we ship it inside the app itself." A companion monospace, Spline Sans Mono, handles code snippets. Brockmann (a custom display face named after the legendary Swiss designer Josef Müller-Brockmann) makes brief appearances as a display variant, nodding to the rigorous grid heritage that underlies even the most playful 3D design. The color system is the most expressive element: behind the reserved black-and-white product shell is an entire palette of named accents — electric blue (`{colors.primary}`), neon purple (`{colors.accent-purple}`), teal green (`{colors.accent-green-teal}`), hot pink (`{colors.accent-pink}`), golden yellow (`{colors.accent-yellow}`) — that map to subscription plans, community features, and promotional sections. This system says: the default experience is focused and dark, but the tool can become anything, and the site hints at that possibility by hiding this chromatic vocabulary just beneath the surface. **Key Characteristics:** - Near-black canvas (`{colors.background}`) — not pure black, but a cool deep grey that lets 3D renders pop - Custom Spline Sans typeface at weight 500 for headings, 400 for body — no extreme weight gymnastics - Single strong blue accent (`{colors.primary}`) for CTAs and interactive states — restrained on a dark canvas - Frosted-glass button and card variants using `{colors.glass-dim}` — transparent-feeling surfaces on dark - Rounded rectangle geometry: `{rounded.sm}` (8px) through `{rounded.lg}` (16px) dominate — no sharp edges, no full pills on primary CTAs - Rich secondary accent palette (purple, teal, pink, yellow, red) mapped to product tiers and features - 0.2s `ease` transitions on all interactive elements — snappy, tool-like - Spline Sans Mono for inline code; surface cards for code block containment - Product showcase 3D thumbnails as the hero marketing content — the renders ARE the pitch - Marquee animation (100s linear) for scrolling community content — motion as ambient texture ## Colors ### Primary - **Near-Black** (`{colors.background}`): Primary canvas — the dark room that gives 3D content its cinematic quality. - **Raised Surface** (`{colors.surface}`): Card, panel, and showcase backgrounds on the dark canvas. - **Pure White** (`{colors.ink}`): All headings, body text, and UI labels. The dominant text color. ### Brand Accent - **Spline Blue** (`{colors.primary}`): The sole primary CTA color — "Get started," primary nav button, community section accents. Electric and direct. - **Blue Lighter** (`{colors.accent-blue-light}`): Hover and lighter blue contexts in feature sections. ### Secondary Accents (Plan + Feature Palette) - **Neon Purple** (`{colors.accent-purple}`): Team plan badge and accent color. - **Teal Green** (`{colors.accent-green-teal}`): Super plan primary. - **Teal Light** (`{colors.accent-teal-light}`): Super plan lighter highlights. - **Hot Pink** (`{colors.accent-pink}`): Playful promotional callouts and feature section accents. - **Golden Yellow** (`{colors.accent-yellow}`): Warning and attention-grabbing accents. - **Vibrant Red** (`{colors.accent-red}`): Error and destructive action states. ### Text States - **Muted Grey** (`{colors.ink-secondary}`): Secondary text, labels, metadata, and section subtitles. - **Dimmed White** (`{colors.ink-dim}`): Tertiary text on dark surfaces — placeholder text, de-emphasized captions. ### Borders - **Subtle Border** (`{colors.border-subtle}`): Near-invisible 1px divider on card surfaces. - **Medium Border** (`{colors.border-medium}`): Slightly brighter 1px border for video embeds and feature cards. ## Typography ### Font Family - **Primary**: `Spline Sans`, with fallbacks: `system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif` - **Monospace**: `Spline Sans Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace` - **Display accent** (limited use): `Brockmann` — a custom geometric display face referencing Swiss typographic heritage ### Hierarchy | Token | Use | |---|---| | `display-hero` | 58px Spline Sans 500 — homepage hero, section hero statements | | `heading-section` | 40px weight 500 — major section headlines | | `heading-feature` | 36px weight 500 — feature highlight headings | | `heading-card` | 24px weight 400 — card subtitles, relaxed hierarchy | | `heading-card-medium` | 24px weight 500 — card headings needing emphasis | | `sub-heading` | 20px weight 500 — sub-section labels | | `body-large` | 18px weight 400 — product descriptions, intro paragraphs | | `body` | 16px weight 400 — standard body copy, nav links | | `body-medium` | 16px weight 500 — emphasized body text, pricing highlights | | `button-ui` | 16px weight 400 — button labels, CTA text | | `label` | 14px weight 500 — meta labels, plan badges, card metadata | | `caption` | 12px weight 400 — footnotes, timestamps, thumbnail credits | | `mono-code` | 14px Spline Sans Mono — code snippets, embed previews | ### Principles - **Brand ownership**: Spline Sans is designed by Spline itself — the marketing site and the tool share a typeface, creating a direct feedback loop between marketing aesthetic and product feel. - **Weight restraint**: The system uses only weight 400 and 500. No light 300, no bold 700. The binary creates clear hierarchy without spectacle. - **Neutral tracking**: Letter-spacing defaults to 0 throughout — unlike compressed dark-tool peers (Framer, Linear), Spline doesn't compress its headlines. The confidence is in shape, not tightening. - **Generous line-heights**: Body text at 1.50–1.56 reads comfortably at 16–18px on dark surfaces, compensating for the low-contrast environment. - **Mono for product context**: `{typography.mono-code}` used for code and embed previews, signaling technical depth without dominating. ## Layout ### Spacing System Base unit is **8px**, extended with 6px for micro gaps. Scale lives in YAML — `xs` (6px) through `6xl` (150px). Section padding reaches 80–150px vertically; internal card spacing clusters around 24–32px. ### Grid & Container - Max content width: ~1200px, centered - Hero: full-bleed dark canvas with centered or split content - Feature sections: 2-column (text + 3D visual) at desktop, stacking at mobile - Showcase gallery: multi-column grid of 3D scene thumbnails - Community section: horizontal marquee (100s linear scroll) ### Whitespace Philosophy - **Dark void as whitespace**: The near-black canvas (`{colors.background}`) IS the whitespace — generous vertical padding between sections reads as depth, not emptiness. - **Cards float**: Surface cards (`{colors.surface}`) on the dark ground feel suspended, like objects lit in a studio. - **Dense product grids**: The scene/template gallery intentionally packs cards with minimal gap, showing the breadth of 3D use cases. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow — dark canvas alone | Page background, text sections | | Card (Level 1) | `{colors.surface}` on `{colors.background}` — contrast-based separation | Feature cards, pricing panels | | Hover (Level 2) | `{colors.surface-hover}` — slightly lighter surface | Card hover states | | Border (Level 1b) | 1px `{colors.border-medium}` — subtle outline | Video embeds, media containers | | Focus Ring | 2px `{colors.focus-ring}` outline | Interactive focus state | **Shadow Philosophy**: Spline avoids traditional drop shadows entirely. Depth comes from surface contrast — slightly lighter card backgrounds on a near-black void create the impression of floating objects. This mirrors how 3D objects are lit: ambient background vs rendered surface, no painterly shadow required. The 3D scenes embedded in the UI carry their own sense of depth, making external shadow systems redundant. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved for edge-to-edge media | | `sm` | 8px | Code blocks, small buttons, thumbnails | | `md` | 12px | Standard buttons (including primary CTA), inputs | | `lg` | 16px | Cards, feature panels, video containers — most common | | `xl` | 24px | Larger panel containers | | `pill` | 56px | Plan/tier badges | | `full` | 9999px | Avatar images, circular icons | The dominant radius is `{rounded.lg}` (16px) — Spline's cards and containers lean rounded, creating a soft, modern toolkit feel. Primary CTA buttons use `{rounded.md}` (12px), a slightly tighter radius than the surrounding cards, providing visual differentiation. The system avoids both razor-sharp squares and extreme pill shapes on its main interactive elements. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Spline Blue (`{colors.primary}`) background, white text, 12px radius, 16px 24px padding. The dominant CTA ("Get started — it's free"). Confident and direct. - **`button-ghost`** — Frosted glass background (`{colors.glass-medium}`) with white text — secondary actions and "Learn more" links. Blends with dark surfaces. - **`button-dim`** — Ultra-subtle frosted glass (`{colors.glass-dim}`) used for utility buttons like "Copy Code" on code blocks. ### Cards - **`card`** — The workbench of the UI. Near-black surface (`{colors.surface}`) with 16px radius and 24px padding. Hover state lifts slightly to `{colors.surface-hover}`. - **`card-feature`** — Generous 32px padding for hero feature explanations. - **`card-showcase`** — Zero padding to let 3D scene thumbnails bleed to the card edge. ### Plan Badges - **`badge-plan`** — Spline Blue, pill shape, 14px medium. Used for "Free" plan tagging. - **`badge-plan-team`** — Neon purple (`{colors.accent-purple}`), Team plan. - **`badge-plan-super`** — Teal green (`{colors.accent-green-teal}`), Super plan. Each plan has a distinct accent color — the palette IS the pricing tier system. ### Navigation - **`nav-bar`** — Dark background, white Spline Sans body text for links, blue primary CTA button right-aligned. Transitions background on scroll via 0.2s `ease`. ### Code Blocks - **`code-block`** — Slightly raised surface card, `{typography.mono-code}`, `{rounded.sm}`. Button-dim copy affordance overlaid top-right. ## Do's and Don'ts ### Do - Set the canvas to `{colors.background}` — the near-black is non-negotiable; switching to pure black loses the warmth that makes surfaces readable - Use `{colors.primary}` exclusively for primary CTAs and interactive focus — Spline Blue is reserved, not decorative - Apply `{rounded.lg}` (16px) to cards and containers — it's the signature soft-rectangle shape of the system - Use weight 500 for all headings and 400 for body — the binary weight system is deliberate - Allow 3D scene renders to bleed to card edges in showcase contexts — the product content IS the visual hierarchy - Map secondary accents to tier/plan context only — purple = Team, teal = Super, no freestyle reuse - Keep neutral tracking (letterSpacing 0) on all text — do not introduce negative tracking; this isn't a compressed-type system - Use `{colors.glass-dim}` / `{colors.glass-medium}` for secondary button backgrounds — never solid mid-grey ### Don't - Don't swap `{colors.background}` for pure `#000000` — Spline's black has warmth and barely-there cool blue undertone - Don't use `{colors.accent-purple}` or `{colors.accent-pink}` outside their designated tier/feature contexts — these are semantic, not decorative - Don't add drop shadows — depth is expressed through surface contrast and embedded 3D geometry, not painted shadows - Don't use pill buttons (`{rounded.pill}`) for primary CTAs — save the extreme radius for plan badges and avatars only - Don't introduce serif or condensed display typefaces — Brockmann appears only in limited brand moments, not as a general heading substitute - Don't over-compress type hierarchy with extreme negative letter-spacing — this system breathes with neutral 0px tracking - Don't break the dark-first rule with light-background sections — the sole exception is edge cases like error/warning contexts using semantic accent colors - Don't use `{colors.ink-secondary}` (#888888) for prominent body copy — it fails contrast requirements on the dark surface; reserve for metadata only --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <480px | Single column, collapsed nav, minimal padding | | Mobile | 480–768px | Single column, stacked features, hero text scales down | | Tablet | 768–960px | 2-column begins for some sections, nav partially visible | | Desktop | 960–1200px | Full 2-column feature sections, gallery grid expands | | Large Desktop | >1200px | Max content width ~1200px, centered on dark canvas | ### Touch Targets - Primary CTA buttons: 16px 24px padding yields ~48px height — meets WCAG 44px minimum - Nav links: 16px body text with comfortable surrounding padding - Showcase cards: Full-card tap target on mobile ### Collapsing Strategy - **Navigation**: Horizontal nav with blue CTA → hamburger menu with overlay at mobile breakpoint - **Hero text**: 58px display → 40px → ~28px across breakpoints, maintaining weight 500 - **Feature sections**: Side-by-side (text + 3D visual) → stacked vertically on tablet and below - **Showcase gallery**: Multi-column grid (4–5 col) → 2-column → 1-column on mobile - **Section spacing**: 150px desktop section gaps → 80px → 40px on mobile ### Image Behavior - 3D scene thumbnails are responsive within grid containers — they never crop, they reflow - Video embeds within cards maintain aspect ratio with 16px border-radius clip - Logo and nav assets are SVG/PNG, scale cleanly across all sizes --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (near-black void) - Text: `{colors.ink}` (white) - Secondary text: `{colors.ink-secondary}` (#888888) - Primary CTA: `{colors.primary}` (Spline Blue) - Card surface: `{colors.surface}` - Border: `{colors.border-medium}` - Ghost button: `{colors.glass-medium}` ### Example Component Prompts - "Create a hero section on `{colors.background}` canvas. Headline: 58px Spline Sans weight 500, letterSpacing 0, lineHeight 1.24, `{colors.ink}` text. Sub-headline: 18px weight 400, lineHeight 1.56, `{colors.ink-secondary}`. Below: a blue CTA button — `{colors.primary}` background, `{colors.on-primary}` text, `{rounded.md}` radius, 16px 24px padding — next to a ghost button in `{colors.glass-medium}` with same radius." - "Design a feature card on `{colors.surface}` with `{rounded.lg}` radius and 32px padding. Card heading: 24px Spline Sans weight 500, `{colors.ink}`. Body: 16px weight 400, `{colors.ink-secondary}`, lineHeight 1.5. Hover state transitions background to `{colors.surface-hover}` in 0.2s ease. 1px `{colors.border-medium}` border for definition." - "Build a pricing tier card. Header area: 24px weight 500 plan name in `{colors.ink}`. Plan badge: `{colors.accent-purple}` background, white text, 14px weight 500, `{rounded.pill}` radius, 4px 12px padding (Team plan). Price: 40px weight 500. Feature list: 14px weight 400, `{colors.ink-secondary}`. CTA: full-width `{colors.primary}` button, `{rounded.md}`, 16px 24px padding." - "Create a navigation bar with `{colors.background}` background. Logo left. Center links: 16px Spline Sans weight 400, `{colors.ink}`, 0.2s ease hover on color. Right side: 'Log In' in `{colors.ink}` + 'Get Started' button in `{colors.primary}` with `{colors.on-primary}` text, `{rounded.md}` radius, 12px 20px padding. On scroll: nav background transitions to `{colors.surface}` with 0.2s ease." - "Design a 3D scene showcase card with zero padding, `{rounded.lg}` radius, and `{colors.surface}` background. The image or canvas render bleeds to all four edges — no internal padding. Below the visual: a metadata strip with creator avatar (32px, `{rounded.full}`), scene title in 14px weight 500, category label in 12px weight 400 `{colors.ink-secondary}`. Hover: card background brightens to `{colors.surface-hover}` in 0.2s ease-in-out." ### Iteration Guide 1. Start with the near-black canvas (`{colors.background}`) — the slightly warm dark ground is what separates 3D content from a flat void. 2. Typography: Spline Sans weight 500 for any heading, 400 for body — no intermediate weights, no extreme tracking. 3. Blue CTA (`{colors.primary}`) appears once per major section — treat it as a stamp, not decoration. 4. Cards use `{rounded.lg}` (16px) — the softest radius that still reads as "rectangle tool." Smaller buttons use `{rounded.md}` (12px). 5. Secondary accents (purple, teal, pink) are plan/tier-coded — if you're building a generic section, stay with `{colors.primary}` and `{colors.ink-secondary}`. 6. All hover transitions: 0.2s ease. No cubic-bezier experiments — keep it tool-responsive. 7. Depth is surface-on-surface: `{colors.surface}` on `{colors.background}`. Do not introduce drop shadows — let the 3D content provide the dimensional drama. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Spline. Brand names and trademarks belong to their respective owners.