Step 1
Pick your stage
A few questions, about two minutes, and no account needed to start.
Brand kit
How Her Good Days looks and sounds
Logos to download, the colors and type, the photo style and every block the site is built from. The examples below are the live components, rendered from the site's own styles.
Slept 7 h 10 m
1 wake-up
Good days in October
18 so far
Logo
The mark is a woman's profile in a circle; the wordmark is Instrument Serif with "Good" in italics.
Color
Deep indigo ink on white, with soft lavender, periwinkle and sky panels. Read from the site's stylesheet.
bg
#FFFFFFink
#1C1566headlines, body, iconsink-2
#4A4680secondary textprimary
#1F1488buttons on whiteon-primary
#FFFFFFband
#180D80deep hero/bandon-band
#FFFFFFon-band-2
#D9D7F2p1
#F4F2FAlavender panelp2
#E8E7F5periwinkle panelsky
#D5E5F7sky panelwarm
#F6F0E9cream end of the panel gradientline
#E4E2F0pill
#FFFFFFaccent
#6F68C9gauge marker, small dotsaccent-soft
#CFCCECType
Instrument Serif for headings, Inter for everything you read. Sentence case, italics for one word at most.
| Sample | Role | CSS (styles.css) |
|---|---|---|
Notice your good days | Display, Instrument Serif | font-size: clamp(48px, 5vw, 70px); line-height: 1.02; |
Your first month | Section heading, Instrument Serif | font-size: clamp(40px, 3.9vw, 54px); line-height: 1.05; |
Patterns show | Card heading, Inter 500 | font: 500 22px/1.25 var(--sans); letter-spacing: -.01em; margin: 0; |
Log symptoms, cycle, sleep, food and mood in a minute a day. | Body, Inter 400 | margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; |
Pick the stage you are in now. When life changes, the app asks once. | Lede, Inter 400 | color: var(--ink-2); font-size: 18px; max-width: 34em; |
Photo style
Real-looking women of the age the page is about, in soft daylight at home or outdoors, doing something ordinary.
| We show | We avoid, and why |
|---|---|
| Soft window light, white and pale rooms, parks | Studio backdrops and hard flash: they read as an ad |
| Small, real expressions | Big stock grins and posed thumbs-up: nobody believes them |
| Ordinary clothes, natural hair, gray hair | Glamour styling and heavy retouching: the app is about real bodies |
| Phones held naturally, screen turned away or showing a real app screen | Made-up interfaces, logos or brand names in the frame |
| One person, or two people who clearly know each other | Before and after pairs: they promise a result |
App screens
Show the part of the screen the text talks about, beside that text. A full phone appears once a page at most.
Text beside one crop panel
One idea per row: the text on one side, and on the other a soft gradient panel holding only the element the text is about. Rows swap sides down the page. The builder cuts each crop to whole elements and lifts sheets and menus off the dimmed app behind them (site/render/cutout.py), so a crop never shows a sliced card, a scrim or a tab bar, and it has one frame only: the panel.
The other side
The panel colors rotate between lavender to blush, sky to lavender, and lavender to warm cream. The caption is optional and short; drop it when the heading already says it.
Two crops in a text column
Two crops written one after the other share one panel, side by side, instead of stacking.
The one full phone
In the hero, or in one section that shows the whole screen. Real screens only, from the app's demo accounts, with the status bar at 9:41.
Components
Every page is built from these. Each one carries a photo, a real screen or a floating app card.
Reference card
Tinted card, serif heading, two lines, a rounded photo, an app chip at the bottom right and a round arrow at the bottom left. Grids of them always fill their rows.
Periods and cycle
Period dates, flow, cramps and PMS.
Period day 2
Medium flow
Pregnancy
Your week, appointments and symptoms.
Week 24
16 weeks to go
Menopause
Hot flashes, night sweats and sleep.
Night sweats
3:10 AM · mild
Step cards
Every steps or how-it-works block: a pill, a heading, two or three lines, a photo with a crop of that step's screen.
Step 2
Log in one tap
A hot flash, a bad night or a mood, from the + Log button.
Step 3
See your week
Sleep, mood and symptoms side by side, every Sunday.
Photo cards with a floating app card
A tinted top with a pill, heading and lines, then a photo with a rendered app card on it.
Day 1
Set your goals
Pick what matters now. It takes about two minutes.
Week 2
Patterns show
Compare nights, meals and moods instead of guessing.
Month 1
A report for your doctor
Dates, symptoms and medication on a few clean pages.
Crop cards
For lists of features: a title, one line and the crop of that feature's screen.
SleepHours and how the night went.
MoodFive faces, Great to Rough.
WaterOne tap a glass.
Tables
Numbers, prices and comparisons always go in a table.
| Stage | First five in + Log | Demo account |
|---|---|---|
| Perimenopause | Hot flash, Period, Sleep, Mood, Brain fog | Karen, 47 |
| Pregnancy | Symptom, Appointment, Sleep, Mood, Contractions | Sofia, week 24 |
| After menopause | Joints and aches, Brain fog, Energy and stress, Hot flash, Journal | Barbara, 63 |
Short answer and sources
The short answer
Two to four plain sentences under the hero that answer the page's question, written so they can be quoted.
The questions block and the closing app block below are the same ones every page ends with.
Don't
Two patterns the site has moved away from.
An icon-only grid: it reads as a menu, and nothing in it shows the app or a person.
A half-empty last row: the grid looks unfinished. Pick 3 or 4 a row to fit the count, or let the bigger cards take the first row.
Sleep
Bedtime and wake-ups.
Food
Meals, protein and fiber.
Walks
Steps from your phone.
Journal
A few lines a day.
How we sound
Like a friend who knows her stuff: she'll say "period" and "night sweats" out loud and won't make you feel silly for asking.
| Trait | In one sentence |
|---|---|
| Plain | Everyday words and short sentences that a 15-year-old and her grandmother both get on the first read. |
| Warm | On her side: the next step is small, and she never feels behind. |
| Straight about health | Facts come with their source and their limits, said once, with no scare tactics and no promises. |
| A bit of humor | Dry and small, about the 3 AM wake-up, never about her body. |
Questions
Can I use the logo in an article about Her Good Days?
Yes. Use the files on this page as they are: no new colors, no stretching, no effects, and keep clear space around the mark of at least half its width.
Which logo goes on a dark background?
The reversed lockup and mark. On a photo, put the logo on a calm area or on a white or deep indigo panel.
Who do I ask about press or a partnership?
Write to us from the contact page and say what it is for. We reply within two working days.