← Back to Skills / Marketplace / crypto-dashboard
SKL · 41PRO

Crypto Dashboard.

The terminal-mono aesthetic for crypto and trading interfaces — monospace type, near-monochrome dark canvas, one disciplined accent color, and hand-built data textures. Refined Bloomberg terminal, not glowing casino.

UNLOCK WITH PRO →
● Live preview · Crypto Dashboard demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Crypto Dashboard is the terminal-mono aesthetic for crypto and trading interfaces — monospace type everywhere, a quiet near-monochrome dark canvas, one disciplined accent color, and a set of hand-built textures (hatch-fill bars, heatmap grids, pinstripe charts, gauge rings) that do the personality work without touching neon or glow. Think refined Bloomberg terminal, not glowing casino. Green and red show up only to signal price direction, and restraint is the whole point. This is what crypto dashboards look like when a real product designer made them.

● Looks Like
Professional trading terminalsOn-chain analytics platformsDeFi and portfolio trackers built to be used, not shown offThe crypto interfaces that serious traders actually preferData-dense market dashboards that feel like tools, not marketing pages
02 · Best For / Avoid If
＋ Best For
+Crypto and token analytics dashboards
+Trading and portfolio tracking interfaces
+DeFi, staking, and on-chain analytics tools
+NFT and wallet overview screens
+Any interface displaying token prices, charts, holdings, or market data
+Web3 products that need to feel credible and data-serious
× Avoid If
×Your product has nothing to do with trading or crypto data — the terminal-mono look signals "serious financial tool" and creates the wrong expectation
×You want a colorful, expressive, or playful look — this aesthetic is deliberately held back and monochromatic
×Your audience isn't used to data-dense interfaces and would find the terminal feel cold or intimidating
03 · Design Philosophy
01

Monospace is the whole identity

Using a mono typeface for everything — headings, labels, numbers, all of it — is the single decision that does most of the work. It makes the interface read as a terminal, a data instrument, something built for precision. Numbers align in columns. The type itself signals that this is a tool built by people who care about the data.

02

Color is earned, not sprayed

The canvas is near-monochrome, and the single structural accent color appears only on links, active states, and the primary CTA. Green and red are reserved exclusively for price direction — up and down — and never used decoratively. That restraint is what makes the semantic colors meaningful. The moment color appears, it means something.

03

Texture over glow

The personality comes from hand-built data textures — hatch-fill bars, grayscale heatmap grids, pinstripe charts, dotted reference lines, segmented gauge rings. These give the dashboard its visual character without reaching for neon, blur, or gradient glow. The result reads as designed rather than decorated.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
The neon casino failure mode
The most common AI default for crypto is a purple-to-blue gradient hero, glowing card edges, and rainbow accent colors. That's the exact look this skill is built to avoid. If something comes out looking like a trading app made for a gaming audience, pull it back to monochrome and one accent.
! WARNING
Color used decoratively
Green and red belong only on numbers that are up or down. The moment they appear on a button, a header, or a decorative element, they lose their meaning and the whole semantic system breaks.
! WARNING
Emoji or non-icon elements
Token logos and UI icons need to come from a real line-icon library — Lucide, Phosphor, Heroicons, or Tabler, thin stroke, consistent size. No emoji anywhere in the interface.
! WARNING
Heavy radius or glassmorphism
The 4px radius is consistent and intentional — it reads as a terminal tool. Large rounded corners, pill shapes, and frosted glass panels all break the aesthetic and push it back toward generic crypto app slop.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →