Skip to main content

Design language comparison

Railway vs Supabase

Both Railway and Supabase commit to a dark-canvas approach, and they pair different display families (Inter vs Circular). Beyond surface, motion levels are both moderate.

Palette · side by side

Up to 8 dominant swatches each

Side A · dark

Railway

Full Page

#33323e

neutral

#f7f7f8

background

#000000

foreground

#868593

background

#296852

accent

#a1a0ab

foreground

#509ee3

accent

#a41e11

accent

Side B · dark

Supabase

Full Page

#dfdfdf

neutral

#171717

foreground

#000000

foreground

#b2b2b2

foreground

#707070

foreground

#ffffff

background

#525252

foreground

#c7c7c7

neutral

Typography · side by side

Primary family + weight ladder + sample

Side A · dark

Railway

Full Page

Display
IBM Plex Serif
Body
Inter
Mono
JetBrains 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

Supabase

Full Page

Display
Circular
Body
Source Code Pro
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

Railway

Full Page

Base unit
4 px
Container max
1696 px
4px
6px
8px
12px
16px
24px
32px
40px

Side B · dark

Supabase

Full Page

Base unit
4 px
Container max
1600 px
1px
4px
6px
8px
10px
12px
16px
20px

Motion vocabulary · side by side

Level + durations + easings

Side A · dark

Railway

Full Page

Level
moderate
Libraries
Framer Motion

Durations

0.05s0.15s0.2s0.4s3s

Easings

cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)ease-outease-in-out

Side B · dark

Supabase

Full Page

Level
moderate
Libraries
Framer Motion

Durations

0.15s0.2s0.3s0.6s

Easings

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

Palette & spacing overlap

Their palettes share 5% 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, 6, 8, 12, 16 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, Railway's restraint reads as the safer default and Supabase's rhythm provides the accent moments — pair them at section-level, not at component-level.

Full Railway brief →Full Supabase 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.