---
version: "alpha"
name: "CoinPulse"
description: "Electric, dark-mode, real-time energy for the decentralized frontier. A high-intensity system for crypto trading platforms and DeFi apps: electric blue, lime and amber on a near-black canvas, tuned for data density and split-second decisions."
source: "https://designmd.ai/chef/coinpulse"
author: "@chef"
license: "MIT"
colors:
  primary: "#2563EB"
  primary-hover: "#3B82F6"
  secondary: "#84CC16"
  tertiary: "#F59E0B"
  neutral: "#71717A"
  background: "#09090B"
  surface: "#18181B"
  surface-elevated: "#27272A"
  border: "#27272A"
  border-strong: "#3F3F46"
  border-hover: "#52525B"
  text-primary: "#FAFAFA"
  text-secondary: "#A1A1AA"
  success: "#22C55E"
  warning: "#F59E0B"
  error: "#EF4444"
  error-hover: "#DC2626"
  info: "#2563EB"
typography:
  display:
    fontFamily: "Space Mono"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "0.02em"
  headline:
    fontFamily: "Space Mono"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "0.01em"
  subhead:
    fontFamily: "DM Sans"
    fontSize: "18px"
    fontWeight: 600
    lineHeight: "1.3"
  body-lg:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.5"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: "DM Sans"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: "0.01em"
  caption:
    fontFamily: "DM Sans"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.3"
    letterSpacing: "0.02em"
  overline:
    fontFamily: "Space Mono"
    fontSize: "11px"
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "0.08em"
  code:
    fontFamily: "Space Mono"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.5"
rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  full: "9999px"
spacing:
  base: "4px"
  "1": "4px"
  "2": "8px"
  "3": "12px"
  "4": "16px"
  "5": "20px"
  "6": "24px"
  "8": "32px"
  "10": "40px"
  "12": "48px"
  "16": "64px"
  component-padding: "4px 8px"
  section: "24px"
  group: "12px"
elevation:
  subtle: "8px glow #2563EB at 15%"
  medium: "16px glow #2563EB at 25%"
  large: "24px glow #2563EB at 35%"
  overlay: "40px glow #000000 at 60%"
  profit: "12px glow #22C55E at 30%"
  loss: "12px glow #EF4444 at 30%"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FAFAFA"
    border: "none"
    hoverBackground: "#3B82F6"
    hoverShadow: "blue glow"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
    fontSize: "14px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    border: "1px solid #2563EB"
    hoverBackground: "#2563EB1A"
    rounded: "{rounded.md}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#A1A1AA"
    border: "none"
    hoverBackground: "#27272A"
    hoverText: "#FAFAFA"
    rounded: "{rounded.md}"
  button-destructive:
    backgroundColor: "{colors.error}"
    textColor: "#FAFAFA"
    border: "none"
    hoverBackground: "#DC2626"
    hoverShadow: "red glow"
    rounded: "{rounded.md}"
  button-sizes:
    sm: "28px · 8px 12px · 12px · 8px radius"
    md: "36px · 8px 16px · 14px · 8px radius"
    lg: "44px · 12px 24px · 16px · 8px radius"
    disabled: "0.4 opacity, no glow"
  card:
    backgroundColor: "{colors.surface}"
    border: "1px solid #27272A"
    rounded: "{rounded.md}"
    padding: "16px"
    hoverBorder: "#3F3F46"
  card-elevated:
    backgroundColor: "#27272A"
    border: "1px solid #3F3F46"
    rounded: "{rounded.md}"
    padding: "20px"
    shadow: "16px glow #2563EB at 15%"
  input:
    backgroundColor: "#18181B"
    textColor: "#FAFAFA"
    border: "1px solid #3F3F46"
    hoverBorder: "1px solid #52525B"
    focusBorder: "1px solid #2563EB"
    focusShadow: "8px glow #2563EB at 25%"
    errorBorder: "1px solid #EF4444"
    errorShadow: "8px glow #EF4444 at 20%"
    rounded: "{rounded.md}"
    padding: "8px 12px"
    height: "36px"
    label: "12px / 500 / #A1A1AA, 4px below"
    helper: "12px / 400 / #71717A, 4px above"
  chip-filter:
    backgroundColor: "#27272A"
    textColor: "#A1A1AA"
    border: "1px solid #3F3F46"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
    fontSize: "12px"
    fontWeight: 500
    active: "bg #2563EB1A, border #2563EB, text #2563EB"
  chip-status:
    profit: "bg #22C55E1A, text #22C55E, border #22C55E33"
    loss: "bg #EF44441A, text #EF4444, border #EF444433"
    pending: "bg #F59E0B1A, text #F59E0B, border #F59E0B33"
  list-item:
    height: "40px"
    padding: "8px 12px"
    divider: "1px #27272A"
    hoverBackground: "#27272A"
    selected: "bg #2563EB1A, left 2px #2563EB"
    font: "14px / 400 / #FAFAFA"
  checkbox:
    size: "16px"
    border: "1.5px #3F3F46"
    rounded: "{rounded.sm}"
    checked: "bg #2563EB, border #2563EB, white checkmark"
  radio:
    size: "16px"
    border: "1.5px #3F3F46"
    selected: "border #2563EB, inner dot #2563EB (8px)"
  tooltip:
    backgroundColor: "#27272A"
    textColor: "#FAFAFA"
    fontSize: "12px"
    padding: "6px 10px"
    rounded: "{rounded.sm}"
    maxWidth: "240px"
    delay: "300ms show, 0ms hide"
