Skip to content
Design system

Ledger

The receipt you were never given. Gacha games are built so you lose track of what you spend; GachaDex supplies the figure they withhold. The interface is paper, rule, and stamp — quiet everywhere except the one thing that carries feeling, which is rarity.

Written spec: docs/DESIGN_SYSTEM.md

01

Color

Assigned by role, never by mood. Tally is money and progress, stamp is attention and cost, rarity is the pull itself. Nothing else gets a color — a button is ink or paper unless it carries one of those three.

Paper & rule
paperpage ground
paper-raisedcards
paper-sunkwells, zebra rows
rulethe default border
Ink & roles
inkprimary text
ink-3labels only, never prose
tallymoney, positive, on-track
stampthe seal — cost, finality
Rarity — stamped ink, not light
UR

Ephemeral

SSR

Ephemeral

SR

Ephemeral

R

Ephemeral

UR carries a single slow foil sweep — the one ornament in the system, capped at one element per view and removed entirely under reduced motion.

02

Type

Three faces, three jobs: a slightly eccentric display face over strictly institutional body and data faces. The pairing is the personality — a human keeping a strict book.

Display — Bricolage Grotesque

Every pull has a price

UI — IBM Plex Sans

Body copy, buttons, navigation, and form text. Institutional and unfussy, so the figures beside it stay the loudest thing in the row.

Data — IBM Plex Mono, tabular
$1,284.00$9.99$112.50$1,406.49

Every number is mono, tabular, and right-aligned in a column. A column of figures that doesn't align is a column you can't scan — and scanning figures is the product.

03

The 正 tally

Pity is counted in strokes. 正 is drawn one stroke at a time to tally to five, so a partial group shows at a glance how deep into the current five you are. It turns the most anxious number in a gacha game from a figure you parse into a shape you read.

Pity — character banner73 / 90

17 pulls to the guarantee.

04

The receipt

The other signature. A logged pull is a record, so it looks like one: mono type, dotted hairlines, a right-aligned figure column, a torn edge, and a vermilion seal once it is committed.

Honkai: Star Rail

Phainon debut

Pulls
10
Pity at hit
73
Result
5★
50/50
Won
Cost
$15.84
05

Surfaces & figures

Rules do the structural work, not shadows. A card is paper on paper with a hairline; depth is the tone step between them, the way a stacked document actually reads. Shadow is reserved for layers that genuinely float.

Spent this month

$128.40

of a $200 limit

Pulls logged

1,284

across 3 games

Over budget

$42.10

August

Zebra rows — literal greenbar
  • Aug 28Oneiric Shard ×1600$29.99
  • Aug 24Monthly pass$4.99
  • Aug 19Oneiric Shard ×300$4.99
  • Aug 11Nameless Honor$9.99
06

Buttons

One button, four roles. A filled surface always sets its text to paper rather than white — white on the mid-tone tally green reads at 1.6:1, well under the floor.

Default height is 44px — the touch-target minimum. The dense 32px size is for toolbars where a pointer is already implied.

07

Icons

One 24px grid, 1.5px stroke, round caps. Emoji are banned as interface icons: they ignore color and stroke weight, render differently on every platform, and a row of them never sits on the same optical baseline.

home
dashboard
collection
calendar
chart
wallet
receipt
target
compass
plus
minus
check
close
search
filter
download
upload
trash
edit
undo
copy
external
bell
flame
clock
crown
star
heart
sparkle
coin
warning
info
message
shield
lock
user
settings
share
sun
moon
monitor
menu
chevronRight
chevronDown
arrowRight
arrowUp
08

Writing

Words are design material. Name things by what the user controls, keep an action's name constant through its whole flow, and make every empty screen an invitation rather than a wall.

Avoid
  • “Submit” → toast: “Success!”
  • “Something went wrong.”
  • “No data available.”
  • “Budget threshold config”
Prefer
  • “Log pull” → toast: “Pull logged”
  • “Storage is full — export a backup, then remove old entries.”
  • “No spending this month yet. Log your first purchase.”
  • “Monthly limit”