I want to build a symptom tracker for women who have a hormonal cycle but no period. That includes women who have had a hysterectomy and kept their ovaries, women who have had an endometrial ablation, and women whose periods have stopped on the hormonal coil. Their ovaries still cycle, so symptoms like headaches, low mood and breast tenderness come back at roughly the same point each time, but there is no bleeding to mark where a cycle starts or ends. Every existing cycle tracker begins by asking about periods or fertility. This app will focus exclusively on women who don’t have periods.

After a few cycles of logging, the app should be able to tell when symptoms are likely to arrive, and notify the user when to expect symptoms.

What to build

Two parts, on one page. The desktop view should use more of the available space, but the mobile view should fit nicely on an mobile device screen.

1. The next few days. A card at the top of the page. It looks at the mean severity of each symptom on the coming days, based on past cycles, and says plainly what usually reaches moderate or worse. For example: “You usually get a headache and sleep badly around now. Plan a quiet couple of days.” If nothing is expected, say so in one line.

2. The cycle wheel. A circular chart. Going round the ring is the day of the cycle, from day one to the typical cycle length.

Each symptom is a concentric band. Symptoms are only logged on a specific day if they are actually experienced, so if there are no issues with headaches then that will not be logged that day. So each concentric circle should be blank if the symptom wasn’t observed, otherwise a color-scale should be used to indicate the severity of the symptom. Each symptom gets its own colour, and as the severity increases, the shade of that colour gets darker. For example, headaches might be green - light green indicates mild headaches, dark green indicates severe.

We should then see mostly an empty wheel with regions where the symptoms appear (and likely starting light, peaking dark, then fading out again).

What not to build

Don’t build any backend, database, user accounts yet. Also don’t buid any user input for now. Just the two items above with dummy data.

Dummy data

The symptoms are: headache, low mood, irritability, breast tenderness, bloating, poor sleep, low energy. Each is rated on a four-point scale: none, mild, moderate, severe.

Seed six past cycles and a current one, with the cycle boundaries fixed in the data. Vary the past cycle lengths between 26 and 31 days. Make the symptoms realistic: mood, breast tenderness, bloating and poor sleep build over the last five to seven days of each cycle; headache clusters in the last two days and the first two days. Add a little noise so no two cycles are the same. The current cycle started about twenty days ago and is logged up to today.

Copy and tone

British English. Short, plain sentences, written like a human and not an AI.

Keep the visual design basic for now. I will give you a proper design brief later.

I’d like the segments to have rounded ends, no gaps between the different colours, and gradients instead of just one shade cutting directly into the next. Kind of like the Apple Watch activity wheel.

give me some design directions

I like this one but with a light background and a bit lighter and more airy

Can you make the background dark actually, I preferred that

Forecast

A cycle tracker for women who still have a hormonal cycle but no monthly bleed: partial hysterectomy with ovaries kept, endometrial ablation, hormonal IUD or continuous pill, perimenopause with unreliable bleeds. Other trackers open with “when was your last period?”, which she can’t answer. She knows something cyclical is happening (energy, mood, sleep, migraines, bloating) and wants to see the pattern and know what’s coming.

Tagline: “You still have a cycle. Now you can see it.” Not a fertility app. Not a wellness app. No pregnancy mode, affirmations, streaks or badges. She is mostly 35 to 55, smart, busy, and often logs at night in bed with one thumb.

Voice

A good nurse friend: plain, warm, unhurried, honest about uncertainty.

• Never ask for a period date. Never use “period”, “menstruation” or “flow” as an input, label or default. Ask about signals.
• Use real words: hysterectomy, ovaries, estrogen, ovulation. No euphemisms.
• Forecast, don’t diagnose. Predictions say “looks like” or “based on your last three cycles” and always show confidence. Never “you are ovulating”; instead “signals suggest a peak around Thursday”.
• No exclamation marks, no pep talk, no emoji.
• Headlines six words or fewer. Body copy two sentences or fewer. Buttons one or two words.
• One weather metaphor per screen, in the headline only. Wry is fine; cute is not.

Vocabulary: “signals” not symptoms; “cycle day”; “reset” for the low point where a new cycle starts; “forecast”, “outlook” (next few days), “patterns” (history), “the wheel”. Phases: Rising, Peak, Falling, Low. Medical names appear only in Learn, in parentheses, once. Banned: Aunt Flo, girl, ladies, journey, self-care, empower, wellness.

