FMSFMSPrimitives — buttons, badges, cards, inputs, progress.
Variants
Sizes
Status badges
Rounded pill (count)
Tags / chips
STANDARD
Dark border 2px, shadow 6px. Primary use for content cards.
SURFACE
Soft warm border, no shadow. Use for nested or secondary containers.
ACCENT
Lemon accent fill. Use for highlights, callouts, or featured items.
SUCCESS
Green-tinted. For confirmed states, completed tasks, positive outcomes.
DANGER
Coral-tinted. For errors, debt states, destructive actions or missed tasks.
INFO
Purple-tinted. For informational callouts and coins-related surfaces.
Looks good.
This field is required.
border-[#ECEAE0] (soft)
border-2 border-[#2f3136] (strong)
border dashed (neutral 300)