abacus design system
high desert · v3landingunder the hoodevery component below is imported from @abacus/ui, every color from @abacus/tokens. no surface of abacus is allowed to style itself any other way.
the mark
vertical abacus: two sage (values), three sky (time), two clay (money), scooped-lip beads. click it — the splash behavior (shuffle → settle, no glow) is part of the component.
the beads
time · sky
#3F86C4 day · #7DB9E8 night
values · sage
#69854A day · #9AB374 night
money · clay
#98452C day · #D07B55 night
accents
ember
#D4713D · #E08A4C
bloom
#B8402F · #D65B47
glow
#E3A82B · #EFBE53
slate
#6E7579 · #8A9299
day ground
ground
#F4EEE1
surface
#F8F3E8
raised
#FAF6EC
recess
#E9E1CE
line
#D9CEB5
ink
#3B3128
night ground
ground
#171310
surface
#1D1812
raised
#251E16
recess
#110E0B
line
#3A3126
ink
#EDE4D3
the type
display · bricolage grotesque 700 · lowercase always
it was always about time
heading · 600
we made it to money
body · figtree 400
There's no skip button here, because the methodical, reflective nature of onboarding is what abacus is about.
numbers · tabular
1681122.6$4,000
the touch
pills
circle buttons · sand + the three domains · toggle sinks in
the abacus slider · glow is earned at 5
on a scale of 1–5, how memorable was this?
3 / 5
input
the motion
settle
620ms · cubic-bezier(0.22, 1, 0.36, 1)bead
480ms · cubic-bezier(0.34, 1.4, 0.44, 1)touch
160ms · easethe marks
add
forward
confirm
time
values
money
night
day
sealed
close
reset
expand
email
key
zoomIn
zoomOut
fontawesome free today behind the shared icon component; the pro-light swap is a mapping change. never emoji.