ZEXO Component Gallery

Complete visual reference of every UI pattern in the ZEXO design system. Click any color swatch to copy its value. All components use CSS variables from the design tokens.

Color Palette

All ZEXO design tokens. Click to copy hex value.

Backgrounds
Accent
Semantic
Text
Borders

Typography

Open Sans font family with three weights. Sizes from 9px to 48px.

Font Sizes
2xs — 9pxThe quick brown fox jumps
xs — 11pxThe quick brown fox jumps
sm — 13pxThe quick brown fox jumps
base — 14pxThe quick brown fox jumps
lg — 16pxThe quick brown fox jumps
xl — 18pxThe quick brown fox jumps
2xl — 20pxThe quick brown fox jumps
3xl — 24pxThe quick brown fox jumps
4xl — 28pxThe quick brown fox jumps
5xl — 32pxThe quick brown fox jumps
6xl — 36pxThe quick brown fox jumps
8xl — 48pxThe quick brown fox jumps
Font Weights
Regular (400) — Body text, descriptionsMedium (500) — Labels, secondary headingsSemibold (600) — Headings, values, emphasis
Text Colors
Text 1 (#ffffff) — Primary text, headings, valuesText 2 (#a5a5a8) — Secondary text, descriptionsText 3 (#6a6a6d) — Muted text, labels, hintsText 4 (15% white) — Faintest text, timestampsAccent (#4cd7f4) — Links, highlights, active statesGreen (#00e100) — Positive, buy, profitRed (#fc0a52) — Negative, sell, loss

Buttons & Actions

All button variants, sizes, and states used across the application.

Variants
Sizes
States
Trading Buttons
Yes / No (Predict)

Form Controls

Inputs, selects, toggles, sliders, and preset buttons.

Text Inputs
Default
Small
Large
Amount Input with Presets
Toggle
Off
Slider
50%

Cards & Surfaces

Surface hierarchy and card patterns used across the app.

Surface Hierarchy
Background
#06060c
Surface 1
#12121a
Surface 2
#18181e
Surface 3
#24242a
Event Card (Predict)
🐘Democratic Nominee 2028
25%
Gavin Newsom
Josh Shapiro
+4 more options$837.8M Vol
Token Info Card
PUMP
pump...9Dfn
$0.002112+9.17%
MCAP106.37K
LIQ$5.1K
FDV$2.1M
HOLDERS1,247

Badges & Pills

Status indicators, category filters, and tag patterns.

Badges
ActiveSettledClosedPendingDraft✦ PTSNEWPUMPMEME
Category Pills
🔥 Trending📊 Recent🧬 Organic👀 Watchlist🏛️ Politics⚽ Sports₿ Crypto🎬 Entertainment
Security Tags
✓ Can Mint: No✓ Can Freeze: No✗ Can Mint: Yes

Tables

Data tables with sorting, color-coded values, and hover states.

Token Table (Terminal)
TOKENPRICE24H %VOLUMEMCAP
PEPE$0.00001247+34.2%$9.1M$5.2B
WIF$2.41+12.8%$3.4M$2.4B
BONK$0.000018-1.22%$1.8M$1.1B
PUMP$0.002112+9.17%$847K$106K
Transactions Table (Token)
AGETYPEUSDAMOUNTMAKER
2sBuy$124.1258,832A4bT...yp7e
5sSell$89.5042,3917xKm...3dRq
12sBuy$1,247.00590,625Bx9P...wL2n
Outcomes Table (Predict)
OUTCOMEVOLUMECHANCEMULTITRADE
Gavin Newsom$421.4K25%4.0x
Josh Shapiro$312.1K18%5.6x

Trading Components

Order forms, price displays, and trading-specific UI patterns.

Price Display
$0.002112+9.17%
$70,230.38-0.09%
Order Form
Amount
Avg. Price25.0¢
Shares40.0
Potential Return$30.00 (200%)
Swap Form
You pay
SOL
$122.13
You receive
0.00
PUMP
Stats Grid
$ VOLUME$837.8M
LIQUIDITY$12.4M
MARKETS14
OPEN INT.$2.1M

Charts & Data Visualization

Progress bars, volume bars, sparklines, and score displays.

Progress Bars
Closes in 245 days75%
Upload45%
Risk Level85%
Volume Bar (Buy/Sell Split)
Buy 55%Sell 45%
Sparkline
Organic Score
Organic Score66/100
Organic Score95/100
Organic Score12/100

Modals & Overlays

Dropdowns, tooltips, and dialog patterns.

Dropdown Menu
🔄 Swap
📊 Limit
⏱ DCA
⚙ Settings
Tooltip
Volume in last 24 hours
$ Volume
Dialog / Modal
Confirm Transaction
You are about to buy 40 shares of "Gavin Newsom" at 25¢ each for $10.00.

Ticker Bar

Scrolling horizontal ticker with event/token pills.

Token Ticker Pills
P
PEPE$0.00001247+34.2%
W
WIF$2.41+12.8%
B
BONK$0.000018-1.22%
W
WBTC$70,230.38-0.09%
P
PUMP$0.002112+9.17%
Event Ticker Pills
🐘Democratic Nominee25%$837.8M
₿BTC > $100k by July?61%$23.8M
⚽Champions League Winner34%$12.1M

Loading States

Skeleton screens and loading indicators.

Skeleton Card
Skeleton Table

Animations Catalog

Every hover, entrance, transition, and continuous animation used in the ZEXO design system. Hover over cards to see effects.

Hover Effects
↑
Hover Lift
translateY(-4px) + box-shadow
Used on: Cards, game tiles, swatches
✦
Hover Glow
box-shadow: 0 0 20px cyan
Used on: CTA buttons, accent elements
□
Border Glow
border-color: cyan/0.3
Used on: Input focus, card hover, connect btn
↗
Hover Scale
transform: scale(1.05)
Used on: Icon buttons, small actions
◐
Brightness
filter: brightness(1.3)
Used on: Mover bars, ticker pills
—
Top Glow Line
linear-gradient cyan line on ::before
Used on: Feature cards (Cards page)
Entrance Animations
α
Fade In
opacity: 0 → 1
Used on: Modal overlays, PWA backdrop
↑
Slide Up
translateY(12px) → 0 + fade
Used on: Dropdown menus, tooltips, nav-dd
←
Slide Left
translateX(-20px) → 0 + fade
Used on: Mobile menu items, page transitions
⊕
Scale In
scale(0.9) → 1 + fade
Used on: Modal dialogs, PWA modal card
Continuous / Loop Animations
Shimmer
background-position sweep 1.5s
Used on: Skeleton loaders
Pulse
opacity: 1 → 0.5 → 1 (2s)
Used on: Live indicators, connection dots
Z
Coin Spin
rotateY(0 → 360deg)
Used on: Flip game coin
PEPE +34%WIF +12%BONK -1%SOL +5%PEPE +34%WIF +12%BONK -1%SOL +5%
Ticker Scroll
translateX(0 → -50%) infinite
Used on: Ticker bars (predict, token, terminal)
Progress Fill
width: 0 → 75% ease-out
Used on: Progress bars, closes-in timer
▾
Chevron Rotate
rotate(0 → 180deg)
Used on: Dropdowns, FAQ accordions, nav
Composite Effects
BuySell☆
Backdrop Blur Bar
backdrop-filter: blur(20px) saturate(170%)
Used on: Floating action bars (token, predict)
Slider Tab
left transition cubic-bezier(.4,0,.2,1)
Used on: Tab bars (predict, pools, terminal)
Buy/Sell Slider
left + background + border-color .25s
Used on: Order forms (predict event, perps)
Timing Reference
0.15s
--t-fast
Micro-interactions, hover color
0.20s
--t-base
Standard transitions, bg change
0.35s
--t-slow
Complex transitions, card hover
Easing Functions
easeDefault for most transitions
cubic-bezier(.4,0,.2,1)Slider tabs, accordions
ease-in-outShimmer, pulse, continuous
linearTicker scroll, coin spin

Responsive Preview

Key components rendered at mobile (320px) and tablet (768px) breakpoints. Scroll inside each frame to see full content.

Buttons at Different Widths
320px Mobile
768px Tablet
Cards Grid
320px Mobile — stacked
₿
BTC > $100k?
Vol: $23.8M61%
₿
Champions League
Vol: $12.1M34%
768px Tablet — 2-col grid
₿
BTC > $100k?
Vol: $23.8M61%
⚽
Champions League
Vol: $12.1M34%
🐘
Democratic Nominee
Vol: $837M25%
📊
Fed Rate Cut
Vol: $5.2M72%
Order Form
320px Mobile — full width
Amount
Avg. Price25.0¢
Shares40.0
Return$30 (200%)
768px Tablet — sidebar panel
Amount
Avg. Price25.0¢
Shares40.0
Potential Return$30.00 (200%)
Table
320px Mobile — horizontal scroll
TOKENPRICE24HVOL
PEPE$0.00001247+34.2%$9.1M
WIF$2.41+12.8%$3.4M
BONK$0.000018-1.22%$1.8M
768px Tablet — full table
TOKENPRICE24H %VOLUMEMCAP
PEPE$0.00001247+34.2%$9.1M$5.2B
WIF$2.41+12.8%$3.4M$2.4B
BONK$0.000018-1.22%$1.8M$1.1B
PUMP$0.002112+9.17%$847K$106K
Navigation
320px Mobile — burger menu
ZEXO
Terminal
Perps
Play
Predict
Pools
768px Tablet — compact navbar
ZEXOTerminalPerpsPlayPredictPools
Swap Form
320px Mobile — compact
You pay
0.00
SOL
↕
You receive
0.00
PUMP
768px Tablet — sidebar width
You pay
HALFMAX
0.00
SOL
$122.13
↕
You receive
0.00
PUMP
Badges & Pills
320px Mobile — wrapping
ActiveSettledClosedPending✦ PTS
🔥 Trending📊 Recent🧬 Organic🏛️ Politics⚽ Sports
768px Tablet — inline
ActiveSettledClosedPendingDraft✦ PTS
🔥 Trending📊 Recent🧬 Organic👀 Watchlist🏛️ Politics⚽ Sports₿ Crypto
Bottom Action Bar
320px Mobile — 5-tab nav
📈Chart
ℹ️Info
💱Trade
📋Txns
⋯More
768px Tablet — floating bar

CSS Variables Reference

Copy-paste ready CSS variable declarations.

:root { --c-bg: #06060c; --c-surface-1: #12121a; --c-surface-2: #18181e; --c-field: #1e1e24; --c-surface-3: #24242a; --c-accent-blue: #4cd7f4; --c-green: #00e100; --c-red: #fc0a52; --c-border: rgba(255,255,255,.05); --c-text-1: #ffffff; --c-text-2: #a5a5a8; --c-text-3: #6a6a6d; --c-text-4: rgba(255,255,255,.15); --font-sans: 'Open Sans', sans-serif; }