04 / DESIGN SYSTEM
Building Ovaia's visual language.
I wanted the redesign to feel welcoming without making health information harder to navigate. I built a shared visual language for reading, taking action and understanding feedback across health records, recipes and community.
01 / BRAND & FOUNDATIONS

ovaia.
Rose and clay give Ovaia its identity. A deeper red is reserved for actions, helping interactive elements stand apart from decorative colour.
TYPE / DM SANS
Aa Bb Cc
Your history
Needed to rest after lunch and cancelled my evening plans.
Kept for an appointment
One typeface, with size and weight creating hierarchy. Longer notes stay comfortable to read.
02 / COMPONENTS & INTERACTION
Designed for more than the default state.
I considered what happens when people make a choice, complete an action or encounter an error. Persistent labels, clear selected states and written feedback make those moments easier to understand.
ACTIONS & FEEDBACK
Save check-inEdit preferences
Your check-in has been saved.
Enter a valid email address.
FIELDS & SELECTION
Email address
you@gmail.com
We’ll use this to help you access your account.
MildModerateSevere
CALENDAR STATES
A solid fill marks the selected date. Checkmarks are reserved for multiple selections.
SPACING & SHAPE
A repeatable spacing scale keeps related information together and gives separate tasks room to breathe.
STATUS & COMMUNICATION
Colour supports the message, but never carries it alone. Feedback is specific enough to help someone take their next step.
Success
Your check-in has been saved.
Warning
You have unsaved changes.
Error
We couldn’t save your check-in. Please try again.
Information
No entries were recorded on these days.
03 / THE SYSTEM IN PRACTICE
One language, different needs.
Cream surfaces, white cards and plum text bring consistency to different kinds of content. Health records and recipes can feel related without looking identical.
Page → card → content
The cream page establishes the background. White cards group related content. Primary text leads, secondary text supports, and rose identifies actions.
Contrast on white
Primary text 12.4:1
Secondary text 6.3:1
Action text 6.2:1
Explore the full design system ↗