Skip to main content

Design language comparison

Spline vs Wispr Flow

Both Spline and Wispr Flow commit to a dark-canvas approach, and they pair different display families (Spline Sans vs Figtree). Beyond surface, motion levels are both expressive.

Palette · side by side

Up to 8 dominant swatches each

Side A · dark

Spline

Full Page

#ffffff

background

#000000

foreground

#191a1d

foreground

#888888

foreground

#569cd6

accent

#0062ff

accent

#ce9178

accent

#6a9955

foreground

Side B · dark

Wispr Flow

Full Page

#1a1a1a

foreground

#000000

foreground

#ffff00

brand

#ffffeb

background

#dddddd

background

#ffffff

background

#8a8a80

foreground

#f0d7ff

background

Typography · side by side

Primary family + weight ladder + sample

Side A · dark

Spline

Full Page

Display
Spline Sans
Body
ui-monospace
Mono
ui-monospace
Weights
400 · 500

Sample

The quick brown fox jumps over the lazy dog.

1234567890 — Body sample renders in the captured family if your browser has it; otherwise system fallback signals the weight ladder.

Side B · dark

Wispr Flow

Full Page

Display
Eb garamond
Body
Figtree
Weights
400

Sample

The quick brown fox jumps over the lazy dog.

1234567890 — Body sample renders in the captured family if your browser has it; otherwise system fallback signals the weight ladder.

Spacing scale · side by side

Base unit + first 8 scale values

Side A · dark

Spline

Full Page

Base unit
4 px
Container max
652 px
2px
4px
6px
8px
10px
12px
14px
16px

Side B · dark

Wispr Flow

Full Page

Base unit
4 px
Container max
1240 px
2px
4px
8px
11px
14px
16px
20px
22px

Motion vocabulary · side by side

Level + durations + easings

Side A · dark

Spline

Full Page

Level
expressive
Libraries

Durations

0.2s100s

Easings

easeease-outease-in-outlinear

Side B · dark

Wispr Flow

Full Page

Level
expressive
Libraries
GSAP, Rive

Durations

300ms600ms900ms

Easings

cubic-bezier(0.16, 1, 0.3…cubic-bezier(0.22, 1, 0.3…

Palette & spacing overlap

Their palettes share 17% of swatches at the dominant tier — a quiet signal both teams drew from the same neutral library before applying brand accents. Their spacing scales overlap by 58% (2, 4, 8, 14, 16 px shared) — a rhythm any agent can transfer between the two systems with minimal recalibration.

Shared swatches (2)

#ffffff#000000

Curator verdict

If you are building an interface that needs to reference both, Spline's restraint reads as the safer default and Wispr Flow's rhythm provides the accent moments — pair them at section-level, not at component-level.

Full Spline brief →Full Wispr Flow brief →Back to gallery

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.