YolkUI playground
Design tokens. Components will appear here as they are built.
Button
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
Pill
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
Icon spacing
xs · 28
sm · 32
default · 36
lg · 40
States
Badge
neutralDraftDraftDraft
brandBetaBetaBeta
accentNewNewNew
successPaidPaidPaid
infoSyncingSyncingSyncing
warningExpiringExpiringExpiring
destructiveFailedFailedFailed
Sizes, shape and count
PaidPaidPaidPaidPaid31299+2
Colors
primaryAa text
secondaryAa text
mutedAa text
accentAa text
accent-primaryAa text
brandAa text
destructiveAa text
successAa text
warningAa text
infoAa text
cardAa text
popoverAa text
Surfaces
background / border
input border
Radius
rounded-sm
rounded-md
rounded-lg
rounded-xl