MAE Brand & UI Visual Guide
Generated 2025-08-27. This page visualizes the current App and Website (Astra) styles.
App Colors – Light Theme
Primary
#3700B3
Primary Variant
#6200EE
Secondary
#018786
Secondary Variant
#03DAC5
Background
#FFFFFF
Primary Text
#000000
Secondary Text
#666666
Allergen
#B00020
Warning Background
#FFF3E0
Food Finds Safe Background
#E8F5E9
Food Finds Safe Text
#2E7D32
Surface Light
#FAFAFA
Surface Variant Light
#F5F5F5
App Colors – Dark Theme
Primary
#03DAC6
Primary Variant
#018786
Secondary
#03DAC6
Secondary Variant
#018786
Background
#121212
Primary Text
#FFFFFF
Secondary Text
#BBBBBB
Allergen
#FFFF00
Warning Background
#4A3525
Chip Background Selected
#333333
Chip Info Background
#2C2C2C
Surface Variant Dark
#2C2C2C
App Colors – Grayscale Theme
Primary
#555555
Primary Variant
#333333
Secondary
#777777
Secondary Variant
#555555
Background
#FFFFFF
Primary Text
#000000
Secondary Text
#666666
Allergen
#FFFFFF
Surface Variant Gray
#E0E0E0
Website (Astra) Colors
Brand Primary
#1B9C85
Brand Secondary
#178E79
Heading Text
#0F172A
Body Text
#454F5E
Background
#FFFFFF
Subtle Background
#EDF6EE
Border / Dark Accents
#06140C
Extra Pale Green Accent
#D4F3D7
Alternate Text/Dark
#222222
Typography
Headings – Montserrat 600
Sample H1: Making Allergies Easy
Sample H2: Safer, more confident living
Sample H3: Tools and resources
App Body – Roboto
Body 1 (16sp): Plain-language UI copy, instructions, and labels.
Body 2 (14sp): Secondary details, descriptions, and helper text.
Caption (12sp): Metadata, timestamps, or footnotes.
Website Body – Source Sans Pro
Default body text for the marketing site as configured in Astra.
Allergen & Chips
Allergen Highlight
Light theme allergen (#B00020)
Dark theme allergen (#FFFF00)
Grayscale allergen (#FFFFFF)
Chips
Selected (Light)
Info (Light)
Selected (Dark)
Info (Dark)
Food Finds: Safe
Website Buttons (Astra)
Primary background #1B9C85; hover #178E79; text #FFFFFF. Outline uses #1B9C85 and inverts on hover.