<aside> 🚨 for detailed specs / properties not shown on this page please just check Figma file and recreate develop as close to as it looks in figma

</aside>

the top bar is composed of three areas:

  1. the left side, mostly for the back button, or for closing a full-page view, e.g. password reset flow
  2. the middle, which is the page name
    1. text has color of gray-700, 16 font, Red Hat Display, capitalized
  3. the right side, which houses icons or text buttons

color of top bar varies (as seen below) and status bar (apple) should match the color during user experience.

variants

there are 3 variants of the top bar

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ada4055e-79f3-49ec-ad87-2f5d3ea35359/Untitled.png

  1. default - the one used by default
  2. game mode - the one used when participants are participating in a game
  3. app access - the green one that is used for flows that help you access the app, e.g. password reset, login, etc.