ID Kit

Design Guidelines

Figma Library

ID Kit Figma Library

Access design components and templates for World ID integration

Core structure:

World ID logo
Partner logo (Optional)
Title: "Connect your World ID"
Description: "Scan the QR code to connect your World ID"
QR code container (central and prominent)
Footer: "Terms & Privacy" link
Dismiss (X) icon for closing the modal or window

Note: The QR code is dynamically generated and time-limited. Always ensure it's up to date.

Customization Guidelines

✅ Partners may:

Adjust typography to match brand styles, but retain clear hierarchy (title > body)
Modify corners or shadows to match their brand
Modify colors, so long as contrast and accessibility are preserved
Customize container shape (e.g., rounded corners) and shadow
Add a light/dark mode toggle or theme-matching behavior
Localize the copy if needed (preferably keeping semantic structure)
Add their brand logo above the title

❌ Partners must not:

Remove or replace the World ID logo
Alter or obscure the QR code
Change the copy in a way that misrepresents World ID
Make the QR code too small

Size & Spacing

Element	Recommendation
QR Code	Minimum 160 x 160px
Padding	Min. 24px all sides
Logo size	32-48px width
Font (title)	Minimum 16px
Font (description)	Minimum 14px

Accessibility checklist:

QR code must meet minimum sizing for easy scanning
All text must meet WCAG AA contrast
Modal should be keyboard-navigable and screen-reader friendly
"Terms & Privacy" must be a focusable link

Behavior checklist

Modal should open centered and dim the background
Auto-refresh or invalidate QR code after a set time (e.g., 5 mins)
Optional callback/event on QR scan success
X button should close the modal gracefully

States

Default Waiting for user to scan the QR code

Default state - Waiting for user to scan the QR code

Success - Successful connection

Request canceled - User manually canceled request in World App

Connection lost - Lost connection to server or user offline

Error - Generic technical error or proof failure

The Human Verified Badge signals that an account or user has been verified as a unique human via World ID. It builds trust, improves authenticity, and can be embedded into products across industries (social, gaming, commerce, identity, etc.).

Human Badge Figma Assets

Access all badge variants, sizes, and implementation guidelines for the Human Verified Badge

Open in Figma

Badge design

Symbol: World icon
Label: human in lowercase, optionally styled in pill or badge form

Variants:

Icon-only: For dense UI like leaderboards or tooltips
Icon + label: Preferred for public profiles, social posts, and player cards

Do:

Keep badge small, clear, unobtrusive
Always pair with or near a user identity (e.g. username, avatar)
Use consistent shape and padding

Don't:

Overstyle or animate
Replace or remix copy ("real human", "verified user", etc.)
Add misleading hierarchy (e.g. badge > blue check)

Placement guidelines

Content	Placement	Format
Social profiles	Below or beside username / bio	Icon + label
Gaming profiles	Under character name or stats	Icon + label
Leaderboards	Right of username	Icon + label
Messaging/chat	Right of username	Icon + label
Account dashboards	Near user ID, next to login method, etc.	Icon + label

Theming & Branding