Skip to main content

Design language comparison

Convex vs xAI

Both Convex and xAI commit to a light-canvas approach, and they pair different display families (gtAmerica vs -apple-system). Beyond surface, motion levels are both subtle.

Palette · side by side

Up to 8 dominant swatches each

Side A · light

Convex

Full Page

#141414

foreground

#ffffff

background

#f7f1ff

background

#38383a

background

#a9a9ac

foreground

#000000

foreground

#525053

foreground

#fc618d

accent

Side B · light

xAI

Full Page

#404040

foreground

#595959

foreground

#0051c3

brand

#000000

foreground

#ffffff

background

#ebebeb

background

Typography · side by side

Primary family + weight ladder + sample

Side A · light

Convex

Full Page

Display
gtAmerica
Body
Archivo
Mono
ui-monospace
Weights
400 · 500 · 700

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 · light

xAI

Full Page

Display
-apple-system
Body
Times New Roman
Weights
300 · 400 · 600

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 · light

Convex

Full Page

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

Side B · light

xAI

Full Page

Base unit
4 px
Container max
1536 px
3px
5px
15px
23px
30px
40px
60px

Motion vocabulary · side by side

Level + durations + easings

Side A · light

Convex

Full Page

Level
subtle
Libraries

Durations

150ms300ms500ms

Easings

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

Side B · light

xAI

Full Page

Level
subtle
Libraries

Durations

0.15s

Easings

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

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. Spacing scales diverge entirely — agents porting components from one to the other should expect to re-derive the ladder, not interpolate.

Shared swatches (2)

#ffffff#000000

Curator verdict

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

Full Convex brief →Full xAI 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.