Avora
Avora is a meal planning and nutrition app that consolidates verified, expert-reviewed recipes into one clean, trustworthy source. Built in React + Vite with Capacitor for native Android delivery, the app pairs a warm editorial type system (Lora + Poppins) with a muted sage green accent palette. Every screen - from onboarding to recipe detail - is designed to make healthy eating feel effortless.
The Problem
People who want to eat healthily are forced to cobble together information from blogs, YouTube, and fitness forums - none of which are nutritionally verified, consistently formatted, or complete. Avora solves this by being the one app a health-conscious eater needs: curated, verified, and built around complete nutritional data rather than aesthetics or virality.
One source. Verified. Beautiful.
The Stack
The web layer is React + Vite + Tailwind CSS v4. Capacitor bridges the web app into a native Android shell - a single codebase delivering both a browser prototype and an installable APK. The entire UI is driven by a formal design token system: every colour, radius, shadow, and motion value is defined in design-tokens.json and consumed consistently across all components.
Design System
Avora's design language is restrained by principle. One type pairing - Lora for display, Poppins for UI. One accent hue family - muted sage green from 50 to 900. Warm cream backgrounds instead of clinical white. Every token below is pulled directly from design-tokens.json.
Foundation / System spine
Brand Overview
A health-first design language built around one green family, warm neutrals, editorial typography, and restrained component states.Avora
Design System - v1.0.0"Nourish from the inside out."
Avora is a calm nutrition interface built around the principle that wellness should feel effortless, natural, and beautiful. Every token is chosen with intention.
Natural
A single, muted sage green. No rainbow, just nature.
Restrained
Only what's needed. White space is not empty space.
Editorial
Poppins headlines. Lora body. Warmth through serif detail.
Accessible
Every text color at WCAG AA or better, always.