Privacy-Period-Tracker/docs/design/BRAND_GUIDE.md

# 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](../planning/PRODUCT_PLAN.md)
> where the two differ. **One difference is load-bearing and is flagged in
> [`README.md`](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 does not match this yet.** The supplied artwork sets the
> name as *Privacy:Period Tracker* — no space after the colon — and that is what
> `docs/data/img/logo.webp` and `docs/data/img/banner.webp` currently show. The
> written form above is canonical — it is what every document, the store listing
> and the app itself use — so the lockup needs redrawing to agree with it. Filed
> as issue #28 (Batch 08, `P2`) rather than fixed here, because closing the gap
> needs an artist and not a rename.

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](../planning/PRODUCT_PLAN.md) — 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](../planning/PRODUCT_PLAN.md) forbids blood
drops, and [`README.md`](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 encrypted local data storage using this visual system.”**

---

# 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**.