Skip to main content

Design language comparison

Blackalgo vs Liveblocks

Both Blackalgo and Liveblocks commit to a dark-canvas approach, and they pair different display families (TWKLausanne vs suisse). Beyond surface, motion levels are both expressive.

Palette · side by side

Up to 8 dominant swatches each

Side A · dark

Blackalgo

Full Page

#ededf8

background

#e5e7eb

neutral

#000000

foreground

#ff587a

accent

#5fffd7

accent

#01010d

accent

#e9e9fb

background

#c9cafd

accent

Side B · dark

Liveblocks

Full Page

#ffffff

background

#000000

foreground

#918d8d

foreground

#fdfcfc

background

#bf7af0

accent

#b7b4b4

foreground

#635f5f

background

#6cefce

accent

Typography · side by side

Primary family + weight ladder + sample

Side A · dark

Blackalgo

Full Page

Display
TWKLausanne
Body
GeistMono
Mono
GeistMono
Weights
300 · 350 · 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

Liveblocks

Full Page

Display
suisse
Body
JetBrains Mono
Mono
JetBrains Mono
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.

Spacing scale · side by side

Base unit + first 8 scale values

Side A · dark

Blackalgo

Full Page

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

Side B · dark

Liveblocks

Full Page

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

Motion vocabulary · side by side

Level + durations + easings

Side A · dark

Blackalgo

Full Page

Level
expressive
Libraries

Durations

50ms100ms200ms250ms400ms

Easings

cubic-bezier(0.6, 0.6, 0, 1)cubic-bezier(0.76, 0, 0.2…linear(1 0%, 0.5 14.2857%…linear

Side B · dark

Liveblocks

Full Page

Level
expressive
Libraries
Framer Motion

Durations

100ms150ms200ms300ms

Easings

cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.4, 0, 0.2, 1)

Palette & spacing overlap

Their palettes share 6% 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 83% (2, 4, 6, 8, 10 px shared) — a rhythm any agent can transfer between the two systems with minimal recalibration.

Shared swatches (1)

#000000

Curator verdict

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

Full Blackalgo brief →Full Liveblocks 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.