---
title: "Signature Pad"
url: "https://developer.incode.com/design-and-ux/signature/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# 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 consent, contracts, and identity affirmation flows.

<div class="dh-rule"><span>Anatomy</span><i></i></div>

<div class="dh-stage"><span class="dh-pz-signature"><svg width="180" height="60" viewBox="0 0 180 60" fill="none" stroke="#262831" stroke-width="2" stroke-linecap="round"><path d="M10 45 C 30 10, 45 55, 65 30 S 100 10, 115 35 S 150 50, 170 20" /></svg></span></div>

<div class="dh-rule"><span>States</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-signature" style="width:200px;height:100px"></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Empty</span><code>.signature-pad</code><p>The dashed canvas invites the user to sign with finger or stylus.</p></div></div><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-signature" style="width:200px;height:100px"><svg width="140" height="50" viewBox="0 0 180 60" fill="none" stroke="#262831" stroke-width="2" stroke-linecap="round"><path d="M10 45 C 30 10, 45 55, 65 30 S 100 10, 115 35 S 150 50, 170 20" /></svg></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Signed</span><code>.signature-pad.has-ink</code><p>Once ink exists, Clear and Confirm actions become available.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--sig-surface | Pad background | Component
--sig-border | Pad border color | Component
--sig-baseline | Signature baseline color | Component
--sig-ink | Drawn stroke color | Component
--sig-signed-bg | Signed state background | Component
--radius-sig | Pad corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.