TON Whale Tracker

Design System & Brand Guidelines

A unified design language for consistent user experiences across all platforms.

Color Palette

Our color system is designed for clarity, accessibility, and brand recognition.

Brand Colors

Primary #0088cc --color-brand-primary
Primary Dark #006699 --color-brand-primary-dark
Accent #00d4aa --color-brand-accent
Accent Dark #00a88a --color-brand-accent-dark
Brand Gradient linear-gradient(135deg, #0088cc 0%, #00d4aa 100%) --color-brand-gradient

Semantic Colors

Success / Profit #22C55E --color-success
Error / Loss #EF4444 --color-error
Warning #F59E0B --color-warning
Info #3B82F6 --color-info

Whale Tier Colors

Mega Whale #F59E0B --color-tier-mega
Large Whale #3B82F6 --color-tier-large
Medium Whale #8B5CF6 --color-tier-medium

Background Colors

BG Primary (Dark) #0f0f23 --color-bg-primary
BG Secondary (Dark) #1a1a2e --color-bg-secondary
BG Tertiary (Dark) #252542 --color-bg-tertiary
Border (Dark) #2a2a4a --color-border

Typography

Inter is our primary typeface, chosen for excellent screen readability and TON brand alignment.

Font Families

Primary - Inter

The quick brown fox jumps over the lazy dog. 0123456789

--font-family-primary
Monospace - JetBrains Mono

EQBynBO23ywHy_CgarY9NK9FTz0yDsG82PtcbSTQgGoXwiuA

--font-family-mono

Type Scale

6xl / 60px Display --text-6xl
5xl / 48px Heading 1 --text-5xl
4xl / 36px Heading 2 --text-4xl
3xl / 30px Heading 3 --text-3xl
2xl / 24px Heading 4 --text-2xl
xl / 20px Heading 5 --text-xl
lg / 18px Large Body --text-lg
base / 16px Body Text --text-base
sm / 14px Small Text --text-sm
xs / 12px Caption --text-xs

Font Weights

Regular 400 --font-normal
Medium 500 --font-medium
Semibold 600 --font-semibold
Bold 700 --font-bold
Extrabold 800 --font-extrabold

Buttons

Interactive elements for user actions with multiple variants and states.

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-destructive">Destructive</button>

Sizes

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Medium</button>
<button class="btn btn-primary btn-lg">Large</button>

States

With Icons

Cards

Container components for grouping related content.

Default Card

Standard card for general content display. Uses secondary background and subtle border.

Featured

Featured Card

Highlighted card with brand accent border and subtle glow effect.

Interactive Card

Clickable card with hover animation. Rises on hover and changes border color.

$1.2M
Total Volume
+12.5%
24h PnL Mega
+$45,230
+15.3%

Forms

Input components for collecting user data.

Enter a TON wallet address
Invalid wallet address format

Badges

Labels for status, categories, and whale tiers.

Status Badges

Default Success Warning Error Info

Whale Tier Badges

Mega Whale Large Whale Medium Whale

Tier Badges with Icons

Mega Large Medium

Outline Badges

Outline Primary Success

Tables

Data tables for displaying structured information.

Rank Wallet Tier 24h PnL 7d PnL
1 EQByn...XwiuA Mega +$125,430 +$892,100
2 EQCxE...sDs Large -$23,150 +$156,200
3 EQABC...123 Medium +$8,920 -$12,400

Loading States

Indicators for async operations and content loading.

Spinners

Skeleton Loaders

Progress Bar

Alerts & Toasts

Feedback messages for user actions and system events.

Info: Your wallet is being tracked. Updates will appear in real-time.
Success: Transaction completed successfully.
Warning: Low liquidity detected on this token.
Error: Failed to fetch wallet data. Please try again.

Spacing

Consistent spacing scale based on 4px grid.

1 / 4px --space-1
2 / 8px --space-2
3 / 12px --space-3
4 / 16px --space-4
6 / 24px --space-6
8 / 32px --space-8
12 / 48px --space-12
16 / 64px --space-16

Shadows & Effects

Elevation and glow effects for depth and emphasis.

Shadow Scale

XS --shadow-xs
SM --shadow-sm
MD --shadow-md
LG --shadow-lg
XL --shadow-xl

Glow Effects

Primary --shadow-glow-primary
Accent --shadow-glow-accent
Success --shadow-glow-success

Animation

Motion guidelines for smooth, responsive interactions.

Duration Scale

Fast
--duration-fast (100ms)
Normal
--duration-normal (200ms)
Slow
--duration-slow (300ms)
Slower
--duration-slower (500ms)

Easing Functions

ease-in-out (default)
ease-out
bounce