DESIGN SYSTEM

Colours, type, components and every hand-authored game sprite used across QubicGames. Every example below is the real shared component, not a copy — so what you see here is what ships.

Colours

Read live from :root — these are the values the app is rendering right now, not a copy. Every token is space-separated RGB so Tailwind can apply alpha (bg-background-elevated/60).

Surfaces

background

—

Page ground, painted by body

background-elevated

—

Every panel: header, modals, cards, widgets

border

—

Panel outlines

Text

foreground

—

Body and heading text

muted

—

Secondary text, labels, captions

Chrome accents

The only two accents allowed in app chrome — nav, buttons, modals, common text.

neon-cyan

—

Primary accent (Qubic Neon Blue)

neon-magenta

—

Secondary accent (Qubic Purple)

Gameplay only

Never app chrome. These belong inside a game board or a game's own result screen. The single exception is the danger button variant, for the GM's irreversible QUBIC-moving action.

neon-amber

—

Bonus / rare tier

neon-red

—

Danger / enemy / error

neon-green

—

Success / ally / good result

Typography

font-h1 · Archivo Black

QUBIC GAMES

Brand H1 role. Hero headline only — nothing else should reach for this.

font-pixel · Plus Jakarta Sans (700/800)

Insert Coin · Cash Out

Named "pixel" from the original arcade-cabinet look and kept that way — it is referenced by ~30 components and is not a pixel font. It serves the brand's H2 role: buttons, headings, KPIs, anything bold.

font-sans · Glacial Indifference

Body copy. Buy credits with your Qubic wallet and take on the house or the clock across a dozen Arqade and Qasino mini-games.

Buttons

Four-tier hierarchy: cyan primary, magenta secondary, tertiary low-emphasis, amber the gradient fallback for actions that fit neither. danger is a deliberate one-off for the GM burn action.

cyan

magenta

tertiary

amber

danger

Components

BrandLockup — logo

Qubic's own mark and this project's wordmark, deliberately never merged into one lockup. Always on its own opaque panel — never over game art.

GAMES

Links

Inline link in body copy: normal · hover me

Links use the primary accent plus an underline — never colour alone, so they stay identifiable without it.

Tabs — active / inactive / hover

Each tab carries its section's own accent (green Qasino, cyan Arqade) as a bottom border; inactive keeps a discrete grey one. Click to switch, hover an inactive one to see its hover tint.

PillNav — anchor strip

The second tab pattern, used at the top of this page. Pills rather than underlines, and they navigate instead of switching state — that is the whole distinction from CategoryTabs above, and the two should not converge. Dev-only for now.

GameCard — game thumbnail

Affordable and unaffordable, the two states the credit balance drives.

Play

Blaq Jack30-90 Cr.

Blackjack across 3 simultaneous hands against the house — or play the house yourself.

Sky Fighter10 cr.

Fly your jet through waves of enemies, then take down the alien boss.

ChampionBadge — champion widget

Last ChampionXYYRDZ…RVXF8420 pts

ScoreboardPot — pot widget

The player-facing pot, above the public scoreboard. The GM's own pot figure is not a separate component — it is a large KPI, see GM widgets below.

Pot9,640,000 QUBIC

CreditBadge

0credits

1,250credits

Surfaces & alpha

bg-background-elevated

bg-background-elevated/60 — header

bg-background-elevated/40 — status banner

TransactionNotice

The Qubic network is stalled — ticks aren't advancing. A transaction sent now would never execute.

The Qubic network is congested — confirmation may take several minutes longer than usual.

Network meter — all 5 levels, plus loading

loadingbefore the first measurement lands — same footprint as every level below, so the banner never shifts layout once it does

oklag < 1 min

fair1–5 min

slow> 5 min, or < 1 tick/s

degradedticks frozen — blocks transactions

downRPC unreachable — blocks transactions

Modals

