TradingView

Overview

TradingView is a professional-grade market intelligence and charting platform designed for traders, investors, and financial professionals who demand precision, speed, and collaborative insight. The brand embodies a 'Data-Driven Minimalism' aesthetic—a sophisticated fusion of dark-mode professionalism with vibrant accent colors that signal actionable market data. The UI prioritizes clarity and density: every pixel serves analytical function, with deep navy-black backgrounds (#0f0f0f, #131722) providing visual rest while accent colors (violet #544afd, cyan #1cd6c0, orange #ff8a00) highlight critical market signals and CTAs. The emotional response is one of empowerment and control: users feel they are commanding a command center, not browsing a website.

The brand voice is direct, confident, and data-literate. TradingView speaks to its audience as peers—traders and investors who understand market terminology and value efficiency over marketing fluff. Vocabulary patterns include technical precision ('supercharged charting', 'real-time data', 'professional-grade tools'), community language ('100 million traders', 'taking the future into their own hands'), and action-oriented imperatives ('Get started for free', 'Join the community'). The tone avoids hype; instead, it conveys capability and scale. Example sentence in brand voice: 'Join 100 million traders and investors taking the future into their own hands.'

Colors

The color system is built on a dark-mode foundation optimized for extended screen time and data visualization. The primary surface stack uses near-black tones (#0f0f0f for base, #131722 for containers, #1f1f2e for elevated surfaces) to reduce eye strain and provide maximum contrast for chart data. Primary accent color is Violet (#544afd), used exclusively for interactive CTAs, focus states, and brand-critical UI elements—this is the 'call to action' color that signals user agency. Secondary accent is Cyan (#1cd6c0), deployed for positive market signals, success states, and supporting highlights. Tertiary accent is Orange (#ff8a00), reserved for warnings, market alerts, and secondary CTAs. Error red (#f23645) is used sparingly for loss indicators and critical warnings.

Usage rules: (1) Pri

Typography

The type system uses a two-family approach: EuclidCircularSemibold (via system fallback to -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif) for display and headline scales, and the same system stack for body and label text. This creates visual hierarchy without font-loading overhead. Display (56px, 600 weight, -0.02em tracking) is reserved for hero headlines like 'Where the world does markets'—use sparingly, only once per page. Headline-lg (40px, 600 weight) for section titles and major feature callouts. Headline-md (28px, 600 weight) for subsection headers. Title-lg (20px, 600 weight) for card titles and modal headers. Body-lg (18px, 400 weight, 28px line-height) for hero copy and prominent body text. Body-md (16px, 400 weight, 24px line-height) for standard pa

Layout

The layout uses a fluid 12-column grid with a max-width of 1280px, centered on the viewport. Page rhythm follows a 40px (lg spacing) vertical cadence for section separation, with 24px (md spacing) used for component-level spacing and 12px (sm spacing) for internal padding within cards and buttons. The hero section spans full viewport height with a dark background (#0f0f0f) and centered content; the primary CTA ('Get started for free') is positioned at 24px (md spacing) below the hero copy. Below the hero, sections are stacked with 40px (lg spacing) gutters. Container padding is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 8px (xs spacing) on mobile. White-space is generous and intentional: the design avoids cramping data or CTAs. Cards and panels use 24px (md

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering, avoiding the flat aesthetic while maintaining the dark-mode sophistication. Level 1 (Base): No shadow; surface (#0f0f0f) is the foundation. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: {colors.surface-container} (#131722), border: 1px solid {colors.surface-variant} (#1f1f2e). This is used for cards, input fields, and standard panels. Level 3 (Elevated/Modal): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), background: {colors.surface-container-high} (#1f1f2e), border: 1px solid {

Shapes

The shape philosophy is 'Technical Precision with Approachability'—rounded corners are used strategically to soften the industrial dark aesthetic without compromising the professional data-visualization feel. Buttons use {rounded.xl} (1.5rem / 24px) for the primary CTA ('Get started for free'), creating a pill-like affordance that signals importance. Secondary buttons and navigation items use {rounded.lg} (1rem / 16px). Input fields and search boxes use {rounded.DEFAULT} (0.5rem / 8px) or {rounded.md} (0.75rem / 12px) for a more contained, technical appearance. Cards and panels use {rounded.lg

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#544afd) background, {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 600 weight), {rounded.xl} (24px radius), and padding: 12px 32px for a 48px total height. On hover, transition to button-primary-hover with {colors.primary-container} (#6b5dff) and a 0.218s ease transition. On active/click, shift to button-primary-active (#4a3fe8) with an elevated shadow (0 6px 16px rgba(84, 74, 253, 0.3)). The button-secondary variant uses a transparent background with a 1px border in {colors.outline-variant} (#424242), {colors.on-surface} text, and the same padding/height. On hover, fill the background with {colors.surface-container-high} (#1f1f2e). Ghost buttons (button

Do's and Don'ts

**Do**

• Do use {colors.primary} (#544afd) exclusively for primary CTAs and focus states—never use it for decorative elements or backgrounds.
• Do maintain a minimum 40px vertical spacing ({spacing.lg}) between major sections to ensure visual breathing room and reduce cognitive load.
• Do apply the 0.218s transition duration consistently across all interactive state changes (hover, focus, active) for a cohesive, polished feel.
• Do use {typography.label-md} (14px, 600 weight) for all button and navigation text to signal affordance and maintain visual hierarchy.
• Do layer cards with {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) at rest and {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.2)) on hover to create subtle depth without visual chaos.
• Do reserve {rounded.xl} (24px) for primary CTAs and {rounded.lg} (16px) for cards/panels to create a clear visual distinction between action and container elements.
• Do use {colors.on-surface-variant} (#b2b5be) for secondary text and disabled states to maintain sufficient contrast (WCAG AA) while signaling reduced importance.
• Do apply box-shadow: 0 0 0 3px rgba(84, 74, 253, 0.1) on focus states for keyboard navigation to ensure accessibility without breaking the dark aesthetic.

**Don't**

• Don't use colors outside the defined palette—avoid adding custom hex values or gradients that aren't explicitly defined in the color token system.
• Don't apply shadows to text elements; instead, use color contrast, font-weight, and typography scale to establish hierarchy.
• Don't mix rounded-corner sizes arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use transition durations longer than 0.3s for interactive elements—this slows perceived responsiveness and frustrates users in a data-heavy context.
• Don't place small text (label-sm) over busy chart backgrounds without applying text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) for legibility.
• Don't use {colors.secondary} (#1cd6c0) or {colors.tertiary} (#ff8a00) for primary CTAs; these are reserved for supporting accents and status indicators.
• Don't reduce padding below {spacing.sm} (12px) on buttons or cards—this creates a cramped, unprofessional appearance.
• Don't apply opacity or transparency to primary text; use the defined on-surface and on-surface-variant colors instead to maintain contrast and readability.