Cleo

# Cleo

**Tagline:** With you for the everyday, cleo.

Cleo is a family of calm, beautifully designed apps that help parents navigate
life with little ones. Each app is focused and polished — delight comes from
execution, not feature count. The brand's job is to make the exhausting chaos of
new parenthood feel manageable, even a little joyful.

## Personality

Cleo is a calm, funny best friend who has already been through it. Warm without
being saccharine, playful without being loud, and never clinical. It reassures
as much as it informs, because a first-time parent at 3am needs a steady voice
more than another statistic.

## The suite

Cleo is built to hold many focused apps under one parent brand (**Cleo.**):

- **Cleo Track** — feeding, sleep, and diaper tracking for new parents (iOS + web; free + Cleo+)
- **Cleo Routine** — a child-operated morning routine for toddlers 2–5 (iOS)
- **Cleo Plan** — shared planning and trips for families (web)
- **Cleo Connect** — a private MCP connector that lets parents ask their own AI about their family data

## At a glance

- **Category:** Family and parenting apps (tracking, routines, planning)
- **Audience:** First-time parents — sleep-deprived, overwhelmed, looking for reassurance as much as data
- **Feeling to leave behind:** "I've got this, and someone's got me."
- **Three words:** Warm, calm, reassuring
- **Not:** Clinical, judgmental, urgent, cluttered

## What Cleo is not

- **Not a medical tool** — always points parents to a pediatrician for health concerns.
- **Not a parenting-advice platform** — it tracks and organizes, it doesn't prescribe.
- **Not overwhelming** — if a screen holds more than three pieces of information, simplify it.

# Cleo — Look

The Cleo look is warm and rounded: soft, low-saturation color on generous cream
space, friendly type, and gentle illustration. Nothing stiff, clinical, or
urgent. When in doubt, round the corners and add space, not decoration.

## Color

The core Cleo Track palette anchors the whole family.

| Role | Name | Hex | Use |
| --- | --- | --- | --- |
| Primary | Sage Green | `#A8C5A0` | Primary actions, buttons, the wordmark period |
| Primary (dark) | Deep Sage | `#8AB082` | Hover and pressed states |
| Accent | Warm Peach | `#F4A97F` | Highlights, small moments of delight |
| Background | Cream | `#FAF7F2` | Page and app background |
| Surface | Light Sand | `#F3F0EB` | Nav, cards, section backgrounds |
| Text | Slate | `#3D4A52` | Headings and body text |

**Rules**

- Palettes stay warm and soft — no neon, no high-saturation color.
- Text is Slate on Cream, never pure black on pure white.
- Sage is the primary action color; Peach is a highlight, used sparingly.
- Backgrounds stay light and warm; avoid cold grays and clinical white.

### Per-product tints

Each app keeps the warm, low-saturation feeling but can carry its own mood. For
example, **Cleo Routine** uses a "Morning Mist" palette — warm linen and the
soft light of early morning (`morningCream #FAF7F3`, `warmStone #EDE8E2`,
`plumText #2E2620`, `driftwood #A89880`, star gold `#C4A070`, sage check
`#8BB885`), with pastel task-card families (lilac `#DED0F0`, blush `#F0D4CC`,
sage `#C8DEB8`). Product tints shift the hue; they never break the warmth.

## Typography

Cleo uses a two-font system, plus a serif reserved for editorial moments.

- **Display / headings:** Nunito — rounded and friendly, it carries the Cleo
  personality. Titles, section headers, CTA buttons, and the wordmark.
- **Body / UI:** DM Sans — clean and highly legible, it keeps body copy readable
  without competing with the headings.
- **Editorial:** Playfair Display — a warm serif used only for long-form
  flourishes like release-note sign-offs, never for UI.
- **Scale:** calm and generous. Body is 16px minimum; headings are large but soft.

## Logo & wordmark

- The wordmark is always **lowercase** — **"cleo."** — in bold Slate text, with a
  **Sage Green period** (`#A8C5A0`) at the same weight and size as the preceding
  letter. It is set lowercase even though the brand name is capitalized (Cleo) in
  running prose.
- The wordmark always uses **DM Sans Bold** (the body font), not Nunito.
- The parent brand wordmark is always **cleo.** with the green period. Products
  extend it, lowercase: **cleo track.**, **cleo routine.**, **cleo plan.**,
  **cleo connect.** The paid tier is **cleo+** (never "cleo track+"). In running
  prose (not the wordmark), product names keep title case: Cleo Track, Cleo
  Routine, Cleo Plan, Cleo Connect.
- Corners are softly rounded everywhere. Nothing sharp; nothing clinical.

**The tagline is a lockup.** It reads **"With you for the everyday, cleo."** —
the line resolves into the wordmark rather than sitting above or beside it, so
the closing **cleo.** keeps its lowercase setting and Sage Green period even
mid-sentence. Set it as one phrase; never capitalize the `cleo` or drop the
comma before it.

**Logo files.** The registry ships the ready-to-use marks as brand assets: the
primary `cleo.` wordmark and per-product wordmarks (`cleo track.`,
`cleo routine.`, `cleo plan.`, `cleo connect.`). Alongside them sits the full
illustration library — the bear cast, product objects, and Routine activity
icons. Everything is listed on the style guide and available over MCP via
`get_brand_assets`.

