Appearance
Avelia — Visual Identity & Design System Reference
Updated: 2026-04 Source of truth: Website implementation (avelia-health.com/src/styles/global.css) and app design spec (docs/avelia-design-spec.md)
1. Design Philosophy
"Botanical Journal" — warm, organic, intimate. Avelia should feel like a beautiful keepsake journal, not a clinical health tracker or a generic SaaS product.
Guiding Principles
- Warm over cold — cream backgrounds, rose accents, warm charcoal shadows. Never cold grays or stark whites.
- Editorial typography — serif display font (Fraunces) for headings creates an intimate, magazine-like quality. Geometric sans-serif (Outfit) for body text and UI.
- Generous space — content breathes. Cards have comfortable padding. Sections have clear visual separation.
- Understated motion — gentle fade-ins, subtle hover lifts (translateY -1px to -4px). Never flashy or distracting.
- Privacy is visible — shared/private states are always obvious. The user always knows who can see what.
- Made with love in Europe — the footer carries this statement with a filled heart icon. European origin is part of the brand's trust signal.
2. Color Palette
All colors are defined as CSS custom properties. The palette is warm-toned throughout — shadow bases use charcoal rgba(42,36,56,x), never cold black.
2.1 Core Tokens (Light Mode)
| Token | Hex | Role |
|---|---|---|
--red | #e6194c | Primary accent — buttons, active states, brand, logo, links |
--red-soft | #FDEAEF | Light red background — focus rings, selection states |
--red-dark | #c0153f | Hover/pressed state for primary buttons |
--ink | #2A2438 | Primary text, headings, dark UI surfaces |
--cream | #F7F3EE | Page background |
--paper | #FFFCF8 | Card/surface background — slightly warmer than cream |
--fog | #605B6F | Secondary text, labels, placeholders |
--border | #E8E2DC | Card borders, dividers, input borders |
--gold | #866030 | Eyebrow labels, tags, warm accent |
--gold-soft | #F5EDE3 | Tag/badge background |
--green | #5A8F62 | Success states, positive indicators |
--surface-inv | #2A2438 | Inverted sections (footer, stage grid, dark hero areas) |
2.2 Dark Mode Tokens
Dark mode is activated via [data-theme="dark"] on <html>. It respects prefers-color-scheme: dark on first visit.
| Token | Dark Value | Notes |
|---|---|---|
--cream | #1e1a28 | Deep warm purple-black |
--paper | #251f33 | Slightly lighter surface |
--ink | #f0ecea | Warm off-white text |
--fog | #9d98a8 | Muted lavender-gray |
--border | #3a3348 | Subtle warm border |
--gold | #b8944f | Slightly brighter for contrast |
--gold-soft | rgba(184,134,79,0.14) | Semi-transparent warm |
--red-soft | rgba(230,25,76,0.12) | Semi-transparent red |
--surface-inv | #17141f | Deepest background |
Shadow opacity increases significantly in dark mode (0.25–0.45 vs 0.03–0.08) to maintain depth perception.
3. Typography
3.1 Font Families
| Role | Family | Fallback | Format |
|---|---|---|---|
| Display | Fraunces | Georgia, serif | Variable (weight 300–900, italic, optical size axis) |
| Body / UI | Outfit | -apple-system, sans-serif | Static weights 400, 700 |
Both fonts are self-hosted as .woff2 — no external requests (Google Fonts, Adobe, etc.).
Fraunces has an optical size axis (opsz): at large sizes it renders with more contrast and character; at small sizes it becomes more readable. Use font-variation-settings when available.
3.2 Type Scale (Website)
| Element | Font | Size | Weight | Letter-spacing | Line-height |
|---|---|---|---|---|---|
| Section title | Fraunces | clamp(2rem, 3.5vw, 3rem) | 700 | -0.03em | 1.12 |
Section title <em> | Fraunces italic | inherited | inherited | inherited | inherited |
| Eyebrow label | Outfit | 0.68rem | 800 | 0.14em | 1 |
| Card title | Fraunces | 1.15rem | 700 | -0.02em | 1.25 |
| Body / prose | Outfit | 1rem | 400 | normal | 1.7 |
| Card excerpt | Outfit | 0.875rem | 400 | normal | 1.55 |
| Nav links | Outfit | 0.9375rem | 400 (600 active) | normal | 1 |
| Wordmark (nav) | Fraunces | 1.25rem | 600 | -0.02em | 1 |
| Button text | Outfit | 0.88rem | 700 | 0.04em | 1 |
| Tag/badge | Outfit | 0.65rem | 800 | 0.12em | 1 |
| Footer heading | Outfit | 0.75rem | 600 | 0.08em | 1 |
| Footer body | Outfit | 0.9375rem | 400 | normal | 1.6 |
3.3 Typography Patterns
- Section titles always use Fraunces with the accent word wrapped in
<em>rendered in--reditalic — e.g. "Start free. Unlock the full journey." - Eyebrow labels appear above section titles with a 28px gold line before the text, all-caps.
- Prose content (guides, blog) uses
max-width: 68chfor comfortable line length.
3.4 Type Scale (Flutter App)
| Element | Font | Size | Weight | Letter-spacing | Line-height |
|---|---|---|---|---|---|
| Screen title (H1) | Fraunces | 1.5rem (24px) | 700 | -0.01em | 1.2 |
| Section heading (H2) | Fraunces | 1.1rem (17.6px) | 600 | normal | 1.3 |
| Greeting text | Fraunces | 1.8rem (28.8px) | 700 | -0.02em | 1.15 |
| Onboarding title | Fraunces | 2rem (32px) | 800 | -0.02em | 1.1 |
| Body text | Outfit | 0.9rem (14.4px) | 400 | normal | 1.5 |
| Small label | Outfit | 0.75rem (12px) | 600 | normal | 1.4 |
| Tiny label (caps) | Outfit | 0.65rem (10.4px) | 800 | 0.1em | 1.2 |
| Button text | Outfit | 0.9rem (14.4px) | 700 | 0.05em | 1.0 |
| Nav label | Outfit | 0.65rem (10.4px) | 600 | normal | 1.0 |
4. Spacing & Layout
4.1 Spacing Scale (8px grid)
| Token | Value | Usage |
|---|---|---|
xs | 4px | Tight gaps (dots, icon-label) |
sm | 8px | Compact spacing (inline gaps) |
md | 12px | Card internal gaps, list item spacing |
base | 16px | Card padding, standard margins |
lg | 20px | Content area horizontal padding |
xl | 24px | Section spacing, content area padding |
2xl | 32px | Large section gaps |
3xl | 40px | Onboarding section spacing |
4.2 Page Layout (Website)
| Property | Desktop | Mobile (≤768px) |
|---|---|---|
| Max content width | 1100px | 100% |
| Horizontal padding | 52px | 20px |
| Section padding (vertical) | 96px | 64px |
| Section padding tight | 72px | 48px |
| Nav padding | 20px 52px | 16px 24px |
| Footer padding | 64px 52px 32px | 48px 24px 24px |
4.3 Breakpoints
| Breakpoint | Usage |
|---|---|
≤640px | Small mobile — single-column forms, stacked cookie consent |
≤768px | Mobile — primary breakpoint, nav hamburger, single-column layouts |
≤900px | Tablet — pricing grid stacks, content sidebar hides |
≤1024px | Stage grid shifts from 7 to 4 columns |
≤1100px | Phone fan decorative element adjusts |
5. Elevation & Shadows
All shadows use warm charcoal base rgba(42,36,56,x) — never cold black. Dual-layer shadows (large + small) create realistic depth.
| Token | Light Mode | Dark Mode |
|---|---|---|
--shadow-sm | 0 1px 3px rgba(42,36,56,0.04), 0 1px 2px rgba(42,36,56,0.03) | 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2) |
--shadow-md | 0 4px 12px rgba(42,36,56,0.06), 0 2px 4px rgba(42,36,56,0.04) | 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25) |
--shadow-lg | 0 12px 32px rgba(42,36,56,0.08), 0 4px 8px rgba(42,36,56,0.04) | 0 12px 32px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.3) |
6. Border Radii
| Token | Value | Usage |
|---|---|---|
--radius-sm | 12px | Input fields, small cards, icon containers |
--radius-md | 16px | Standard cards, settings items, stage cells |
--radius-lg | 20px | Large cards, popups |
--radius-pill | 100px | Buttons, tags, badges, toggle switches |
7. Component Patterns
7.1 Buttons
Primary (.btn-primary)
- Background:
--red→--red-darkon hover - Color: white
- Border-radius:
--radius-pill(100px) - Padding: 12px 28px
- Font: Outfit, 0.88rem, weight 700, letter-spacing 0.04em
- Hover:
translateY(-1px), darker background - Focus: 2px solid
--redoutline, 2px offset - Active:
translateY(0)(press effect) - Disabled: opacity 0.5, no pointer events
Secondary / Ghost
- Background: transparent
- Border: 1px solid
--border - Color:
--fog→--inkon hover - Same radius as primary
Chip / Filter
- Pill-shaped, 0.82rem, weight 600
- Inactive:
--paperbackground, 1px border, full opacity - Active:
--redbackground, white text
7.2 Cards
Content Card
- Background:
--paper - Border: 1px solid
--border - Border-radius: 12px
- Shadow:
--shadow-sm - Hover:
--shadow-lg+translateY(-4px) - Transition: box-shadow 0.2s, transform 0.2s
- Thumb area:
--creambackground, emoji at 3rem - Body padding: 20px 24px 24px
Pricing Card
- Same base as content card
- Featured variant: border 2px solid
--red, relative position for label - Label: 0.65rem caps,
--goldcolor
7.3 Navigation
- Fixed, glassmorphic:
color-mix(in srgb, var(--cream) 88%, transparent)+backdrop-filter: blur(16px) - Scrolled state adds subtle box-shadow
- Active link: weight 600, 2px
--redunderline pseudo-element - Language picker: dropdown with 10px radius, layered shadow
- Theme toggle: 34px square, 10px radius, emoji icon (🌑/☀️)
7.4 Footer
- Background:
--surface-inv(dark) - Two-column layout: brand column (flex 1 1 240px) + link columns (flex, gap 48px)
- Bottom bar: copyright + "Made with ❤️ in Europe" + region selector buttons
- Region buttons: 6px radius, 1px border, pill-like but rectangular
7.5 Forms
- Input border: 1px solid
--border, radius 12px (sm) or 6px (waitlist) - Focus: border-color
--red, optional0 0 0 3px --red-softring - Padding: 12–14px 16px
- Placeholder:
--fogcolor - Labels: 0.82rem, weight 600
7.6 Tags & Badges
- Eyebrow: 0.68rem, weight 800, 0.14em spacing, uppercase,
--goldwith 28px gold line before - Content tag: 0.65rem, weight 800, 0.12em spacing, uppercase,
--goldon--gold-softbackground, pill-shaped - Stage pill: 0.72rem, weight 600, pill-shaped, dynamic color per stage with 22% alpha background
8. Icons
Website
- Library:
phosphor-astro(Phosphor Icons) - Preferred variant: Duotone (two-tone, layered)
- Sizes: 18px (share buttons), 32px (section feature icons)
- Import pattern: Individual file imports —
import HeartFill from 'phosphor-astro/HeartFill.astro'
Flutter App
- Library: Material Symbols Outlined (variable weight, no fill)
- Default: FILL 0, wght 400, GRAD 0, opsz 24
- Sizes: 20px (nav), 24px (standard), 32px (profile), 40px (large profile)
9. Motion & Animation
Transitions
| Property | Duration | Easing |
|---|---|---|
| Background, border-color | 0.2s | ease (default) |
| Opacity, color | 0.15s | ease |
| Transform (hover lift) | 0.15s | ease |
| Box-shadow | 0.2s | ease |
| Backdrop-filter | 0.3s | ease |
| Carousel slide opacity | 0.6s | ease |
Keyframe Animations
- fanIn: fade up (opacity 0 → 1, translateY 18px → 0)
- float: gentle bob (translateY 0 → -6px → 0)
- parallax: scroll-linked vertical shift (translateY 20px → -20px)
Accessibility
@media (prefers-reduced-motion: reduce)disables all animation and transitions globally
10. Accessibility
- Focus ring: 2px solid
--red, 2px offset on all interactive elements via:focus-visible - Skip link: Hidden until focused, appears at top-left with
--redbackground - Screen reader:
.sr-onlyclass for visually hidden content - Semantic HTML: Proper heading hierarchy, ARIA labels on toggles/regions,
role="radiogroup"on region selector - Color contrast:
--ink(#2A2438) on--cream(#F7F3EE) ≈ 11.5:1 ratio;--fog(#605B6F) on--cream≈ 5.2:1 (AA compliant)
11. Brand Identity
Logo
- SVG mark: heart-lock icon inside a circle, rendered in
--red(#e6194c) with white lock detail - Wordmark: "Avelia" in Fraunces, 1.25rem, weight 600, letter-spacing -0.02em
- Logo + wordmark used together in nav and footer with 8px gap
Brand Voice (Visual)
- Warm, not clinical — cream backgrounds, editorial serif, soft shadows
- Confident, not loud — the red accent is used sparingly for actions and emphasis, never as a dominant fill
- European origin — "Made with ❤️ in Europe" in footer, GDPR-first design, hosted in Germany
- Privacy as design — lock iconography, E2E encryption messaging, no third-party tracking badges
12. Pitch Deck Visual Guidelines
Co-Founder Deck (The Vision)
Slide 1: Title
- Large
#e6194cheart-lock logo centered - Text: "AVELIA. Your journey to family, together."
- Footer: "Private. Shared. Sovereign."
Slide 2: The Problem (The Data Leak)
- Visual: Spiderweb of logos (Facebook, Google, ad networks) harvesting data from a generic period tracker
- Text: "Why does Meta know you're pregnant before your parents do?"
Slide 3: The Mission (The Trust Anchor)
- Clean white space. A single
#e6194cline separating "Your Data" and "Our Server" - Text: "We are building a Zero-Knowledge sanctuary."
- Bullets: E2EE by default. No ads. No pixels. No leaks. You hold the keys. We hold the blobs.
Slide 4: The "Together" Factor
- Two phones side-by-side, linked by a glowing
#e6194cthread - Text: "Parenting isn't a solo sport."
Slide 5: The Culture
- High-quality photo of a couple
- Text: "Honest. Warm. Scientific."
Investor Deck (The Growth)
Slide 1: Title
- Sleek UI mockup of Avelia on iPhone
- Text: "AVELIA. The Future of Private Health Tech."
- Subtext: "Disrupting the $60B FemTech market with absolute privacy."
Slide 2: The Market Opportunity
- Bar chart: "Privacy-Conscious Consumers" growth
- Text: "Privacy is the new Organic."
- Stat: 74% of users are "highly concerned" about reproductive data privacy (Post-Roe).
Slide 3: The Moat (E2EE)
- Diagram: Argon2id architecture vs centralized database
- Text: "We are Subpoena-Proof."
- Key: Flo/Clue cannot pivot to this architecture without rewriting their stack and killing ad revenue.
Slide 4: The Revenue Engine (3 Tiers + Marketplace)
- Visual: 3 tier cards in brand style + marketplace icon in
#e6194c - Free (0€): NFP & cycle tracking, journal, guides — on-device, no account
- Light (2,99€/mo · 26,99€/yr): cloud sync, symptom charts, 2 GB storage
- Premium (8,99€/mo · 79,99€/yr): all 7 stages, partner linking, 5 GB storage
- Expert Marketplace (future): 15–20% fee on 1:1 expert consultations
Slide 5: Traction & Roadmap
- Timeline: Thinking → Trying → Pregnant → Early Childhood
- Text: "Capture them at the Thinking stage, keep them for 10 years."
- Goal: 100k users in Year 1.
Slide 6: The Team & The Ask
- Founders' headshots
- Text: "Join the Privacy Revolution."
- Ask: Seed round for engineering scale and Marketplace pilot.