Sample copy, use verbatim where it fits:

• Onboarding: “You still have a cycle. Let’s find it.” / “No period date needed. We’ll work it out from what you feel.”
• Situation options: Partial hysterectomy (ovaries kept) · Endometrial ablation · Hormonal IUD or continuous pill · Irregular or absent periods · Something else
• Optional anchors: “Any of these help us find your cycle faster. Skip if none apply.” Ovulation twinge · LH strips · Basal temperature · Cyclical migraine
• Today headlines: “Low pressure today.” / “Clearing by tomorrow.” / “Peak weather. Expect energy.” / “Fog likely before noon.”
• Cycle chip: “Day 19 · Falling · fair confidence”
• Not enough data: “We can’t forecast yet. About two more weeks of check-ins should do it.”
• Check-in prompt: “How’s the weather in there?” Done: “Logged. Forecast updated.”
• Insight: “Sleep tends to drop around day 22. That’s four cycles running.”
• Evening reminder: “Thirty seconds. How was today?”
• Error: “Couldn’t save that. Check your connection and try again.”

Visual direction

Two signatures, one object. The sky is a gradient that shifts with the phase. The wheel is her whole cycle drawn as rings, with the sky as its outer band and today’s sky in the hub. Everything else is quiet, dense and legible.

Palette (hex → shadcn token): Night #1B1D2A text, dark surfaces → foreground Haze #EFEDF2 app background → background Cloud #FFFFFF cards, empty wheel rings → card Dusk #5B5F93 buttons, links, active → primary Apricot #E39A6B wheel needle and today marker only → accent Sky #9DB8CC secondary fills → secondary Fog #C9C6D1 borders, disabled → border Flare #B9503B pain and migraine only → destructive Radius 14px. Dark mode is first-class: background Night, cards #262838, text Haze, Dusk lightened to #8A8EC4, empty wheel rings #2E3042.

Sky gradients, all 160deg: Rising #E39A6B→#9DB8CC; Peak #9DB8CC→#EFEDF2 (Night text); Falling #5B5F93→#E39A6B; Low #1B1D2A→#5B5F93; Unknown #C9C6D1→#EFEDF2 (Night text). Crossfade 600ms on phase change.

Type (Google Fonts): Instrument Serif italic 32px for the forecast headline, regular 28px for screen titles, nowhere else. Figtree for everything else, 16px body, 14px secondary, weights 400 and 600, tabular numerals. No Inter, no system stack. No small-caps labels above sections.

Layout: mobile-first, 20px gutters, 480px max width centred on desktop with Haze edge to edge. Bottom tabs: Today, Log, Patterns, Learn. Settings via the avatar top right. Cards are Cloud with a 1px Fog border and no shadow. Spacing scale 4, 8, 12, 16, 24, 32. No screen may be a single card. Lucide icons only, 20px, stroke 1.5. No illustrations, stock photos or emoji. Charts are one line per signal in its hue on a faint Fog grid, Apricot dot on today, no area fills, no pie charts. Motion 300ms ease-out; nothing bounces; respect reduced motion.

The wheel

Keep the existing wheel’s behaviour and restyle it:

• Day 1 at twelve o’clock, days clockwise, a full turn is the estimated cycle length.
• Outer band, 6px: the sky as one continuous gradient around the circle, dawn at day 1 through clear, dusk and night back to dawn, no seams. 1px Fog hairline on both edges. Always present, even before any signals are logged.
• Inside: one ring per signal, equal widths, 1px Fog hairline between rings. A ring appears once a signal has shown up twice. Max 10. Default order from outside in: Sleep, Energy, Mood, Brain fog, Migraine, Bloating, Breast tenderness, Anxiety. Order editable in Settings.
• Ring colour: Cloud where the signal never appeared on that cycle day in past cycles; the signal’s hue where it did; darker for higher severity averaged across past cycles. Shades blend continuously around the ring with no hard edges or gaps.
• Severity 0 to 4 per hue H: empty; H 35% on white; H 65% on white; H; H 30% toward Night. Sleep example: #FFFFFF #CDDCE9 #A6C0D8 #6F9BBF #56718E.
• Hub: circle in today’s sky gradient with the cycle day in Figtree 600 28px tabular and the phase name in 12px beneath.
• Needle: 2px Apricot from hub edge to outer band at today’s angle, 6px dot at the tip.
• Ticks outside the band at days 1, 7, 14, 21 with 11px Fog numbers. No other labels.
• Static. Only the hub crossfades on phase change. Tapping a ring on Patterns highlights it, dims the others to 30% and names its usual days above the wheel.

