Evo Design
System

A design token catalog generated from DESIGN.md. Every color,
font, component, and spacing value — visualized.

Start Exploring View Documentation
01 | Colors

Color Palette

Primary

Evo Ink #07001a Primary text, headings
Off-White #f8f7f6 Page background
Card White #ffffff Card surfaces, elevated containers

Accent

Evo Red #ff381a CTAs, floating actions, hero backgrounds

Semantic

Profit Green #44b200 Positive values, gains
Loss Pink #ee0053 Negative values, losses
Info Blue #0972f1 Informational, links
Medium Confidence #f39600 Warning, moderate confidence

Text Hierarchy

text/primary #07001a
text/secondary #68616b
text/secondary-strong #635d67
text/tertiary #b3afb6
text/faint #e2e2e2

Dark Mode Surfaces

Dark Bg #18171c Dark mode page background
Dark Card #23222a Dark mode card surface
Close Button #efeeee Dismiss button bg
02 | Typography

Typography Scale

$348.67

heading/xl ·Figtree ·900 ·32px ·1.5 ·-2%

Invite 3 friends to Evo

heading/lg ·Figtree ·900 ·24px ·1.5 ·-2%

Last Solds

heading/md ·Figtree ·900 ·20px ·1.5 ·-2%

Account

body/lg-strong ·Figtree ·900 ·16px ·1.5 ·-2%

Username

body/lg ·Figtree ·700 ·16px ·1.5 ·normal

Subtitles, list row content, dropdown labels, detail key-value pairs.

body/md ·Figtree ·700 ·14px ·1.5 ·normal

Active filter

caption/strong ·Figtree ·900 ·12px ·1.5 ·-2%

2 hours ago · PSA 10 · 1st Edition

caption ·Figtree ·700 ·12px ·1.5 ·normal

99+

micro ·Figtree ·800 ·10px ·1.5 ·normal
03 | Buttons

Button Variants

Primary CTA
Secondary CTA
Accent CTA (Floating)
Text / Ghost
Small Inline
Icon Button
04 | Cards

Card Examples

Collection

Vintage Holos

23 cards · $1,247 estimated value. Last updated 2 hours ago.

Top card Charizard 1st Ed.
Avg grade PSA 8.5
Grading

Grade Queue

5 cards pending review. AI confidence averaging 94%.

Status Processing
ETA ~3 minutes

Upgrade to Pro

Unlimited grading, portfolio tracking, and price alerts. Join 12,000+ collectors.

04b | Pills

Filter Pills

12px radius · Never circular · Active inverts to dark bg
05 | Forms

Form Elements

Please enter a valid email
PSA 10
05b | Detail Rows

Detail Rows

Grade PSA 10
Est. Value $1,247.00
24h Change -$23.50
Listed View on eBay
06 | Spacing

Spacing Scale

0
2
4
6
8
12
16
24
32
48

Three-Tier Rhythm

6px Tight — siblings within a component
12px Standard — elements within a section
24px Section — separating major sections
07 | Radii

Corner Radius Scale

Small 12px Buttons, pills, tags, inputs
Medium 24px Cards, large CTAs, containers
Large 32px Rare — very large containers
✕ No pills (9999px) or circles (50%) — the entire system is rectangular
08 | Elevation

Elevation & Depth

Light Mode — Shadow is elevation
Level 0: Flat No shadow, no border
Level 1: UI Card Shadow only, no border
Level 1b: Nested Subtle border, same bg
Physical Card Trading card shadow only
Dark Mode — Border is elevation
Level 0: Flat No shadow, no border
Level 1: UI Card Border only, no shadow
Level 1b: Nested Subtle border, same bg
Colored Card 3px border overlay
09 | Icons

Iconography

12px stroke: 2px Inline indicators
16px stroke: 2px Detail row icons
18px stroke: 3px Standard UI icons
24px stroke: 3px Tab bar, primary actions
32px stroke: 4px Hero / feature icons
Hugeicons · stroke style only · never filled · size & stroke width are coupled