At a glance
20tokens
12type steps
5radius steps
10pxspacing base
Flo, in one page
Flo's iOS app is a soft, reassuring light space built around one circular object: the cycle wheel. The canvas is pure white (#FFFFFF), and the dominant supporting surface is a barely-there blush (#FFF0F3) — the color of the inside of a shell. The whole app is rounded, low-contrast, and gentle: nothing has a hard edge, nothing shouts. This is deliberate — Flo handles intimate, sometimes anxious subject matter (cycles, fertility, symptoms), and the visual language is engineered to feel calm, private, and unclinical. It looks less like a medical chart and more like a friendly daily companion.
The accent system is led by Flo Coral (#FF6B81) — a warm, soft pink-red that carries the brand. It is used for the primary action, the active tab, the "today" marker on the wheel, and the prediction highlight. A secondary lavender (#C5B3E6) supports it for the fertile-window and ovulation phase, giving the cycle wheel a two-color phase story (coral for period, lavender for fertile). Beyond these two, everything is monochrome warm-grey: near-black ink (#1A1A2E) for text, a muted violet-grey (#6E6A82) for secondary copy. The restraint keeps the emotionally loaded content from feeling alarming — color is soft and used to *reassure*, never to warn.
Typography is Inter (Flo's product face is a rounded geometric sans in this family — Gilroy-like in feel), used warmly at 400 / 600 / 700. Headlines are friendly and medium-sized rather than bold and large — a 28pt greeting, a 22pt section header. The most prominent number is at the center of the cycle wheel: the cycle day or the countdown to the next period ("Period in 5 days"). Around the wheel, labels are small and supportive. The single most expressive moment is the wheel itself animating: when the day advances or the user logs, the phase ring smoothly rotates and the phase colors morph, so the user *sees* where they are in their cycle.
Key Characteristics:
- Pure-white canvas (
#FFFFFF) with a barely-there blush surface (#FFF0F3) - Soft, rounded, low-contrast — engineered to feel calm and unclinical
- Flo Coral (
#FF6B81) as the lead accent — primary action, active tab, "today" marker - Lavender (
#C5B3E6) as the phase partner — fertile window / ovulation on the wheel - The cycle wheel — a circular calendar with a colored phase ring (signature)
- Prediction card — a reassuring sentence ("Period in 5 days", "Ovulation today")
- Symptom-log chip grid — soft tappable chips for daily logging
- Soft, generously rounded cards (16-20pt radius) with gentle shadows
- Bottom tabs (Today / Calendar / Insights / Partner / More)
- Inter typeface, 400/600/700 — friendly and warm, never clinical
Do's and don'ts
Do
- Use a pure-white canvas with the barely-there blush (
#FFF0F3) as the soft surface - Lead with Flo Coral (
#FF6B81) for the primary action, active tab, and "today" marker - Use lavender (
#C5B3E6) as the phase partner for the fertile window / ovulation - Make the cycle wheel the anchor of Today — large, centered, with generous air
- Keep everything soft and rounded — 16-26pt radii, no hard edges
- Tint shadows coral (
rgba(255,107,129,...)) so depth belongs to the blush world - Phrase predictions reassuringly ("Period in 5 days") — calm, never alarming
- Use soft sage for positive confirmations and soft amber for gentle alerts — never red
- Use tabular figures on the wheel center and calendar so numbers never reflow
Don't
- Don't use a clinical white-and-grey medical aesthetic — Flo is warm and unclinical
- Don't introduce loud or alarming colors — even alerts are soft amber, never red
- Don't make headlines aggressively large or heavy — friendly weight 700 at 24-30pt
- Don't use neutral black shadows — Flo's shadows are coral-tinted and soft
- Don't square the corners — the entire app is gently rounded
- Don't add a third phase color — coral and lavender carry the whole phase story
- Don't crowd the cycle wheel — it needs vertical breathing room as the anchor
- Don't animate harshly — phase morphs and fades are gentle, 200-350ms
- Don't color body text to draw alarm — color is reassurance, carried by coral/lavender
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Flo design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Flo Coral: #ff6b81
- lavender: #c5b3e6
- Coral Pressed: #e85870
- Coral Soft: #ffd9df
- Lavender Deep: #a893d6
- Lavender Soft: #ede6f7
- Canvas White: #ffffff
- Surface Blush: #fff0f3
- Surface Raised: #ffffff
- Surface Sunken: #fbe9ed
Type:
- families: Inter, Fallback Stack, Numerals
- scale: 11, 12, 13, 14, 15, 16, 18, 20, 22
- weights: 400, 500, 600, 700
Shape:
- radius: 16, 18, 20, 23, 26
- elevation: Background: `#FFF0F3` (blush) or white with a soft shadow | Selected day: scales up slightly with a soft shadow | Calendar day select: cell scales up ~1.08 with a soft shadow bloom over 200ms
Spacing: 10, 14, 16, 18, 20, 28
Rules:
- Use a pure-white canvas with the barely-there blush (`#FFF0F3`) as the soft surface
- Lead with Flo Coral (`#FF6B81`) for the primary action, active tab, and "today" marker
- Use lavender (`#C5B3E6`) as the phase partner for the fertile window / ovulation
- Make the cycle wheel the anchor of Today — large, centered, with generous air
- Keep everything soft and rounded — 16-26pt radii, no hard edges
- Tint shadows coral (`rgba(255,107,129,...)`) so depth belongs to the blush world
Avoid:
- Don't use a clinical white-and-grey medical aesthetic — Flo is warm and unclinical
- Don't introduce loud or alarming colors — even alerts are soft amber, never red
- Don't make headlines aggressively large or heavy — friendly weight 700 at 24-30pt
- Don't use neutral black shadows — Flo's shadows are coral-tinted and soft
- Don't square the corners — the entire app is gently rounded
- Don't add a third phase color — coral and lavender carry the whole phase story
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Flo Coral (
#FF6B81): The lead accent — primary CTA, active tab, the "today" dot on the wheel, prediction highlight, period phase on the cycle ring. - Coral Pressed (
#E85870): Pressed/active state for coral controls. - Coral Soft (
#FFD9DF): Coral at low intensity — selected-chip background, subtle fills, period-day calendar cells.
Phase Partner
- Lavender (
#C5B3E6): The fertile-window / ovulation phase on the cycle wheel, fertile calendar cells, fertility insight accents. - Lavender Deep (
#A893D6): Pressed state for lavender controls; the ovulation-day marker. - Lavender Soft (
#EDE6F7): Lavender at low intensity — fertile-day cell fills.
Canvas & Surfaces
- Canvas White (
#FFFFFF): The primary canvas. - Surface Blush (
#FFF0F3): The barely-there blush card/section surface — the app's signature soft background. - Surface Raised (
#FFFFFF): White cards that lift off the blush with a soft shadow. - Surface Sunken (
#FBE9ED): Pressed state on blush surfaces, subtle input fills. - Divider (
#F3DDE3): Hairline separators — a soft pink-tinted grey, never harsh.
Text
- Text Primary (
#1A1A2E): Headlines, the cycle-day number, primary copy — a soft near-black with a violet cast (not pure black). - Text Secondary (
#6E6A82): Supporting copy, dates, descriptions, labels (muted violet-grey). - Text Tertiary (
#A09CB0): Very low-emphasis metadata, placeholder text, disabled labels.
Semantic (Soft, Reassuring)
- Predicted Period (
#FF6B81): Predicted period days on the calendar (coral, often outlined rather than filled to read as "forecast"). - Logged Period (
#E85870): Confirmed/logged period days (the deeper coral — solid fill). - Fertile Window (
#C5B3E6): Fertile days (lavender fill). - Ovulation (
#A893D6): The single ovulation day (deep lavender, a ring or star marker). - Gentle Positive (
#7DC9A8): A soft sage for "Cycle logged" / positive confirmations — never a loud green. - Gentle Alert (
#F2B36B): A soft amber for "Late period" / attention — warm and calm, never red.
Light Mode
Flo's iOS app is light-first by design — the soft white space is intrinsic to the calm, unclinical brand. A dark mode exists for OS parity (Canvas #15131C, Surface #221E2C, Text #F2EFF7, with Coral and Lavender preserved), but the light experience is primary and is what this spec describes.
Type scaleRead the full spec
Font Family
- Primary:
Inter— Flo's product face is a rounded geometric sans in this family (Gilroy-like warmth) - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif - Numerals: tabular figures on the wheel center and calendar (
font-variant-numeric: tabular-nums) so day numbers align
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Wheel Center (Hero) | Inter | 30pt | 700 | 1.1 | -0.4pt | "Day 14" or "Period in 5 days" at the wheel center |
| Greeting | Inter | 28pt | 700 | 1.2 | -0.3pt | "Good morning, Mia" on Today |
| Screen Title | Inter | 24pt | 700 | 1.25 | -0.3pt | "Calendar", "Insights" large title |
| Section Header | Inter | 22pt | 700 | 1.3 | -0.2pt | "My cycle", "Symptoms today" |
| Card Title | Inter | 18pt | 600 | 1.3 | -0.1pt | Insight / prediction card heading |
| Prediction Emphasis | Inter | 20pt | 700 | 1.25 | -0.2pt | The reassuring forecast line, coral |
| Body | Inter | 16pt | 400 | 1.55 | 0pt | Insight body, explanatory copy |
| List / Chip Label | Inter | 15pt | 600 | 1.3 | 0pt | Symptom chip text, list-row title |
| Subtitle / Date | Inter | 14pt | 400 | 1.4 | 0pt | "May 14 · Cycle day 14", supporting meta |
| Button (Primary) | Inter | 16pt | 600 | 1.0 | 0.1pt | "Log period", "Save" CTA text |
| Calendar Day | Inter | 15pt | 600 | 1.0 | 0pt | The number inside a calendar cell |
| Meta / Caption | Inter | 13pt | 500 | 1.3 | 0.1pt | "Updated today", small captions |
| Tab Label | Inter | 11pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
| Label (UPPER) | Inter | 12pt | 700 | 1.2 | 0.8pt | "TODAY", "FERTILE WINDOW" tags |
Principles
- Friendly, not bold: headlines are medium-large (24-30pt) at weight 700 — present but never aggressive; Flo reassures.
- The wheel number leads: the largest, most important figure is the cycle-day / countdown at the wheel center.
- Tabular numerals on data: calendar days and the wheel center use tabular figures so grids and the count never reflow.
- Weight band 400 / 600 / 700: regular for body, semibold for chips/cards, bold for headlines/wheel. No light, no black.
- Color is reassurance: coral and lavender carry phase meaning; text stays warm-grey — never color body text to alarm.
Components and layoutRead the full spec
Cycle Wheel *(signature)*
- A circular calendar, diameter 240-280pt, centered at the top of Today
- Outer phase ring: segments colored by phase — Coral (
#FF6B81) for period days, Coral Soft for the lead-in, Lavender (#C5B3E6) for the fertile window, Lavender Deep for ovulation, and#F3DDE3for ordinary days - A
#FF6B81"today" dot sits on the ring at the current cycle position with a subtle pulse - Center stack: the big figure ("Day 14", 30pt w700) above a supporting line ("Follicular phase" or "Period in 5 days", 14pt
#6E6A82) - Below the center: a soft coral pill CTA — "Log period" / "Edit period dates"
- Interaction: dragging around the ring scrubs the predicted date; the phase morphs and the center updates live
- Reveal: on load, the phase ring sweeps in and the center figure fades up over ~700ms
Buttons
Primary CTA
- Shape: Full pill, height 52pt
- Background:
#FF6B81 - Text:
#FFFFFF, Inter 16pt w600 - Padding: 16pt vertical, 32pt horizontal, corner radius 26pt
- Pressed: background
#E85870, scale 0.97, soft haptic - Used for: "Log period", "Save", "Continue"
Soft Secondary Button
- Background:
#FFD9DF(coral soft) - Text:
#E85870, Inter 16pt w600 - Padding: 14pt vertical, 28pt horizontal, corner radius 26pt
- Pressed: background
#FBE9ED - Used for: "Add symptom", secondary card actions
Text Button
- Font: Inter 15pt w600, color
#FF6B81 - No background, 44pt hit area
- Used for: "See all", "Skip", "Edit"
Icon Actions (Add, Edit, Info, Share)
- Size: 20pt glyph, 44pt hit area
- Default:
#6E6A82; Pressed/active:#FF6B81
Cards & Containers
Prediction Card *(signature)*
- Background:
#FFF0F3(blush) or white with a soft shadow - Corner radius: 20pt, padding 20pt
- Leading: a 28pt soft illustrative glyph (droplet for period, leaf for fertile)
- Title: a label "NEXT PERIOD" 12pt w700 uppercase
#6E6A82 - Emphasis: "In 5 days" — Inter 20pt w700
#FF6B81 - Sub: "Expected May 19 · 87% confidence" — Inter 14pt
#6E6A82 - Trailing chevron if it deep-links
Symptom Log Chip Grid *(signature)*
- A wrapping grid of soft chips for daily logging
- Chip: background
#FFF0F3, text#1A1A2EInter 15pt w600, optional leading 18pt glyph - Padding: 10pt vertical, 16pt horizontal, corner radius 18pt
- Selected: background
#FFD9DF, 1.5pt border#FF6B81, text#E85870 - Tap: scale 0.96 + soft haptic; selection animates a gentle fill
- Grid gap: 10pt; categories grouped under 12pt uppercase labels (Mood, Flow, Symptoms)
Insight Card
- Background:
#FFFFFF, soft shadowrgba(255,107,129,0.10) 0 6px 20px, corner radius 16pt, padding 18pt - Top: a small illustrative banner or 24pt glyph in coral/lavender
- Title: Inter 18pt w600
#1A1A2E; Body: Inter 16pt w400#6E6A82 - Pressed: background
#FFF0F3
Calendar Month Grid
- 7-column grid of day cells, each 40pt
- Day number: Inter 15pt w600
- Cell states:
- Ordinary: no fill, text
#1A1A2E - Predicted period: coral outline ring (1.5pt
#FF6B81), text#FF6B81 - Logged period: solid
#E85870fill, white text - Fertile window:
#EDE6F7fill, text#1A1A2E - Ovulation:
#A893D6ring/star marker - Today: a
#FF6B81dot under the number - Selected day: scales up slightly with a soft shadow
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
rgba(255,255,255,0.94)with.regularMaterialblur, hairline#F3DDE3top border - Tabs: Today, Calendar, Insights, Partner, More
- Icon size: 24pt
- Active color:
#FF6B81 - Inactive:
#A09CB0 - Labels: Inter 11pt w600, always shown
- Active icon filled; inactive outlined
Top Bar
- Height: 44pt + safe area, transparent over white
- Left: greeting or screen title
- Right: a small streak/log indicator then a profile glyph 22pt
#6E6A82 - No solid background — it floats; a soft
#F3DDE3divider appears on scroll
Calendar Screen
- Month grid (states above), a month switcher, a legend chip row explaining the colors
- A floating coral "+" log button bottom-right (56pt circle,
#FF6B81, soft shadow)
Input Fields
Search / Note Field
- Background:
#FFF0F3, height 46pt, corner radius 23pt - Leading
magnifyingglass16pt#6E6A82 - Placeholder: "Search articles & symptoms", 15pt
#A09CB0 - Focus: 1.5pt border
#FF6B81, background →#FFFFFF
Note / Journal Textarea
- Background:
#FFF0F3, corner radius 16pt, padding 14pt - Text
#1A1A2E16pt; placeholder#A09CB0
Distinctive Components
Cycle Phase Wheel — the defining surface (see above): a circular phase calendar that rotates and morphs colors as the cycle advances.
Prediction Banner
- A reassuring full-width strip at the top of Today under the wheel: a soft blush banner with the forecast in coral and a calm supporting sentence
Phase Legend
- A small horizontal row of dot+label pairs (Period · Fertile · Ovulation · Predicted) that decodes the wheel and calendar colors
Daily Log Prompt
- A gentle card "How are you feeling today?" opening the symptom chip grid — soft, optional, never nagging
Spacing System
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Cycle wheel 240pt; calendar cells 38pt |
| iPhone 13/14/15 | 390pt | Cycle wheel 260pt; standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the floating top bar |
| iPhone 15/16 Pro Max | 430pt | Cycle wheel 280pt; calendar cells 44pt |
| iPad | 768pt+ | Two-pane: wheel + predictions beside the calendar; wider chip grid |
Dynamic Type
- Greetings, titles, body, card titles: full scale
- Wheel center figure: scales modestly but capped so it fits inside the wheel (~34pt max)
- Calendar day numbers, tab labels, captions: fixed (layout-sensitive at 11-15pt)
- Prediction emphasis: scales with body
Orientation
- Today / Calendar / Insights / Partner: portrait-locked (the wheel + scroll layout is vertical)
- iPad: rotates — landscape uses the two-pane layout
Touch Targets
- Primary CTA: 52pt tall — generous
- Symptom chips: full chip is the tap target (≥44pt effective)
- Calendar cells: 40pt cells with 44pt effective hit
- Floating log button: 56pt circle
- Tab icons: 24pt glyph, 44pt effective hit
- The cycle wheel ring is draggable; the center CTA is a separate 44pt+ target
Safe Area Handling
- Top: floating bar respects the notch / Dynamic Island
- Bottom: tab bar and the floating log button float above the home indicator
- Sides: 20pt content insets
- The cycle wheel centers within the safe content area
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-flo {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1a1a2e;
--heading-color: #1a1a2e;
--link-color: #de0021;
--link-hover-color: #ab0019;
--border-color: #d6d6d9;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(26,26,46,0.06);
--card-hover-shadow: 0 6px 18px rgba(26,26,46,0.12);
--header-bg: #1a1a2e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6a6a77;
--button-bg: #ff6b81;
--button-text-color: #000000;
--button-hover-bg: #ff3856;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #1a1a2e;
--button-secondary-hover-bg: #e4e4e6;
--button-secondary-border: 1px solid #d6d6d9;
--prompt-bg: #f4f4f5;
--prompt-text-color: #1a1a2e;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/fitness/flo/DESIGN.md· 21.5 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.