ID Kit
Design Guidelines
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
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
- 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
Partnership example
Verified Human Badge
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
✅ Partners may:- Adapt badge color to suit light/dark mode
- Remove or replace the word human
- Use verification outside of actual World ID-verified users
- Make it look like a World ID badge gives higher permissions than intended
- Change the logo shape
Rules checklist
Layout and Visual
- Correct badge asset used
- Logo is not distorted, recolored or modified
- Minimum height is respected
Placement
- Placed directly next to or below user, display name, or avatar
- Badge is not visually grouped with unrelated badges
- Badge does not imply special privileges unless defined