---
title: "Timer"
url: "https://developer.incode.com/design-and-ux/timer/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Timer

The Timer component displays a visible countdown before a biometric capture event. It prepares users for the moment of capture, reducing failed attempts caused by user unreadiness.

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

<div class="dh-stage"><span class="dh-pz-timer"><b>0:45</b></span></div>

The countdown ring drains as time passes. The component always renders dark-on-dark regardless of page mode — its surface, border, and text are static tokens.

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

```dh-comp-tokens
--timer-surface | Cell background | Component
--timer-border | Cell border color | Component
--timer-text | Digit text color | Component
--timer-font-size | Digit font size | Component
--radius-timer | Cell 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.