diff --git a/app/src/main/res/drawable/ic_launcher_foreground.xml b/app/src/main/res/drawable/ic_launcher_foreground.xml index 528ac1e..9580f9f 100644 --- a/app/src/main/res/drawable/ic_launcher_foreground.xml +++ b/app/src/main/res/drawable/ic_launcher_foreground.xml @@ -2,9 +2,11 @@ + android:fillColor="#E58698" /> diff --git a/app/src/main/res/values/ic_launcher_background.xml b/app/src/main/res/values/ic_launcher_background.xml index 80b1ebd..ac88d8a 100644 --- a/app/src/main/res/values/ic_launcher_background.xml +++ b/app/src/main/res/values/ic_launcher_background.xml @@ -1,4 +1,5 @@ - #4A2545 + + #563659 diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 3c3341b..00abd43 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,6 +1,17 @@ - Period + + Privacy:Period + Privacy:Period Tracker + Know your cycle. Protect your privacy. Today Calendar diff --git a/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Color.kt b/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Color.kt index f4b8545..4406d39 100644 --- a/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Color.kt +++ b/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Color.kt @@ -3,34 +3,89 @@ package dev.privacyllc.period.designsystem import androidx.compose.ui.graphics.Color /** - * The palette from docs/planning/PRODUCT_PLAN.md §39, as tokens. + * The palette from [docs/design/BRAND_GUIDE.md], which the project owner + * supplied on 2026-08-18 and which supersedes the sketch in PRODUCT_PLAN.md §39 + * where the two differ. * - * Two rules live here rather than in a reviewer's memory: + * Two rules survive from §39 unchanged, because they are product decisions + * rather than colour preferences: * - * - the period state is a **berry/plum**, never a graphic blood-red; - * - the fertile window is a **muted teal/sage**, never a bright green, because - * green reads as "safe" and this app must never say that about fertility. + * - **the period state is a sophisticated rose or plum, never a graphic + * blood-red** — the guide's Period Rose and Strong Period Day do this; + * - **nothing anywhere reads as "safe"** — which is why the fertile window is + * a pink rather than a green, and why the calendar's states differ in shape + * as well as colour. * - * Nothing outside this file declares a colour literal. A `Color(0xFF...)` in a - * Composable is a review failure — see docs/design/README.md. + * ## The one deliberate departure from §39 + * + * §39 asks for a muted teal or sage fertile window, to hold it apart from the + * period colour. The brand guide is plum-and-rose throughout and gives fertility + * its own pink (`#E891AE`). The guide wins — it is newer, it is the owner's, and + * a teal accent in this identity would look like it came from another app. + * + * What §39 was protecting is kept by other means: the calendar's four states + * differ in **shape** (solid disc, dotted ring, continuous ring, star), which is + * what makes them legible in greyscale and to a colourblind user. Colour is the + * second signal here, never the only one. + * + * Nothing outside this file declares a colour literal. A `Color(0xFF…)` in a + * composable is a review failure. */ internal object PeriodPalette { - val DeepPlum = Color(0xFF4A2545) - val MutedBerry = Color(0xFF8C3A5C) - val BerryLight = Color(0xFFB86A87) - val SoftLavender = Color(0xFFC9B8D8) - val LavenderDeep = Color(0xFF6E5A82) - val MutedSage = Color(0xFF5F8A80) - val SageLight = Color(0xFF9BC0B6) - val SageDeep = Color(0xFF2F4A44) + // ---- Plum family. Structure, headers, dark text. ----------------------- + val DeepPlum = Color(0xFF563659) + val RichPurple = Color(0xFF704770) + val DarkMauve = Color(0xFF815276) + val DeepPurple = Color(0xFF4A235A) - val WarmCream = Color(0xFFFBF7F3) - val OffWhite = Color(0xFFFFFBFF) - val Charcoal = Color(0xFF1C1A1D) - val CharcoalRaised = Color(0xFF272429) + // ---- Rose family. Cycle indicators and accents. ------------------------ + val PeriodRose = Color(0xFFE58698) + val SoftRose = Color(0xFFE6A6B8) + val BlushPink = Color(0xFFF0B3C5) - val OnDark = Color(0xFFF2EAF0) - val OnLight = Color(0xFF241F26) - val Error = Color(0xFF8F2B2B) + /** Used sparingly — selected dates, active states. The guide is explicit about that. */ + val FertilityPink = Color(0xFFEA5D88) + + // ---- Lavender. Inactive and secondary. --------------------------------- + val SoftLavender = Color(0xFFD8BED8) + val LightLavender = Color(0xFFE4D3E4) + val LavenderMist = Color(0xFFF0E1F0) + + // ---- Light theme ground. "Blush-tinted ivory", never pure white. ------- + val LightBackground = Color(0xFFF4E7F1) + val LightSurface = Color(0xFFF6F2F4) + val LightSurfaceAlt = Color(0xFFF4E9E9) + + // ---- Dark theme. Eggplant, never ordinary black. ----------------------- + val MidnightPlum = Color(0xFF100811) + val DeepEggplant = Color(0xFF16071D) + val DarkViolet = Color(0xFF211124) + val RaisedSurface = Color(0xFF32153E) + + // ---- Dark accents. Soft glow, not neon. -------------------------------- + val GlowPink = Color(0xFFF3BCD8) + val RoseNeon = Color(0xFFEC6D9A) + val LavenderGlow = Color(0xFFD9AEDD) + val MauveGlow = Color(0xFFA46DA6) + + // ---- Cycle day dots, §5 of the guide. ---------------------------------- + val DayNeutral = Color(0xFFD8B4D4) + val DayPeriod = Color(0xFFDF5A80) + val DayStrongPeriod = Color(0xFFA62C61) + val DayFertility = Color(0xFFE891AE) + val DayPredicted = Color(0xFFCFA8D0) + + // ---- Text. ------------------------------------------------------------ + val OnLight = Color(0xFF2A1B2C) + val OnDark = Color(0xFFF3E6F1) + + /** + * Error, kept in the family rather than borrowed from Material. + * + * A stock red would be the one loud thing on a screen that is otherwise + * deliberately calm, and this app shows errors about health data. + */ + val Error = Color(0xFF9B2B4A) + val ErrorDark = Color(0xFFF0A8B8) } diff --git a/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Theme.kt b/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Theme.kt index cebb321..47ef191 100644 --- a/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Theme.kt +++ b/core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/Theme.kt @@ -17,35 +17,49 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.sp private val LightColors = lightColorScheme( - primary = PeriodPalette.MutedBerry, + primary = PeriodPalette.DeepPlum, onPrimary = Color.White, - primaryContainer = PeriodPalette.SoftLavender, + primaryContainer = PeriodPalette.LightLavender, onPrimaryContainer = PeriodPalette.DeepPlum, - secondary = PeriodPalette.LavenderDeep, + secondary = PeriodPalette.RichPurple, onSecondary = Color.White, - tertiary = PeriodPalette.MutedSage, + secondaryContainer = PeriodPalette.LavenderMist, + onSecondaryContainer = PeriodPalette.DeepPlum, + tertiary = PeriodPalette.PeriodRose, onTertiary = Color.White, - background = PeriodPalette.WarmCream, + // "Blush-tinted ivory or lavender mist", per the guide. Never pure white. + background = PeriodPalette.LightBackground, onBackground = PeriodPalette.OnLight, - surface = PeriodPalette.OffWhite, + surface = PeriodPalette.LightSurface, onSurface = PeriodPalette.OnLight, + surfaceVariant = PeriodPalette.LavenderMist, + onSurfaceVariant = PeriodPalette.DarkMauve, + outline = PeriodPalette.SoftLavender, error = PeriodPalette.Error, + onError = Color.White, ) private val DarkColors = darkColorScheme( - primary = PeriodPalette.BerryLight, - onPrimary = PeriodPalette.DeepPlum, - primaryContainer = PeriodPalette.DeepPlum, - onPrimaryContainer = PeriodPalette.SoftLavender, - secondary = PeriodPalette.SoftLavender, - onSecondary = PeriodPalette.DeepPlum, - tertiary = PeriodPalette.SageLight, - onTertiary = PeriodPalette.SageDeep, - background = PeriodPalette.Charcoal, + primary = PeriodPalette.GlowPink, + onPrimary = PeriodPalette.MidnightPlum, + primaryContainer = PeriodPalette.DeepPurple, + onPrimaryContainer = PeriodPalette.GlowPink, + secondary = PeriodPalette.LavenderGlow, + onSecondary = PeriodPalette.MidnightPlum, + secondaryContainer = PeriodPalette.RaisedSurface, + onSecondaryContainer = PeriodPalette.LavenderGlow, + tertiary = PeriodPalette.RoseNeon, + onTertiary = PeriodPalette.MidnightPlum, + // "Quiet nighttime + plum velvet + soft rose glow" — never flat black. + background = PeriodPalette.MidnightPlum, onBackground = PeriodPalette.OnDark, - surface = PeriodPalette.CharcoalRaised, + surface = PeriodPalette.DarkViolet, onSurface = PeriodPalette.OnDark, - error = Color(0xFFEC9A9A), + surfaceVariant = PeriodPalette.RaisedSurface, + onSurfaceVariant = PeriodPalette.LavenderGlow, + outline = PeriodPalette.MauveGlow, + error = PeriodPalette.ErrorDark, + onError = PeriodPalette.MidnightPlum, ) /** @@ -68,10 +82,10 @@ data class CycleColors( val LocalCycleColors = staticCompositionLocalOf { CycleColors( - periodConfirmed = PeriodPalette.MutedBerry, - periodPredicted = PeriodPalette.BerryLight, - fertileWindow = PeriodPalette.MutedSage, - ovulation = PeriodPalette.LavenderDeep, + periodConfirmed = PeriodPalette.DayPeriod, + periodPredicted = PeriodPalette.DayPredicted, + fertileWindow = PeriodPalette.DayFertility, + ovulation = PeriodPalette.FertilityPink, ) } @@ -87,19 +101,23 @@ fun PeriodTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit, ) { + // §5 of the brand guide names a colour per cycle state. They are close + // relatives on purpose — the identity is plum and rose throughout — which + // is exactly why the calendar's markers differ in SHAPE. Colour is the + // second signal here and never the only one. val cycleColors = if (darkTheme) { CycleColors( - periodConfirmed = PeriodPalette.BerryLight, - periodPredicted = PeriodPalette.SoftLavender, - fertileWindow = PeriodPalette.SageLight, - ovulation = PeriodPalette.SoftLavender, + periodConfirmed = PeriodPalette.RoseNeon, + periodPredicted = PeriodPalette.LavenderGlow, + fertileWindow = PeriodPalette.GlowPink, + ovulation = PeriodPalette.FertilityPink, ) } else { CycleColors( - periodConfirmed = PeriodPalette.MutedBerry, - periodPredicted = PeriodPalette.BerryLight, - fertileWindow = PeriodPalette.MutedSage, - ovulation = PeriodPalette.LavenderDeep, + periodConfirmed = PeriodPalette.DayPeriod, + periodPredicted = PeriodPalette.DayPredicted, + fertileWindow = PeriodPalette.DayFertility, + ovulation = PeriodPalette.DayStrongPeriod, ) } diff --git a/docs/data/img/banner.webp b/docs/data/img/banner.webp new file mode 100644 index 0000000..a86816e Binary files /dev/null and b/docs/data/img/banner.webp differ diff --git a/docs/data/img/icon.webp b/docs/data/img/icon.webp new file mode 100644 index 0000000..309f321 Binary files /dev/null and b/docs/data/img/icon.webp differ diff --git a/docs/data/img/logo.webp b/docs/data/img/logo.webp new file mode 100644 index 0000000..a7e9524 Binary files /dev/null and b/docs/data/img/logo.webp differ diff --git a/docs/design/BRAND_GUIDE.md b/docs/design/BRAND_GUIDE.md new file mode 100644 index 0000000..a363e0e --- /dev/null +++ b/docs/design/BRAND_GUIDE.md @@ -0,0 +1,752 @@ +# 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 directly between Privacy and Period. + +Preferred presentation: + +**Privacy:** in plum/lavender + +**Period Tracker** in rose pink. + +Typography should feel like an elegant modern serif. + +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 +Droplet or calendar dot + +### 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**. \ No newline at end of file diff --git a/docs/design/README.md b/docs/design/README.md index e98d392..0f6c6b5 100644 --- a/docs/design/README.md +++ b/docs/design/README.md @@ -75,18 +75,35 @@ health workflow — and never an interstitial after logging ([§33](../planning/PRODUCT_PLAN.md)). Banner space is reserved in the layout so a failed ad does not move the content. -## Colour, in one line each +## Colour -The palette is [§39](../planning/PRODUCT_PLAN.md); the constraints on it are: +The palette is [`BRAND_GUIDE.md`](BRAND_GUIDE.md), supplied by the project owner +on 2026-08-18. It **supersedes** the sketch in +[`../planning/PRODUCT_PLAN.md` §39](../planning/PRODUCT_PLAN.md) where the two +differ, and one difference is worth stating rather than leaving to be discovered: -- **Not pink as the whole identity.** Deep plum, muted berry, soft lavender, - warm cream, charcoal, muted sage/teal. -- **Period state** is a sophisticated berry or plum — never graphic blood-red. -- **Fertile window** is muted teal or sage — never bright green, which reads as - *safe* and this app must never say that. -- Everything goes through Material 3 colour roles and centralized tokens in - `core/designsystem`. **No hard-coded colours in a Composable** — the guard is - that a colour literal outside the token file is a review failure. +> **§39 asks for a muted teal or sage fertile window. The brand guide is plum +> and rose throughout, and gives fertility its own pink (`#E891AE`).** + +The guide wins — it is newer, it is the owner's, and a teal accent inside this +identity would look borrowed from another app. What §39 was protecting is kept +by other means, and this is the part that matters: **the calendar's states +differ in shape, not only in colour.** A solid disc, a dotted ring, a continuous +ring and a star stay tellable apart in greyscale and to a colourblind user, which +is what §43 actually requires. Colour is the second signal here, never the only +one. + +The two rules from §39 that survive unchanged, because they are product +decisions rather than colour preferences: + +- **Period state** is a sophisticated rose or plum — never graphic blood-red. +- **Nothing reads as "safe".** The fertile window is pink rather than green for + the same reason the labels say "Lower likelihood": this app never gives + permission. + +Everything goes through Material 3 colour roles and centralized tokens in +`core/designsystem`. **No hard-coded colours in a Composable** — a colour +literal outside the token file is a review failure. ## Both themes, every time diff --git a/docs/design/brand/emblem-source.png b/docs/design/brand/emblem-source.png new file mode 100644 index 0000000..a1d8f64 Binary files /dev/null and b/docs/design/brand/emblem-source.png differ diff --git a/docs/design/brand/lockup-dark-source.png b/docs/design/brand/lockup-dark-source.png new file mode 100644 index 0000000..fd25fbd Binary files /dev/null and b/docs/design/brand/lockup-dark-source.png differ diff --git a/docs/design/brand/lockup-light-source.png b/docs/design/brand/lockup-light-source.png new file mode 100644 index 0000000..3381732 Binary files /dev/null and b/docs/design/brand/lockup-light-source.png differ