Skip to content
CPU VERSUS — home

Internal · noindex

Design system

Component primitives for CPUVersus. Every primitive renders correctly in both themes — toggle the moon/sun in the header to verify.

Wordmark

Button

As link

Card

Padded card (default)

Surface bg, 1px border, no shadow. Sharp corners.

Card header

Unpadded for header/body splits.

Badge

Neutral Recommended EOL Limited stock New

Stat

Single-core
3,318
+12.3%
Multi-core
20,541
−4.5%
MSRP
$479 USD
+8.2%
TDP
120 W

DataTable

Specs at a glance — Ryzen 7 9800X3D vs Core Ultra 7 270K
Spec 9800X3D 270K Δ
Cores / threads 8 / 16 20 / 20
Boost clock 5.2 GHz 5.5 GHz +0.3
L3 cache 96 MB 36 MB −60
TDP 120 W 125 W +5
MSRP $479 $384 −$95

Sticky header (scroll inside the box)

Long benchmark list with sticky header
Benchmark Score Sample
Geekbench 6 — Single 3,412 n=1287
Geekbench 6 — Multi 19,284 n=1287
Cinebench 2024 — ST 142 n=412
Cinebench 2024 — MT 1,523 n=412
Blender 4.2 — Monster 184 n=88
Blender 4.2 — Junkshop 112 n=88
Blender 4.2 — Classroom 96 n=88
7-Zip 24.08 — Compress 124,312 n=142
7-Zip 24.08 — Decompress 152,840 n=142
Handbrake H.265 4K 47.2 n=64
y-cruncher π-1B 28.4 n=51

BarMeter / Sparkline

BarMeter

Cyberpunk 2077 (1080p)
212fps
Cyberpunk 2077 (1080p)
181fps
Cinebench 2024 (MT)
1,523
Cinebench 2024 (MT)
2,247

Sparkline

Geekbench 6 (24h trend)
Price (30d)

DeltaIndicator

Perf: +12.3% Perf: −4.5% Price: +8.2% Watts: −15.0% Score: +147 Tied: ±0.0%

Tooltip

Hover or focus the underlined terms: SC Single-core Geekbench 6 score (higher is better) · MC Multi-core Geekbench 6 score · TDP Thermal Design Power — manufacturer's stated heat output target

Tabs

Tab panels are content slots — replace this with the gaming benchmarks panel.

Combobox

Slider

50%
30%
10%
10%

Color tokens

bg
surface
surface-raised
border
fg
fg-muted
accent
positive
negative
warning
chart-a
chart-b

Type scale

Display 40 / Inter

Display 30 / Inter

Display 24 / Inter

Body 14 — the default reading size for paragraphs and UI labels.

Mono 13 — 1,234,567.89 — JetBrains Mono with tabular figures.

Caption 11 — used sparingly for table footers and disclosures.

Editorial 30 / Source Serif 4 — for guide headlines.