---

## Overview

CoinPulse is a high-intensity design system built for cryptocurrency trading platforms and DeFi applications. It lives in permanent dark mode and uses electric blue, vivid lime and warm amber to carry real-time market energy. Every element is tuned for data density, scanning speed and split-second decisions. Precision and legibility are non-negotiable in volatile environments.

## Colors

Dark mode only. The canvas is near-black zinc, panels step up one shade, and color is reserved for meaning: blue for action, green and lime for profit, red for loss, amber for anything pending.

- **Primary (#2563EB):** Electric Blue. CTAs, active states, links.
- **Secondary (#84CC16):** Lime. Profit indicators, positive deltas.
- **Tertiary (#F59E0B):** Amber. Warnings, pending states, alerts.
- **Neutral (#71717A):** Zinc. Muted text, inactive elements.
- **Background (#09090B):** app background, root canvas.
- **Surface (#18181B):** cards, panels, modals. Elevated cards use #27272A.
- **Success (#22C55E):** profit, gains, confirmations.
- **Warning (#F59E0B):** pending transactions, caution.
- **Error (#EF4444):** loss, failed tx, negative delta.
- **Info (#2563EB):** informational banners, links.
- **Component neutrals used by the recipes:** text #FAFAFA, secondary text #A1A1AA, borders #27272A / #3F3F46 / #52525B.

## Typography

- **Headline font:** Space Mono.
- **Body font:** DM Sans.
- **Mono font:** Space Mono.

- **Display:** Space Mono 32px bold, 1.1 line height, 0.02em tracking.
- **Headline:** Space Mono 24px bold, 1.2 line height, 0.01em tracking.
- **Subhead:** DM Sans 18px semibold, 1.3 line height.
- **Body Large:** DM Sans 16px regular, 1.5 line height.
- **Body:** DM Sans 14px regular, 1.5 line height.
- **Body Small:** DM Sans 13px regular, 1.4 line height, 0.01em tracking.
- **Caption:** DM Sans 12px medium, 1.3 line height, 0.02em tracking.
- **Overline:** Space Mono 11px bold, 1.2 line height, 0.08em tracking.
- **Code:** Space Mono 13px regular, 1.5 line height.

## Layout

- **Base unit:** 4px.
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64.
- **Component padding:** 8px horizontal, 4px vertical (compact).
- **Section spacing:** 24px between sections, 12px between related groups.
- Content width and grid: (no especificado).

## Elevation & Depth

Dark-mode glow effects built from colored shadows. Blue or green glow for positive states, red glow for negative or alert states. No traditional drop shadows.

- **Subtle:** 8px glow #2563EB at 15%.
- **Medium:** 16px glow #2563EB at 25%.
- **Large:** 24px glow #2563EB at 35%.
- **Overlay:** 40px glow #000000 at 60%.
- **Profit:** 12px glow #22C55E at 30%.
- **Loss:** 12px glow #EF4444 at 30%.

## Shapes

- **None (0px):** table cells, data rows.
- **Small (4px):** chips, tags, badges.
- **Medium (8px):** cards, inputs, buttons, modals.
- **Large (12px):** containers, panels.
- **XL (16px):** feature cards, hero sections.
- **Full (9999px):** avatars, status indicators, toggles.

## Components

### Buttons

- **Primary:** #2563EB fill, #FAFAFA text, no border. Hover #3B82F6 with blue glow.
- **Secondary:** transparent fill, #2563EB text, 1px #2563EB border. Hover bg #2563EB1A.
- **Ghost:** transparent fill, #A1A1AA text, no border. Hover bg #27272A, text #FAFAFA.
- **Destructive:** #EF4444 fill, #FAFAFA text, no border. Hover #DC2626 with red glow.
- **Sizes:** Small 28px (8px 12px, 12px text), Medium 36px (8px 16px, 14px), Large 44px (12px 24px, 16px). All 8px radius.
- **Disabled:** 0.4 opacity, disabled cursor, no glow.

### Cards

- **Default:** #18181B, 1px #27272A border, 8px radius, 16px padding. Hover border #3F3F46.
- **Elevated:** #27272A, 1px #3F3F46 border, 8px radius, 20px padding, 16px glow #2563EB at 15%. Hover: the blue glow intensifies.

### Inputs

- **Default:** 1px #3F3F46 border, #18181B fill, #FAFAFA text.
- **Hover:** 1px #52525B border.
- **Focus:** 1px #2563EB border, 8px glow #2563EB at 25%.
- **Error:** 1px #EF4444 border, 8px glow #EF4444 at 20%.
- **Disabled:** 1px #27272A border, #09090B fill, #52525B text.
- 36px height, 8px 12px padding, 8px radius. Label 12px / 500 / #A1A1AA, 4px below. Helper text 12px / 400 / #71717A, 4px above.

### Chips

- **Filter chip:** #27272A background, #A1A1AA 12px / 500 text, 1px #3F3F46 border, 4px radius, 4px 8px padding. Active: bg #2563EB1A, border #2563EB, text #2563EB.
- **Status chip:** profit bg #22C55E1A, text #22C55E, border #22C55E33. Loss bg #EF44441A, text #EF4444, border #EF444433. Pending bg #F59E0B1A, text #F59E0B, border #F59E0B33.

### Lists

40px rows, 8px 12px padding, 1px #27272A divider, #27272A hover. Selected: bg #2563EB1A with a 2px #2563EB left edge. 14px / 400 / #FAFAFA.

### Checkboxes and radios

16px, 1.5px #3F3F46 border. Checkbox radius 4px; checked fills #2563EB with a white checkmark, indeterminate shows a white dash. Radio selected: #2563EB border with an 8px #2563EB dot. Disabled 40% opacity. Label 14px / 400 / #FAFAFA, 8px gap.

### Tooltips

#27272A background, #FAFAFA 12px / 400 text, 6px 10px padding, 4px radius, 240px max width, 6px arrow in the same color. 300ms show delay, 0ms hide.

## Do's and Don'ts

### Do
- Use tabular or monospaced numerals for all financial figures so columns align perfectly.
- Animate price changes with brief color flashes: green pulse for gains, red pulse for losses.
- Keep green for profit and red for loss consistent across every screen and chart.
- Show timestamps with timezone-aware formatting and relative time labels.
- Use blue glow shadows on interactive elements to reinforce the electric look.
- Give real-time visual feedback (spinners, skeleton loaders) for every data fetch.

### Don't
- Truncate or round prices without user consent; precision matters in crypto.
- Use light mode; the whole system is designed for dark backgrounds only.
- Place more than one primary action per trading panel, to avoid costly misclicks.
- Use decorative animations that compete with live market data for attention.

## Motion

- **Price changes:** brief color flash (green pulse for gains, red pulse for losses).
- **Tooltip:** 300ms show delay, 0ms hide delay.
- Durations and easing for other transitions: (no especificado).

## HTML notes

Space Mono and DM Sans both load from Google Fonts as is.

Source: https://designmd.ai/chef/coinpulse · by @chef · MIT License. Converted to this format keeping the original notice.