Design Systems Reference

Foundation

Color Palette

Core color tokens that define the visual identity of this design system.

Brand & Interactive

Backgrounds & Surfaces

Semantic

Text & Borders

Foundation

Typography

Type scale and text styles used throughout the interface. All products use Space Grotesk as the primary typeface.

Display

48px · 700 · -0.8px

The future of finance

Heading 1

32px · 700 · -0.5px

A New Prediction Paradigm

Heading 2

22px · 700 · -0.3px

Market Overview

Heading 3

17px · 600

Your Portfolio

Body

14px · 400 · 1.65

Get rewarded for your market insight. No loss when you're wrong. Submit your prediction and let the market do the rest — your capital is always safe.

Body Small

12.5px · 400 · 1.6

Predictions are settled at market close. Results are final.

Label / Cap

10px · 700 · 0.12em

Trading volume

Mono

13px · Space Mono

0x4f3a…c91b · +12.84%

Primary color text

$2,847.50 +18.4% this week View details →

Foundation

Spacing & Radius

4px base grid. All spacing values are multiples of 4. Border radius scales with the visual language — legacy systems are sharper, V2 systems are rounder.

Spacing scale

xs

4px

sm

8px

md

12px

lg

16px

xl

24px

2xl

32px

3xl

48px

4xl

64px

Border radius

none
0px

sm
6px

md
10px

lg
16px

full
9999px

Components

Buttons

Interactive controls with consistent sizing, states, and visual hierarchy.

Variants

Sizes

States — hover & click to interact

With icons

Components

Forms & Inputs

Text inputs, selects, and form controls with validation states.

Text inputs

Email address We'll never share your email.

Password

Amount (error state) Must be a valid number.

Disabled

Checkboxes

I agree to the terms of service Subscribe to email updates Disabled option

Components

Cards & Surfaces

Container surfaces for grouping related content. UpSideOnly V2 uses near-black neutral surfaces with subtle white-alpha borders and glass overlays.

Default card

Prediction Market

Bitcoin will exceed $120,000 before end of Q3 2025. Place your prediction and earn rewards if correct.

Portfolio Value

$12,480

+8.2%

Updated 2 minutes ago

Compact stat cards

Total trades

2,847

Win rate

68.4%

Avg. return

+14.2%

Components

Badges & Tags

Small status indicators and categorical labels.

Semantic variants

Primary Active Pending Failed Archived

In context

BTC / USDLong

ETH / USDShort

SOL / USDPending

Components

Data Display

Stats, tables, and structured data presentation.

Stat cards

Net P&L

+$3,241

↑ 18.4% this month

Open positions

14

6 long · 8 short

Leaderboard rank

#47

Top 3%

Table

Market	Direction	Entry	P&L	Status
BTC / USD	Long	$91,200	+$840	Open
ETH / USD	Short	$3,410	-$124	Open
SOL / USD	Long	$148.50	+$212	Closed

Components

Feedback

Toasts, alerts, and empty states to communicate system events.

Toast notifications

Prediction placed

Your BTC long position is now open.

Transaction failed

Insufficient balance. Please top up and try again.

Market closing soon

3 of your positions settle in 15 minutes.

Empty state

No predictions yet

Your predictions will appear here once you make your first move.

Family

Side-by-Side

Same primitives, same structural tokens (radius, spacing, sizing, motion), three brand color blocks. This section is independent of the version toggle — it always shows all three brands rendered through tokens.css.

Perpetuals orange / white

Buttons

Form

Remember me

Tabs

Card

BTC/USD · +0.21%

Spot price holding above 24h high.

Primary Live v2

Barriers teal / near-black

Buttons

Form

Remember me

Tabs

Card

BTC/USD · +0.21%

Spot price holding above 24h high.

Primary Live v3

UpSideOnly green / pure black

Buttons

Form

Remember me

Tabs

Card

BTC/USD · +0.21%

Spot price holding above 24h high.

Primary Live v2

Locked structural tokens (shared across all 3 brands)

--radius-md 8px
inputs, secondary btns

--radius-lg2 12px
primary CTAs, cards

--radius-xl 16px
dialogs, hero surfaces

--control-h-xl 48px
hero CTA + form input

--btn-pad-xl 14/16
primary CTA padding

--space-2xl 24px
card padding

--font-sans
Space Grotesk → Inter

--ease-spring
cubic-bezier(.34,1.56,.64,1)

Family

Form Controls

Inputs, textareas, selects, switches, radios, checkboxes — same structure, brand-tinted focus + accents.

Family

Display & Data

Avatar, badges, stats, progress, spinner, skeleton, table, pagination.

Family

Overlays

Modals, popovers, tooltips. Click Open Modal in each column to see the brand-specific entry animation: Perpetuals rises in 220ms ease-out · Barriers fades in 120ms · UpSideOnly springs in 320ms with a scale overshoot.

Family

Notifications

Toasts, alerts, empty states. Click Fire toast in each column to compare entry feel.

Family

Motion Lab

Same primitives, three different personalities. Hover, click, and tab-press to feel the difference. Use the Replay button to re-trigger entry animations side-by-side.

Per-brand motion vocabulary

Token	Perpetuals	Barriers	UpSideOnly
btn hover lift	−2px	none	−3px + 1.045 scale
btn press	+1px / 0.985 scale	opacity 0.82	+1px / 0.965 scale
btn duration	220ms ease-out	120ms ease	220ms spring
card hover	−2px + shadow lg	border tint	−2px + green glow
modal entry	rise-in 220ms	fade 120ms	spring 320ms (overshoot)
toast entry	rise + fade	slide-down + fade	bounce drop
extras	warm orange glow	teal hairline	gloss + ripple + glow-pulse