null
/
Privacy-Period-Tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Privacy-Period-Tracker/docs/design/BRAND_GUIDE.md

15 KiB
Raw Blame History

Privacy: Period Tracker — Visual Brand Guide

Status: Current
Owner: _null
Last reviewed: 2026-08-18
Governs: the visual identity — palette, logo, iconography, typography, tone of artwork
Review trigger: A rebrand; any new artwork; any change to the palette or to the
                logo, and in particular any change to the colours the calendar
                uses for cycle states

Supplied by the project owner on 2026-08-18, and it supersedes the colour direction in ../planning/PRODUCT_PLAN.md §39 where the two differ. One difference is load-bearing and is flagged in README.md: §39 asks for a muted teal or sage fertile window, and this guide is plum-and-rose throughout with a pink fertility colour.

Use this guide whenever creating additional artwork, icons, onboarding illustrations, feature graphics, store assets, UI decorations, or marketing images for Privacy: Period Tracker.

1. Brand Personality

The visual identity should feel:

  • Private and secure
  • Feminine without feeling childish
  • Calm and reassuring
  • Modern health-tech
  • Premium and polished
  • Soft rather than clinical
  • Personal and discreet
  • Fertility/cycle focused without relying heavily on anatomical imagery

The overall aesthetic is soft botanical femininity + menstrual-cycle symbolism + privacy/security.

2. Core Brand Colors

Primary Plum

Deep Plum

  • Hex: #563659
  • Use for: shields, calendar headers, dark text, outlines, stems, icon structure

Rich Purple

  • Hex: #704770
  • Use for: secondary icon elements, gradients, leaves, calendar structure

Dark Mauve

  • Hex: #815276
  • Use for: secondary typography, outlines, transitions, shadows

Primary Pink

Period Rose

  • Hex: #E58698
  • Use for: important cycle indicators, logo accents, highlighted calendar days

Soft Rose

  • Hex: #E6A6B8
  • Use for: petals, secondary highlights, softer cycle indicators

Blush Pink

  • Hex: #F0B3C5
  • Use for: lighter petals, soft accent areas, glow effects

Bright Fertility Pink

  • Hex: #EA5D88
  • Use sparingly for:
    • selected dates
    • fertility highlights
    • active states
    • important accent points

Lavender

Soft Lavender

  • Hex: #D8BED8
  • Use for: inactive calendar days, secondary elements, subtle decorations

Light Lavender

  • Hex: #E4D3E4
  • Use for: soft backgrounds, cards, subtle highlights

Lavender Mist

  • Hex: #F0E1F0
  • Use for: very light backgrounds and glow areas

Light Theme Backgrounds

Primary light background:

#F4E7F1

Secondary:

#F4E9E9

Highlight:

#F6F2F4

The light background should usually be a very soft gradient such as:

#F8F2F6 → #ECDDEB → #F3DFE7

Avoid pure white whenever possible.

The background should feel like blush-tinted ivory or lavender mist.

3. Dark Theme Colors

The dark version should not use ordinary black.

Use very deep eggplant/plum-black colors.

Main Dark Background

Midnight Plum

  • Hex: #100811

Deep Eggplant

  • Hex: #16071D

Dark Violet

  • Hex: #211124

Raised Surface

  • Hex: #32153E

Dark background gradient:

#090611 → #150A1A → #211027

The center can have a very subtle plum glow behind important artwork.

Dark Mode Accent Colors

Glow Pink

  • Hex: #F3BCD8

Rose Neon

  • Hex: #EC6D9A

Lavender Glow

  • Hex: #D9AEDD

Mauve Glow

  • Hex: #A46DA6

Deep Purple

  • Hex: #4A235A

Glow should remain soft.

Do not turn the design into cyberpunk neon.

4. Signature Logo Symbol

The main brand emblem combines several ideas.

Circular Cycle Ring

A nearly complete circular ring surrounds the design.

It represents:

  • menstrual cycles
  • repeating patterns
  • fertility cycles
  • learning over time
  • prediction

The ring transitions between:

Pink → Rose → Mauve → Plum

Example gradient:

#EA7695 → #C95882 → #704770

The ring should not look perfectly mechanical. A graceful sweeping shape is preferred.

Calendar

A rounded calendar sits inside the circle.

Characteristics:

  • soft rounded corners
  • two large rounded binder loops at the top
  • dark plum top section
  • pale lavender/blush calendar body
  • calendar dates represented mostly by circles rather than numbers

Example calendar header:

#563659

Calendar body:

#F0DFEC

5. Cycle Dots

Cycle days are represented using small circular dots.

Use different colors to communicate states.

Neutral Day

#D8B4D4

Period Day

#DF5A80

Strong Period Day

#A62C61

Fertility Day

#E891AE

Predicted Day

#CFA8D0

Dots should remain simple, smooth, and slightly dimensional.

Avoid complicated symbols inside the calendar.

6. Privacy Shield

The shield is one of the most important parts of the brand.

It communicates the core idea behind the name Privacy.

