Skip to content

Stableflow

  • Base
  • USDC

Design System

Tokens and primitives for dense USDC flow intelligence. Every token switches with the theme, so flip it from the sidebar to compare light and dark.

Semantic tokens

--background
--foreground
--muted-foreground
--card
--primary
--secondary
--muted
--accent
--accent-soft
--destructive
--border
--border-strong
--input
--ring

Flow semantics

--inflow
--outflow
--anomaly
--magnitude-large
--whale
--neutral-flow

Typography

text-2xsFlow volume 24h
text-xsFlow volume 24h
text-smFlow volume 24h
text-baseFlow volume 24h
text-mdFlow volume 24h
text-lgFlow volume 24h
text-xlFlow volume 24h
text-2xlFlow volume 24h
text-3xlFlow volume 24h
text-4xlFlow volume 24h
240,562,520.929336 USDC

Surfaces and elevation

Page · surface-0

Panel · glass

Well · surface-2

surface-3 · selected
  • --surface-0Page canvas
  • --glassPanels, header, sidebar
  • --surface-1Cards, popovers, dialogs
  • --surface-2Wells, inputs, hover
  • --surface-3Selected and active items

Elevation

shadow-xs
shadow-sm
shadow-md
shadow-lg

Each theme defines its own --elevation-* values: dark needs deep shadows to register, light keeps them faint so surfaces separate by lightness instead.

Protocol categories

DEXvar(--cat-dex)
Lendingvar(--cat-lending)
Bridgevar(--cat-bridge)
CEXvar(--cat-cex)
Mintvar(--cat-mint)
Walletvar(--cat-wallet)

Chains and assets

Basebase
Ethereumethereum
Arbitrumarbitrum
Optimismoptimism
Polygonpolygon
Solanasolana
USDCusdc
USDTusdt
DAIdai
PYUSDpyusd
USDSusds

Component primitives

Transfer volume
531.8MUSDC
▲ +12.4%
Sparkline trend
Unidentified share
52.1%
▼ -4.1%
Sparkline trend
Known entities
17
Sparkline trend
LiveBaseAnomaly
AerodromeMorpho Blue0x4e96...e778
Protocol inflow2.90MUSDC
Protocol outflow2.59MUSDC
Whalejust now
8.4M USDC moved from Unidentified to Aerodrome.
BaseUSDC

Layers

  • z-raised10
  • z-overlay50
  • z-modal100
  • z-popover200
  • z-tooltip300
  • z-toast400

Stack with these utilities instead of raw numbers. Dialogs use z-modal for both overlay and content, so the overlay always covers the sticky sidebar.

Motion

animate-fade-inDialog overlays · 200ms
animate-slide-inDialog content · 400ms
animate-row-inFresh live rows · 500ms

Entrances only; everything is disabled under prefers-reduced-motion.

Usage rules

Use semantic tokens like bg-card, text-foreground, border-border, and ring-ring.

Nest surfaces in order: panels on the page, surface-2 wells inside panels, surface-3 for the selected item.

Route new colors through tokens.css before using them in components or charts.

Use component primitives for panels, KPIs, live rows, tags, entities, and amounts.