---
name: 'crypto-dark-bold'
tags: [dark-mode, bold-typography, neon, tech, electric, gradient, landing-page]
platform: webapp
---

## Style Summary

A bold, electric Web3 product page with a deep midnight (#0C0C14) background and dual neon accents in amber (#F59E0B) and blue (#3B82F6). This style captures the disruptive energy and financial gravitas of crypto and blockchain products — confident, data-rich, and unapologetically futuristic. Space Grotesk headlines at 700 weight deliver punchy, wide statements, while Inter handles body text and Space Mono provides authentic monospaced data display for prices, addresses, and metrics. The amber-blue spectrum evokes trading interfaces and financial dashboards.

Key aesthetics:

- **Deep midnight base**: #0C0C14 background with #12121C elevated surfaces for layered depth
- **Dual neon accents**: Amber (#F59E0B) for primary actions and highlights, blue (#3B82F6) for data and secondary emphasis
- **Bold display type**: Space Grotesk at 700 weight, wide and impactful for hero statements
- **Monospaced data**: Space Mono for prices, wallet addresses, and live metrics
- **Electric glow**: Subtle neon glow effects on buttons and cards reinforce the crypto aesthetic
- **Data-dense sections**: Designed to accommodate live tickers, charts, and metric grids

## Color System

### Core Backgrounds

| Token            | Value   | Usage                                       |
| ---------------- | ------- | ------------------------------------------- |
| Page Background  | #0C0C14 | Root page background (deep midnight)        |
| Section Alt      | #12121C | Alternating section background              |
| Card Surface     | #191924 | Feature cards, pricing cards, metric panels |
| Elevated Surface | #20202E | Modals, dropdown menus, tooltips            |
| Data Surface     | #0E0E18 | Chart backgrounds, data panels              |

### Text Colors

| Token          | Value   | Usage                                        |
| -------------- | ------- | -------------------------------------------- |
| Primary Text   | #F8FAFC | Headlines, hero copy, primary labels         |
| Secondary Text | #94A3B8 | Body text, descriptions                      |
| Tertiary Text  | #64748B | Captions, metadata, footer links             |
| Muted Text     | #334155 | Placeholders, disabled text                  |
| Amber Text     | #F59E0B | Price highlights, key metrics, active labels |
| Blue Text      | #3B82F6 | Links, data values, secondary highlights     |

### Border Colors

| Token          | Value     | Usage                             |
| -------------- | --------- | --------------------------------- |
| Default Border | #1E293B   | Card borders, dividers            |
| Subtle Border  | #162032   | Section separators                |
| Active Border  | #F59E0B   | Focused inputs, active indicators |
| Glow Amber     | #F59E0B30 | Subtle amber glow on hover        |
| Glow Blue      | #3B82F630 | Subtle blue glow on data elements |

### Accent Colors

| Token            | Value                    | Usage                                           |
| ---------------- | ------------------------ | ----------------------------------------------- |
| Primary Accent   | #F59E0B                  | CTA buttons, primary highlights, amber spectrum |
| Secondary Accent | #3B82F6                  | Secondary buttons, data emphasis, blue spectrum |
| Gradient Fill    | linear(#F59E0B, #3B82F6) | Hero gradients, premium badges                  |
| Amber Muted      | #F59E0B15                | Tinted card backgrounds                         |
| Blue Muted       | #3B82F615                | Data panel tints                                |
| Amber Dark       | #D97706                  | Amber hover/pressed state                       |
| Blue Dark        | #2563EB                  | Blue hover/pressed state                        |
| Success          | #22C55E                  | Positive price movement, gain indicators        |
| Error            | #EF4444                  | Negative price movement, loss indicators        |

## Typography

### Font Families

| Role              | Family        | Usage                                            |
| ----------------- | ------------- | ------------------------------------------------ |
| Display           | Space Grotesk | Hero headlines, section headings, feature titles |
| Body / Functional | Inter         | Body text, navigation, buttons, descriptions     |
| Data / Mono       | Space Mono    | Prices, wallet addresses, metrics, code snippets |

### Type Scale

| Level      | Size | Font          | Weight | Usage                                         |
| ---------- | ---- | ------------- | ------ | --------------------------------------------- |
| Hero       | 72px | Space Grotesk | 700    | Primary hero headline                         |
| Display    | 52px | Space Grotesk | 700    | Large section headings                        |
| Title 1    | 36px | Space Grotesk | 700    | Section headings                              |
| Title 2    | 24px | Space Grotesk | 600    | Subsection headings                           |
| Title 3    | 20px | Inter         | 600    | Card titles, feature names                    |
| Body Large | 18px | Inter         | 400    | Hero subtitle, lead paragraphs                |
| Body       | 16px | Inter         | 400    | Descriptions, feature copy                    |
| Label      | 14px | Inter         | 500    | Navigation, button text                       |
| Data Large | 32px | Space Mono    | 700    | Hero metrics, large price display             |
| Data       | 16px | Space Mono    | 400    | Prices, addresses, metric values              |
| Caption    | 12px | Inter         | 500    | Badges, metadata, overline labels (uppercase) |
| Micro      | 11px | Inter         | 500    | Footer links, fine print                      |

### Font Weights

| Weight   | Value | Usage                                      |
| -------- | ----- | ------------------------------------------ |
| Regular  | 400   | Body text, data values, descriptions       |
| Medium   | 500   | Labels, navigation, buttons, captions      |
| Semibold | 600   | Subsection headings, card titles           |
| Bold     | 700   | Hero headline, display text, large metrics |

### Letter Spacing

- Hero (72px): -3px (dramatic compression)
- Display (52px): -2px
- Section headings (36px): -1px
- Subsection (24px): -0.5px
- Uppercase labels: +3px (wide tracking for tech labels)
- Monospaced data: +1px (improved digit readability)
- Body text: 0px

### Line Height

- Hero (72px): 0.95
- Display (52px): 1.0
- Headings (24-36px): 1.15
- Body (16-18px): 1.6
- Data (16-32px): 1.2
- Captions (11-12px): 1.4

## Spacing System

### Gap Scale

| Value | Usage                                    |
| ----- | ---------------------------------------- |
| 4px   | Inline icon+text pairs, ticker items     |
| 8px   | Badge groups, tight data clusters        |
| 12px  | Button groups, nav items                 |
| 16px  | Card content sections, metric list items |
| 24px  | Between cards in grid, form fields       |
| 32px  | Section internal gaps                    |
| 48px  | Between content blocks within sections   |
| 64px  | Between page sections                    |
| 80px  | Major section breaks, hero gap           |

### Padding Scale

| Value    | Usage                                 |
| -------- | ------------------------------------- |
| [8, 16]  | Compact buttons, data tags            |
| [12, 24] | Standard buttons                      |
| [14, 32] | CTA buttons (generous horizontal)     |
| 24px     | Card padding (compact), metric panels |
| 32px     | Card padding (standard)               |
| 40px     | Feature card padding                  |
| [80, 0]  | Section vertical padding              |
| [120, 0] | Hero section vertical padding         |

### Layout Pattern

- Page width: 1440px max
- Content container: 1200px centered, padding [0, 32]
- Hero section: centered text with live metric ticker below, max-width 800px
- Feature grid: 3-column, gap 24px
- Metrics row: 4-column with large numbers and sparkline charts
- Data showcase: full-width dark panel with live data visualization
- Token/pricing grid: 2-3 column comparison cards
- Navigation: fixed top, transparent over hero, height 72px
- Footer: 4-column link grid + bottom bar

## Corner Radius

| Value  | Usage                                      | Rationale                         |
| ------ | ------------------------------------------ | --------------------------------- |
| 4px    | Data tags, inline badges, monospace blocks | Sharp for data precision          |
| 8px    | Buttons, input fields                      | Subtle functional rounding        |
| 12px   | Feature cards, metric panels               | Primary container radius          |
| 16px   | Pricing cards, large containers            | Generous modern rounding          |
| 9999px | Pill badges, toggle switches, action pills | Full capsule for compact controls |

Design rationale: The 8-12px range balances bold visual impact with data credibility. Cards at 12px feel modern and substantial, while buttons at 8px project confidence without being playful. Data elements at 4px maintain a sharp, dashboard-like precision. The restrained radii prevent the design from feeling too consumer-casual, maintaining the financial gravitas Web3 products demand.

## Icons

### Icon Font

- **Family**: Lucide
- **Style**: Outline, rounded joins and caps

### Commonly Used Icons

arrow-right, arrow-up-right, trending-up, trending-down, bar-chart-2, wallet, lock, shield, zap, rocket, coins, gem, layers, globe, code, terminal, copy, check, external-link, chevron-right, chevron-down, menu, x, github, twitter

### Icon Sizes

| Size | Usage                                          |
| ---- | ---------------------------------------------- |
| 16px | Inline with body text, data indicators         |
| 20px | Feature list icons, nav items                  |
| 24px | Card header icons, CTA arrows                  |
| 32px | Feature section icons (in amber-tinted circle) |

### Icon Color States

| State     | Color   | Usage                              |
| --------- | ------- | ---------------------------------- |
| Amber     | #F59E0B | Primary actions, key highlights    |
| Blue      | #3B82F6 | Data actions, secondary emphasis   |
| Success   | #22C55E | Positive movement, gain indicators |
| Error     | #EF4444 | Negative movement, loss indicators |
| Default   | #94A3B8 | Standard icons, secondary actions  |
| Muted     | #334155 | Disabled, placeholder icons        |
| On Accent | #0C0C14 | Icons on amber backgrounds         |
