TradingView Design System Deep Dive

1. Brand Overview

TradingView isn’t trying to be “pretty” in the way consumer brands do. This is a tool-first product for traders, analysts, and finance enthusiasts who spend hours staring at charts. The design philosophy leans toward functional minimalism with occasional bold accents. There’s a clear separation between content and chrome—most of the UI fades to neutral, letting data visualizations pop.

The vibe is utilitarian with subtle polish. It’s not flat like early Material Design, but it isn’t ornamental either. Rounded corners are used liberally (8px, 12px, 16px, even 24px in buttons), but they’re restrained—no giant pill shapes unless the component calls for it. Shadows exist, but they’re faint and rare, mostly for subtle layering (rgba(0, 0, 0, 0.2) at small offsets).

Color is where TradingView signals identity. While a massive functional palette exists (success greens, warning oranges, reds for negative states), the core brand blue #2962ff and a deep neutral black dominate CTAs and primary interactions. It’s the kind of blue that says “trust me, I’m finance,” and it contrasts well against the mostly neutral grays and whites.

Typography is straightforward: system fonts (-apple-system, system-ui, Trebuchet MS, Roboto, Ubuntu) dominate, with a single high-impact display style (EuclidCircularSemibold) reserved for large hero headings. This reinforces the product’s pragmatic nature—no decorative typefaces, just clarity and speed.

Overall, TradingView’s design system is data-first, distraction-free, with bold accents for actionable elements. If you’re designing for this brand, the rule is: let the charts breathe, keep the UI out of the way until it needs to guide the user.

2. Color System

2.1 Primary Colors

