Skip to content

Tendly is live.

See Tendly
Design language comparison

Mistral vs TradingView

Two references, one frame. Palette, typography and the curator verdict for Mistral and TradingView, read side by side.

Palette & spacing overlap

Palette

Shared (1)

#ffffff

Mistral only

#fffaeb#1f1f1f#000000#fa520f#ecdaa2#3c3c3c

TradingView only

#0f0f0f#0000ee#707070#9c9c9c#ebebeb#ff9800#cc2f3c#06806b#22ab94#4a4a4a#131722#2e2e2e#f4f1db#b8b8b8

Spacing scale (px)

Shared (9)

2px4px8px12px16px20px24px32px48px

Mistral only

10px36px40px

TradingView only

6px28px30px

Typography

Display / body / mono + weight ladder

Side A · Light

Mistral

Display
Arial
Body
Arial

Weight ladder

400

Side B · Light

TradingView

Display
-apple-system
Body
-apple-system

Weight ladder

400500600700

Spacing scale

Base unit + container + first 8 steps

Side A · Light

Mistral

Base unit
4 px
Container
1280 px
2px
4px
8px
10px
12px
16px
20px
24px

Side B · Light

TradingView

Base unit
4 px
Container
1000 px
2px
4px
6px
8px
12px
16px
20px
24px

Motion vocabulary

Level + libraries + durations + easings

Side A · Light

Mistral

Level
subtle
Libraries
Framer Motion

Durations

200ms300ms

Easings

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

Side B · Light

TradingView

Level
subtle
Libraries
-

Durations

150ms200ms

Easings

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