02 · SYSTEM / COMPONENTS
Components
55 shadcn/ui components, fully themed for POSX. This page shows the finance-critical components and their usage constraints — always import from @/components/ui/*, never re-implement.
Button
One solid purple primary button per screen; destructive for dangerous actions; outline / ghost for low priority.
Badge
One badge style per page. Business status mapping: success → Teal · processing → Gold · failed → Rose (system semantic colors stay reserved).
Stat Card
11px mono uppercase label + tabular-nums value + dedicated delta colors (↑ #059669 / ↓ #DC2626, independent of semantic tokens).
Source: World Bank WDI · 2024 / Visa Onchain Analytics · 2025-12 / Nilson / CMSPI · 2025 (from the single data source posx-data.json)
Form
Labels bound to inputs; help text via aria-describedby; amounts right-aligned with currency prefix; irreversible actions require OTP / confirmation.
Table · Transactions
Amount columns right-aligned with tabular figures; signs use semantic colors; status uses business badges.
Alert Dialog · Fund Confirmation
Irreversible fund operations must use alert-dialog (no overlay dismiss), paired with OTP.
Skeleton · Loading
Financial data loads behind Skeletons; never a full-page spinner.
Chart
Colors come from --chart-1..5 (Purple → Teal → Gold → Azure → Rose, strict order); hairline grid; tabular-nums.