A single reference for designers, developers, QA, and marketing. Tool-agnostic. Covers primitives, components, content blocks, and screens โ organized from smallest to largest.
28
Color Tokens
Stable โ no additions this iteration
23
Type Styles
App ramp + Em variants
35+
Components
Across 7 groups
2
Platforms
iOS + Android
Key Principles
Source of truth rule: Nothing enters this system without a confirmed source โ Figma node extraction, direct observation, or explicit statement from Ovia product design. No inferences. Anything marked TBD is confirmed to exist but not yet documented. TBD does not mean open to interpretation.
Friday Sync: Any decision not covered by this documentation requires Friday Sync approval before implementation. This includes new color combinations, new component states, and anything outside the documented palette.
Glom legacy colors: The app was built as a merge of multiple products (Glom) with yellow/gold for fertility and teal for pregnancy. All Glom theme colors are being replaced by rebrand tokens. Check for Glom colors on every component you touch.
๐๏ธ Figma
Figma File Structure
The working file is the single source of truth. File: OVIA - Rebrand Q1 2026. Six top-level sections, each serving a specific audience.
Section
Pages
Primary Audience
1 โ Document Information
Cover, Info + Change Log
All
2 โ App Sections
Registration, Homepage, More + Profile, Ovia+, Calendar + DLP, Global Elements, Web
โน๏ธVersion numbers on page names (e.g. v0.6) reflect when that page was last formally updated. A โ emoji indicates brand + dev approval. Friday versions are the official sanctioned reference โ devs and QA should always work from the Friday version, not mid-week WIP.
๐จ Primitives
Color Tokens
All colors are extracted from the Figma paint styles export. The palette is stable โ no new colors will be added this iteration. Apply by Figma style name only, never by hex value directly.
โ ๏ธKnown Issue โ Royal 60 = Royal 80: Both resolve to #212AAE. Likely a Figma data entry error. Do not use Royal 80 in design. Use Royal 60 only.
โ ๏ธKnown Issue โ Royal 30 = Midnight 10: Both resolve to #B6BAF1. Known artifact of extracting a print palette for digital. Use whichever name is already in the component you're working on.
Core Neutrals
Charcoal
#231F20
Text on surfaces; status bar; home indicator; modal body text; data category item labels; bottom nav label text (all states)
White
#FFFFFF
CTA button text; form field backgrounds; modal card backgrounds (Side-by-Side, Stacked Buttons); bottom nav bar background; calendar date pill background
Form White
#FAFAFC
Registration form screen backgrounds
Seashell
#FFFCFC
Calendar Tertiary button bg (Conditional/Disabled); Bulk Edit gradient endpoint; bottom nav bar base on Ovia+ variant
Gray Scale
Gray 10
#F4F4F4
Disabled field fill; button Conditional/Disabled fill; Data Category Icon container (no data = off state); platform tab selector background
Gray 20
#E0E0E0
Button Disabled border; calendar day top bar (no data logged); More List Item divider; bottom nav separator line; iOS Glass tab bar icon container; data section row separator
Disabled field border; disabled label color; bottom nav inactive icon + label (Ovia+ and iOS Glass variants); iOS Glass tab bar inactive color
Gray 50
#787878
Form field placeholder text; calendar day top bar text (off state); legacy data icon color (off/no-data state); calendar date number (future dates: Royal 50 preferred โ Gray 50 as fallback); data category label text (off state)
Gray 60
#5E5E5E
Button Conditional label (Default theme); data category label text (category name โ always Gray 60); More List subtext
Android radio button selected card background; design system sidebar active link background
Royal 20
#DBDDF8
Radio button fill (selected)
Royal 30 / Midnight 10
#B6BAF1
โ ๏ธ Duplicate hex
Royal 40
#9298EA
Rebrand calendar day icon color variant; iOS Glass accent (exploratory)
Royal 50
#4953DC
Button Pressed/Down (Registration theme); calendar date number โ future dates color
Royal 60
#212AAE
โ ๏ธ Duplicate of Royal 80 โ use Royal 60 only. Not yet actively used in documented components.
Royal 70
#5A5E9A
Design system sidebar section label color; nav group header text
Midnight (Dark Blue)
Midnight
#131967
iOS field border (idle); Default CTA fill; Android label; radio selected border; modal headline text; modal No Buttons header bar background; Bulk Edit CTA button fill (CTA variant)
Midnight 10
#B6BAF1
Button Pressed/Down (Default theme)
Midnight 30
#5B64E1
Calendar pill labels; design system sidebar section labels
Pink Family
Fuchsia
#E33E69
Calendar Tertiary button border (Available); Calendar Month Nav Bar background; Fuchsia-state icon color (all legacy data icons when on=true); fertile window dashed border (Legacy/Pregnancy theme); active tab icon color (bottom nav); legend action button border; data category icon container (Fuchsia icon color when on=true)
Fuchsia 80
#E7577D
Android FAB button background
Fuchsia 90
#F62467
Ovia logo mark (SVG); Calendar day top bar (data recorded state); fertile window dashed border (Rebrand theme); Bulk Edit button border (Tertiary variant)
Fuchsia 100
#BF1B47
Form cursor; required asterisk โญ; legacy period icon color (Fuchsia 100); legacy data icon period/ovulation fills; Preg - Weeks Pregnant text color
Blush
#F8A4B2
Carousel image circle bg; Calendar Tertiary hover; FAB menu icon circles (Android)
Blush 20
#FEF4F5
Splash Screen background; Calendar Tertiary Available fill; fertile window day cell background; Calendar Legend action button fill; Data Category Icon container (on=true state = data entered); iOS Glass tab bar active tab pill background; Bulk Edit Blush 20 proposal background
Rose
#F7758C
Calendar Tertiary Pressed/Down fill; Ring Progress Chart arc; Ovia+ Small Card background
Rose 30
#FCCBD4
Calendar Tertiary Conditional border
Feedback
Error
#D0021B
Error field border; error icon + text; destructive modal action button text color (e.g. "Reset my pregnancy checklist"). Only defined feedback color โ no Warning, Success, or Info yet.
โ๏ธ Primitives
Typography
The type ramp is locked to iOS implementation constraints. Do not introduce new sizes, weights, or typefaces. Line height values are fixed and must not be overridden.
โน๏ธEm styles: Emphasis styles are semi-bold weight, not bold. Cmd+B produces bold โ that is wrong. Always apply by selecting the named Em style from the Figma text styles panel. Developers must implement Em styles as distinct tokens, not as a bold modifier.
Typefaces
Typeface
Domain
Source Serif Pro
Display and headline text (confirmed: Registration splash screen title)
Source Sans Pro
UI text โ body, labels, buttons, captions
Ubuntu Sans Mono
Design documentation only. Does not appear in product UI.
App Type Ramp โ Standard Styles
Large TitleNo Em variant
Large Title
34 / 41
Title 1Source Serif Pro โ Bold on splash
What's your first name?
28 / 34
Title 2
Title 2
22 / 28
Title 3Em
Title 3
20 / 25
Headline
Headline (17pt โ same size as Body, distinct style)
17 / 22
BodyEm
Body text โ user input, primary content
17 / 22
CalloutEm
Splash subtitle; contextual text; form labels (iOS)
16 / 21
SubheadEm
Subhead โ Action Sheet option titles (iOS)
15 / 20
FootnoteEm
Option descriptions; button labels (Medium 32)
13 / 18
Caption 1Em
Helper text; Android label (active/small)
12 / 16
Caption 2
Caption 2
11 / 13
Menu LabelEm
Menu Label
10 / 12
Button Label Style
Button labels use Source Sans Pro SemiBold (weight 600) at 17pt. Maps to Headline size/line height but at SemiBold weight.
Create account
SemiBold ยท 17 / 22 ยท Registration 48
๐งฉ Component
Form Input โ Text
Text input fields for registration forms. Two platform-specific implementations with different structural patterns. Both use Form White as the screen background.
iOS โ All States
Default / Idle
Form label
Placeholder text
Focused
Form label
Value (Blurred)
Form label
Linda
Required + Helper
Form label โญ(required)
Placeholder text
Helper text
Error
Form label
Linda
Error text
Disabled
Form label
State
Field BG
Border
Label Color
Notes
Default / Idle
#FFFFFF
Midnight 1px
Midnight
โ
Focused
#FFFFFF
Royal 3px bottom / 1px other
Midnight
Cursor: Fuchsia 100 #BF1B47, 1px
Blurred (value)
#FFFFFF
Midnight 1px
Midnight
Value text: Charcoal
Error
#FFFFFF
Error 1px
Midnight
Error text + icon below field
Disabled
Gray 10
Gray 40 1px
Gray 40
No content shown
Android โ All States (Floating Label Pattern)
Default / Idle
Form label
Focused
Form label
Value (Blurred)
Form label
Linda
Error
Form label
Error text
Disabled
Form label
โน๏ธAndroid uses a floating label pattern โ the label lives inside the field and compresses to Caption 1 (12pt) when focused or filled. iOS keeps the label above the field at full size throughout. Both use the same cursor color (Fuchsia 100) and same focus border treatment (3px bottom, 1px sides).
iOS vs. Android โ Key Differences
Property
iOS
Android
Width
396px
375px
Field height (no helper)
75px
56px (fixed)
Label position
Above field (always)
Inside field, floats on focus
Label idle style
Em Callout SemiBold 16pt
Em Body SemiBold 17pt
Label active style
Unchanged
Em Caption 1 SemiBold 12pt
Border (idle)
Midnight
Royal
Border (focused)
Royal 3px bottom
Royal 3px bottom
Cursor
Fuchsia 100 ยท 1px
Fuchsia 100 ยท 1.5px
Disabled bg
Gray 10 ยท Gray 40 border
Gray 10 ยท Gray 40 border
Border radius
12px
12px
Padding (H / V)
16px / 14px
16px / 8px
๐งฉ Component
Buttons
Three themes โ Registration (pill), Default (rounded rect), Calendar (rounded rect, pink family). Five states per variant. All button labels use Source Sans Pro SemiBold.
Registration Theme โ Pill (28px radius)
Used on splash screen and registration forms
The defining visual of registration buttons. Full pill shape distinguishes them from all other app buttons. Two sizes: Registration 48 (primary) and Registration 40 (compact).
CTA โ Registration 48
Available
Hover
Pressed
Conditional
Disabled
Secondary (Outline) โ Registration 48
Available
Hover
Disabled
โน๏ธThe Conditional state (CTA: gray fill, gray border) is used in the registration nav "Next" button when required fields are incomplete. It is not Disabled โ interaction behavior should be confirmed with the dev team.
Default Theme โ Rounded Rect (6px radius)
Used throughout general app; "Next" button in registration nav
CTA โ Large 50
Available
Hover
Pressed
Conditional
Disabled
Size
Height
Radius
Label Style
Large 50
50px
6px
SemiBold 16pt / 21
Medium-Large (44)
44px
6px
SemiBold 16pt / 21 โ iOS min tap target
Medium-Plus 40
40px
6px
SemiBold 16pt / 21
Medium 32
32px
6px
SemiBold 13pt / 18
๐งฉ Component
Goal Selection
Platform-specific selection patterns for the registration goal screen. iOS uses the Action Sheet; Android uses Radio Buttons. Same content, different interaction affordances.
iOS โ Action Sheet
โน๏ธiOS does not natively support radio buttons. The Action Sheet is used as an alternative. Developer decision driven by platform constraints.
You can change this at any time.
Tracking my cycle and health
Better understand your body by tracking your period, birth control, and health symptoms
Trying to conceive
Track your fertility and ovulation, with daily health tips and advice.
Tracking my pregnancy
Watch your baby's weekly growth and learn what to expect throughout your pregnancy.
Navigating postpartum
Track your recovery after birth and learn what to expect in the first year.
Managing peri/menopause
Track your symptoms and get personalized feedback.
Element
Token
Notes
Row background
White
Both selected and unselected
Row divider
Charcoal
0.333px bottom (hairline)
Option title
Charcoal
Em Subhead SemiBold 15pt / 20
Option description
Charcoal
Footnote Regular 13pt / 18
Selected indicator
โ
ic_checkmark_thick 16px ยท placeholder pending icon system
Container radius
โ
14px
Android โ Radio Button Cards
Primary goal โญ(required)
You can change this anytime
Tracking my cycle and health
Better understand your body by tracking your period, birth control, and health symptoms.
Trying to conceive
Track your fertility and ovulation, with daily health tips and advice.
Tracking my pregnancy
Watch your baby's weekly growth and learn what to expect throughout your pregnancy.
Navigating postpartum
Track your recovery after birth and learn what to expect in the first year.
Managing peri/menopause
Track your symptoms and get personalized feedback.
State
Card BG
Card Border
Radio Icon
Unselected
White
None
ic_bc_circle โ placeholder
Selected
Royal 10
Midnight 1px
ic_radio_filled โ placeholder
โ ๏ธBoth radio icons (ic_bc_circle for unselected, ic_radio_filled for selected) are repurposed placeholder icons pending the final rebrand icon set.
๐ฑ Screen
Registration โ Splash Screen
First screen a new user sees. Introduces the brand, shows a carousel of content slides, and presents two primary actions. iOS and Android variants โ layout identical, platform chrome differs.
โฉ๏ธLegacy swap: Background was Peach 30 #FFD2C5. Now Blush 20 #FEF4F5. CTA button was Blueberry 100 #0B3B60. Now Royal #1A2188.
Color Summary
Element
Token
Hex
Screen background
Blush 20
#FEF4F5
Logo mark
Fuchsia 90
#F62467
Logo wordmark
White
#FFFFFF
Slide title
Charcoal
#231F20
Carousel image circle
Blush
#F8A4B2
Carousel dot โ active
Royal
#1A2188
CTA button fill
Royal
#1A2188
CTA button text
White
#FFFFFF
Secondary button stroke + text
Royal
#1A2188
Platform lower control
Charcoal
#231F20
๐ฑ Screens
Registration โ Form Screens
These screens have been designed but have not yet gone through the formal documentation process. Extraction and documentation pending.
Pending formal extraction
iOS Birthday Selection (4883:75339)
Android Birthday (4883:76445)
iOS Multiday Calendar / Period (4881:75001)
Android Multiday Calendar (4883:76453)
iOS Terms & Conditions (4897:99915)
Android Terms & Conditions (4897:100006)
iOS Email Verification (4907:23316)
Android Email Verification (4907:23832)
iOS Goal Selection (4897:99403)
Android Goal Selection (4897:99509)
iOS + Android Tooltip (4907:23971)
โฟ Reference
Contrast Pairings
WCAG 2.1 verified pairings. Normal text AA: 4.5:1 minimum. Large text AA: 3:1 minimum. When a combination is not listed, do not assume it is approved โ bring to Friday Sync.
Approved Pairings โ Pass AA Normal + Large
Background
Text
Ratio
AA
AAA
Midnight
Blush
8.03:1
โ
โ
Midnight
Gray 30
9.56:1
โ
โ
White
Royal
12.99:1
โ
โ
White
Charcoal
15.12:1
โ
โ
Blush 20
Charcoal
16.3:1
โ
โ
Blush 20
Royal
12.06:1
โ
โ
Form White
Royal
12.46:1
โ
โ
Form White
Midnight
14.78:1
โ
โ
Form White
Charcoal
15.64:1
โ
โ
Restricted Pairings โ Fail AA Normal Text
Background
Text
Ratio
Normal AA
Large AA
White
Fuchsia
4.07:1
โ
โ
White
Gray 40
3.11:1
โ
โ
White
Rose
2.67:1
โ
โ
White
Fuchsia 80
3.47:1
โ
โ
White
Fuchsia 100
6.06:1
โ
โ
โฉ๏ธ Reference
Legacy Swap Map
Old Glom-era and pre-rebrand color names mapped to their rebrand replacements. Developers working on the Android codebase (~13 years old) and iOS should reference this for all token replacements.
โ ๏ธDeprecated token flag: Any legacy color not listed here, including Gray 8 #F3F1F0 (old input form fill), is deprecated and should not appear in any current implementation. Flag any unlisted legacy color to the senior designer.
Registration โ Splash Screen
Element
Legacy Name
Legacy Hex
Rebrand Token
Rebrand Hex
Screen background
Peach 30
#FFD2C5
โ
Blush 20
#FEF4F5
Carousel image circle
Peach 60
#EB897A
โ
Blush
#F8A4B2
CTA button fill
Blueberry 100
#0B3B60
โ
Royal
#1A2188
Secondary button stroke + text
Neutral White 100
#FFFFFF
โ
Royal
#1A2188
Most text on surfaces
Blueberry 100
#0B3B60
โ
Charcoal
#231F20
Registration โ Form Screen Background
Legacy Name
Legacy Hex
Rebrand Token
Rebrand Hex
Peach 10
#FEF1EC
โ
Form White
#FAFAFC
๐งฉ Component
Profile Picture
Displays the user's profile avatar with an add/edit affordance. Used at the top of the Profile screen within the More section. Background is always Blush 20.
Default State
[Add/Edit] photo
Background
Blush 20 โ #FEF4F5
Avatar size
88 ร 88px
Avatar fill
Midnight โ #131967
Label style
Em Callout โ Source Sans Pro SemiBold 16/21
Label color
Charcoal โ #231F20
Container padding
20px top/bottom
Gap (avatar โ label)
12px
Width
Full width (375px on iOS)
โน๏ธThis component always sits directly below the App Header on the Profile screen. It is not reused on other screens in the current design scope.
๐งฉ Component
Category Label
A full-width section divider that separates content groups on list-style screens. Uses Blush as background. Can optionally include an info icon (โ) for contextual tooltips.
Variants
Label Only
GOAL MANAGEMENT
Label + Info Icon
MY CYCLE & HEALTH
โ
Height
36px
Background
Blush โ #F8A4B2
Text style
Em Caption 1 โ Source Sans Pro SemiBold 12/16
Text color
Charcoal โ #231F20
Padding
8px top/bottom, 12px left/right
Info icon color
Midnight โ #131967
Info icon size
16px
Width
Full width (375px on iOS)
Usage in Profile Screen
Five Category Labels appear in the Profile screen, each marking a new data section:
GOAL MANAGEMENT
Top of goal section
MY CYCLE & HEALTH
Cycle settings
PERSONAL INFO
Name, email, DOB etc.
MY HEALTHCARE INFO
Doctor, hospital
MY PARTNER
Partner details
๐งฉ Component
More List Item
The primary row component for the More section. Supports two layouts (label only vs. label + subtext) and four right-side controls: None, Directional Arrow, Toggle Off, and Toggle On. Three interaction states: Available, Hover, and Pressed/Down.
Layout: Label Only
None โ Available
More list item
โ
Arrow โ Available
More list item
โ
โน
Toggle Off โ Available
More list item
โ
Toggle On โ Available
More list item
โ
Arrow โ Hover
More list item
โน
Arrow โ Pressed
More list item
โน
Layout: Label + Subtext
Arrow โ Available
Birth control method
Combination Pill
โน
Arrow + Crown โ Available
My Ovia+ benefits
Ovia+ member โ
โน
No Control โ Available
Health conditions
3 selected
Specs
Height โ Label Only
49px
Height โ Label + Subtext
79px (padding: 4px top / 9px bottom)
Background โ Available
White โ #FFFFFF
Background โ Hover
Gray 10 โ #F4F4F4
Background โ Pressed
Rose 30 โ #FCCBD4
Border (bottom)
1px Gray 20 โ #E0E0E0 (hover/pressed: Gray 10)
Left padding
12px
Label style
Em Body โ Source Sans Pro SemiBold 17/22
Label color
Charcoal โ #231F20
Subtext style
Callout โ Source Sans Pro Regular 16/21
Subtext color
Gray 60 โ #5E5E5E
Info icon color
Royal โ #1A2188
Chevron color
Gray 50 โ #787878
Toggle Off color
Gray 50 โ #787878
Toggle On color
Royal โ #1A2188
Toggle size
51 ร 31px, radius 48px
Knob size
27 ร 27px
Width
Full width (375px on iOS)
๐งฉ Component
More List Group Button
A paired action element used alongside grouped list rows. Appears as a narrow right-side column that acts as a single tap target for an entire group. Three types: Settings Button (full width), Group Button (48px wide, white), and Group Ovia+ (48px wide, Fuchsia โ Ovia+ subscribers only).
Type: Settings Button (Full Width)
โSettings
โน
Width
Full (375px)
Height
50px
Background
Blush 20 โ #FEF4F5
Text + icon
Callout Regular 16/21 โ Charcoal
Icon
Settings glyph (Ovuline font)
Type: Group Button + Group Ovia+
These are 48px-wide columns that sit to the right of a grouped list, spanning its full height. The chevron indicates all rows in the group navigate together. Ovia+ variant uses Fuchsia fill to signal premium status.
Group Button
โน
Group Ovia+
โน
Width
48px
Height
Matches grouped list height (spans all rows)
Group Button bg
White โ #FFFFFF
Ovia+ bg
Fuchsia โ #E33E69
Border
1px Gray 20 โ #E0E0E0 (bottom + left)
Chevron color
Gray 50 / White (Ovia+)
๐ฑ Screen
More โ Profile
The Profile screen is accessed via More โ Profile. It is a long scrollable screen organized into five data sections. It was the first screen designed within the legacy app context. Components used here are reused throughout other More screens.
๐First Legacy App Screen: This was the first rebranded screen designed within the existing Ovia app shell. Many of the components documented in this section were originated here and will be reused across other More screens.
Category Label, Ovia+ benefits row, Grouped List + Ovia+ Group Button
12
My Partner
Category Label, Grouped List + Group Button
13
Settings
More List Group Button โ Settings type
14
Legal
Privacy Policy + Terms of Use links
15
Footer
Ovia apps CTA, social icons, Labcorp attribution
Screen Background
Page bg
Blush 20 โ #FEF4F5
List item bg
White โ #FFFFFF
Category labels
Blush โ #F8A4B2
Goal section bg
Blush 20 โ #FEF4F5
Footer bg
Blush 20 โ #FEF4F5
Ovia+ Indicators
Two Ovia+ touchpoints appear on this screen:
My Ovia+ benefits row โ subtext includes crown icon (โ) in Fuchsia to indicate active membership
Healthcare info group action โ Group Ovia+ button (Fuchsia fill) signals this section requires Ovia+ to edit
๐Figma reference: Node 183-29121 โ More Layout (Full Profile screen). Components: Profile Picture 183-509, Category Label 183-27332, More List Item 183-27466, More List Group Button 183-28616.
๐งฉ Component
Ovia+ Small Card
A compact content card used in horizontal carousels throughout the Ovia+ section. Combines a cropped photo header with a short text label. Used in both the Care Team services carousel and the My Benefits carousel.
Default
๐คฑ
Finding the right Breast Pump
๐ฟ
Alternative therapy benefits
๐ง
Autism spectrum
Width ร Height
120 ร 135px
Border radius
10px (all corners); image top corners only
Background
Rose 30 โ #FCCBD4
Image area height
75px (56% of card)
Label style
Footnote โ Source Sans Pro Regular 13/18
Label color
Charcoal โ #231F20
Label padding
4px left/right, 12px bottom
Label alignment
Center
Image fit
Cover (cropped, fills container)
Usage: Horizontal Carousel
Cards are arranged in a horizontally scrollable carousel with 16px gap. On 375px screens, ~3 cards are visible at a time. The carousel overflows the 12px page padding on both carousels in the Ovia+ screen.
๐Used in two places on the Ovia+ screen: Care Team Services (care coaching topics) and My Benefits (Labcorp-linked benefits).
๐งฉ Component
Health Profile Question Card
A white card that represents a single health profile question or screener. The left side shows the question title and a retake link. If the question has been completed, the right side shows a Midnight checkmark bullet and a timestamp. Incomplete questions omit the right side entirely.
Completed State (with timestamp)
Mental health screener
Retake screener โ
Last taken Jan 1, 2026
Health assessment
Retake screener โ
Last taken Jan 1, 2026
Incomplete State (no timestamp)
Health conditions
Retake screener โ
Specs
Width
Full width (346px within 12px page padding)
Padding
8px top/bottom, 16px left/right
Background
White โ #FFFFFF
Border radius
10px
Title style
Em Subhead โ Source Sans Pro SemiBold 15/20
Title color
Charcoal โ #231F20
Link style
Em Subhead โ 600 weight, underlined
Link color
Royal โ #1A2188
Gap (title โ link)
2px
Checkmark bullet
14 ร 14px, Midnight fill, 7px radius
Checkmark icon
โ white, 8px
Timestamp style
Caption 1 โ Source Sans Pro Regular 12/16
Timestamp color
Charcoal โ #231F20
Right column width
130px, right-aligned
๐งฉ Component
Ring Progress Chart
A circular progress indicator showing checklist completion percentage. The track is Rose 30 and the fill arc is Fuchsia. A large number and percent sign are centered inside. Used in the My Health Profile section of Ovia+.
Variants
50%
50% complete
75%
75% complete
100%
100% complete
Ring outer size
80 ร 80px
Ring radius
32px (stroke center)
Stroke width
8px
Track color
Rose 30 โ #FCCBD4
Fill color
Fuchsia โ #E33E69
Stroke linecap
round
Number style
Title 1 โ Source Serif Pro Regular 28/34
% symbol style
Footnote โ Source Sans Pro Regular 13/18
Number color
Charcoal โ #231F20
Caption below
Em Caption 1 โ SemiBold 12/16 โ "Completion progress"
โน๏ธThe ring uses SVG stroke-dasharray / stroke-dashoffset to animate progress. Full circumference = 2ฯ ร 32 โ 201.06px. To render N%, set dashoffset to 201.06 ร (1 โ N/100).
๐ฑ Screen
Ovia+ Hub
The Ovia+ Hub is a premium members-only section accessible via the center tab in the app's bottom navigation. It is only shown to users with an active Ovia+ membership. The screen is organized into four content blocks: welcome + sponsor, care team, my health profile, and my benefits.
โPremium access only. The Ovia+ tab in the bottom navigation is only visible to users with an active Ovia+ membership. Non-members do not see this tab or this screen. The tab is positioned center in the 5-tab nav bar.
9:41
My Ovia+
๐ฉ
welcome, Vivian!
โOvia+ member since Jan 1, 2023
My Ovia+ benefit hub in partnership with
labcorp
โฆ best you
my care team
My Ovia Care Advocate
A dedicated guide to provide support and resources throughout your Ovia journey.
๐ฉ
๐ฉโโ๏ธ
๐งโโ๏ธ
Message
Your guide is available to help:
Navigate your Ovia benefits
Find a healthcare provider
Connect with the right Ovia Health Coach
Care team services
Talk to a healthcare professional in real time. Ovia health coaches are available 7 days a week to answer all your questions!
๐คฑ
Finding the right Breast Pump
๐คฐ
Preparing to breastfeed
๐
Writing a birth plan
View all services โ
my health profile
Help us build your health profile
Personalize your Ovia experience by completing the items below.
Mental health screener
Retake screener โ
Last taken Jan 1, 2026
Health conditions
Retake screener โ
Health assessment
Retake screener โ
Last taken Jan 1, 2026
My Ovia checklist
We complete important to-dos throughout your journey.
Keep going
50%
Completion progress
My enrolled health programs
Receive customized content when you enroll in our various health programs.
View all programs โ
my benefits
My Labcorp benefits
Learn about the benefits available to you through your health plan or employer.
๐ผ
Milk Stork Benefits
๐ฟ
Alternative therapy benefits
๐ง
Autism spectrum
View all benefits โ
About Ovia Health
Screen Structure
#
Section
Background
Components
1
Status Bar + Header
White
iOS Status Bar, App Header ("My Ovia+")
2
Welcome
Blush 20
Member photo (100px), name, Ovia+ membership date + crown
3
Sponsor
White
Partnership text, Labcorp + partner logo
4
My Care Team
White
Section title, care advocate description, care team portraits + Message CTA, benefit bullets, services carousel, View all link
5
My Health Profile
Blush 20
Section title, Health Profile Question Cards (ร3), checklist ring chart + Keep going CTA, enrolled programs link
6
My Benefits
White
Section title, Labcorp benefits copy, Ovia+ Small Card carousel, View all link
7
About CTA
Blush 20
About Ovia Health button (Royal fill)
Section Title Typography
All four section headers use the same style โ lowercase, centered, Source Serif Pro Bold:
my care team
my health profile
my benefits
Font
Source Serif Pro Bold 700
Size / Line-height
22px / 28px
Color
Charcoal โ #231F20
Alignment
Center
Case
Lowercase (intentional brand voice)
Navigation Context
The Ovia+ tab appears in the center position of the app's 5-tab bottom nav bar. It replaces what would normally be a standard home or feed tab. The crown icon (โ) and Fuchsia color distinguish it from the standard nav items.
๐
Home
๐
Insights
โ
Ovia+
๐
Learn
โฏ
More
๐Figma references: Full screen 279-30935 โ Ovia Plus. Components: Ovia+ Small Card 272-1513, Health Profile Question Card 273-1620, Ring Progress Chart 276-30213.
๐งฉ Component
Checklist Progress Bar
A persistent header widget shown at the top of the My Ovia Checklist screen. Left side contains a prompt, three care team portrait thumbnails, and a Message team CTA. Right side contains the Ring Progress Chart with percentage and caption label. Background is Blush 20.
Preview
Have questions?
Chat with your Ovia Care Team
๐ฉ
๐ฉโโ๏ธ
๐งโโ๏ธ
Message team
15%
Completion progress
Specs
Background
Blush 20 โ #FEF4F5
Padding
16px top/bottom, 24px left/right
Question title
Em Body โ Source Sans Pro SemiBold 17/22
Sub caption
Caption 1 โ Regular 12/16
Portrait size
32 ร 32px (vs 54px on Ovia+ hub)
Portrait gap
6px
Button
Royal fill, Em Footnote SemiBold 13/18, 32px height
Ring width
140px column, centered vertically
Caption below ring
Em Caption 1 โ SemiBold 12/16 โ "Completion progress"
๐งฉ Component
Trimester Selector
A three-button segmented control used at the top of the checklist list to filter to-dos by trimester. One button is always selected. Used exclusively within the My Ovia Checklist screen context.
All States
In-context (1st selected)
1st Trimester
2nd Trimester
3rd Trimester
Selected
1st Trimester
Available
2nd Trimester
Hover
3rd Trimester
Pressed
1st Trimester
Specs
Height
32px
Border radius
6px
Gap between buttons
10px
Label style
Em Footnote โ Source Sans Pro SemiBold 13/18
Selected bg
Rose 30 โ #FCCBD4 / text: Charcoal
Available bg
Transparent / border: Rose 30 1px / text: Midnight
Hover bg
Blush 20 / border: Rose 30 1px / text: Charcoal
Pressed bg
Blush / text: Charcoal
Container padding
24px top, 12px bottom, 12px left/right
๐งฉ Component
Expanding List
A Blush-background accordion row that groups related checklist to-dos under a category name. Tapping expands to reveal the Checkbox List beneath. A "+" icon indicates collapsed; "โ" indicates expanded. Can show a status label with optional Ovia+ checkmark bullet when complete.
Variants
Complete + Checkmark
Choose a Provider
Complete
+
In Progress โ Expanded (minus icon)
My OBGYN provider to-dos
In progress
โ
Not Started โ Collapsed (plus icon)
My primary care provider to-dos
Not started
+
No Status
Learn & ask aboutโฆ
+
Action Icons
Two icon states, both 14ร14px, Midnight color:
+
Plus โ Collapsed
Minus โ Expanded
Specs
Background
Blush โ #F8A4B2
Border radius
6px
Padding
12px all sides
Name style
Em Callout โ Source Sans Pro SemiBold 16/21
Status style
Footnote โ Regular 13/18
Colors
All text: Charcoal; checkmark bullet: Midnight
Action icon
14ร14px; Plus or Minus; Midnight color
Container padding
0 12px 12px (first item: 24px top)
Width
Full width of 375px minus 24px padding = 351px
๐งฉ Component
Checkbox List
The expanded content beneath an Expanding List row. Each item is a Checkbox + Text row: a 24ร24 Midnight checkbox (checked or unchecked) followed by body text that may contain Royal-colored inline links. Items are indented 32px from the edge to visually nest under their parent Expanding List header.
Talk to my provider about when to receive a fertility evaluation and related testing, and about what medications I'm currently taking.
Specs
Checkbox size
24 ร 24px, border radius 3px
Checked fill
Midnight โ #131967
Unchecked fill
White / border: 1px Midnight
Check icon
White โ, ~11px
Row padding
0 32px 12px (indent from screen edge)
Text style
Subhead โ Source Sans Pro Regular 15/20
Text color
Charcoal โ #231F20
Link color
Royal โ #1A2188 / underlined / SemiBold
Row gap (checkbox โ text)
8px
๐งฉ Component
Article Action Button
A low-profile navigation row pairing a "Read More" icon with a text label. Used to surface related articles or actions within an expanded checklist section. The icon is Gray 40; the label is Charcoal Subhead Regular.
Variants
No top padding (default)
Understanding Endometriosis
With top padding (12px)
Nutrition during pregnancy
Action Icons
Two icon types, both 24ร24px container, Gray 40 (#929292) color:
โโก
Read More
โ
Close All
Specs
Width
253px
Padding
0 12px 12px (top: 0 or 12px)
Icon size
24 ร 24px container
Icon color
Gray 40 โ #929292
Text style
Subhead โ Source Sans Pro Regular 15/20
Text color
Charcoal โ #231F20
Gap
8px
๐งฉ Component
Article Topic Button
A Blush 20 tile used to surface article topic shortcuts. Displayed in pairs (or singles) within the Article Topic Pair container. 88px tall, 206px wide when standalone, flexible when in a pair. Label is Em Subhead SemiBold centered.
Standalone
Prenatal nutrition
Managing PCOS
Article Topic Pair (2-up and 1-up)
Prenatal nutrition
Managing PCOS
Fertility evaluation
Specs
Width
206px standalone; flex-1 in pair (equal split)
Height
88px
Background
Blush 20 โ #FEF4F5
Border radius
6px
Padding
12px
Label style
Em Subhead โ Source Sans Pro SemiBold 15/20
Label color
Charcoal โ #231F20
Pair gap
8px
Pair padding
0 12px 8px
Single in pair
Second button is opacity:0 (invisible placeholder) to maintain grid
๐งฉ Component
Floating Content Block
A self-contained card used to surface benefit or program descriptions within the checklist's "Learn & ask about" sections and Health Screeners. Combines a title, body copy, and optional link, button, and/or logo graphic. Three background options: Blush 20, White, or None (no padding).
Variants
Blush 20 โ Link only
My IBX Registered Nurse health Coach
Access care management specialists and more at no cost to you. See below for more information.
Access care management specialists and more at no cost to you.
Learn More
Specs
Width
408px (designed); scales to full content width in practice
Border radius
12px
Padding
16px (None variant: 16px top/bottom, no horizontal)
Gap (logo โ content)
16px
Gap (content items)
16px
Gap (title โ body)
8px
Title style
Em Callout โ SemiBold 16/21
Body style
Subhead โ Regular 15/20
Both colors
Charcoal โ #231F20
Link style
Em Subhead โ SemiBold 15/20 โ Royal
Button
32px height, 6px radius, 180px max-width, Em Footnote 13/18
Button bg (Blush 20 context)
Royal โ #1A2188
Button bg (White/None context)
Midnight โ #131967
Logo graphic
76 ร 76px, 40px border radius, Rose fill (#F7758C)
๐ฑ Screen
My Ovia Checklist
A deep-link screen within Ovia+ that lists personalized to-do categories organized by care context. Each category is an Expanding List that reveals a Checkbox List and optional Article Action Buttons and Floating Content Blocks when opened. Three sub-views exist: the main checklist, a second PHP list, and the Health & Medical Screeners view.
โOvia+ only. This screen is only accessible to Ovia+ members. Reached via the My Ovia+ hub โ "Keep going" or direct navigation from the Health Profile section.
9:41
โน Back
My Ovia checklist
โ
Have questions?
Chat with your Ovia Care Team
๐ฉ
๐ฉโโ๏ธ
๐งโโ๏ธ
Message team
15%
Completion progress
1st Trimester
2nd Trimester
3rd Trimester
Choose a Provider
Complete
+
My OBGYN provider to-dos
In progress
โ
โ
Attend my preconception visit with my provider.
โ
Complete relevant lab tests & STI screening based on my age, risk factors and family history.
โ
Talk to my provider about my menopause symptoms and discuss whether lab work should be performed.
Inside "Learn & ask aboutโฆ" and Health Screeners โ title + body + link/button
Checklist Categories (TTC example)
Choose a Provider
My OBGYN provider to-dos
My primary care provider to-dos
My personal to-dos
Learn & ask aboutโฆ
Connect with my Ovia care team
Category content is personalized based on user goal (TTC, pregnancy, postpartum, etc.) and trimester selection.
Related Sub-screens
Two additional screens use the same component set:
PHP List (2257-11444)
A second checklist list screen with the same structure, used for a different goal-state or program-specific checklist.
Health & Medical Screeners (2257-16343)
Uses Checkbox List items and Floating Content Blocks to present health screener cards (mental health, health conditions, health assessment) โ the same cards shown on the Ovia+ hub health profile section.
The top bar of the calendar. Controls month navigation via back/forward chevrons with a center month label pill. Two size variants: legacy (36px tall) and updated accessibility-compliant (44px tall, iOS minimum tap target).
โน๏ธFigma node:2622-159939 โ Component name: Calendar Month Nav Bar. Two variants: Default Legacy Size (36px h) and Updated (44h). The 44px version was created to meet iOS HIG minimum tap target (44px). An Android variant at 48px should be documented when created.
Month Nav Bar โ Both Size Variants
Default Legacy Size โ 36px height
<
January 2026
>
Updated (44h) โ iOS Accessibility Compliant
<
January 2026
>
Anatomy
Element
Token
Value
Notes
Bar background
Fuchsia
#E33E69
Full-width, edge-to-edge
Month label pill bg
White
#FFFFFF
border-radius: 6px; padding: 3px 10px
Month label text
Charcoal
#231F20
Em Subhead โ Source Sans Pro SemiBold 15/20
Chevron icons
White
#FFFFFF
16px; Ovuline icon font glyphs; 20px tap width
Height โ Legacy
โ
36px
Original legacy size; pb: 12px pt: 11px
Height โ Updated
โ
44px
iOS HIG compliant; py: 12px; use for new builds
Width
โ
375px
Full device width, edge to edge
โ ๏ธAccessibility note: The 36px legacy variant does not meet iOS HIG 44px minimum tap target. Use the 44px variant for all new implementations. An Android variant at 48px (Material Design minimum) should be created when Android calendar work resumes.
Em Caption 1 โ Source Sans Pro SemiBold 12/16. Uses pure black, not Charcoal.
Container padding
โ
6px top, 12px bottom, 12px horizontal
Tight โ calendar is a dense component
Layout
โ
justify-between, 7 equal columns
Aligns with 7-column calendar day grid below
๐Figma:2649-159961. Single variant โ no goal-specific differences.
๐ Calendar
Calendar โ Date Number
The date numeral in the center of each calendar day cell. Four states: dateType (Current/Past vs Future) ร today (true/false). Today flag and future state affect typography weight and color.
โน๏ธFigma node:3714-16434. Component name: calendar date (number). Fixed container: 18ร16px. Text absolutely positioned, center-aligned.
All Four States
Current/Past today=false
15
Current/Past today=true
15
Future today=false
25
Future today=true
25
State Matrix
dateType
today
Color
Weight
Style
Current/Past
false
Charcoal #231F20
Regular (400)
Caption 1
Current/Past
true
Charcoal #231F20
SemiBold (600)
Em Caption 1
Future
false
Royal 50 #4953DC
Regular (400)
Caption 1
Future
true
Royal 50 #4953DC
SemiBold (600)
Em Caption 1
Font: 12px. Line-height: 16px. Container: 18ร16px. Future dates render in Royal 50 to visually de-emphasize. Today's date is always SemiBold regardless of past/future context.
12ร12px icons inside calendar day cells indicating logged or predicted events. Two separate component sets: Legacy (icon font-based) and Rebrand (SVG image-based). Both cover the same semantic events. The calendar must support both simultaneously during the transition period.
โ ๏ธDual icon system: Legacy icons use the Ovuline icon font and Font Awesome 5 Pro. Rebrand icons are SVG image files. Both must be accounted for in implementation. Developers must be clear about which set applies to each view context.
Legacy Calendar Day Icon โ Full Variant Set
Figma: 3455-47167
Legacy icons use the Ovuline icon font for period, ovulation, intercourse, and projected states. Pregnancy icons use Font Awesome 5 Pro Solid. No-icon state uses a transparent placeholder. Size: 12ร12px.
Rebrand icons are SVG image files โ no icon font dependency. Each variant is a distinct SVG asset. Richer visual style than legacy font glyphs. Size: 12ร12px (some have slight non-square natural dimensions).
The individual day tile. The most complex component in the calendar โ a 46ร40px cell with a colored top bar, date number, and up to five icon slots in two rows. Three properties drive all visual permutations: theme (Legacy / Pregnancy / Rebrand), goal (Fertility / Pregnancy), plus state flags dataRecorded, fertileWindow, and selectedDay.
โ ๏ธImpossible state disclosure: The Figma component set contains logically impossible states (e.g. Pregnancy theme + Fertility goal combinations that never co-occur in the live app). These exist to prevent Figma component errors. Developers: ignore impossible combinations and reference only the states documented here.
Cell Anatomy
Region
Height
Content
Top Bar
4px
Color bar: Gray 20 (no data) or Fuchsia 90 (data recorded). Full width. No radius unless selected.
Cell Body
flex 1 (~36px)
Two rows of 3 icon slots + date number in top row center. py: 4px, px: 2px.
bg: Blush 20; border: 3px Royal solid; radius: 4px all
Dashed border color: Fuchsia #E33E69 (Legacy/Pregnancy theme). Fuchsia 90 #F62467 (Rebrand theme). Applied bottom + sides only โ not top (top is the bar).
Legacy vs Rebrand: Same slot positions โ only the icon set swaps. Legacy = font glyphs; Rebrand = SVG images.
Visual State Previews
Default (no data)
15
Data Recorded
8
โ
โฅ
โ
Fertile Window
12
Selected Day
19
Future Date
28
๐Figma: Calendar Day component set 3520-56731. Key variant nodes: Legacy/Fertility/no data/not selected/not fertile 2740:10493; data recorded 3611:20680; Rebrand/Fertility/data/selected/fertile 3626:27746.
๐ Calendar
Calendar โ Week Row
A horizontal row of 7 Calendar Day cells spanning 375px. The composite unit that stacks 5โ6 times to form the full calendar grid. Template examples show how different data states appear across a week.
โน๏ธFigma node:3626-28337. Five templateExample variants: Blank, Fert - Period + Prediction, Fert - Intercourse, Fertile Window, Fertile Window 2. These are reference examples โ in the live component, day cells vary independently.
Week Row โ Template Examples
Blank (no data)
29
30
31
1
2
3
4
Fert โ Period + Prediction
29
30
โ
31
โ
1
โ
2
โ
3
4
Fertile Window (Blush 20 bg + dashed Fuchsia border + Royal selected border on day 2)
The full calendar grid โ five week rows stacked for a complete month. Five Presentation variants show the calendar in different goal and data contexts. These reference examples are used throughout the screen compositions.
An experimental component for the bulk period editing feature โ currently being developed for legacy with rebrand-ready design in parallel. Appears below the calendar grid when applicable. Provides quick-action buttons for logging period data in bulk.
โ ๏ธExperimental / In Progress: Layout not finalized. Multiple background and button configurations exist as proposals. Do not treat any single variant as canonical until confirmed at Friday Sync.
Variant Overview
Variant
Layout
Background
Button Style
White
Single 240px centered
White
Royal outline, 32px h
Gradient 1 - Proposal
Single button
WhiteโSeashell gradient
Royal outline
Blush 20 - Proposal
Single button
Blush 20 #FEF4F5
Royal outline
Seashell
Single button
Seashell #FFFCFC
Royal outline
CTA - White BG
Single button
White
Midnight fill #131967, white text
Tirtiary white BG
Single button
White
Fuchsia tertiary outline + Blush 20 bg
2 Buttons - 1
Two equal-width buttons
White
Both Royal outline
2 Buttons - Seashell
Two equal-width buttons
Seashell
Both Royal outline
2 Buttons - Gradients
Two equal-width buttons
SeashellโWhite gradient
Both Royal outline
Shared: container padding 24px; button height 32px; radius 6px; label Em Footnote SemiBold 13/18; single button width 240px centered; two-button: full width, 10px gap.
Key Button Variant Previews
Royal Outline (White bg)
Log period
CTA โ Midnight Fill
Log period
2 Buttons
Log period
Log period
๐Figma:3676-19341. Note: "Tirtiary" spelling preserved from source component name.
๐ Calendar
Calendar โ Legend
A dynamic key below the calendar grid explaining what the cell icons mean. Content changes based on goal, data logged (including birth control type), and icon theme (legacy vs rebrand). An optional action button may appear โ its inclusion is still being determined for the rebrand.
โ ๏ธIn-flux: The legend button (legacy: present; rebrand: TBD) and final per-goal layout are pending Friday Sync decision. Full variant set is a menu of options until locked.
Legend Column Component (atom)
Figma: 3679-19461
The legend is built from LegendCollumn (spelling preserved from source) atoms that stack icon+text rows. Key properties: iconTheme (Legacy / Rebrand) and number (item count + button).
number prop
Content
Width
3
3 icon+label rows
103px (Legacy) / full (Rebrand)
2
2 icon+label rows
103px (Legacy) / 86px (Rebrand)
1
1 icon+label row
auto
Button
Action button only ("Add Ovulation")
100px
1 + Button
1 row + action button
103px (Legacy) / 120px (Rebrand)
Legend Item Anatomy
Element
Token
Value
Notes
Icon container
โ
20ร20px
Enlarged for readability; icon inside is 12ร12px
Label text
Charcoal
#231F20
Caption 1 โ Regular 12/16
Row gap
โ
4px
Between icon+text; between rows
Action button
Fuchsia / Blush 20
bg: #FEF4F5; border: 1px #E33E69
Em Footnote SemiBold 13/18; 32px h; 6px radius
Legend Composition + Sub-component Nodes
Component
Figma Node
Role
Legend Column (atom)
3679-19461
Stacked icon+label rows with optional button
Legend Icon + Description (sub-atom)
3679-19500
Single icon+label pair; Legacy and Rebrand icon variants
Full Calendar Legend (composite)
3679-20073
Outer container; manages column layout, spacing, and dynamic content
Birth control type affects legend content โ different BC types surface different legend items. The component accommodates this via variant swapping, not hard-coded content.
Three related components forming the date-contextualized callout area beneath the legend. Used to anchor notes and data entry to a specific day. Atomic โ molecular โ composite hierarchy.
Component Hierarchy
Component
Figma Node
Role
Time Callout text label
3712-19626
Atom โ displays the date string (e.g. "Tuesday, January 14")
Time Callout Pill
3712-19721
Molecule โ pill-shaped badge wrapping the time label. Visual treatment varies by goal and contextual state.
Time Callout (composite)
3712-19730
Organism โ full assembled callout combining the pill with contextual elements for the notes/data section
Full variant documentation pending full screen extraction. These components are best understood in the context of the calendar screen comps โ see Calendar Screen section when available.
๐Figma: Text label 3712-19626. Pill 3712-19721. Composite 3712-19730.
๐ Calendar
Calendar โ Pregnancy Data Selector
Platform-specific tab/segment control for selecting which pregnancy data type to view in the notes area. iOS uses a Segment Buttons Group. Android uses a Data Selector Tab. Pregnancy goal only โ not present in fertility mode.
iOS native segment control pattern. Group assembles multiple segment button atoms horizontally. Full nested selectable container at 4232-96722.
Baby
Health
Symptoms
โน๏ธSelected: white pill bg, SemiBold, Charcoal. Unselected: no bg, Regular, Gray 50. iOS native-style โ not a custom button component.
Android โ Data Selector Tab Group
Figma: 4170-96540 (group) ยท 4165-96366 (atom)
Material Design tab pattern. Full-width tabs with underline indicator. Tab atom: 4165-96366.
Baby
Health
Symptoms
โน๏ธActive: Royal underline + Royal text, SemiBold. Inactive: Gray 50, Regular. Full-width tab row spans content area.
๐Figma: Selectable nested group 4232-96722. iOS Segment Group 4164-95820. iOS Segment Atom 4146-95735. Android Tab Group 4170-96540. Android Tab Atom 4165-96366.
๐ Calendar
Calendar โ Android Floating Action Button (FAB)
Android-exclusive. A floating action button fixed to the bottom-right of the calendar screen. Tapping expands it to reveal goal-specific quick-log action items. Not present on iOS.
โน๏ธiOS equivalent: iOS uses other mechanisms for data entry (tapping a day cell, controls in the notes section). The FAB is Android-specific per Material Design conventions.
FAB Button โ Collapsed State
Figma: 4336-31714
+
Property
Value
Background
Fuchsia 80 #E7577D
Container size
~77.8ร77.8px; inner padding: 20px
Border radius
30px
Shadow
0 4px 8.3px 1px rgba(0,0,0,0.20)
Icon
Plus SVG 15px. Rotates โ45ยฐ when expanded (becomes ร)
FAB Full Menu โ Expanded State
Figma: 4339-31870
Health tracking
+
Update goal
๐ค
View pregnancy data
๐ฟ
+
Figma source uses Spanish placeholder copy โ English labels will be localized.
FAB Menu Item Anatomy
Element
Token
Value
Notes
Text chip bg
White
#FFFFFF
border-radius: 6px; px: 16px; py: 8px
Text chip label
Charcoal
#231F20
Subhead Regular 15/20; right-aligned
Icon circle bg
Blush
#F8A4B2
40ร40px; border-radius: 20px; padding: 8px
Icon
โ
24px SVG
Icons: plus, person-round, ovia-leaf (swapped per action)
Row height
โ
40px
Matches icon circle
Item gap
โ
16px
Between menu rows
Alignment
โ
flex-end
Right-aligned stack above FAB
Sub-component Reference
Component
Figma Node
Role
Android FAB (button only)
4336-31714
Circle button, collapsed
FAB icon placeholders (calendar)
4339-31786
Calendar-specific icon swap set
Icons FAB Menu Buttons
4339-31781
Menu icon variants (plus, ovia-leaf, person-round)
FAB Menu Item
4339-31821
Single row: text chip + circle icon
FAB Menu Button Text
4339-31816
White chip with label text
Graphic FAB Menu Icon
4339-31802
Icon within the Blush circle
FAB Full Menu
4339-31870
Complete expanded FAB + menu
๐Figma: FAB button 4336-31714. Full menu 4339-31870. Note: some component names misspell "Intercourse" as "Intercrouse" โ preserved from source.
๐ Calendar โ Data
Calendar Data Icons โ Legacy (18ร18)
The 18ร18px icon set used in the data entry section beneath the calendar. Each icon represents a data category (period, mood, sleep, etc). Two states per icon: Off (Gray 50 โ no data entered) and On (Fuchsia โ data has been entered). All icons except Blood Sugar use the Ovuline icon font. Blood Sugar uses an SVG fill image.
โน๏ธFigma node:3793-8764. Component name: Icons - Calendar - Legacy Data (18x18). Two props: legacyCalendarData (22 variants) and on (boolean). Icon size: 18ร18px fixed container. All Ovuline glyphs center-aligned, absolutely positioned.
โ ๏ธIcon font dependency: All icons except Blood Sugar require the Ovuline icon font to render. Blood Sugar uses an SVG image asset. In environments where Ovuline is unavailable, these will render as unstyled characters or be invisible.
Full Icon Reference โ Both States
Category
Ovuline Glyph
Off Color
On Color
Notes
alcohol-on
8
Gray 50 #787878
Fuchsia #E33E69
Wine glass shape
activity-on
E
Gray 50
Fuchsia
Running figure
bbt-on
M
Gray 50
Fuchsia
BBT thermometer
bloodpressure-on
F
Gray 50
Fuchsia
Blood pressure cuff
caffeine-on
7
Gray 50
Fuchsia
Coffee cup
cervix-on
G
Gray 50
Fuchsia
Cervical fluid/anatomy
doctor-on
โข (U+2022)
Gray 50
Fuchsia
Doctor/medical
fetalmovement-on
รฎ (U+00EE)
Gray 50
Fuchsia
Baby movement โ pregnancy only
intercourse-on
H
Gray 50
Fuchsia
Heart-like intercourse glyph
medications-on
O
Gray 50
Fuchsia
Pill/medication
milestone-on
ฦ (U+0192)
Gray 50
Fuchsia
Milestone/achievement โ pregnancy only
note-fert-on
N
Gray 50
Fuchsia
Note/notebook โ fertility context
nutrition-on
D
Gray 50
Fuchsia
Fork/food/nutrition
opk-on
K
Gray 50
Fuchsia
Ovulation predictor kit test strip
period-on
B
Gray 50
Fuchsia
Drop/period
preg-test-on
L
Gray 50
Fuchsia
Pregnancy test stick
relationship-on
n
Gray 50
Fuchsia
Couple/relationship
mood-on
I
Gray 50
Fuchsia
Face/mood expression
sleep-on
C
Gray 50
Fuchsia
Moon/zzz/sleep
symptoms-on
J
Gray 50
Fuchsia
Thermometer/symptom indicator
weight-on
?
Gray 50
Fuchsia
Scale/weight
blood sugar
SVG image (Fill 1)
Gray SVG
Fuchsia SVG
Blood glucose drop icon โ SVG asset, not a glyph
All icons: 18ร18px container, font-size 18px, center/top-aligned via absolute positioning. Off state = Gray 50 (#787878). On state = Fuchsia (#E33E69).
Off vs On State Comparison
Off (no data entered) โ Gray 50
๐
act
๐ถ
mood
๐
meds
๐
sleep
๐ด
nutr
On (data entered) โ Fuchsia
๐
act
๐ถ
mood
๐
meds
๐
sleep
๐ด
nutr
Preview uses equivalent Unicode symbols โ actual rendering requires the Ovuline icon font. Icon containers use 32px rounded circles (from the Data Category Icon component) to show the full presentation context.
Calendar Icons (12ร12) โ Theme Variants + Birth Control
The 12ร12px icon set used on calendar day cells and in the legend. This set covers all period/intercourse/ovulation/spotting variants across app themes (Ovia Classic, Cosmos, FA, Sweet, Nautical), plus all birth control method indicators. Distinct from the rebrand SVG icon set documented separately.
โน๏ธFigma node:3793-8781. Component name: Icons - Calendar (12). 32 variants total. All icons 12ร12px. Ovuline and Font Awesome 5 Pro fonts used for event icons; SVG images and custom shapes for BC method icons.
Period, Spotting, Intercourse, Ovulation โ All Theme Variants
Each event type has up to 5 color theme variants corresponding to Ovia app themes. The F- prefix indicates Fertility calendar context.
Variant
Font
Glyph
Color
Hex
F-Period
Ovuline
B
โ
#A52241
F-Period-Cosmos
Ovuline
B
Cosmos Purple
#7F30DA
F-Period-FA
Ovuline
B
FA Pink
#F04E6E
F-Period-Sweet
Ovuline
B
Sweet Lilac
#C364C5
F-Spotting
Ovuline
Q
โ
#A52241
F-Spotting-Cosmos
Ovuline
Q
Cosmos Purple
#7F30DA
F-Spotting-FA
Ovuline
Q
FA Pink
#F04E6E
F-Spotting-Sweet
Ovuline
Q
Sweet Lilac
#C364C5
F-Intercourse
Ovuline
H
โ
#EB6B58
F-Intercourse-Cosmos
Ovuline
H
Cosmos Black
#000000
F-Intercourse-FA
Ovuline
H
FA Pastel
#FF82D5
F-Intercourse-OviaClassic
Ovuline
H
OviaClassic Pink
#EC4A86
F-ovulation
Ovuline
U+E607
Ovia Blue
#0060A9
F-ovulation-Cosmos
Ovuline
U+E607
Cosmos Violet
#BD0FE1
F-ovulation-Nautical
Ovuline
U+E607
Nautical Red
#CE3E28
F-ovulation-OviaClassic
Ovuline
U+E607
OviaClassic Orange
#F49136
F-ovulation-Sweet
Ovuline
U+E607
Sweet Blue
#3FA4EF
Birth Control Method Icons
BC icons appear on calendar days when the user has logged a birth control method. Some are SVG image-based; others use custom CSS shapes or overlay techniques.
Variant
Rendering
Color
Notes
F-BC-IUD-IN
SVG image
Teal #00778E
IUD device shape
F-BC-Implant-IN
Rotated line SVG + container
Teal #00778E
Rod/implant shape, rotated ~5.45ยฐ
F-BC-Patch-ON
Filled rounded rectangle
Teal #00778E
8.33% inset, radius 1px, solid fill
F-BC-Patch-OFF
Dashed rounded rectangle
Teal #00778E
Same shape as Patch-ON, dashed border
F-BC-Pill-taken
SVG image (group)
Teal/Teal+White
Pill blister pack โ taken state
F-BC-Pill-start
SVG image + "1" text overlay
White text on Teal pill
First pill in pack, shows "1"
F-BC-Pill-late
SVG image + mask overlay
Teal + color split
Split-color pill indicating late pill
F-BC-Pill-missed
SVG image
โ
Missed pill indicator
F-BC-Ring-IN
Rotated oval SVG
Teal ring
Ring inserted โ oval at ~20ยฐ rotation
F-BC-Ring-OUT
Rotated oval SVG
Teal ring
Ring out โ slightly different oval
F-BC-Shot
Font Awesome 5 Pro Solid (U+F48E)
Teal #00778E
Syringe/injection icon
All BC icons use Teal (#00778E) as their primary color โ a distinct color that differentiates BC entries from other calendar event types.
Pregnancy Icons (used in legend + calendar cells)
Variant
Font
Glyph
Color
Notes
dr-appt
Font Awesome 5 Pro Solid
U+F0FE
#EA6551
Plus-in-circle โ doctor appointment
milestone
Ovuline
U+E941
#F5B200
Star/trophy โ yellow/gold milestone color
note
Font Awesome 5 Pro Solid
U+F111
#0060A9
Filled circle โ note indicator; 12ร13px (slightly taller)
Note: dr-appt uses Salmon/Coral (#EA6551), milestone uses Gold (#F5B200), and note uses Ovia Blue (#0060A9) โ these are distinct from fertility event colors and from the rebrand colors.
๐Figma:3793-8781. Note: Calendar 12x1232 is an additional variant (intercourse/EB6B58 color โ likely a duplicate or alias). Node IDs per variant available in Figma.
๐ Calendar โ Data
Data Category Icon
A 32ร32px circular container that wraps a single 18ร18px data icon. The container background changes based on whether data has been entered for that category โ two states: no data (neutral gray) and data entered (Blush 20). This is the visual affordance in the data section that communicates at a glance whether a category has been filled.
โน๏ธFigma node:3860-92156. Component name: Data Category Icon. Single boolean prop: on. Container: 32ร32px, border-radius 16px (fully circular), padding 7px.
Both States
on=false (no data)
๐
on=true (data entered)
๐
State Anatomy
State
Container bg
Icon color
Semantic meaning
on=false
Gray 10 #F4F4F4
Gray 50 #787878
No data logged for this category today
on=true
Blush 20 #FEF4F5
Fuchsia #E33E69
Data has been entered for this category
Container: 32ร32px, border-radius 16px (fully rounded), padding 7px. The icon inside is 18ร18px from the Legacy Data icon set. Icon color change is handled by the parent icon component's on prop.
๐Figma:3860-92156. Off: 3860:92155. On: 3860:92160.
๐ Calendar โ Data
Data Category Item
The individual data entry unit โ an icon + text pair showing one category's label and any entered data. Three props control its presentation: data (whether data exists), subCategory (whether a subcategory heading is shown), and image (whether a photo attachment is shown). This is the building block of all the data rows below the calendar.
โน๏ธFigma node:3864-92174. Component name: Data Category. Width: 122px (fixed). Icon slot: 32ร32px circle. Text area: flex-1, min-width 0. Gap between icon and text: 8px.
โ ๏ธImpossible state note: Some image+subCategory combinations exist in Figma for component completeness but would never appear in the live app โ for example, a pregnancy photo note attached to a fertility-only data type. Low-opacity variants in the component set are Figma's way of marking these as placeholder/disabled states.
Variant Matrix
data
subCategory
image
Presentation
Figma Node
false
false
false
Icon (gray) + category label only. No data text.
3864:92173
true
false
false
Icon (fuchsia) + category label + data value (SemiBold)
3864:92175
true
true
false
Icon (fuchsia) + category label + Subcategory (SemiBold) + data value (Regular)
4103:92773
true
true
true
Full: label + subcategory + data + photo thumbnail (44โ100px)
4103:92814
false
false
true
20% opacity โ impossible/placeholder state
4103:92878
false
true
true
20% opacity โ impossible/placeholder state
4103:92892
Text Layer Anatomy
Layer
Typography
Color
Condition
Category label (e.g. "DATA CATEGORY")
Caption 1 Regular 12/16
Gray 60 #5E5E5E
Always shown โ uppercase
Subcategory (e.g. "Subcategory")
Em Caption 1 SemiBold 12/16
Charcoal #231F20
Only when subCategory=true
Data value (e.g. "Lorem Ipsum")
Caption 1 Regular or SemiBold 12/16
Charcoal #231F20
Only when data=true. Regular when subCategory present, SemiBold when alone.
Photo thumbnail
โ
โ
Only when image=true. Square, min 44px, max 100px. Masked circular crop.
The component uses a border-bottom separator (Gray 20 #E0E0E0, 1px) on the text area when data=true and pb-8px, to separate entries within a row when stacked in the single-entry layout.
Two Data Category items side by side in a horizontal row โ the standard data display layout. Width: 375px (full screen width), with 12px horizontal padding and 16px gap between items. This is the primary layout for displaying entered data beneath the calendar in fertility mode.
โน๏ธFigma node:3864-92370. Component: Data Category Row - Double. Width 339px inner (375px with 12px side padding). Each item is flex-1. Gap: 16px.
Double Row Preview
๐
DATA CATEGORY
๐
DATA CATEGORY
Lorem Ipsum
Left item: no data (gray). Right item: data entered (fuchsia). Each item is flex-1 within the row.
๐Figma:3864-92370.
๐ Calendar โ Data
Data Category Row โ Single
A full-width single Data Category item โ used when a data entry is complex enough (subcategory + data + optional photo) that it needs the full row width. Also used as the structural container for the pregnancy notes section where vertical expansion is needed. The position prop controls whether a bottom separator is shown (First or Middle) or not (Last).
โน๏ธFigma node:4103-92942. Component: Data Category Row - Single. Width 320px inner. position prop: First or Middle (pb-8px separator) or Last (no separator). data prop controls content display.
Position Prop Behavior
position
data
Visual behavior
First or Middle
false
Icon (gray) + category label. No separator โ no data to separate.
First or Middle
true
Full data display + pb-8px + bottom border separator (Gray 20). Indicates more items follow.
Last
false
Icon (gray) + category label. No separator.
Last
true
Full data display, no bottom separator. Last item in a stacked group.
The separator is a 1px Gray 20 bottom border used to visually divide consecutive filled entries in a vertical stack. Empty entries never show separators.
The pregnancy-specific single-column data layout, used when the "Notes" tab is selected in the Pregnancy Data Selector. These entries can include subcategory labels and photo attachments (unlike the double-column layout). Two states: No Data and Filled.
โน๏ธFigma node:4232-102804. Component: Data Catagrories - Single (note: source typo "Catagrories"). Props: entries โ No Data or Filled. Shows 3 pregnancy data categories stacked vertically: Doctor Appointment, Note (with photo), Milestone (with photo).
Filled State โ Example Data
๐ฅ
DOCTOR APPOINTMENT
10:00 AM Obstetrician/Gynecologist
๐
NOTE
Photo
A hot fudge sundae teeming with cholesterol, saturated fats, artificial preservatives. Gee, thanks.
๐ฆ
๐
MILESTONE
Learned Baby's Sex
It's a boy!
๐ถ
Photo thumbnails: min 44px, max 100px, square with circular mask crop. Photos use an image + mask system from Figma assets.
No Data State
๐ฅ
DOCTOR APPOINTMENT
๐
NOTE
๐
MILESTONE
๐Figma:4232-102804. Note: component name has typo "Catagrories" โ preserved from source. No-data: 4232:102803. Filled: 4232:102805.
๐ Calendar โ Data
Data Categories โ Double (Full Data Set)
The complete data section beneath the calendar โ all data categories displayed in a double-column grid. Four variant presentations: CT (Cycle Tracking) with no data; CT with data entered; Pregnancy with no data; Pregnancy with data. The CT and Pregnancy sets show different category sets because the goals have different trackable data types.
โน๏ธFigma node:4107-93171. Component: Data Categories - Double. Props: property1 โ CT - No Data, CT - Data Entered, Preg - No Data, Preg - Data. Width 381px; py: 16px top, 12px bottom; px: 12px. Row gap: 12px.
CT (Cycle Tracking) โ Data Categories
The CT variant shows fertility-relevant tracking categories in the double-column grid. Sample data values shown in the Filled variant:
The Pregnancy variant replaces CT-specific categories with pregnancy-relevant ones:
Col 1
Filled Value (sample)
Col 2
Filled Value
MOOD
excited, supported, impatient
SYMPTOMS
backaches, vivid dreams
SLEEP
10:35 PM - 6:00 AM, 7 hrs 25 mins
WEIGHT
158 lbs
NUTRITION
3 servings protein, grains, fruits & veggies
ACTIVITY
yoga 45 mins
MEDICATION
Prenatal vitamins
FETAL MOVEMENT
fluttering, average movement
BLOOD PRESSURE
120/80 mmHg (multiple entries)
KEGELS
10 kegels, 10 kegels, 10 kegels
REALTIONSHIP (sic)
good
TEMPERATURE
97.7ยฐF
BLOOD SUGAR
2:15 PM - 126 mg/dl, 7:45 AM - 125 mg/dl
โ
โ (last row has only 1 item)
Note: "REALTIONSHIP" is a spelling error in the Figma source โ preserved as-is in documentation. The last row has one empty slot (opacity: 0 placeholder) to maintain the 2-column grid.
โ ๏ธDynamic height: When data is entered, entries with multi-line values or photo attachments expand the row height and push subsequent rows down. This is why single-column and double-column layouts are separate โ the double-column layout is optimized for short values; complex entries use the single-column layout instead.
๐Figma:4107-93171. CT No Data 4107:93170, CT Data Entered 4107:93272, Preg No Data 4118:94233, Preg Data 4118:95031.
๐บ Screens
Calendar โ Full Screens
Eight complete screen compositions covering all goal and state combinations for the Calendar feature. All screens are 375px wide, variable height (depends on data content below calendar). All share the same structural stack โ only the calendar presentation, data section, and platform-specific controls change.
โน๏ธCommon screen structure: Status bar โ App Header โ Month Nav Bar โ Calendar grid (weekday labels + base calendar) โ [Bulk Edit โ fertility only] โ Calendar Legend โ Time Callout โ [Pregnancy Tab Selector โ pregnancy only] โ Data section (double or single column). The data section height is dynamic โ it expands as entries are filled in.
Screen Inventory
#
Screen
Figma Node
Height
Key differentiators
1
Fertility โ CT No Data (legacy)
3635:36619
956px
Bulk edit section present; Ovulation button in legend; CT data grid empty
2
Fertility โ TTC with Bulk Edit Data
4232:97838
1188px
2-button bulk edit; TTC calendar (period + fertile window visible); Ovulation removed from legend; data filled in (taller)
3
Pregnancy โ Data tab, No Data
4232:96792
896px
No bulk edit; pregnancy legend; Data tab selected via Preg selector; data grid empty (shorter)
4
Pregnancy โ Data tab, Data Filled
4232:99421
1056px
Same as #3 but data section is filled โ taller due to expanded entries
2-button variant โ "Log period" + second action; ovulation removed from legend
Calendar Legend
92px
No "Add Ovulation" button; legend shows period + fertile window + intercourse
Time Callout
44px
โ
Data Categories
556px
Data filled โ expanded rows with multi-line entries + photo attachment; much taller than empty state (324px)
The 232px height difference from Screen 1 (956px vs 1188px) comes entirely from the data section expanding when entries are filled in. This demonstrates the dynamic height behavior you described โ filled data pushes elements down.
Modal dialogs used throughout the app for confirmations, explanations, and contextual actions. Three variants currently designed from the rebrand sprint. Legacy codebase contains many additional modal patterns (Alert_No-button, Alert_1-button, Alert_Picker-field, Alert_with-img, Alert_Fun-style, and others documented in the Figma debug menu) โ these are being documented progressively as they surface in active Jira tickets.
โน๏ธCoverage note: The screenshot above shows approximately the full scope of legacy modal variants (Alert_No-button, Alert_1-button, Alert_Picker-field, Alert_Text-box_Destructive, Alert_2buttons_Long-button-text, Alert_No-title, Alert_longer-title_3-buttons, Alert_with-img, Alert_Fun-style). These are legacy debug names. New rebrand versions are designed on a per-ticket basis. Three are documented here. All will consolidate into this section over time.
Modal Pop-Up โ Side by Side Buttons
Figma: 2395-75623
iOS-style action sheet modal. White card with rounded corners (radius: 14px), Midnight-colored headline, Body text, and two equal-width side-by-side action buttons. Used during registration to offer Login vs Create Account. Gray 30 border.
Already signed up for Ovia Pregnancy or Ovia Parenting?
Log in using your email and password and we'll help you set up your Ovia app.
Log in
Create Account
Element
Token
Value
Card bg
White
#FFFFFF
Card border
Gray 30
#C6C6C6
Card radius
โ
14px
Headline
Midnight
#131967 ยท Headline SemiBold 17/22
Body text
Charcoal
#231F20 ยท Body Regular 17/22
Button 1 (neutral)
Charcoal
#231F20 ยท Headline SemiBold 17/22
Button 2 (primary)
Royal
#1A2188 ยท Headline SemiBold 17/22
Button area height
โ
62px
Content padding
โ
24px all sides
Modal โ No Buttons (Titled Information Sheet)
Figma: 2395-76531
Full-bleed modal with a Midnight header bar containing the title and a close (ร) button, and a white body with rich text content including an inline hyperlink. No action buttons โ informational only. Used for explaining features like the Ovia checklist.
Your Ovia checklist
ร
Your Ovia checklist is a list of actions designed to guide you and help you self-manage your journey. It is driven by clinical guidelines and delivered to you based on the clinical programs you are enrolled in, which you can manage here.
Element
Token
Value
Header bar bg
Midnight
#131967
Title text
White
#FFFFFF ยท Title 3 (Source Serif Pro Regular 20/25)
iOS-style confirmation modal for destructive actions. White card (radius: 14px), Midnight headline, Body text, then two full-width stacked buttons separated by Gray 30 dividers. Destructive action in Error red, cancel in Royal. Used for the pregnancy checklist reset action.
Reset pregnancy checklist
Resetting will clear checked items for your entire pregnancy checklist, not just one trimester.
Reset my pregnancy checklist
Cancel
Element
Token
Value
Card bg/border/radius
White / Gray 30
Same as Side-by-Side variant
Headline
Midnight
#131967 ยท Headline SemiBold 17/22
Dividers
Gray 30
#C6C6C6 ยท 1px height
Destructive button
Error
#D0021B ยท Headline SemiBold 17/22
Cancel button
Royal
#1A2188 ยท Headline SemiBold 17/22
Button row height
โ
54px each
โ ๏ธThe destructive button uses Error red (#D0021B) โ not Fuchsia. This is intentional: Error red signals an irreversible action. Never substitute Fuchsia here.
Legacy Modal Inventory (Undocumented)
The following legacy modal patterns exist in the codebase and have been visually inventoried but not yet fully documented for the rebrand design system. They surface in the debug menu and are being addressed ticket by ticket.
Legacy Name
Description
Status
Alert_No-button
Title + message, no action โ informational only
Legacy only
Alert_1-button
Title + message + single button (e.g. "Single button")
Legacy only
Alert_Text-box_Destructive
Text input inside an alert (e.g. time picker)
Legacy only
Alert_Picker-field
Picker/selector field embedded in modal (e.g. Yoga / 0 hr 0 min)
Legacy only
Alert_2buttons_Long-button-text
Title + body + two stacked full-width buttons with longer text
Legacy only
Alert_No-title
Body text only + Cancel + action button โ no headline
Legacy only
Alert_longer-title_3-buttons
Title + 3 stacked button options (e.g. Right/Left/Both sides)
Legacy only
Alert_with-img
Illustration/image + body text + button โ used for onboarding moments
Legacy only
Alert_Fun-style
Large illustration, informational scroll, CTA button โ rich modal
The primary navigation bar at the bottom of the app. Three variants exist: the current Free App bar (5 tabs: Home, Calendar, Health, Coaching, More), the Ovia+ Premium bar (Ovia+ tab replaces Health/Coaching with a prominent crown icon), and an experimental iOS Glass variant exploring the iOS 26 glass aesthetic. All are work in progress โ designed but not yet fully implemented.
๐งWork in progress: All three bottom navigation variants are designed but implementation status varies. The iOS Glass version was fast-tracked due to a lead developer initiative to ensure iOS 26 Glass readiness before the team expected. Treat as a design exploration until implementation is confirmed.
Free App โ Bottom Bar (Fert/Calendar/Enterprise)
Figma: 334-52524
5-tab bottom bar for the standard free app. Calendar tab is the active/selected tab in this example. Uses Font Awesome 5 Pro Solid icons with Source Sans Pro labels.
โ
Home
๐
Calendar
๐ฉบ
Health
๐ช
Coaching
โฐ
More
Element
Value
Notes
Bar height
84px total
Includes iPhone home indicator area (34px)
Tab width
Equal flex columns (5 tabs)
~75px each at 375px width
Icon size
22px
Font Awesome 5 Pro Solid
Label size
12px
Caption 1; SemiBold when active
Active icon color
Fuchsia #E33E69
Active tab icon only
Inactive icon color
Gray 30 #C6C6C6
โ
Label color (all)
Charcoal #231F20
Active label is SemiBold; inactive is Regular
Tab order
Home, Calendar, Health, Coaching, More
Calendar active in this variant
Ovia+ Premium โ Bottom Bar
Figma: 126-21126
Premium app bottom bar where Ovia+ replaces the Health/Coaching slots. The Ovia+ tab uses a custom crown icon (SVG image) with a circular badge treatment. Tab order: Home, Calendar, Ovia+, Coaching, More. Calendar remains the active tab in this example.
โ
Home
๐
Calendar
โ
Ovia+
๐ช
Coaching
โฐ
More
Difference from Free App
Value
Inactive icon/label color
Gray 40 #929292 (slightly lighter than Free App's Gray 30)
Ovia+ tab icon
SVG crown image in circular container โ not a font glyph
Label for middle tab
"Ovia+" โ text only (icon is the crown image)
Home indicator color
Charcoal #231F20 (vs black in free app)
iOS Glass Tab Bar โ Experimental ๐ง
Figma: 334-52497
An exploratory iOS 26 Glass-style tab bar. Uses SF Pro fonts (not Source Sans Pro), Apple's native tab bar glyphs (SFSymbols), glass blur + fill background treatment, and a Blush 20 pill for the selected tab. This was designed ahead of schedule at the request of the development lead and is not yet in the implementation queue.
โ
Home
โฒ
Calendar
โ
Ovia+
โฆ
Coaching
โช
More
Note: Icon shapes above are approximations โ actual Figma uses SFSymbols glyphs only available via SF Pro font.
Element
Value
Notes
Container
Glass blur + fill pill, radius ~296px
Backdrop-blur: 20px + hard-light mix-blend; bg: #F7F7F7 ~67% opacity
โ ๏ธThis variant requires SF Pro font and SFSymbols โ it cannot be replicated in the browser with web fonts. The visual here is an approximation. Refer to the Figma source for the actual glyph designs. HIG reference: developer.apple.com/design/human-interface-guidelines/tab-bars
๐Figma: Free App bottom bar 334:52524 ยท Ovia+ bottom bar 126:21126 ยท iOS Glass tab bar 334:52497.
๐ง Primitives
Iconography ๐ง
A planned reference library for all icons used across Ovia โ legacy Ovuline font glyphs, Font Awesome 5 Pro usage, and the new rebrand SVG icon set. This section will grow into a downloadable asset index covering both legacy and rebrand icon systems, a persistent request from the development team.
๐งWork in progress: This section is a placeholder. The full iconography library โ including a searchable, downloadable index of all legacy and rebrand icons โ is planned. Partial icon coverage exists in the Calendar component sections (Day Icons Legacy, Day Icons Rebrand, Data Icons Legacy 18ร18, Calendar Icons Themes + BC).
Icon Systems Overview
System
Format
Where Used
Coverage
Ovuline icon font
Custom icon font (Ovuline)
Calendar day icons, bottom nav, modal close button, data section icons (18px)
Partial โ see Calendar sections for glyph reference
Font Awesome 5 Pro Solid
FA5 Pro font
Bottom nav tabs, pregnancy calendar icons (doctor, notes)
Partial โ glyph codes in Calendar docs
SFSymbols (iOS native)
SF Pro font glyphs
iOS Glass tab bar only
Glyphs not reproducible in web context
Rebrand SVG icons
Individual SVG image files
Calendar day icons (12ร12), Data icons future
Partial โ see Cal โ Day Icons (Rebrand)
Planned: Downloadable Icon Index
The goal for this section is a web-viewable, searchable table where:
Each legacy icon is shown alongside its Ovuline glyph code and semantic name
Each rebrand icon is shown as an SVG preview with download link
Legacy โ rebrand pairings are shown side-by-side where applicable
Developers can filter by context (calendar, data, navigation, etc.)
SVG assets can be downloaded individually or as a batch
This addresses the standing developer request for a self-service icon resource. Timeline: to be built once the rebrand SVG icon set is finalized and exported from Figma.