Every Prizma component, documented with its anatomy, variants, states, and tokens. Each component maps one to one with its Figma counterpart — same names, same tokens, same behavior.
Button
Buttons trigger actions. Prizma has three variants — primary, secondary, and tertiary — each scoped to a different visual weight and use case. All…
Button Group
Button groups define how multiple buttons are arranged in a flow. Four orientations — vertical and horizontal, each with a normal and reversed…
Card List
Card Lists present a set of selectable verification steps or modules. Each item has an icon, a label, and an optional badge. Used as the main…
Checkbox
Checkboxes allow users to select one or more items from a set, or toggle a single option on or off. Prizma checkboxes support unchecked, checked, and…
Dropdown
Dropdowns allow users to select a single option from a collapsible list. Used for document types, country selection, and other enumerated choices…
Input
Inputs collect text from users. Prizma includes a standard text field, OTP cells for verification codes, and a multiline variant. All inputs share…
List
The List component shows a numbered sequence of steps with clear progress indicators. Each row is independently styled as done, active, or pending…
Loading
Loading components communicate that the system is working. Prizma provides a spinner for indeterminate states and a progress bar for determinate…
Modal
Modals interrupt the current flow to deliver critical information or request a decision. Prizma modals always include a title, a supporting message…
Navigation Bar
The Navigation Bar is the persistent header present on every step of a Prizma verification flow. It provides orientation (title), backward navigation…
Radio Button
Radio buttons allow users to select exactly one option from a set. Unlike checkboxes, selecting one automatically deselects others. Prizma radios are…
Separator
Separators create visual breaks between content sections. Prizma offers a plain horizontal rule and a labeled variant — commonly used to separate…
Signature Pad
The Signature Pad captures a freehand signature from the user. It supports an empty waiting state and a signed state that confirms capture. Used in…
Snackbar
Snackbars deliver brief, contextual feedback after a user action or system event. They appear at the bottom of the screen, auto-dismiss after a few…
States Block
The States Block is a full-screen layout used to communicate a process state: loading, success, or error. It centers a status icon, a title, and…
Stepper
Steppers show users where they are in a multi-step verification flow. Each segment is in one of three states: done, active, or pending. Prizma…
Timer
The Timer component displays a visible countdown before a biometric capture event. It prepares users for the moment of capture, reducing failed…