TradeVPS

Creative Cloud for Trading

Get Started
Brand Guidelines v1.0

Brand Guidelines

Our comprehensive brand guidelines define the visual and verbal elements that shape our identity. Use these resources to maintain consistency across all touchpoints.

Color System

Our brand colors and their usage guidelines

Typography

Font families, sizes, and hierarchies

Components

UI components and design patterns

Imagery

Photography and illustration guidelines

Voice & Tone

Communication style and messaging

Logo Usage

Logo variations and spacing rules

Color System

Primary Colors

Primary

oklch(30.37% 0.1233 259.91)

#00296B

Primary Foreground

oklch(90.49% 0.118 89.16)

#FFDC80

Secondary Colors

Secondary

oklch(90.49% 0.118 89.16)

#FFDC80

Secondary Foreground

oklch(30.37% 0.1233 259.91)

#00296B

UI Colors

Muted

oklch(0.967 0.001 286.375)

#F5F5F6

Accent

oklch(0.967 0.001 286.375)

#F5F5F6

Destructive

oklch(0.577 0.245 27.325)

#FF4444

Border

oklch(0.92 0.004 286.32)

#E5E5E5

Chart Colors

Chart1

oklch(0.646 0.222 41.116)

#A55C1B

Chart2

oklch(0.6 0.118 184.704)

#5497B8

Chart3

oklch(0.398 0.07 227.392)

#2E5DA8

Chart4

oklch(0.828 0.189 84.429)

#E67A22

Chart5

oklch(0.769 0.188 70.08)

#D45C16

Note: Colors automatically adjust in dark mode. Switch themes to see the dark mode variants.

Typography

Primary Font - Figtree

Font Weights

Light (300) - Figtree Light

Light Italic (300) - Figtree Light Italic

Regular (400) - Figtree Regular

Regular Italic (400) - Figtree Regular Italic

Medium (500) - Figtree Medium

Medium Italic (500) - Figtree Medium Italic

SemiBold (600) - Figtree SemiBold

SemiBold Italic (600) - Figtree SemiBold Italic

Bold (700) - Figtree Bold

Bold Italic (700) - Figtree Bold Italic

Type Scale

Heading 1 (3.5rem/4rem)

Heading 2 (3rem/3.5rem)

Heading 3 (2.5rem/3rem)

Heading 4 (2rem/2.5rem)

Large Body (1.25rem)

Body (1rem)

Small (0.875rem)

Extra Small (0.75rem)