---
title: "Design and UX"
url: "https://developer.incode.com/design-and-ux/design-and-experience/"
section: "design-and-ux"
version: "v1.1"
status: "live"
---
<div class="dh-px-hero"><div class="dh-px-dots"></div><p class="dh-px-badge"><i></i>Design</p><h1 class="dh-px-title">Design and UX.</h1>

This section is for frontend engineers, designers, and product teams integrating [Incode modules](/features-and-modules/modules-overview-and-availability/) into an onboarding or verification flow. It covers what users see, how modules behave, and what you can customize to match your brand.

</div>

<div class="dh-px-cards"><div class="dh-px-grid2"><a class="dh-px-card" href="/design-and-ux/prizma-design-foundations/"><div><p class="dh-px-eyebrow">Foundations · Tokens · Components</p><p class="dh-px-card-title">Prizma Design System</p><p class="dh-px-card-body">Incode’s design system: components, tokens, and the Prizma Dashboard. Start here if you need foundational design decisions, token references, or component specs.</p></div><span class="dh-px-cta">Explore Prizma<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span></a><a class="dh-px-card dh-px-card--purple" href="/design-and-ux/module-customization/"><div><p class="dh-px-eyebrow dh-px-eyebrow--purple">Screens · Customization · Specs</p><p class="dh-px-card-title">Module Customization</p><p class="dh-px-card-body">Per-module documentation covering screens and states, customization options, specs and guidelines, and V1 vs V2 comparisons for every Incode module.</p></div><span class="dh-px-cta dh-px-cta--purple">Explore modules<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span></a></div></div>

<div class="dh-px-band"><p class="dh-px-band-label">Accessibility</p><p class="dh-px-band-lead">Accessibility is built into every module.</p><p>Each module’s Specs &amp; Guidelines page covers accessibility notes specific to that module, including contrast, screen reader behavior, keyboard navigation, and motion guidelines. For the cross-cutting principles that apply across all modules, see the <a href="/general-reference/accessibility/">Accessibility Overview</a>.</p></div>

<div class="dh-rule"><span>How to use this section</span><i></i></div>

When you’re integrating a module:

<Steps>
<Step title="Open the module under Module Customization">Find it in one of the category grids or in the sidebar.</Step>
<Step title="Review Screens & States">Understand what the user will see at every step of the flow.</Step>
<Step title="Review Customization">Understand your branding options for colors, typography, copy, logos.</Step>
<Step title="Check Specs & Guidelines">Design constraints and accessibility notes for the module.</Step>
<Step title="Check V1 vs V2 Comparison">If the module has both experiences, decide which to integrate.</Step>
</Steps>

If you need help locating a module or want to confirm something about a flow, contact your Incode representative.