03

Color

A 13-step grayscale, blue-shifted darks, a single accent — Persian Blue — and market colors reserved for price data.

000

0A0

111

1A1

222

333

444

666

888

AAA

CCC

EEE

FFF

BLUE-SHIFTED DARKS

ZRO's dark surfaces carry a hint of Persian Blue. This prevents the "OLED hole" effect and connects every surface to the brand.

#06060E

Background (was #000)

#0A0B14

Surface 1 (was #0A0A0A)

#10111C

Surface 2 (was #111111)

Pure black

ZRO background

CORE TOKENS

Background

#06060E

Page base, darkest layer

Surface 1

#0A0B14

Card backgrounds, elevated sections

Surface 2

#10111C

Inputs, nested elements, hover states

Border Dark

#1A1A1A

Subtle dividers, inner borders

Border

#222222

Card borders, input borders

Headlines

#EEEEEE

Display, H1–H3 — not pure white

Body Text

#CCCCCC

Body, body-lg — comfortable reading

Secondary

#888888

Captions, metadata, timestamps

Active Data

#FFFFFF

Live prices, portfolio balance ONLY

ACCENT — PERSIAN BLUE

Deep

Tinted backgrounds

Primary

CTAs, active states

Light

Hover, overlines, links

Glow

Focus rings, subtle tints

The accent earns its power by being rare. CTAs, active states, links, focus rings, overlines. Never on backgrounds or large areas.

TEXT COLOR HIERARCHY

Pure white causes halation on dark backgrounds. ZRO reserves #FFF for live data only.

Active Data

$86,432.18

Live prices, portfolio balance

Headlines

Buy Crypto

Display through H3

Body

Start with as little as $1.

Comfortable reading

Secondary

Updated 2 min ago

Captions, timestamps

Accent

YOUR COINS

Overlines, links, labels

MARKET DATA

Green and red appear exclusively for price movement. Never in brand or UI chrome.

Price Up

#4ADE80 on #0D2818

Price Down

#F87171 on #2D0F0F

RULES

DO

  • Use blue-shifted darks — they carry the accent DNA into every surface
  • Reserve pure white for active financial data only
  • Use #EEE for headlines, #CCC for body
  • Keep accent rare — only CTAs, links, focus rings, overlines

DON'T

  • Use pure #000 for backgrounds — OLED hole effect
  • Set body text to #FFF — halation on dark
  • Use green/red outside of price data
  • Tint large areas with accent — blue is for interaction