Bitswap DashboardLegacy format
A dark, data-first dashboard interface for a crypto swap management platform. The aesthetic is technical, focused, and high-contrast — built around near-black surfaces, electric cyan interaction states, compact revenue cards, and clear analytical layouts. The product is designed for platform owners and enterprise users who need to monitor integration status, swap revenue, token volume, conversion performance, and claimable revenue quickly. The visual system should feel operational, premium, fintech-native, and easy to scan.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxA dark, data-first dashboard interface for a crypto swap management platform. The aesthetic is technical, focused, and high-contrast — built around near-black surfaces, electric cyan interaction states, compact revenue cards, and clear analytical layouts. The product is designed for platform owners and enterprise users who need to monitor integration status, swap revenue, token volume, conversion performance, and claimable revenue quickly. The visual system should feel operational, premium, fintech-native, and easy to scan.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Do's & Don'ts
Do
Don't
Layout
• Desktop layout uses a fixed sidebar and fluid main canvas
• Main content stretches to the viewport with consistent 24px gutters
• Dashboard page prioritizes status banner, core metrics, and quick actions
• Statistics page prioritizes metric cards, revenue chart, token volume chart, and performance breakdown
• Metric cards align to a consistent grid
• Analytics panels use proportional widths: primary chart wider, supporting chart narrower
• Bottom performance panel spans the available content width
Responsive behavior:
• At tablet widths, reduce sidebar or collapse it into icon-only navigation
• Metric cards wrap into two columns
• Quick actions stack into two columns or one column depending on width
• Charts stack vertically on mobile
• Preserve button tap targets at 40px minimum on touch devices
Motion
• Keep motion subtle and functional
• Hover transitions: 150-200ms ease-out
• Button hover: slight brightness change and optional glow
• Card hover: border brightens slightly; avoid large movement
• Chart tooltip: quick fade or slide under 150ms
• Loading states can use skeleton surfaces with low-contrast shimmer
Accessibility
• Maintain strong contrast between text and dark surfaces
• Do not rely only on color for positive or negative values; pair color with + / - indicators
• All icon-only actions require labels or accessible names
• Focus states must be visible on every interactive component
• Minimum tap target: 40px for mobile and tablet
• Use semantic chart labels and provide summarized values outside charts when possible
Use with MCP
Don't have the MCP? Install it here