Signal hues, one per signal for life, used in rings, chips, charts and legend: Sleep #6F9BBF · Energy #C9A24A · Mood #8C7FB5 · Brain fog #8E97A6 · Migraine #B9503B · Bloating #6FA08A · Breast tenderness #B87A93 · Anxiety #D0895A · Hot flush #D9724F · Libido #9C6FAE. New signals take the next unused hue. Adjacent rings must not share a hue family.

Screens

Today, in this order: sky panel with headline, one plain detail line and the cycle chip; “Your cycle” card with the wheel at 140px (no legend or ticks, hub shows the day only) beside three rows for the next three days, each a phase swatch, day name and one word (Steady, Dip, Lift); quick check-in with four 1 to 5 sliders (Energy, Mood, Sleep, Pain) and signal chips, button “Log today”; one insight card; link “How we forecast without a period date”.

Log: sliders plus chips grouped Body (bloating, breast tenderness, headache, migraine, cramps, hot flush, skin), Mind (anxiety, irritability, low mood, brain fog, focus), Sleep (trouble falling asleep, waking early, vivid dreams), Other (libido, appetite, ovulation twinge, LH positive, temperature). Optional note. Selected chips take their signal hue. Seven-day strip at the top to edit past days.

Patterns: the wheel at 320px with a legend of colour dots and names, outside in; per-signal line charts across the last three cycles aligned by cycle day; a “Your usual” list of plain-language patterns.

Cycle: current estimate (length, day, phase, confidence, next reset); a three-paragraph “How we forecast” (we look for recurring signals, align them across cycles, confidence grows with check-ins); “Move day 1” date picker with a note that the forecast and wheel recalculate.

Learn: articles under 300 words with Instrument Serif titles, starting with “Why you still cycle after a partial hysterectomy”, “What an ablation does and doesn’t change”, “Finding your cycle without a period”, “Perimenopause and the disappearing anchor”. Each ends with “Talk to your GP or gynaecologist if…”. No medical advice.

Settings: situation, reminder time, ring order, units, theme, export CSV, delete account (“Delete everything? This removes all your check-ins and forecasts. It can’t be undone.”).

Hard rules

• No period input, bleeding tracker, fertility window or pregnancy mode.
• No pink, pastel gradients, florals or blob illustrations.
• Confidence is always shown beside a forecast.
• No placeholder text. Use the sample copy or match its register.
• Every screen works in dark mode and at 375px.
• Signal hues come only from the list above. Apricot is only the needle and today marker.

can we make the cycle wheel have more space, and move the log to the “Log” tab?

Now I want to make this mock up actually store data and not just a UI mockup. Modify the log page so that we can log for today by default or yesterday or any date we choose. When a new user is created, replicate the existing dummy data in their account for now (just to make my testing easier). Calculate the summary at the top, the cycle wheel, and your usual from the actual data that’s stored.

Can you build me a URL endpoint that shows the data for a particular day for a particular user. The URL would contain the user’s ID and the date. This is for a demonstration around RLS policies, so I don’t want any backend checks on the user ID, apart from the RLS policy. Then later I will turn off the RLS policy and show that changing the URL allows us to see someone else’s data. Make sure that the page makes it quite explicit whose data we are viewing, so that I can demonstrate this security hole.

ok that’s correctly not showing me someone elses data. Can you now disable RLS on my tables so I can show what happens if it’s disabled.

turn my RLS policies back on please

When someone is logged out, on the login/sign up screen, I’d like to add some marketing stats - “X days logged”, which is the total number of days logged by all users in the system, and “Y trusted users”, which is the count of users we have in the system. Don’t use server function, so I can demo the RLS policies required.

change the implementation so it uses a server function instead of a view