**The app mark is the bear face.** Cleo's icon is the bear's head — peach, eyes
closed, cream muzzle — centered on a Sage tile. Not a letterform: the brand is
never marked with an abstract "c" or monogram. Each product extends the mark by
swapping in that app's bear doing its thing (Track writes at a desk, Routine
brushes its teeth, Connect holds a microphone, Quest raises binoculars), always
on a solid Sage or Cream tile with the bear filling most of the square.

## Space & layout

- Generous white space is the brand. Screens breathe; nothing feels cluttered.
- If a view holds more than three pieces of information, simplify it.
- Large tap targets and minimal reading — designed to be used one-handed at 3am,
  with dark mode support.
- Motion is gentle and reassuring; nothing bounces or demands attention.

## Illustration & imagery

The bear is Cleo's mascot and the face of the product. One cast of bears carries
every app: the same character, drawn doing whatever the moment calls for —
sleeping, holding a bottle, standing on a scale, waving hello.

**The house style is textured terracotta.** All new illustration is drawn this
way:

- A warm terracotta body (around `#E79464`), not pink and not glossy.
- A visible paper-grain texture over the fill — the art should look printed,
  not vector-slick.
- Cream ear insets and muzzle, rosy matte cheeks, soft brown eyes with a single
  highlight dot.
- Filled, rounded shapes with soft internal shading and no hard outlines; shapes
  overlap and nest. Props stay small and charming (a tiny moon, a steaming bowl),
  each illustration living in its own color family.
- Transparent background, square canvas, 1024×1024 for characters and objects;
  activity icons are 270×270.

**Legacy glossy-pink art.** An earlier generation of bears is flat pink
(around `#FD9572`), glossy, and untextured, with large solid-black eyes. It is
off-brand and being phased out. Those assets are marked `"style":
"legacy-glossy"` in the manifest and badged on the style guide. Don't reach for
one when a textured equivalent exists, and don't draw new art in that style.

**One bear per idea.** The registry is the source of truth: there is exactly one
`brush-teeth` and one `nap-bear`, and every app pulls that same file rather than
keeping its own copy. If an app needs a bear that doesn't exist yet, add it here
first.

- Real content over lorem ipsum; product shown calm and uncluttered.

## Do / Don't

- **Do** lean on warmth, rounded shapes, and generous space.
- **Do** keep Sage as the one action color and Peach as an occasional highlight.
- **Don't** use clipart, medical-form layouts, timers, or high-saturation color.
- **Don't** crowd a screen or use urgent reds and exclamation-heavy badges.

# Cleo — Voice

Cleo sounds like a calm, funny best friend who has already been through it. It
reassures as much as it informs, keeps things short, and never talks down to a
tired parent.

## Principles

1. **Warm, not clinical.** No medical jargon, no expert tone. Say the human
   thing: "You're doing great. Seriously."
2. **Calm, not urgent.** No anxiety-inducing comparisons, no overwhelming
   statistics, no manufactured pressure.
3. **Non-judgmental.** Every family is different. Describe what's happening;
   never imply the parent is doing it wrong.
4. **Concise.** Short sentences everywhere. If a screen needs a paragraph,
   it probably needs less on it.

## Tone by context

- **Onboarding:** warm and brief. Welcome them, then get out of the way.
- **Empty states:** encouraging, with one obvious next step — "No logs yet today
  — first feed of the day incoming! 🍼"
- **Status / data:** plain and factual — "Fed at 2:14am. 8 min. Left side."
- **Celebration:** small and genuine for streaks, milestones, and firsts. Delight
  in the mundane, never confetti for its own sake.
- **Anything touching logged data:** reassure. A parent's records are precious;
  say plainly when they're safe.

## Vocabulary

- **Say:** log it, you're doing great, every baby is different, when you're
  ready, here's what yours is doing
- **Avoid:** blazing-fast, revolutionary, unlock, supercharge, optimize, plus
  clinical terms and scary comparisons

## Grammar & mechanics

- **Sentence case** for all headings and buttons — never Title Case or ALL CAPS.
- **Second person** ("you", "your baby") — never third person or passive voice.
- **Action-oriented button labels:** "Log feeding," not "Submit."
- Emoji allowed sparingly: 🌙 💧 🍼 💩 ⏱️.
- One idea per sentence. Short sentences are fine.

### A note on the founder voice

Cleo is one person, not a company. In first-person writing (release notes,
support, email) the voice is singular "I," never "we" — calm and plain, no
exclamation points, and **never em dashes or en dashes** (they read as
AI-generated). It's honest about quiet weeks and reassuring about data on any
fix that touches logged information.

## Examples

- **Empty state —** ✅ "No logs yet today — first feed of the day incoming! 🍼"
  ❌ "You have not recorded any feeding events."
- **Reassurance —** ✅ "You're doing great. Seriously." ❌ "Your tracking
  consistency is below the recommended threshold."
- **Status —** ✅ "Fed at 2:14am. 8 min. Left side." ❌ "Feeding session
  successfully logged to the database."
- **CTA —** ✅ "Log feeding" ❌ "Submit entry"
- **Playful —** ✅ "Log it before you forget it (yes, the poop too) 💩"
  ❌ "Please remember to record all diaper changes."