DocumentationAPI Reference
Design · Prizma Design Foundations

Typography

Two typefaces, one cohesive system. Rethink Sans for display and impactful headings. DM Sans for all UI text: body, labels, buttons, inputs. Every style maps to a token used identically in Figma and CSS.

Display / Headings
Ag
Rethink Sans400 · 500 · 600 · 700 · 800

Used exclusively for Display and Headline categories. Brings personality and visual impact to large-scale text without sacrificing legibility at high weights.

Body / UI
Ag
DM Sans400 · 500 · 600 · 700 · 800

The workhorse of the UI. Used for Body, Button, Label, Input, and Tooltip. Optimised for small sizes and high-density layouts — reads cleanly at 11px.

Tokens, not raw values

Every type style is a named token. Font size, weight, and line-height are bundled — never set individually. Use the token, not the number.

Two families, strict roles

Rethink Sans is for impact. DM Sans is for function. Mixing them outside their designated categories breaks visual hierarchy.

Weight is semantic

Weight within a type style is fixed by the token. Bold is reserved for headings and emphasis — don't apply it to body or label styles arbitrarily.

Category roles

DisplayRethink SansHero headlines, onboarding titles, verification outcomes at large scale.
HeadlineRethink SansSection headers, modal titles, step titles within a flow.
FeedbackDM SansReal-time capture guidance shown over the camera.
BodyDM SansParagraphs, descriptions, and supporting copy.
ButtonDM SansLabels inside primary, secondary, and tertiary buttons.
Label / Link / TooltipDM SansForm labels, inline links, and tooltip copy.

Display

Rethink Sans. Hero moments and top-level screen titles.
D1Rethink Sans · 80/84 · 800 · -1.5px
Verify identity
D2Rethink Sans · 48/50.4 · 800 · -0.5px
Verify identity

Headline

DM Sans. Section and card titles inside product surfaces.
H1DM Sans · 32/36.8 · 700 · -1.5px
Keep a neutral expression
H2DM Sans · 24/27.6 · 700 · -1px
Keep a neutral expression
H3DM Sans · 20/23 · 700 · -0.5px
Keep a neutral expression
H4DM Sans · 18/20.7 · 500 · -0.5px
Keep a neutral expression
H5DM Sans · 16/18.4 · 500 · -0.5px
Keep a neutral expression

Feedback

DM Sans. Real-time capture guidance shown over the camera.
LDM Sans · 24/28.8 · 700 · -0.5px
Ensure good lighting
SDM Sans · 18/21.6 · 500 · -0.5px
Ensure good lighting

Body

DM Sans. Paragraphs, descriptions, and supporting copy.
M BoldDM Sans · 14/18.2 · 700
Keep a neutral expression
M RegularDM Sans · 14/16.8 · 400
Keep a neutral expression
S BoldDM Sans · 12/15.6 · 700
Keep a neutral expression
S RegularDM Sans · 12/15.6 · 400
Keep a neutral expression

Button

DM Sans. Labels inside primary, secondary, and tertiary buttons.
MDM Sans · 18/18 · 500
Continue
SDM Sans · 14/14 · 500 · -0.5px
Continue
M UnderlinedDM Sans · 18/18 · 500
Continue
DM Sans. Form labels, inline links, and tooltip copy.
Label MDM Sans · 14/14 · 700
Date of birth
Link M BoldDM Sans · 14/17.5 · 700
Learn more
Link S BoldDM Sans · 12/15.6 · 700 · -0.5px
Learn more
Link S MediumDM Sans · 12/15.6 · 500
Learn more
Link M ExtraBoldDM Sans · 14/17.5 · 800
Learn more
Tooltip MDM Sans · 16/18.4 · 500 · -0.5px
Position your face in the frame
DisplayD1–D2Reserved for hero surfaces and top-level screen titles; inside product UI, start hierarchies at Headline.Onboarding heroSuccess screens
HeadlineH1–H5Section and card titles. Pick the level by hierarchy, not by the size you want — sizes follow the scale.Screen titlesCard titlesSection headers
FeedbackL, SReal-time guidance over the camera; L for the primary instruction, S for secondary hints.Capture overlayLiveness hints
BodyM, SParagraphs and supporting copy; Bold variants only for inline emphasis, never for headings.DescriptionsHelp textLegal copy
ButtonM, SButton labels; M for standalone CTAs, S for compact and inline buttons.Primary CTASecondary actions
Label / Link / TooltipM, SForm labels, inline links, and tooltip copy — never re-purpose these for body text.Form fieldsInline linksTooltips
Was this page helpful?