These render as real full-screen overlays, so they open over the page — that is how a player actually sees them. Close with the ✕ at the top right. The result modals play their real sound.

Result tiers: Lost is red, Win green, Wow amber, Tie cyan — the only place those three gameplay-only colours legitimately appear in a modal.

Data & tables

GmHistoryTable — sortable, paginated

64 fake rows, so pagination is live: click a column header to sort, use the pager below. Result and status carry their own tone colours (good / warning / bad).


Aug 28, 2026, 9:25 AM	Played Poqer	Loss	Settled	-20
Aug 28, 2026, 9:09 AM	Insert Coin	—	Confirmed	+100
Aug 27, 2026, 9:18 AM	Played Blaq Jack	Win	Settled	+60
Aug 27, 2026, 9:02 AM	Played Shuriqen	Tie	Settled	0
Aug 26, 2026, 9:55 AM	Played Poqer	Loss	Settled	-20
Aug 26, 2026, 9:11 AM	Cash Out	—	Failed	+50
Aug 25, 2026, 9:48 AM	Played Blaq Jack	Win	Settled	+60
Aug 25, 2026, 9:04 AM	Cash Out	—	Pending	-50
Aug 24, 2026, 9:57 AM	Insert Coin	—	Confirmed	+100
Aug 24, 2026, 9:41 AM	Cash Out	—	Failed	+50
Aug 23, 2026, 9:50 AM	Played Shuriqen	Tie	Settled	0
Aug 23, 2026, 9:34 AM	Cash Out	—	Pending	-50
Aug 22, 2026, 9:43 AM	Played Poqer	Loss	Settled	-20
Aug 22, 2026, 9:27 AM	Insert Coin	—	Confirmed	+100
Aug 21, 2026, 9:36 AM	Played Blaq Jack	Win	Settled	+60
Aug 21, 2026, 9:20 AM	Played Shuriqen	Tie	Settled	0
Aug 20, 2026, 9:29 AM	Cash Out	—	Failed	+50
Aug 20, 2026, 9:13 AM	Played Poqer	Loss	Settled	-20
Aug 19, 2026, 9:22 AM	Cash Out	—	Pending	-50
Aug 19, 2026, 9:06 AM	Played Blaq Jack	Win	Settled	+60
Aug 18, 2026, 9:59 AM	Cash Out	—	Failed	+50
Aug 18, 2026, 9:15 AM	Insert Coin	—	Confirmed	+100
Aug 17, 2026, 9:52 AM	Cash Out	—	Pending	-50
Aug 17, 2026, 9:08 AM	Played Shuriqen	Tie	Settled	0
Aug 16, 2026, 9:45 AM	Insert Coin	—	Confirmed	+100
Aug 16, 2026, 9:01 AM	Played Poqer	Loss	Settled	-20
Aug 15, 2026, 9:54 AM	Played Blaq Jack	Win	Settled	+60
Aug 15, 2026, 9:38 AM	Played Shuriqen	Tie	Settled	0
Aug 14, 2026, 9:47 AM	Cash Out	—	Failed	+50
Aug 14, 2026, 9:31 AM	Played Poqer	Loss	Settled	-20

1–30 of 64

Page 1 / 3

GM widgets

KPIs

Arqade pot4,820cr.

lg — the one hero figure of a view

Players42

md — a widget's headline number

Games played392

sm — secondary figure beside an md

Last activeAug 28, 2026

xs — context, not a measurement. Body face, not the display one.

Time selector

Segmented control in the line chart's header. Selected slot is a solid accent fill, not an outline.

GmLineChart — with its own KPIs, legend and time selector

Players42

Games played392

Players Games played

GmDonutChart — two-slot split

Arqade238(61%)

Qasino154(39%)

GmBarChart — count + win/tie/loss split

Full width here, half-width on /gm — and the labels are the same size in both. The SVG viewBox is set to the container's own pixel width, so one user unit is one pixel and only the two tracks stretch. That is what lets the in-chart labels obey the 13px floor like everything else: they were only ever 8-9px to survive being scaled down. Hover a row for its tooltip.

