W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Spline
Spline is a browser-based 3D design and collaboration tool — Figma for three dimensions, with scene-based modeling, animation, and interactive 3D export. The brand voice is craft-forward, playful, and rendered-3D-confident. Visually, the identity is the cube mark in Spline Orange (#FF8B14) on a clean canvas with near-black body text and large 3D hero compositions.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/spline/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/spline/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Spline
Spline is a browser-based 3D design and collaboration tool — Figma for three dimensions, with scene-based modeling, animation, and interactive 3D export. The brand voice is craft-forward, playful, and rendered-3D-confident. Visually, the identity is the cube mark in Spline Orange (#FF8B14) on a clean canvas with near-black body text and large 3D hero compositions.
Tags: saas, design-tools, spline, three-d
Atoms
Palette
Spline · [email protected] · Proprietary — All Rights Reserved
Spline's brand palette, anchored on Spline Orange (#FF8B14) — the signature warm orange that carries the 3D-cube mark. The institutional voice pairs that orange with a clean white canvas and near-black body text on marketing surfaces, with strong use of 3D rendered hero imagery. Spline holds to a single committed brand hue.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
spline-orange |
Spline Orange | #FF8B14 |
spline-white |
Spline White | #FFFFFF |
spline-black |
Spline Black | #0E0E10 |
spline-canvas-dark |
Spline Canvas Dark | #0E0E10 |
spline-surface-light |
Spline Surface Light | #F5F5F7 |
spline-surface-dark |
Spline Surface Dark | #1E1E22 |
spline-text-secondary |
Spline Text Secondary | #6B6B73 |
spline-text-tertiary |
Spline Text Tertiary | #9D9DA8 |
spline-orange-hover |
Spline Orange Hover | #FFA640 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
spline-white |
#FFFFFF |
surface |
spline-surface-light |
#F5F5F7 |
surface-elevated |
spline-white |
#FFFFFF |
text-primary |
spline-black |
#0E0E10 |
text-secondary |
spline-text-secondary |
#6B6B73 |
text-tertiary |
spline-text-tertiary |
#9D9DA8 |
primary |
spline-orange |
#FF8B14 |
primary-hover |
spline-orange-hover |
#FFA640 |
accent |
spline-orange |
#FF8B14 |
accent-hover |
spline-orange-hover |
#FFA640 |
warning |
spline-orange |
#FF8B14 |
warning-hover |
spline-orange-hover |
#FFA640 |
error |
spline-orange |
#FF8B14 |
success |
spline-orange |
#FF8B14 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
spline-canvas-dark |
#0E0E10 |
surface |
spline-surface-dark |
#1E1E22 |
surface-elevated |
spline-surface-dark |
#1E1E22 |
text-primary |
spline-white |
#FFFFFF |
text-secondary |
spline-text-tertiary |
#9D9DA8 |
text-tertiary |
spline-text-secondary |
#6B6B73 |
primary |
spline-orange |
#FF8B14 |
primary-hover |
spline-orange-hover |
#FFA640 |
accent |
spline-orange |
#FF8B14 |
accent-hover |
spline-orange-hover |
#FFA640 |
warning |
spline-orange |
#FF8B14 |
warning-hover |
spline-orange-hover |
#FFA640 |
error |
spline-orange |
#FF8B14 |
success |
spline-orange |
#FF8B14 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
spline-orange |
#FF8B14 |
on-identity |
spline-white |
#FFFFFF |
primary |
spline-orange |
#FF8B14 |
primary-hover |
spline-orange-hover |
#FFA640 |
accent |
spline-orange |
#FF8B14 |
accent-hover |
spline-orange-hover |
#FFA640 |
success |
spline-orange |
#FF8B14 |
warning |
spline-orange |
#FF8B14 |
error |
spline-orange |
#FF8B14 |
background-light |
spline-white |
#FFFFFF |
background-dark |
spline-canvas-dark |
#0E0E10 |
surface-light |
spline-surface-light |
#F5F5F7 |
surface-dark |
spline-surface-dark |
#1E1E22 |
text-primary-light |
spline-black |
#0E0E10 |
text-primary-dark |
spline-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark
- allowed: spline-orange, spline-white, spline-black
- forbidden: any-non-brand-color
The Spline cube mark renders in Spline Orange as the canonical fill. Recoloring the mark into off-brand hues violates Spline's brand-use guidance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill
Spline's brand surfaces prohibit stretching, rotating, recoloring, or applying decorative effects to the cube mark.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Spline Black (#0E0E10) on Spline White (#FFFFFF) clears AA at very high contrast.
variantSelection → logo
- use:
logo-light - when:
backgroundColorScheme="dark"
On dark surfaces, place the orange cube against the dark canvas (clears AA at large sizes) or use a monochrome white variant for small wordmark lockups.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
Spline's trademark guidance forbids use of the Spline name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Spline-skinned surfaces must clear AA on body text; Spline Orange must not be used as a body-text color on light backgrounds because it fails AA.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Spline's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident, craft- forward voice of the brand.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: spline-white, spline-black, spline-surface-light
Spline Orange is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, craft-forward voice of the brand surface.
Provenance
- Source: https://spline.design/
- License:
Proprietary — All Rights Reserved - Attribution: Spline and the Spline logo are trademarks of Spline, Inc. The primary brand color Spline Orange (#FF8B14) is documented on Spline's brand surfaces. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Spline name and mark is governed by Spline's brand-use guidance at spline.design.
- Imported:
2026-05-18 - Notes: Spline's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Spline
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Spline
A clear hierarchy in Spline's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ spline-orange #FF8B14 accent-hover
→ spline-orange-hover #FFA640 background-dark
→ spline-canvas-dark #0E0E10 background-light
→ spline-white #FFFFFF error
→ spline-orange #FF8B14 identity
→ spline-orange #FF8B14 on-identity
→ spline-white #FFFFFF primary
→ spline-orange #FF8B14 primary-hover
→ spline-orange-hover #FFA640 success
→ spline-orange #FF8B14 surface-dark
→ spline-surface-dark #1E1E22 surface-light
→ spline-surface-light #F5F5F7 text-primary-dark
→ spline-white #FFFFFF text-primary-light
→ spline-black #0E0E10 warning
→ spline-orange #FF8B14 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from spline)
Light mode (14 roles)
accent
→ spline-orange accent-hover
→ spline-orange-hover background
→ spline-white error
→ spline-orange primary
→ spline-orange primary-hover
→ spline-orange-hover success
→ spline-orange surface
→ spline-surface-light surface-elevated
→ spline-white text-primary
→ spline-black text-secondary
→ spline-text-secondary text-tertiary
→ spline-text-tertiary warning
→ spline-orange warning-hover
→ spline-orange-hover Dark mode (14 roles)
accent
→ spline-orange accent-hover
→ spline-orange-hover background
→ spline-canvas-dark error
→ spline-orange primary
→ spline-orange primary-hover
→ spline-orange-hover success
→ spline-orange surface
→ spline-surface-dark surface-elevated
→ spline-surface-dark text-primary
→ spline-white text-secondary
→ spline-text-tertiary text-tertiary
→ spline-text-secondary warning
→ spline-orange warning-hover
→ spline-orange-hover Rules (8 typed constraints)
error · 6 rules
colorChoice logo.mark allowed spline-orange, spline-white, spline-black forbidden any-non-brand-color The Spline cube mark renders in Spline Orange as the canonical fill. Recoloring the mark into off-brand hues violates Spline's brand-use guidance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill Spline's brand surfaces prohibit stretching, rotating, recoloring, or applying decorative effects to the cube mark.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Spline Black (#0E0E10) on Spline White (#FFFFFF) clears AA at very high contrast.
variantSelection logo use logo-light when backgroundColorScheme="dark" On dark surfaces, place the orange cube against the dark canvas (clears AA at large sizes) or use a monochrome white variant for small wordmark lockups.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain Spline's trademark guidance forbids use of the Spline name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Spline-skinned surfaces must clear AA on body text; Spline Orange must not be used as a body-text color on light backgrounds because it fails AA.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Spline's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident, craft- forward voice of the brand.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith spline-white, spline-black, spline-surface-light Spline Orange is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, craft-forward voice of the brand surface.
Provenance
- Source
- https://spline.design/
- License
Proprietary — All Rights Reserved- Attribution
- Spline and the Spline logo are trademarks of Spline, Inc. The primary brand color Spline Orange (#FF8B14) is documented on Spline's brand surfaces. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Spline name and mark is governed by Spline's brand-use guidance at spline.design.
- Imported
2026-05-18- Notes
- Spline's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog.