CoinPulse Brand Style Guide
← Color Fonts

CoinPulse

Electric, dark-mode, real-time energy for the decentralized frontier. A high-intensity system for crypto trading platforms and DeFi apps, with electric blue, lime and amber on near-black and colored glows in place of drop shadows.

Source: designmd.ai/chef/coinpulse · by @chef · MIT

Typography

Space Mono · DM Sans
Heading system
Space Mono
Specimen · 700 · 44px · ls 0.02em. Display 32px / 1.1 · Headline 24px / 1.2 · Overline 11px 700, 0.08em · Code 13px 400
Body system
DM Sans
Subhead 18px 600 · Body Large 16px · Body 14px / 1.5 · Body Small 13px · Caption 12px 500, 0.02em
Your limit order filled at 3,412.60 USDT. Fees and the final settlement time are listed below.
Mono · Space Mono for headlines, overlines and every price. Space Mono and DM Sans are the documented families and load exactly from Google Fonts.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 · 67,412.08 · +2.41%

Colors

Dark only · Electric Blue
Primary#2563EB
Secondary#84CC16
Tertiary#F59E0B
Neutral#71717A
Success #22C55E Warning #F59E0B Error #EF4444 Info #2563EB

Background #09090B · Surface #18181B / #27272A · Text #FAFAFA / #A1A1AA · Border #27272A / #3F3F46 · Accent #2563EB · Profit #84CC16

Overview

Dense, real time
LayoutTrading panels, data first
Content width(not specified)
FramingGlow, never drop shadow
DensityCompact: 4px 8px padding

Components

Rebuilt from recipes
Available 18,240.55 USDT
ProfitLossPendingSpotPerps
Post only Limit Market
BTC / USDT67,412.08
ETH / USDT3,412.60
Last updated 2s ago
Card#18181B · 1px #27272A · 8px · 16px
Elevated card#27272A · 1px #3F3F46 · 20px · blue glow
Input36px · 8px 12px · focus 8px glow
Chips4px · 4px 8px · color at 10%

Buttons

4 variants · 3 sizes
Primary Secondary Ghost Destructive Small 28 Disabled
Primary#2563EB · #FAFAFA · hover #3B82F6 + glow
Secondary1px #2563EB · hover #2563EB1A
Sizes28 · 36 · 44px · radius 8px
Disabled0.4 opacity · no glow

Spacing

4px base
Funding · 8h
+0.0100%

Next funding in 01:27:44. Longs pay shorts at the current rate.

View history
Scale
481216202432404864
Sections24px · groups 12px
Component padding4px 8px compact

Elevation & Depth

Colored glow

Depth comes from colored glows, not drop shadows. Blue or green for positive states, red for negative and alert states.

subtle 8px · 15%
medium 16px · 25%
large 24px · 35%
overlay 40px #000 · 60%
profit 12px #22C55E · 30%
loss 12px #EF4444 · 30%

Shapes

Radius family
0
4px
8px
12px
16px
full
Primary radius8px · cards, inputs, buttons
Data rows0px · chips 4px

Do's and Don'ts

Guardrails

Do

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

Don't

Truncate or round prices without user consent.
Use light mode; the system is dark only.
Place more than one primary action per trading panel.
Use decorative animations that compete with live market data.

Motion

Signal only

Motion carries market signal and nothing else: a short color flash on every price change and a blue glow that intensifies on hover. Decorative animation is out.

Price changeGreen or red pulse
Tooltip delay300ms show · 0ms hide
Durations(not specified)
Easing(not specified)
Generated from DESIGN.md · design-md-styleguide · CoinPulse
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #2563EB;
  --color-primary-hover: #3B82F6;
  --color-secondary: #84CC16;
  --color-tertiary: #F59E0B;
  --color-neutral: #71717A;
  --color-background: #09090B;
  --color-surface: #18181B;
  --color-surface-elevated: #27272A;
  --color-border: #27272A;
  --color-border-strong: #3F3F46;
  --color-border-hover: #52525B;
  --color-text-primary: #FAFAFA;
  --color-text-secondary: #A1A1AA;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-error-hover: #DC2626;
  --color-info: #2563EB;
  --font-display: "Space Mono";
  --font-body: "DM Sans";
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --space-base: 4px;
  --space-"1": 4px;
  --space-"2": 8px;
  --space-"3": 12px;
  --space-"4": 16px;
  --space-"5": 20px;
  --space-"6": 24px;
  --space-"8": 32px;
  --space-"10": 40px;
  --space-"12": 48px;
  --space-"16": 64px;
  --space-component-padding: 4px 8px;
  --space-section: 24px;
  --space-group: 12px;
}
@theme {
  --color-primary: #2563EB;
  --color-primary-hover: #3B82F6;
  --color-secondary: #84CC16;
  --color-tertiary: #F59E0B;
  --color-neutral: #71717A;
  --color-background: #09090B;
  --color-surface: #18181B;
  --color-surface-elevated: #27272A;
  --color-border: #27272A;
  --color-border-strong: #3F3F46;
  --color-border-hover: #52525B;
  --color-text-primary: #FAFAFA;
  --color-text-secondary: #A1A1AA;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-error-hover: #DC2626;
  --color-info: #2563EB;
  --font-display: "Space Mono";
  --font-body: "DM Sans";
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --spacing-base: 4px;
  --spacing-"1": 4px;
  --spacing-"2": 8px;
  --spacing-"3": 12px;
  --spacing-"4": 16px;
  --spacing-"5": 20px;
  --spacing-"6": 24px;
  --spacing-"8": 32px;
  --spacing-"10": 40px;
  --spacing-"12": 48px;
  --spacing-"16": 64px;
  --spacing-component-padding: 4px 8px;
  --spacing-section: 24px;
  --spacing-group: 12px;
}
{
  "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"
  }
}
---
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.