Split by game

Arqade Qasino Win Tie Loss

Chart legend

Cyan / magenta is the app's fixed two-slot categorical identity — the same pair as the button hierarchy, reused rather than inventing chart-only colours. Win / tie / loss is a status ramp and never doubles as a category.

ArqadeQasinoWinTieLoss

Utilities & gotchas

text-glow-* and shadow-neon-* are no-ops. The neon glow read as arcade cabinet rather than a real product, so both were emptied rather than stripped from ~70 call sites. Adding one to new markup does nothing.
font-pixel is not a pixel font — see Typography above.
Glacial Indifference (the body face) never renders below 13px, anywhere, including inside charts. font-pixel is exempt and still uses 8-12px for uppercase labels and button sizes. If a chart label looks too big for its geometry, grow the geometry — do not shrink the type.
Button variant names (cyan, magenta, amber) no longer describe their colour. They are hierarchy tiers.
There is no neon-purple, neon-blue or neon-yellow token. The five above are all that exist.

SkyFighter — sprites

Player

player

16×16

Enemies

stingerRush is the same grid on a hotter palette, for the charge pattern.

darter

12×12

stinger

14×12

stingerRush

14×12

Boss

A/B are the tentacle animation frames; hit variants flash on damage.

bossA

24×20

bossB

24×20

bossHitA

24×20

bossHitB

24×20

Projectiles

playerBullet

3×6

enemyBullet

4×4

bossBullet

4×4

Shuriqen — sprites

Ninja

The throw pose swaps the body block only, so it reuses the same leg frames.

ninjaIdle

40×48

ninjaRunA

40×48

ninjaRunB

40×48

ninjaJump

40×48

ninjaThrow

40×48

ninjaThrowRunA

40×48

ninjaThrowRunB

40×48

Walkers — 3 stages

One grid, three palettes: forest, swamp, dungeon. A/B are the walk cycle.

walkerA

32×36

walkerB

32×36

walkerASwamp

32×36

walkerBSwamp

32×36

walkerADungeon

32×36

walkerBDungeon

32×36

Flyers — 3 stages

A = wings up, B = wings down.

flyerA

32×28

flyerB

32×28

flyerASwamp

32×28

flyerBSwamp

32×28

flyerADungeon

32×28

flyerBDungeon

32×28

Boss — dragon

End of stage 3 only; stages 1 and 2 have no boss.

dragon

64×44

dragonOpen

64×44

dragonHit

64×44

Projectiles

shuriken

18×18

fireball

20×20

poisonBall

20×20

Effects

explosionA

32×32

explosionB

32×32

Scenery

Parallax layers and ground tiles, one set per stage theme.

obstacle

32×28

farRidge

72×26

nearRidge

64×22

farRidgeSwamp

72×26

nearRidgeSwamp

64×22

farRidgeDungeon

132×60

nearRidgeDungeon

120×68

groundTile

24×26

groundTileSwamp

24×26

groundTileDungeon

24×26

Qlimb — sprites

Princess

princessIdle

36×34

princessWalkA

36×34

princessWalkB

36×34

princessJump

36×34

Goal

unicorn

32×23

Enemies

toad

18×15

butterfly

20×18

Projectiles

fireballA

13×12

fireballB

13×12

fireballASwamp

13×12

fireballBSwamp

13×12

HUD

heart

7×6

Scenery

Masonry tiles and torches, one palette per tower.

towerWall

24×20

towerWallSwamp

24×20

towerWallFire

24×20

platform

12×6

platformSwamp

12×6

platformFire

12×6

battlement

16×10

battlementSwamp

16×10

battlementFire

16×10

torchA

8×12

torchB

8×12

torchASwamp

8×12

torchBSwamp

8×12

torchAFire

8×12

torchBFire

8×12