Skip to main content

Design language comparison

Plain vs Plasticity

Both Plain and Plasticity commit to a dark-canvas approach, and they pair different display families (sans-serif vs matter). Beyond surface, motion levels are both subtle.

Palette · side by side

Up to 8 dominant swatches each

Side A · dark

Plain

Full Page

#000000

foreground

#0a2414

brand

#17b267

brand

#0000ee

accent

#f3fbe9

background

#ffffff

background

#1f1f28

foreground

#f9f6f1

background

Side B · dark

Plasticity

Full Page

#ffffff

background

#000000

foreground

#68ff21

brand

#3fd2fb

accent

#f365ff

accent

#ffb801

accent

#212121

foreground

Typography · side by side

Primary family + weight ladder + sample

Side A · dark

Plain

Full Page

Display
ABC Favorit Regular
Body
sans-serif
Mono
Geist Mono
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.

Side B · dark

Plasticity

Full Page

Display
fkGrotesk
Body
matter
Mono
auxMono
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

Plain

Full Page

Base unit
4 px
Container max
1200 px
4px
8px
10px
12px
16px
20px
24px
30px

Side B · dark

Plasticity

Full Page

Base unit
4 px
Container max
896 px
2px
4px
6px
8px
10px
12px
16px
20px

Motion vocabulary · side by side

Level + durations + easings

Side A · dark

Plain

Full Page

Level
subtle
Libraries
Framer Motion

Durations

0.4s

Easings

cubic-bezier(0.44, 0, 0.5…

Side B · dark

Plasticity

Full Page

Level
subtle
Libraries

Durations

150ms220ms

Easings

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

Palette & spacing overlap

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

Shared swatches (2)

#000000#ffffff

Curator verdict

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

Full Plain brief →Full Plasticity 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.