​
Mobile-first

  • Use legible font sizes, line heights, and adequate contrast for small screens.
  • Help people concentrate on primary tasks and content by limiting the number of onscreen controls while making secondary details and actions discoverable with minimal interaction.
  • Use tab navigation to simplify movement within the app.
  • Ensure layouts adjust smoothly to various screen sizes and orientations.
  • Design for vertical scrolling rather than horizontal, as it’s more natural on mobile.
Metadata Guidelines

​
First impression and user onboarding

  • Your app metadata will be the first thing a new user will see, and is what they’ll base their first impression on. Aim for your metadata to provide helpful context, and properly set expectations with new users on what your app does.
  • Consider the experience for new users opening your app for the first time. Include your value props, a light and delightful onboarding flow, or easy access to guides / FAQs from your homepage to help new users orient themselves.
  • Consider adding a “guest” mode, allowing users to explore your app before asking them to sign in. Defer auth until needed. Triggering the auth tray as the first thing a user sees on app open can create a jarring experience, and asks users to take an action they may not be confident in before demonstrating the value of your app.
Metadata Guidelines

​
Gasless transactions

Enable users to transact on your apps without needing gas by using wallet solutions that support gas sponsorship like Base Account and Paymaster.

​
Legible identity

Never display wallet addresses as default usernames. Instead, leverage identity solutions like ENS and Basenames.

​
Localization

Many of our users are located around the world. Apps that are localised for each region will perform significantly better. For next.js apps, you can use Next.js Internationalization to localize your app.