The shield should:

  • overlap the bottom of the calendar
  • be rounded rather than aggressive
  • use plum or deep purple
  • have a thin pale lavender/pink edge
  • contain a simple padlock

Shield gradient example:

#704770 → #432847

Lock:

#F3DDEA

The shield should feel protective rather than militaristic.

7. Padlock

Use a very simple lock.

Characteristics:

  • rounded body
  • rounded shackle
  • small central keyhole
  • no excessive details

Colors:

Light mode:

#F5E4EE

Dark mode:

#F4C8DE

The lock communicates that reproductive and menstrual information belongs to the user.

8. Crescent Moon

A small crescent moon appears near the upper-left portion of the cycle ring.

The moon represents:

  • cycles
  • time
  • feminine rhythm
  • repeating biological patterns

Color:

#FFF0F5

or

#F4DDE9

The moon should remain secondary to the calendar.

9. Botanical Element

The right side of the logo contains an elegant botanical sprig.

It should contain approximately:

  • 2–3 pink petals
  • 2–4 plum/lavender leaves
  • thin curved stem

Example colors:

Pink petal:

#EE8DA7

Light petal:

#F3ABC0

Purple leaf:

#704770

Dark leaf:

#563659

The plant should curve naturally along the circular cycle ring.

This botanical element helps prevent the privacy/security theme from feeling overly technical.

10. Typography

The brand name is:

Privacy: Period Tracker

Keep the colon between Privacy and Period, with a single space after it.

The drawn wordmark agrees with this now. It did not for a while: the first supplied lockup set the name as Privacy:Period Tracker, with no space after the colon, so logo.webp and banner.webp disagreed with every document and with app_full_name. It was filed as #28 rather than papered over, because closing that gap needed an artist and not a rename.

The redrawn lockup is dist/splash.webp, and the two webp assets are regenerated from it. lockup-light-source.png and lockup-dark-source.png in brand/ are the superseded originals — kept because they are the owner's files, not because anything should be cut from them again.

Preferred presentation:

Privacy: in plum/lavender

Period Tracker in rose pink.

Typography should feel like an elegant modern serif.

This governs the wordmark, store assets and marketing artwork. In-app typography is unchanged and still belongs to ../planning/PRODUCT_PLAN.md §40 — system or Material type, no licensed font — which is what PeriodTypography in core/designsystem implements; its one override is the forecast's displayLarge, because §38 makes the number the hero.

Look for fonts similar to:

  • Cormorant Garamond
  • DM Serif Display
  • Playfair Display
  • Libre Baskerville
  • Lora

Avoid:

  • bubbly fonts
  • handwritten scripts
  • childish fonts
  • highly futuristic fonts
  • heavy block fonts

11. Brand Tagline

Primary tagline:

KNOW YOUR CYCLE. PROTECT YOUR PRIVACY.

Display using a clean sans-serif font with generous letter spacing.

Recommended style:

ALL CAPS

Wide tracking

Thin or regular weight

Example fonts:

  • Montserrat
  • Inter
  • Poppins
  • Avenir-style sans serif

12. Decorative Lotus Mark

A very small three-petal or lotus-like symbol can be used as a secondary brand detail.

Typical arrangement:

──── • lotus • ────

It can be used:

  • beneath the brand name
  • between sections
  • in onboarding screens
  • loading screens
  • empty states
  • privacy messages

Keep it subtle.

13. Light Mode Visual Style

Light mode should use:

  • blush ivory backgrounds
  • soft lavender shadows
  • muted plum
  • dusty rose
  • pale pink
  • very subtle gradients

Avoid stark white backgrounds.

Preferred feel:

soft morning light + blush + lavender mist

14. Dark Mode Visual Style

Dark mode should use:

  • near-black plum
  • deep eggplant
  • faint purple gradients
  • soft pink highlights
  • lavender glow
  • subdued botanical outlines

Preferred feel:

quiet nighttime + plum velvet + soft rose glow

Never use ordinary flat #000000 unless required by the platform.

15. Shadows and Depth

Artwork uses subtle semi-3D depth.

Elements may include:

  • soft inner highlights
  • subtle outer shadows
  • gentle glow
  • slightly raised surfaces

Do NOT use:

  • harsh drop shadows
  • metallic chrome
  • hard bevels
  • excessive glass effects

The artwork should remain halfway between:

clean vector illustration

and

soft polished 3D UI artwork

16. Corners and Shapes

Almost every shape should use rounded geometry.

Use:

  • rounded calendar corners
  • rounded shield
  • rounded dots
  • soft petal shapes
  • curved stems
  • circular framing

Avoid sharp aggressive angles.

17. Background Decoration

Splash screens and large promotional images may include extremely subtle:

  • botanical line art
  • circular arcs
  • crescent shapes
  • tiny four-point sparkles
  • translucent leaves
  • cycle rings

These decorations should remain low contrast.

They should never compete with the primary logo.

18. App Icon Design Rules

For a small mobile app icon, do not include the full app name or tagline.

