Ronin Waypoint UI guidelines
Overview
This guide covers essential components for incorporating Ronin Waypoint into your app, ensuring that users enjoy a cohesive and intuitive sign-up and sign-in experience.
Key elements of Ronin Waypoint's front-end integration include:
- Default sign-up and sign-in button
- Assets for building custom buttons
- How to display sign-in with Ronin
Default sign-in button
| Description | Default | Dark | Light |
|---|---|---|---|
| Default sign-in button |  |  |  |
Standard assets for building custom buttons
If you want to create the sign-in button yourself, use the following official logos and styling guides:
| 24px | 48px | 64px | 96px | |
|---|---|---|---|---|
| Logo color |  |  |  |  |
| Logo white |  |  |  |  |
The following table provides the styling guides for the default button:
| Theme | Example | Properties |
|---|---|---|
| Default | |
|
| Dark | |
|
| Light | |
|
How to display sign-in with Ronin
When Ronin is the only sign-in option
If using only Ronin for sign-in, provide all available Ronin options in a single column, with Ronin Waypoint at the top:
- Ronin Waypoint
- Ronin Wallet browser extension
- Ronin Wallet mobile app
When you offer other options alongside Ronin
If you offer Ronin along with other sign-in options, place a single “Sign in with Ronin” button at the top of your login screen:
This button should open a separate screen with all Ronin login options: Ronin Waypoint, Ronin Wallet browser extension, and Ronin Wallet mobile app:
This helps keep the main interface uncluttered and user-friendly.
View additional examples
| Description | Example |
|---|---|
| Sign in with other account services |  |
| Sign in with wallet providers |  |
| Sign in with other account services and socials (compact view) |  |
| Sign in with other account services and socials (vertical view) |  |
| Sign in with other wallet providers, account services, and socials |  |
Example login pages
Dark mode:
Light mode:
