brand

green and dark gray are scale's brand colors.

green is the primary color, used in buttons, text, etc., while dark gray shows up mostly in logos and other marketing material.

In this section we will only break down the green color as dark gray is leveraged more as a neutral color than a brand color.

• green-50: background of alert/success component
• green-200: not currently used in app
• green-700: not currently used in app, but is used as a hover color in the website
• green-800: this is the primary shade for green. background color for most primary buttons. interactable text. placeholder text is green-800 but at 50% opacity.

neutral

although gray-500, gray-700, and gray-900, are brand colors, they are usually used for neutral colors in the design system.

• white: bottom bar color, field input and other component's background color
• gray-100: background color for app, including the "game mode". button text color for e.g. green-800 buttons
• gray-300: icon and font text for inline error/info text on green-800 background
• gray-400: not currently used in the app