What makes TradingView's design language stand out?

TradingView is the rare financial-charting platform landing that decided system fonts could be the entire typographic identity — yes, the real -apple-system stack, no premium grotesque licensing, no display webfont preload. We catalogued it because most financial platforms reach for either Bloomberg-corporate display fonts or Robinhood-style consumer playfulness.

What fonts and palette does TradingView use?

The type system is -apple-system. The palette sits on a light canvas around #0F0F0F, #FFFFFF, #0000EE and #707070.

Can I transfer TradingView's design language to my product?

The patterns transfer without cloning. Study system fonts as entire identity — TradingView ships -apple-system stack and the page reads as premium because the data does the talking. The ai2 Design brief packages TradingView's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

fintech · saas

TradingView

A financial-charting platform built on data-density system-font pragmatism — -apple-system throughout, a classic-web #0000ee blue CTA, market-state semantic colours (red, green, orange). Zero motion library.

www.tradingview.comAdded 2026-05-17

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in TradingView’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

TradingView's design language is data-density system-font pragmatism. Pure white canvas; #0f0f0f text; -apple-system + system-ui stack throughout; classic-web blue #0000ee as primary CTA; market-state semantic colours (red/green/orange) only as state signals; zero motion library. Brand reads as a trading terminal that learned how to whisper marketing.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (#ffffff dominant ground ~623 refs, #0f0f0f primary text dominant ~3,145 refs, #0000ee classic-web blue primary CTA accent ~554 refs, #707070 muted dark grey secondary text, #9c9c9c lighter muted grey tertiary, #ebebeb border, market-state semantic colours: #ff9800 orange warning, #cc2f3c red loss/sell, #06806b green confirm/buy, #22ab94 teal accent), -apple-system + system-ui stack as entire UI typography (sizes 11-18px, weights 400/500/600/700), spacing scale 2/4/6/8/12/16/20/24, container ladder 828/1000 (tight reading widths), custom breakpoints sm=320 md=768 lg=958 xl=1214 2xl=1440, zero motion library, 2 catalogued gradients (atmospheric only). Treat #0000ee as primary CTA accent. Treat market-state colours as semantic state signals never decoration. Apply the language, not the source brand's copy.

Layout: Data-density single-column flow with tight 828-1000px reading rail.
Content width: 828px or 1000px (tight density).
Framing: Trading terminal that learned marketing — system fonts + semantic colours.
Grid strength: Density-focused — content width tight, no wide editorial sprawl.

Pure white canvas; #0f0f0f text at extreme contrast; classic-web blue #0000ee CTA; market-state semantic colours.

Mode strategyLight-first canvas with potential dark-mode product (charts) inside.

#ffffff dominant ground
#0f0f0f primary text
#0000ee classic-web blue primary CTA
#707070 muted dark grey secondary
#9c9c9c lighter muted tertiary
#ebebeb border
#ff9800 orange warning state
#cc2f3c red loss/sell state
#06806b green confirm/buy state
#22ab94 teal accent state

Gradients (paste-ready)

2 catalogued — atmospheric depth, restrained

-apple-system + system-ui stack for entire UI
Sizes 11/14/16/18px catalogued, weights 400/500/600/700
Letter-spacing 0
Line-height 1.5 body, 1.05 display
Weight ladder: 400 body, 500-600 emphasis, 700 hero display

4px base, scale 2/4/6/8/12/16/20/24
Section vertical rhythm 64-96px (compressed for data density)
Card padding 16-24px

Surface styleFlat with hairline borders. Cards on white with 1px #ebebeb border.

0 drop shadow on marketing chrome
1px #ebebeb hairline border on cards/tables
Market-state colours used as semantic background tints only

Techniques

Data card

bg white, 1px #ebebeb border, 6-8px radius, padding 16-24px.

Market-state cell

bg green-tinted or red-tinted at 8% opacity for buy/sell rows.

Radii4 / 6 / 8 / 12Icon treatmentStroke 1.5px monoline.Icon setsCustom monoline set

Buttons 4-8px radius
Cards 6-8px radius

