---
version: alpha
name: Rosewater School
description: Blush paper, leaf green and a sky blue, on a system where the child’s name is the largest thing on the page and comes before the navigation.
meta:
  id: "theme-rosewater-school"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:15+09:00"
  updatedAt: "2026-09-02T00:58:15+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: One child at a time, named first.
  bestFor: Nurseries and primary schools, childcare apps, parent communication, after-school clubs, family services
  avoidFor: Enterprise software, finance, anything that must read as neutral or institutional
  defaultMode: light
  surfaceStyle: filled
  accentUse: fill
  caseStyle: none
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 3
    duration: 280ms
    ease: "cubic-bezier(0.34, 1.56, 0.64, 1)"
    signature: "Things arrive with a small overshoot and settle. This is the one system in the library allowed to be a bit springy."
  displayFont: Fraunces
  displayKind: serif
  bodyFont: Nunito
  monoFont: Nanum Gothic Coding
colors:
  background: "#FFDFEC"
  foreground: "#1C1618"
  card: "#F6D0E0"
  card-foreground: "#1C1618"
  popover: "#F6D0E0"
  popover-foreground: "#1C1618"
  primary: "#697943"
  primary-foreground: "#FFF8FB"
  secondary: "#F0BED3"
  secondary-foreground: "#1C1618"
  muted: "#F0BED3"
  muted-foreground: "#5C5356"
  accent: "#516D7F"
  accent-foreground: "#FFF8FB"
  destructive: "#B6322D"
  destructive-foreground: "#FFF8FB"
  border: "#DEB2C4"
  input: "#DEB2C4"
  ring: "#697943"
  chart-1: "#6A7A43"
  chart-2: "#38897F"
  chart-3: "#496C98"
  chart-4: "#9B719B"
  chart-5: "#885538"
colorsDark:
  background: "#250C18"
  foreground: "#EADFE1"
  card: "#351324"
  card-foreground: "#EADFE1"
  popover: "#351324"
  popover-foreground: "#EADFE1"
  primary: "#93A36C"
  primary-foreground: "#17080F"
  secondary: "#491931"
  secondary-foreground: "#EADFE1"
  muted: "#491931"
  muted-foreground: "#9C8F92"
  accent: "#8CAABD"
  accent-foreground: "#17080F"
  destructive: "#F26A5F"
  destructive-foreground: "#17080F"
  border: "#572C40"
  input: "#572C40"
  ring: "#93A36C"
  chart-1: "#96A76E"
  chart-2: "#56A59A"
  chart-3: "#84AAD9"
  chart-4: "#A77BA6"
  chart-5: "#D89F80"
typography:
  display-lg:
    fontFamily: Fraunces
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Fraunces
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: -0.012em
  headline-md:
    fontFamily: Fraunces
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Nunito
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.66
  body-md:
    fontFamily: Nunito
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.64
  body-sm:
    fontFamily: Nunito
    fontSize: 13.5px
    fontWeight: 600
    lineHeight: 1.5
  label-caps:
    fontFamily: Nunito
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.08em
  label-mono:
    fontFamily: Nanum Gothic Coding
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  numeral-xl:
    fontFamily: Nanum Gothic Coding
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 56px
  gutter: 22px
  margin: 28px
  measure: 62ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
    padding: 14px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 14px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  badge-label:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
---

# Rosewater School

## Overview

Rosewater School is for the software a parent opens at 7:40am to find out
whether their child needs wellies today. Its structural commitment is that
**every screen addresses one named child, and the name comes before the
navigation** — before the logo, before the tabs, at the top of the document
order and at 58px.

That sounds small. It is the whole design. A nursery app that opens on a
dashboard of "Recent Activity" makes a parent do a lookup before they can read
anything, and at 7:40am they will not do it. Naming the child first turns a
system of records into a system about a person.

Blush paper, leaf green, sky blue. It suits nurseries, primary schools and
family services, and it is wrong for anything that must read as institutional —
this palette will never look like enterprise software and is not trying to.

## Colors

Warm paper, two friendly hues, and no third.

- **Ground:** blush. Warm, low chroma, and the only pink in the library that is
  a *ground* rather than a brand.
- **Primary (leaf green):** everything a parent does — reply, confirm, book,
  pay. Filled, pill-shaped.
- **Accent (sky blue):** a **fill** used for the child's own marks: their name
  chip, their key-person badge, their colour on a group list. Because it is a
  fill, the pair is checked as a pair.
- **Neutrals** carry the blush, so a muted caption still feels warm.
- Charts are polychrome, and they are rare — this system shows attendance and
  little else numerically. A nursery is not a dashboard.

## Typography

Fraunces for names, Nunito for everything a parent reads, Nanum Gothic Coding
for reference numbers.

- **Display:** Fraunces at 600, 58px. It is a soft-serif with real character and
  it is used for exactly one thing: the child's name. Nothing else in the system
  is set at display size.
- **Body:** Nunito at 15.5px, 1.64, 62ch. Rounded terminals, high x-height,
  legible on a phone in one hand.
- **body-sm is set at 600**, not 400 — small text here is often a time or an
  allergy note and it should not be light.
- **Nanum Gothic Coding** for the few identifiers that exist: booking refs,
  invoice numbers.
- There is no uppercase in this system at all, in any component.

## Layout

**Name, then nav, then day.** Document order on every screen: the child's name
at 58px, an accent name-chip row if there are siblings, then navigation, then
the content. This holds on mobile and desktop and in email.

The day is a vertical timeline, not a grid — arrival, snack, outdoors, lunch,
nap, collection — each entry a filled card at 20px radius with an optional
photo. Timeline entries are ordered by time and never by importance.

A 12-column grid at 1120px, narrow on purpose, with 22px gutters. The measure is
62ch. This is a reading system for tired people.

## Elevation & Depth

Filled and soft. Cards sit on the ground with a gentle shadow and a 1px border;
the whole system has one shadow depth and uses it liberally, which is the
opposite of most of this library.

Motion has real spring — 280ms with an overshoot ease. New timeline entries drop
in and settle. This is the one theme in the library where a bit of bounce is
correct, and the reduced-motion block still switches it all off.

## Shapes

Very round — 14px on cards, 20px on panels, 28px on sheets, pills on every
button and chip. Photographs are rounded too, at 14px, which no other theme here
does.

Photography is warm-graded and is of *making things*: paint, dough, mud, leaves,
duplo. Hands and materials, never identifiable faces — this is a system whose
real photos are of other people's children.

## Components

- **Name header:** child's name in Fraunces 58px, key person and room beneath in
  body-sm, sibling chips in accent to the right. No avatar — a name is enough
  and a missing photo should not leave a hole.
- **Timeline entry:** time in mono at the left in a 56px gutter, filled card to
  the right with title, one line of note, optional 14px-rounded photo.
- **Allergy strip:** destructive-tinted band pinned under the name header on any
  screen involving food. It is never dismissible.
- **Consent toggle:** pill switch, green when on, with the consent text in full
  next to it rather than behind a link.
- **Buttons:** green fill, pill, 14px padding — deliberately large, because this
  is used one-handed.

## Do's and Don'ts

- Do put the child's name first in document order on every screen.
- Do keep the day as a timeline ordered by time.
- Do let the motion have a little spring here; it is right for this one system.
- Don't use uppercase anywhere.
- Don't lead with an avatar; lead with the name.
- Don't set anything other than a child's name at display size.
- Don't show identifiable faces in the marketing photography.