Section 01
Buttons — Full Library
All variants, states, and surfaces. Height: Primary/Secondary = 56px, Tertiary = 48px. Min touch target = 44×44pt.
Primary Button — Light Surface
Secondary & Tertiary — Light Surface
Secondary Default
Secondary Disabled
Tertiary / Ghost
Destructive
Buttons on Dark Surface
Icon-Only Buttons & FAB
Segmented / Button Group
Button Tokens: Primary = goldGrad bg, #0C1220 text, glowGold shadow, radiusFull, height 56px.
Secondary = transparent bg, borderStrong, same height. Tertiary = text-only with underline.
Disabled = opacity 0.38 on any variant. Loading = spinner replaces label. Min touch = 44×44pt.
Section 02
Avatars
Circular user representations with initials fallback, status dot, and stack variants. Sizes: XS(24) S(32) M(40) L(48) XL(64).
Size Scale — Initials Fallback
Color Variants (M size)
Status Dot Indicator
Avatar Stack
Members (stacked, -8px overlap)
Section 03
Badges & Status
Notification dots, numbered badges, status pills, and live badge. Used to convey counts and system states.
Notification & Count Badges
Status Pills
Section 04
Dividers
Three divider patterns: full-bleed, inset (16px from left), and labeled (centered text).
Full-Bleed Divider
1px height · #E8E8E8 · width 100%
Inset Divider (16px left margin)
Used in list items — aligns content edge to right
Labeled Divider
Centered label with equal-weight lines — used in lists and auth flows
Section 05
Spinners & Loading States
Three spinner sizes for different contexts. Gold ring = Multipl brand. Page-level spinner uses frosted overlay.
Inline (16px)
Inside buttons, form fields
Standard (40px)
Card and section loading
Page-Level (frosted overlay)
Spinner Spec: Gold (#F5C842) ring with rgba(245,200,66,0.2) track · 3px stroke · CSS spin animation 0.8s linear.
Dark spinner: #0C1220 ring on rgba(12,18,32,0.15) track · 2.5px stroke. Page overlay: white 70% opacity + blur(12px).
Section 06
Icon Usage Rules
24px grid, 5 semantic color variants. Always pair with a minimum 44×44pt touch target. Never use icons alone without labels for critical actions.
Color Variants (24px baseline)
Size rules: 24px icon within 44×44pt tap target · 20px icon in compact rows (40px target) · 16px inline in text.
Color rules: Gold = primary action only. Teal = positive/credit. Coral = error/debit. Mid = navigation/secondary. Light = metadata.
Do/Don't: DO use icons + labels for bottom nav. DON'T use gold icons for decoration — reserve for CTA emphasis.