Design · Prizma Design Foundations / Components

Components

This section documents every Prizma component, with its anatomy, variants, states, and tokens. Each component maps one-to-one with its Figma counterpart: same names, same tokens, same behavior.

Actions

Inputs and Selection

  • Card lists: Present a set of selectable verification steps or modules.
  • Checkboxes: Allow users to select one or more items from a set, or toggle a single option on or off.
  • Dropdowns: Allow users to select a single option from a collapsible list.
  • Inputs: Collect text from users.
  • Radio buttons: Allow users to select exactly one option from a set.
  • Signature pads: Capture freehand signatures from users.
  • Lists: Show a numbered sequence of steps with clear progress indicators.
  • Navigation bars: Provide persistent headers on every step of a Prizma verification flow.
  • Steppers: Show users where they are in a multi-step verification flow.

Feedback and Status

  • Loading components: Communicate that the system is working.
  • Snackbars: Deliver brief, contextual feedback after a user action or system event.
  • State blocks: Communicate a process state—loading, success, or error.
  • Timers: Display visible countdowns before a biometric capture event.

Layout and Structure

  • Modals: Interrupt the current flow to deliver critical information or request a decision.
  • Separators: Create visual breaks between content sections.
Was this page helpful?