The icon should simplify the brand.

Preferred icon composition:

  1. Rounded square background
  2. Circular pink/plum cycle ring
  3. Simplified calendar
  4. Privacy shield and lock
  5. Optional tiny crescent
  6. Optional single botanical leaf/petal

The lock and calendar should remain recognizable at very small sizes.

App Icon — Light

Background:

#F4E7F1

Cycle ring:

#E46F91 → #704770

Calendar:

#F3E4EF

Header:

#563659

Shield:

#563659

Lock:

#F8E8F0

Period indicator:

#DF5A80

App Icon — Dark

Background:

#100811

Cycle ring:

#EC709A → #704770

Calendar:

#DDBFDB

Header:

#4A235A

Shield:

#432847

Lock:

#F4C8DE

Selected cycle dot:

#E95484

Add a very faint pink-purple glow behind the emblem.

19. Simplified Small Icon

For extremely small icons such as notifications or feature buttons, simplify further.

Use only:

calendar + shield/lock

or

cycle ring + lock

Do not attempt to fit:

calendar + shield + moon + flowers + text

into very small UI icons.

20. Feature Icon Style

Future feature icons should look like they belong to the same family.

Examples:

Period

Calendar dot or filled cycle disc — never a droplet. ../planning/PRODUCT_PLAN.md §42 forbids blood drops, and README.md applies that list to every in-app illustration and marker.

Fertility

Small flower/petal or ovulation circle

Predictions

Calendar with subtle sparkle

Symptoms

Simple heart/pulse or body indicator

Privacy

Shield + lock

Insights

Small chart enclosed in cycle ring

Mood

Simple rounded face or heart

Notes

Rounded document

Temperature

Rounded thermometer

Medication

Rounded pill/capsule

All feature icons should use:

  • rounded geometry
  • 2–3 colors maximum
  • plum outline or base
  • rose highlight
  • lavender secondary fill

21. Image Generation Style Description

When asking another AI to generate artwork, include language similar to:

“Premium feminine health-tech illustration, elegant period and fertility tracking aesthetic, privacy-first branding, soft rounded vector forms with subtle semi-3D depth, dusty rose, mauve, plum and lavender palette, smooth gradients, soft glow, botanical accents, menstrual cycle symbolism, sophisticated rather than childish, clean modern mobile-app design.”

22. Master Prompt for Future Agents

Use this as the starting prompt when creating new visual assets:

Create an image for the mobile app “Privacy: Period Tracker” using its established visual identity. Use a sophisticated feminine health-tech aesthetic focused on menstrual-cycle tracking, fertility awareness, and strong personal privacy. The brand palette consists of dusty rose, blush pink, mauve, deep plum, lavender, and soft ivory in light mode, or midnight plum/eggplant with luminous rose and lavender accents in dark mode. Use smooth rounded vector shapes with subtle semi-3D depth, soft gradients, gentle highlights, and restrained glow. Incorporate established motifs where appropriate: circular cycle rings, rounded calendar shapes, circular cycle-day indicators, privacy shields, simple padlocks, crescent moons, and elegant botanical leaves or petals. Keep the design premium, calm, private, modern, and feminine without becoming childish, cartoonish, overly clinical, or overly sexualized. Maintain generous whitespace and clean mobile-app composition.

Then add the specific asset request.

Example:

“Create a fertility prediction icon using this visual system.”

or:

“Create an onboarding illustration explaining that cycle history stays on this device using this visual system.”

Note the wording, because it changed. This example used to say encrypted local data storage, and the database is not encrypted — see Deliberately out of scope in ../security/SECURITY.md, which owns that claim and explains why.

A prompt is a claim the moment somebody draws it. A padlock on an onboarding screen is a promise, and this one would have been a promise the product does not keep — which is worse than saying nothing, because the true story here is genuinely good: the data never leaves, so there is no server to breach and nothing to sell. Draw that instead.

23. Critical Consistency Rules

Future agents should preserve these rules:

  • Privacy/security is always visually important.
  • Pink should be sophisticated dusty rose, not hot bubblegum pink.
  • Purple should lean plum and mauve rather than electric violet.
  • Avoid bright primary colors.
  • Avoid excessive red.
  • Avoid generic medical blue.
  • Avoid anatomical uterus graphics as the primary identity.
  • Avoid cartoon characters.
  • Avoid overtly sexual imagery.
  • Keep botanical imagery elegant and secondary.
  • Prefer circles, curves, shields, petals, and rounded rectangles.
  • Use subtle gradients rather than flat colors everywhere.
  • Dark mode should feel luxurious rather than gloomy.
  • Light mode should feel soft rather than sterile.
  • All icons should appear to belong to the same visual family.

24. Brand Visual Formula

When unsure, use this formula:

Cycle + Calendar + Privacy + Soft Botanical Femininity

Visually:

Circular cycle motif

  • rounded calendar
  • shield/lock
  • rose/plum botanical accent
  • soft lavender/pink gradients

That combination is the core visual identity of Privacy: Period Tracker.