Bullion Design System Reference

Bullion is a cryptocurrency exchange platform with a dual-theme design — white marketing site with Bullion Blue (#0052FF) accents, and a dark trading dashboard. 5 proprietary font families, styled-components, and atomic CSS.

Marketing Website —

Marketing Website

White canvas with Bullion Blue (#0052FF) accents. Built with CDS (styled-components + atomic CSS), 5 proprietary font families. Semantic tokens: fg, fgMuted, bgPrimary, bgSecondary, borderPrimary.

Jump start your
crypto portfolio

Bullion is the easiest place to buy and sell cryptocurrency.

Colors

Disciplined brushwork — blue for CTAs, near-black/gray/white neutrals for hierarchy.

Core

Bullion Blue

#0052FF

--cds-primary

Near Black

#0A0B0D

--cds-fg

White

#FFFFFF

--cds-bgPrimary

Secondary BG

#EEF0F3

--cds-bgSecondary

Subtle BG

#F7F8F9

--cds-bgSubtle

Error Red

#CF202F

--cds-negative

Gray Scale

Gray 700

#5B616E

Gray 600

#717886

Gray 500

#8A919E

Gray 400

#B1B7C3

Gray 300

#D1D5DB

Gray 200

#EEF0F3

13-Hue Brushwork

Blue

Green

Red

Yellow

Purple

Indigo

Teal

Orange

Pink

Gray

Chartr.

White

Black

Typography

5 proprietary fonts: BullionDisplay, BullionSans, BullionText, BullionMono, BullionCondensed.

BullionDisplay (heroes, section headings)

Hero

80px / 600 / -0.03em

Aa Bb

Display 1

64px / 600

The future of finance

Display 2

48px / 600

Earn crypto rewards

BullionSans (titles, body, interactive UI)

Title 1

28px / 600

Buy and sell crypto

Headline

16px / 600

Securely store your crypto

Body

16px / 400

Bullion is the easiest place to buy and sell cryptocurrency.

BullionText (labels, captions) • BullionMono (data, code)

Label

14px / 500

Balance: $12,450.82 USD

Caption

13px / 400

Trading crypto involves significant risk of loss.

Mono

14px / 400

0x1234...abcd $67,432.18 +4.28%

Buttons

All pill-shaped (border-radius: 56px). Blue for primary CTAs, near-black for hero CTAs.

Variant	BG	Height	Radius
Primary	#0052FF	44px	56px
Primary Large	#0A0B0D	58px	56px
Sign-in CTA	#1460FF	56px	56px
Secondary	#EEF0F3	44px	56px
Ghost	#EEF0F3	56px	56px

Inputs

56px height, 12px radius, blue focus ring.

Email address Password

Cards

16px border-radius, subtle border, hover elevation.

Bitcoin

BTC

$67,432.18

+4.28%

FEATURE

Earn crypto rewards

Earn up to 5.75% APY on your crypto holdings.

Hero Sections

The future of
money is here

We're building the cryptoeconomy — a more fair, accessible, efficient financial system.

App / Dashboard — Dark Trading Theme

Dark Theme Colors

Deep charcoal backgrounds (#141519) with layered surface elevation. Accent shifts to #578BFA for dark readability.

Backgrounds

Background

#141519

Surface

#1E2025

Elevated

#282B31

Hover

#2F3239

Text & Accent

Primary Text

#F0F0F0

Muted

#9BA1AE

Accent

#578BFA

Positive

#05B169

Negative

#CF202F

Warning

#F5A623

Trading Panel

Advanced Trade dark interface with real-time data, charts, and order entry.

BTC-USD

Bitcoin

$67,432.18

+$2,841.50 (+4.28%)

Price chart

Portfolio View

Total balance

$24,892.54

+$1,243.20 (+5.26%) today

Bitcoin

BTC

$15,234.82

+4.28%

Ethereum

ETH

$6,491.80

-1.12%

Solana

SOL

$2,140.52

+7.84%

App Buttons

10px border-radius (not pill-shaped). Semantic: green=buy, red=sell.

App Inputs

48px height, dark surface background, accent blue focus ring.

Amount (USD) Search assets

Status Badges

Completed Failed Pending Cancelled Processing

+4.28% -1.12% 0.00%

CDS Component Library

Comprehensive React component library organized by category.

Category	Components
Layout	Box, Flex, Grid, Stack, Sidebar Layout, Container
Inputs	TextInput, Select, Checkbox, Radio, Toggle, DatePicker, Search
Media	Avatar, Icon, Image, Logo
Cards	Card, Asset Card, Feature Card, Stat Card
Data Display	Table, Badge, Tag, Tooltip, Stat, List
Feedback	Toast, Alert, Banner, Progress, Spinner, Skeleton
Overlay	Modal, Dialog, Popover, Dropdown Menu, Sheet
Navigation	Tabs, Breadcrumb, Pagination, Sidebar Nav, Top Nav
Charts	Price Chart, Portfolio Chart, Sparkline, Order Book

Shared Foundations

Spacing

8px base grid system. All spacing is multiples of 4px.

Border Radius

Scale from sharp to pill. Buttons: 56px (website) / 10px (app). Cards: 14-16px.

0px

4px

8px

10px
App btn

12px
Input

16px
Card

56px
Pill

50%
Circle

Shadows

Website (Light)

Elevation 1

Subtle

Elevation 2

Cards

Elevation 3

Modals

App (Dark)

Elevation 1

Subtle

Elevation 2

Prominent

Side-by-Side Comparison

Key differences between the marketing website and app/dashboard themes.

Website

Pill buttons (56px radius) • 56px inputs • White bg • #0052FF accent

App / Dashboard

Rounded buttons (10px radius) • 48px inputs • #141519 bg • #578BFA accent

Property	Website	App
Background	#FFFFFF	#141519
Primary accent	#0052FF	#578BFA
Button radius	56px (pill)	10px (rounded)
Input height	56px	48px
Input radius	12px	10px
Primary text	#0A0B0D	#F0F0F0
Muted text	#5B616E	#9BA1AE
Card bg	#FFFFFF	#1E2025
Border	#D1D5DB / #EEF0F3	#2F3239 / #232529

CSS Variables

Complete token set for both themes. Copy-paste ready.

/* ============================================= Bullion DESIGN SYSTEM — Complete CSS Variables ============================================= */ /* === WEBSITE (LIGHT THEME) === */ :root { /* Brand */ --cb-blue: #0052FF; --cb-blue-hover: #003ECB; --cb-blue-active: #002FA7; --cb-near-black: #0A0B0D; /* Foreground */ --cb-fg: #0A0B0D; --cb-fg-muted: #5B616E; --cb-fg-subtle: #8A919E; /* Background */ --cb-bg-primary: #FFFFFF; --cb-bg-secondary: #EEF0F3; --cb-bg-subtle: #F7F8F9; /* Borders */ --cb-border-primary: #D1D5DB; --cb-border-subtle: #EEF0F3; /* Gray Scale */ --cb-gray-100: #F7F8F9; --cb-gray-200: #EEF0F3; --cb-gray-300: #D1D5DB; --cb-gray-400: #B1B7C3; --cb-gray-500: #8A919E; --cb-gray-600: #717886; --cb-gray-700: #5B616E; /* Semantic */ --cb-positive: #05B169; --cb-negative: #CF202F; --cb-warning: #F5A623; /* Typography */ --font-display: BullionDisplay, -apple-system, sans-serif; --font-sans: BullionSans, -apple-system, sans-serif; --font-text: BullionText, -apple-system, sans-serif; --font-mono: BullionMono, "SF Mono", monospace; --font-condensed: BullionCondensed, "Arial Narrow", sans-serif; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-card: 16px; --radius-pill: 56px; /* Shadows (Light) */ --shadow-1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-2: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --shadow-3: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06); } /* === APP (DARK THEME) === */ [data-theme="dark"] { --app-bg: #141519; --app-surface: #1E2025; --app-surface-elevated: #282B31; --app-surface-hover: #2F3239; --app-fg: #F0F0F0; --app-fg-muted: #9BA1AE; --app-fg-subtle: #6B7280; --app-fg-disabled: #4B5058; --app-accent: #578BFA; --app-accent-hover: #6B9CFF; --app-accent-muted: rgba(87, 139, 250, 0.15); --app-border: #2F3239; --app-border-subtle: #232529; --app-positive: #05B169; --app-positive-bg: rgba(5, 177, 105, 0.12); --app-negative: #CF202F; --app-negative-bg: rgba(207, 32, 47, 0.12); --app-warning: #F5A623; --app-shadow-1: 0 2px 8px rgba(0,0,0,0.3); --app-shadow-2: 0 8px 24px rgba(0,0,0,0.4); }

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`
App / Portal	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Bullion Design System Reference

Marketing Website

Jump start yourcrypto portfolio

Colors

Core

Gray Scale

13-Hue Brushwork

Typography

Buttons

Inputs

Navigation

Cards

Hero Sections

The future ofmoney is here

Dark Theme Colors

Backgrounds

Text & Accent

Trading Panel

Portfolio View

App Buttons

App Inputs

Status Badges

Modals

Confirm transaction

CDS Component Library

Spacing

Border Radius

Shadows

Website (Light)

App (Dark)

Side-by-Side Comparison

CSS Variables

Tailwind Mapping

Jump start your
crypto portfolio

The future of
money is here