Primary semantic color: rgb(0, 0, 0) (#000000) in the token set, but in practice the signature brand accent is rgb(41, 98, 255) (#2962ff). This blue is used for primary buttons, links with emphasis, and active states. Black is the default text and high-contrast base for dark UI elements.

Psychology: Blue conveys trust, stability, and technical competence—critical in finance. Black keeps things serious and precise.

Compared to competitors (e.g., Robinhood’s green, Coinbase’s lighter blue), TradingView’s blue is deeper and more assertive. It reads less “startup” and more “professional terminal.”

2.2 Complete Palette

Here’s the full extracted palette from the live site:

Plus the hundreds of functional tokens (greens, reds, purples, yellows) in --color-* variables, e.g.:

• --color-container-fill-primary-success: #089981 — success actions
• --color-button-content-secondary-danger-default: #f23645 — destructive secondary
• --color-content-primary-warning-bold: #fb8c00 — warning text
• --color-overlay-accent-1-normal: #2962ff4d — semi-transparent blue overlay

TradingView’s palette is extremely granular. Colors are broken down into multiple lightness steps, accents, and overlays. This is a sign of a large design system that needs precise control over states in charts, heatmaps, and UI.

2.3 Color Relationships

Contrast is strong between text (#0f0f0f or #000000) and backgrounds (#ffffff or dark surfaces). The brand blue #2962ff passes WCAG AA easily against white and dark backgrounds.

Dark mode is inherently supported—many tokens have “neutral-extra-heavy” blacks and lighter grays for surfaces.

2.4 Usage Guide

Do:

• Use brand blue #2962ff for primary actions ONLY.
• Pair white text on black or dark surfaces for clarity.
• Use functional colors (--color-container-fill-primary-success, --color-button-content-secondary-danger-default) for state-specific UI.

Avoid:

• Mixing multiple accent colors in one component—TradingView keeps accents single-purpose.
• Using light tans/oranges outside their data/heatmap context.

3. Typography

3.1 Font Families

Two families in use:

1. EuclidCircularSemibold — custom, appears in hero headings. No fallbacks listed.
2. System stack: -apple-system, system-ui, Trebuchet MS, Roboto, Ubuntu — everywhere else.

No Google Fonts or Adobe Fonts. Variable fonts: false. This choice prioritizes performance and native rendering.

3.2 Type Scale

3.3 Hierarchy

The jump from 100px hero to 36px subheading is dramatic—hero text is clearly for marketing pages. Inside the app, the range is tighter: 28px down to 10px for labels. Weight shifts (400, 500, 600, 700) provide subtle hierarchy without relying on color.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints range from 300px to 2560px. Key ones: 768px (tablet), 1024px (desktop), 1440px (large desktop), 1920px (wide desktop). This indicates a fully responsive grid system, likely using Vuetify’s breakpoint model.

5. Visual Elements

Border Radius

Values range from 3px to 50%:

• 4px — buttons, small components
• 8px — tabs, standard buttons, cards
• 12px — cards, containers
• 16px — larger cards, sections
• 24px — pill-like buttons
• 50% — avatars, icon buttons

Shadows

Two shadows:

• rgba(0, 0, 0, 0.2) 0px 2px 4px — subtle depth
• A rare dual-color glow for special effects (probably marketing pages)

Borders

• 1px solid #ebebeb — card edges, dividers
• 1px solid #ffffff — inverted contexts
• 1px solid #000000 — high-contrast outlines

6. Components

6.1 Buttons

Variant: Skip Navigation

• Default: bg #ffffff, text #0f0f0f, padding 6px 20px, radius 0px
• Active: bg var(--color-container-fill-primary-neutral-extra-bold)
• Focus: box-shadow 0 0 0 6px var(--ui-lib-light-button-color-bg)

Variant: Search

• Default: bg #2e2e2e, text #8c8c8c, padding 6px, radius 40px
• Active: bg var(--_2-OBlG)

Variant: Round Tab

• Default: transparent bg, text #0f0f0f, padding 0px 11px, radius 14px
• Hover: bg rgba(255,255,255,0.24)

Variant: Square Tab

• Default: bg #f2f2f2, text #0f0f0f, padding 0px 16px, radius 8px

Variant: Broker Action

• Default: bg #000000, text #ffffff, padding 0px 11px, radius 6px, border 1px solid #000000

6.2 Links

Variants:

• White text (#ffffff) no underline
• Black text (#0f0f0f) no underline
• Link blue (#0000ee)
• Brand blue (#2962ff) weight 600

6.3 Forms

No extracted input styles—likely system defaults styled with Vuetify.

6.4 Cards

No explicit card data, but likely use neutral backgrounds (#f2f2f2), radius 12px or 16px, subtle shadow rgba(0,0,0,0.2).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary-neutral-heavy: #0f0f0f;
  --color-neutral-gray: #707070;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-light-gray: #f2f2f2;
  --color-brand-blue: #2962ff;
  --color-medium-gray: #808080;
  --color-light-tan: #ffe0b2;
  --color-light-orange: #ffcc80;
  --color-true-black: #000000;
  --color-light-border-gray: #dbdbdb;
  --color-semitransparent-white: color(srgb 1 1 1 / 0.2);

  /* Typography */
  --font-euclid-circular-semibold: 'EuclidCircularSemibold';
  --font-system: -apple-system, system-ui, 'Trebuchet MS', Roboto, Ubuntu;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-80: 80px;
  --space-120: 120px;

  /* Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.2) 0px 2px 4px;
}

8. AI Coding Assistant Prompt

# TradingView Design System Specification

You are a TradingView design expert. Build UIs matching their visual language exactly.

## Brand Context
TradingView's design system is functional, data-first, and distraction-free. It uses neutral bases with strong blue accents for interactive elements. Rounded corners and subtle shadows add polish without overwhelming the charts.

## Color Palette
- Primary Neutral Heavy: #0f0f0f — default text, dark surfaces
- Neutral Gray: #707070 — secondary text
- White: #ffffff — light backgrounds
- Link Blue: #0000ee — inline links
- Light Gray: #f2f2f2 — cards, neutral buttons
- Brand Blue: #2962ff — CTAs, primary links
- Medium Gray: #808080 — disabled states
- Light Tan: #ffe0b2 — heatmap highlights
- Light Orange: #ffcc80 — heatmap
- True Black: #000000 — text, borders
- Light Border Gray: #dbdbdb — dividers
- Semi-transparent White: rgba(255,255,255,0.2) — hover overlays

## Typography
Font families:
- Headings: 'EuclidCircularSemibold'
- Body/UI: -apple-system, system-ui, 'Trebuchet MS', Roboto, Ubuntu

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Hero H1 | 100px | 600 | 1.00 | Marketing hero |
| H1 | 36px | 600 | 1.22 | Main headings |
| H2 | 28px | 700 | — | Section headings |
| Body lg | 18px | 400 | 1.56 | Body text |
| Link | 18px | 600 | 1.33 | Emphasized links |
| Button | 16px | 500 | 1.50 | CTA buttons |
| Caption | 12px | 400 | 1.33 | Labels |
| Caption sm | 11px | 400 | 1.45 | Small labels |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 80px, 120px
Use these for padding, margins, and gaps.

## Border Radius
- sm: 4px — small buttons
- md: 8px — standard buttons, tabs
- lg: 12px — cards
- xl: 16px — large containers
- pill: 24px — pill buttons
- full: 50% — avatars, icon buttons

## Shadows & Depth
- Soft: rgba(0,0,0,0.2) 0px 2px 4px — subtle depth
Avoid heavy shadows.

## Components

### Primary Button
```css
.btn-primary {
  background: #2962ff;
  color: #ffffff;
  padding: 6px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1848cc; }
.btn-primary:focus { box-shadow: 0 0 0 6px rgba(41,98,255,0.2); outline: none; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: #f2f2f2;
  color: #0f0f0f;
  padding: 0px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
}
```

### Navigation Link
```css
.nav-link {
  color: #0000ee;
  text-decoration: none;
  font-weight: 400;
}
.nav-link:hover { text-decoration: underline; }
```

### Card
```css
.card {
  background: #f2f2f2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 4px;
}
```

## Layout & Responsive Rules
- Max content width: 1440px
- Page padding: 16px mobile / 24px desktop
- Breakpoints: 768px, 1024px, 1440px, 1920px

## Interaction Rules
- Transition timing: 150ms ease
- Focus indicators: 6px outline glow in blue
- Disabled: 50% opacity, no hover

## DO
- Use only palette colors
- Maintain 8px grid
- Use system font stack for body
- Reserve brand blue for CTAs
- Keep shadows subtle

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Apply brand blue to non-interactive elements

## Code Examples
```css
/* Primary Button */
.btn-primary { ... }

/* Secondary Button */
.btn-secondary { ... }

/* Card */
.card { ... }
```

9. Summary

TL;DR — TradingView’s design system is a toolkit for serious financial interfaces: neutral base, strong blue accents, tight spacing grid, and restrained depth. If you’re building for them, stay functional, keep the chrome out of the way, and let the data take center stage.

Brand Keywords:

• data-first
• functional-minimal
• finance-professional
• blue-accented
• grid-disciplined