cids · crypto interface design system
DeFi Triangle
Live React components, semantic tokens, and the patterns crypto UIs rebuild badly every time — browse them on an infinite canvas and flip themes live.
Stable and draft primitives, each with its own .doc.md.
Dark, mono, light, and violet — flip live in the canvas.
Specs written once for humans and AI agents building UI.
What ships
The system as it exists today
Everything below is live at app.defitriangle.xyz — components, themes, docs, and templates. No product surfaces beyond the design system.
Infinite canvas
Pan and zoom the whole system on desktop. Select any component to inspect its live instance and real .doc.md.
Component gallery
Mobile-friendly gallery of every component — browse atoms, crypto verticals, and composed patterns.
Crypto primitives
Signed price direction, wallet-hashed identity, peg status, social proof, token chips, and address chips.
Trading interface
Order book, order-type tabs, size slider, market tabs, and margin health — terminal density patterns.
Ready templates
Simple dApp (connect, balances, send) and exchange (markets, book, trade form) composed from the system.
Semantic tokens
Surfaces, brand, buy/sell, and identity hues as the contract — themes swap values without rewriting UI.
Preview
cids — crypto interface design system
Open the live system at app.defitriangle.xyz — infinite canvas, component gallery, feed demo, and exchange / dApp templates. Docs ship beside every component for humans and agents.
Design Systemthemes: dark · mono · light · violet
Typography
$1,284.52
+12.4%
24h volume · 1.2M SOL
Financial figures use Geist Pixel Square. UI labels use IBM Plex Sans.
Buttons
Theme pills
Status
State notices
Color palette
Frost 400
#19549b
Primary interactive
Frost 500
#11274d
Deep blue surface
Loki 600
#0fa87a
Success / live
Green Main
#18df74
High-emphasis positive
Danger
#ef4444
Negative / sell
Warning
#f59e0b
Pending states
Gradient surface
data-lg
Customisable via --card-gradient-from and --card-gradient-to tokens.