Surf Design System

A unified design system supporting 15+ core product areas—from AI conversations and research to market signals, news, dashboards, subscriptions, and developer tools—giving teams and AI agents a shared language for building Surf.

Brand

24
48
96
Logo 3 wave stripes · currentColor
Lockup mark + wordmark · Open Runde
Surf app icon 96px96
Surf app icon 48px48
App icon 22.2% radius squircle

Tokens

Neutral 0 → 1000
Brand
pink
teal
dusty
foam
Data
green
red
blue
yellow
purple
Tags
pink
blue
cyan
purple
orange
gold
Chart · 9 series
blue
cyan
lime
orange
red
rose
violet
yellow
lavender
Alpha black · #2A2A2A
Alpha white · #FFFFFF
Colors brand · neutral · data · tags · chart · alpha
bg-chat
bg-base · border-strong

fg-base — Bitcoin holds $118K

fg-subtle — secondary detail

fg-muted — caption · 2h ago

bg-subtle · border-base
Semantic tokens bg / fg / border layers
G-1
G-2
G-3
G-4
G-5
Upgrade
Pro
Plus
Max
NewFunction
Suggestion
Loading
Gradients 135° linear · Loading radial
AaBlack 32
AaBold 18
AaRegular 14
H1-3XL32/40 · 900
H2-2XL24/32 · 900
H3-XL18/26 · 700
B1-L16/24 · 400
B2-M14/20 · 400
B3-S13/18 · 400
B4-XS12/16 · 400
Typography Lato · +=SemiBold ++=Bold
4 · 8 · 12 · 16 · 20 · 24 · full
Radius 8px is the default
2
4
8
12
16
Spacing 2 / 4 / 8 / 12 / 16
card-rest
card-shadow
drop-shadow
Blur 64
Shadows & Glass elevation + backdrop blur

Display

VC Project Token Event Founder Chain
Bull Bear Base
Tag classification & sentiment
Free Plus Pro Max
hot new function
Badge plan tiers & gradient chips
Market Cap $2.64T ▲ +5.2%
24h Volume $129.9B ▼ -2.1%
Fear & Greed 65 ▲ +8.2
Stat KPI tile with delta
#TokenPrice 24h %7d % VolumeMarket CapLast 7d
1
B BTCBitcoin
$66,212.40 +4.31% +8.24% $32.4B $1.31T
2
E ETHEthereum
$3,178.65 -3.21% -1.42% $18.2B $382.4B
3
S SOLSolana
$157.71 +2.05% +12.63% $6.8B $73.9B
4
B BNBBNB
$612.34 -0.84% -0.31% $2.1B $89.2B
5
H HYPEHyperliquid
$37.73 +5.61% +24.10% $1.4B $12.6B
Table token list · 52px rows · hover fill
+1.24%
+3.42%
+6.85%
+12.4%
-0.86%
-2.63%
-5.14%
-9.72%
10%24%40%60%
Heat cells % tint scale by magnitude
$HYPE Token Price
$37.73 ↗ 5.61% /1d
40.00 38.00 36.00 34.00 16:00 20:00 06-22 04:00 08:00 12:00
$HYPE Price
Chart Line gradient area · hover crosshair
40.50 39.00 37.50 36.00 40.40 08:00 12:00 16:00 20:00
Candlestick OHLC · volume · up/down
75 50 25 4552386047674370537558786787 Jul 1Jul 7Jul 14
Spot Perp Options
Chart Bars stacked spot / perp volume
72 Greed
Gauge Fear & Greed segmented arc
86
92Movement 81Flow 85Derivative
Score ring tri-arc heat score
OP
Signal bubbles rising / falling on heatline
Skeleton shimmer & loading pulse
Line
Dots
Divider horizontal · line / dots
M Main Wallet 0xe08f…3af1 $24,830
Swap 2.4 ETH → USDC · 19:27 +4,410.20 USDC -2.40 ETH
Wallet row balance card & tx row
Ethereum ETF inflows hit $1.2B as staking nears approval Spot Ether ETFs recorded their largest weekly inflow since launch, driven by growing expectations that the SEC will approve staking for listed products. CoinDesk · 2h
Content card news snippet with source
D S W
B E S +5
Avatar user · token · stack
+K Search
++N New chat
+ Newline
Kbd shortcut keys
VC
Project
Token
Event
Founder
Chain
Search
Chart
Wallet
Globe
Bell
Settings
Icons classification set · 16px
POST /v1/research
curl "https://api.asksurf.ai/v1/research" \
  -H "Authorization: Bearer sk-surf-…" \
  -H "Content-Type: application/json" \
  -d '{"query": "HYPE token unlocks"}'
Code block API snippet · fg-base on bg-subtle
Credits used6,420 / 10,000
Research quota30%
Credit meter API usage · brand track
No signals yet Ask Surf about any token to start tracking signals.
Empty state no results yet
Whale moved 12,400 ETH to Binance 12s
New listing: $HYPE perps on Bybit 1m
ETF net inflow +$412M 3m
Live feed streaming rows · fade-in

Interactive

Button pill h32 · block h46
Upgrade CTA radial glow + inset shine
Input text field · ⌘K search
Checkbox & Toggle checkbox · switch · billing
Segmented control mode selector · clickable
Clear chat history
All conversations in your history will be removed from this device. Saved reports stay in your library.
Dialog 356px glass · blur 64
This data is the result of in-depth analysis and computation performed by Surf AI
Jul 8, 2025
HYPE $38.49
Volume $2.14B
Tooltip info glass · chart white
1 / 100
Pagination & Range pager · time range
Pro
Access Surf's full research capabilities.
$99/ Month
  • Ask: Unlimited questions
  • Research: Up to 10 per day
  • Execution: Full access
Pricing card highlighted tier
TVL $4.2B · Rank #5
34 bullish signals this week
Top 100 hold 61%
Tabs underline · clickable
Instant
Research 2.0
Extended
Select model picker · hover to open
Filter chips multi-select filters
How do credits work?
Each Ask costs 1 credit, Research costs 5. Credits refresh monthly.
Can I cancel anytime?
Yes — downgrades apply at the next billing cycle.
Accordion FAQ · details/summary
Search tokens, wallets, events… ESC
TRENDING
B BitcoinBTC $66,212+4.31%
S SolanaSOL $157.7+2.05%
H HyperliquidHYPE $37.73+5.61%
Search command ⌘K modal · entity rows

AI Patterns

Challenge Surf AI with your crypto curiosity
Chat Input mode · model · send
Suggestion chips quick prompts · Explore
SurfAI is building your answer… · 12s
Searching on-chain data
Analyzing whale flows
Composing report
Thinking shimmer text · tool steps
1TL;DR
2Momentum Drivers
3Conclusions

Solana Ecosystem Momentum

Solana's DEX volume climbed to $4.2B this week, outpacing Ethereum L2s for the third consecutive month as memecoin and DePIN activity rebounded 1.

Staking inflows and a rising validator count point to sustained network confidence, though fee compression remains a medium-term risk.

TL;DR
DEX volume up 38% week-over-week to $4.2B
Validator count at all-time high of 2,100+
Watch fee compression into Q3
Answer card TOC · citation · TL;DR
coindesk.com
Solana DEX volume tops $4B as memecoin activity rebounds sharply across the ecosystem
theblock.co
Staking inflows push SOL validator count to new all-time high above 2,100
Source cards favicon · 2-line clamp
Ask a follow-up
Follow-ups next-question chips
$HYPE
$37.73
▲ +0.00%
Animated number live ticker · digit flow