Primary CTA (start free trial)
background
#0000ee
textColor
#ffffff
fontFamily
-apple-system, system-ui, sans-serif
fontWeight
500
fontSize
14px
padding
10px 18px
borderRadius
6px
shadow
none
hover
background shifts to #1a1aff
Tailwind
```
inline-flex items-center gap-2 rounded-md bg-[#0000ee] px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#1a1aff]
```
Data table row
background
#ffffff
border
1px solid #ebebeb
padding
8px 12px
fontFamily
-apple-system, system-ui
fontSize
13px
Tailwind
```
border border-[#ebebeb] bg-white px-3 py-2 font-sans text-[13px]
```
Market-state badge (buy/sell)
background
rgba(6,128,107,0.10)
textColor
#06806b
fontFamily
-apple-system
fontSize
11px
padding
2px 6px
borderRadius
4px
fontWeight
600
textTransform
uppercase
Tailwind
```
rounded bg-[#06806b]/10 px-1.5 py-0.5 text-[11px] font-semibold uppercase text-[#06806b]
```

LevelsubtleDurations150ms / 200ms

Easings

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

HoverCTA bg shift, Table row highlight

Scroll patterns

CSS-only fade-in

Motion lives inside the product (charts), not marketing

Hover shifts colour/background, never position
Focus rings: 2px classic blue #0000ee
Active state 95% opacity

Approachmobile-first

Custom: sm=320 md=768 lg=958 xl=1214 2xl=1440 — heavily customised for charts.

<768: data tables horizontal-scroll, 320px tight gutters
768-958: 720px content rail
≥958: full 828-1000px reading rail

Black on white passes AAA
Classic blue #0000ee on white passes AA (8.6:1)
Market-state colours tested for colour-blindness (red/green pairing problematic — use shapes/labels)
Focus visible always

Next.js or similar (assumed)System font stack -apple-systemNo motion library

Typography (system) + market-state colours = entire identity. Charts/data inside product.

Zero webfont overhead
System fonts render fast at all sizes
Custom breakpoints for chart-density

Use -apple-system + system-ui stack
Reserve #0000ee classic blue for primary CTAs
Use market-state colours (red/green/orange) only as semantic state
Keep ground pure white

Don't add webfont overhead — system stack is the discipline
Don't paint button backgrounds in market-state colours
Don't widen container beyond 1000px
Don't add motion library to marketing

Light-first canvas — dark-mode lives inside product charts
Type stack: -apple-system + system-ui only
Single CTA accent: #0000ee classic blue

Font-family grep: -apple-system + system-ui only
Background dominant: #ffffff
Classic blue #0000ee on primary CTAs
Market-state colours: badge/text only, not fills
Container max-width: 1000px

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 2 nodes across 2 levels, shallow to deep by color.

body1
- div (×6)

Accessibility

176 combinations - 64 pass AA - 38 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #0F0F0F
bg: #FFFFFF
APCA Lc: +106
Use: foreground on background

fg: #FFFFFF
bg: #0F0F0F
APCA Lc: -108
Use: background on foreground

fg: #FFFFFF
bg: #131722
APCA Lc: -107
Use: background on background

fg: #131722
bg: #FFFFFF
APCA Lc: +105
Use: background on background

fg: #0F0F0F
bg: #F4F1DB
APCA Lc: +97
Use: foreground on accent

fg: #F4F1DB
bg: #0F0F0F
APCA Lc: -98
Use: accent on foreground

fg: #0F0F0F
bg: #EBEBEB
APCA Lc: +94
Use: foreground on background

fg: #EBEBEB
bg: #0F0F0F
APCA Lc: -94
Use: background on foreground

fg: #131722
bg: #F4F1DB
APCA Lc: +96
Use: background on accent

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

svg57 · 71%
png20 · 25%
webp3 · 4%

Hero image

https://static.tradingview.com/static/bundles/space-desktop.a262e30221f5eb9925ba.webp

Format: WEBP
Dimensions: 8000x4940
Loading: auto
srcset: no

Industry: fintech
Industry: saas
Theme: Light
Added: 2026-05-17

FAQ

Questions people ask about TradingView

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

TradingView

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Hero image

Questions people ask about TradingView

TradingView

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Hero image

Questions people ask about TradingView

01What makes TradingView's design language stand out?

02What fonts and palette does TradingView use?

03Can I transfer TradingView's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language