The Zovia Design System
A mobile-first design system powering all Zovia apps.
Technology should disappear. Users shouldn't think about the interface—they should think about their content.
Remove before you add
Animation explains change
Color indicates state
44×44pt minimum targets
Glassmorphism hierarchy
Learn once, use everywhere
Two visual languages. Same logic. Different expressions.
Monument Valley-inspired interfaces for games and immersive experiences.
Familiar patterns for productivity apps and information-dense screens.
Every component adapts automatically. All apps support both themes out of the box.
Your apps adapt automatically to your system preference
Primary Button
Card Component
This is sample content inside a card component. Notice how all colors adapt seamlessly.
Text Input
Status Indicators
All components automatically adapt to system theme preferences
Tropical Rainforest Dawn • Coral Reef Depths
Morning Mist
#F8F6F2
Dew on Leaves
#E8E3DB
Fern Grove
#7A9179
Forest Ink
#2D3B2A
Leaf Text
#4A5D47
Mist Text
#7A8A77
Accent
#D97AA6
Success
#A8D6A8
Warning
#E67E22
Error
#E74C3C
Info
#00A5A8
Abyssal
#0A0F14
Deep Current
#121820
Mid Water
#1A222C
Parrotfish
#00CED1
Pearl Glow
#E6F3FF
Foam White
#B8D4EA
Staghorn Coral
#FF7F7F
Table Coral
#7FFFD4
Brain Coral
#FFB347
Sea Fan
#FF69B4
Angelfish
#FFD700
Subtle, quiet text hierarchy. Built with SF Pro.
Header • 20pt • Light (300)
The quick brown fox jumps over the lazy dog
Title • 17pt • Light (300)
The quick brown fox jumps over the lazy dog
Body • 15pt • Regular (400)
The quick brown fox jumps over the lazy dog
Caption • 13pt • Regular (400)
The quick brown fox jumps over the lazy dog
Micro • 11pt • Regular (400)
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
Most apps mix icon sets—Material here, Font Awesome there, custom SVGs everywhere. This creates visual chaos. Users subconsciously notice the inconsistency.
We use Phosphor Icons exclusively across every screen, every app, every interaction in the Zovia ecosystem. No exceptions.
Why Phosphor? Because they understand what we understand: consistency is invisible, but its absence is jarring.
Spatial UI (Games)
Thin weight for Monument Valley minimalism. Icons become geometry.
Traditional UI (Apps)
Light/Regular weights for clarity and information density.
State Indicators
Fill weight for selected states, completed actions, active items.
Thin
Games
Light
Apps
Regular
Default
Bold
Emphasis
Fill
Active
Duotone
Depth
And hundreds more. Every interaction, every state, every screen.
Used across the Zovia ecosystem
Smart Grocery Intelligence
Family Calendar
Inventory Management
Counter & Schedule Tracker
Number System Puzzles
Household Continuity
Quiet Check-Ins
30 production packages • 100% phone-only • Zero tablet code