Cream Watercolor Contemplative DESIGN.md

---
version: 1
name: Cream Watercolor Contemplative Mobile
colors:
  primary: "#D4845A"
  on-primary: "#FFFFFF"
  secondary: "#7A9E7E"
  on-secondary: "#FFFFFF"
  accent: "#B8A9C9"
  on-accent: "#FFFFFF"
  surface: "#FFF9F0"
  surface-alt: "#FFFFFF"
  surface-muted: "#F5ECE0"
  on-surface: "#5C4E4D"
  on-surface-variant: "#9E8E8B"
  error: "#C8665B"
  illus-terracotta: "#D4845A"
  illus-sage: "#7A9E7E"
  illus-mauve: "#B8A9C9"
  illus-peach: "#E3B5A4"
  illus-moss: "#A2B9A5"
typography:
  display-lg:
    fontFamily: Raleway
    fontSize: 44px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.02em
  display-md:
    fontFamily: Raleway
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: 0.01em
  numeral-xl:
    fontFamily: Raleway
    fontSize: 96px
    fontWeight: 200
    lineHeight: 1
    letterSpacing: -0.03em
  numeral-lg:
    fontFamily: Raleway
    fontSize: 72px
    fontWeight: 200
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Raleway
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.01em
  headline-md:
    fontFamily: Raleway
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0.01em
  headline-sm:
    fontFamily: Raleway
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.01em
  serif-quote:
    fontFamily: Playfair Display
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.01em
  body-md:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0em
  label-uppercase-md:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.2em
  label-uppercase-sm:
    fontFamily: Nunito Sans
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.2em
  cta-label:
    fontFamily: Raleway
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.02em
rounded:
  sm: 16px
  md: 32px
  lg: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  gutter: 32px
  card-padding: 32px
  section-gap: 48px
icons:
  set: hugeicons
  default_variant: line
  active_variant: line
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.lg}"
    padding: 32px
    textColor: "{colors.on-surface}"
  card-tile:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.lg}"
    padding: 28px
    width: 176px
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.cta-label}"
    rounded: "{rounded.lg}"
    paddingY: 20px
    paddingX: 24px
    gap: 12px
  button-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    size: 80px
    iconSize: 40px
  icon-button:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 48px
    iconSize: 24px
  badge-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    size: 24px
    typography: "{typography.body-sm}"
  chip-icon:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 8px
    typography: "{typography.label-uppercase-sm}"
  chip-icon-active:
    backgroundColor: "rgba(122,158,126,0.10)"
    textColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 8px
    typography: "{typography.label-uppercase-sm}"
  illustration-frame:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.lg}"
    padding: 32px
  list-row-soft:
    backgroundColor: "rgba(184,169,201,0.10)"
    rounded: "{rounded.lg}"
    padding: 24px
    gap: 16px
  selection-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    size: 24px
    typography: "{typography.body-sm}"
  selection-dot:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    size: 6px
  tab-bar:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.lg}"
    height: 80px
    paddingX: 8px
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    iconSize: 24px
    gap: 4px
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    iconSize: 24px
    gap: 4px
  top-app-bar:
    backgroundColor: transparent
    height: 96px
    paddingX: 32px
---

# Cream Watercolor Contemplative Mobile

## Overview

**Hushed, hand-painted, slow.** A boutique wellness aesthetic built around a cream-paper background, soft watercolor imagery, and feather-light typography. Nothing competes for attention; the system relies on generous whitespace, thin display weights, tracked-out small caps, and a single warm terracotta accent to do all the lifting.

The mood is contemplative and analog — closer to a printed journal than a digital product. Cards are pillowy and shadow-less, edges are deeply rounded, and color appears in carefully metered sips. The page should feel like it can be exhaled onto.

## Colors

The system runs on a **warm cream surface** (`{colors.surface}` `#FFF9F0`) — never pure white at the page level. Cards step *up* in lightness to true white (`{colors.surface-alt}`), inverting the usual convention; the cream becomes the atmospheric base, white becomes the lifted plane.

- `{colors.primary}` (`#D4845A`) — terracotta. The single saturated accent. Reserved for the primary CTA, the active tab, the focal numeral on a stat card, and small focal marks (selected calendar day, badge fill). Never used as a card background.
- `{colors.secondary}` (`#7A9E7E`) — sage green. Quiet positive / progress signal (calendar dots, alternate stat numerals, ambient option marker).
- `{colors.accent}` (`#B8A9C9`) — dusty mauve. Tertiary hue for secondary stats and soft-tinted info rows (rendered at ~10% opacity as a row fill).
- `{colors.on-surface}` (`#5C4E4D`) — warm taupe-brown. The default text color. Never pure black; this softness is essential to the aesthetic.
- `{colors.on-surface-variant}` (`#9E8E8B}`) — muted dusty rose-brown. All metadata and micro-labels.
- `{colors.surface-muted}` (`#F5ECE0`) — sandy beige. Hairline dividers and tonal panels.

**Palette boundary:** `illus-*` colors describe what watercolor illustrations may contain — they should not be applied to UI chrome. Conversely, the three brand hues (primary/secondary/accent) appear sparingly in chrome and are echoed inside illustrations to keep the page coherent.

## Typography

Three typefaces, each with a clear job:

- **Raleway** (`{typography.display-*}`, `{typography.headline-*}`, `{typography.numeral-*}`, `{typography.cta-label}`) — the heading face. Used almost exclusively at **ExtraLight 200** and **Light 300**; medium 500 only at small `{typography.headline-sm}` sizes. The thin-stroke geometric sans is the signature voice of the system.
- **Nunito Sans** (`{typography.body-*}`, `{typography.label-uppercase-*}`) — the body and label face. Light 300 for paragraphs and metadata; Regular/Medium for tracked-out small caps.
- **Playfair Display** (`{typography.serif-quote}`) — italic serif, used sparingly for editorial pull-quotes and reflective text only. Never for UI labels.

**Tracking philosophy:** display sizes are set tight to slightly negative; small labels are aggressively tracked out (`0.2em`) and uppercased. The contrast between giant airy display numerals and tiny widely-spaced small caps is the typographic signature.

**Weight rule of thumb:** if in doubt, go lighter. Bold weights are essentially absent. A primary CTA is rendered in Raleway Light, not bold.

**Italic accents:** a single italic word inside a Raleway display heading, rendered in `{colors.primary}`, is a recurring expressive move (`Good morning, *Sofia.*`). Use this sparingly to give a heading an emotional lift.

## Spacing & Layout

Density is **airy**. Page-edge gutter is `{spacing.gutter}` (32px), and content within cards sits at `{spacing.card-padding}` (32px) — both unusually generous. Vertical rhythm between sections is `{spacing.section-gap}` (~48px); headings are separated from their content by 24–32px of breathing room rather than the usual 8–12px.

Avoid filling. Whitespace is the atmosphere; tight grids would break the aesthetic. Horizontal scrollers prefer 5×spacing-md (20px) gap between tiles.

## Elevation & Depth

**Flat, no shadows.** Hierarchy comes entirely from tonal layering: cream page → white card → tinted soft-row (`bg-X/10`). No `box-shadow` anywhere — including primary buttons and the floating tab bar. The only "depth" cue is a `mix-blend-multiply` on photographic / watercolor imagery to fuse it into the cream paper, eliminating any rectangular contrast edge.

A bottom-fixed CTA or tab bar uses a vertical `bg-gradient-to-t from-background via-background to-transparent` to dissolve content underneath rather than casting a shadow.

## Shapes

Radii are large and consistent. The base `--radius` is **40px** (`{rounded.lg}`), applied to every card, image frame, button, and the tab bar. Smaller `{rounded.sm}` (16px) appears only on inline pill-rounded chip targets. `{rounded.full}` is reserved for circular elements: icon buttons, the giant play/pause control, calendar-day highlight, badge dots.

Rule: **everything is round.** Sharp 90° corners do not exist in this system; even tiny dots are circles. The shape language is one of pebbles and wax seals, not cards and frames.

## Iconography

- Set: **`hugeicons`** as the primary set (line variant). `solar` duotone and `phosphor` duotone are acceptable for ambient/metaphor icons inside soft-tinted tiles where extra warmth helps. Do not mix solid Material-style filled icons.
- Variant convention: **line by default, line on active** — active state is communicated by *color* (terracotta) and an optional soft-tinted background, never by a fill swap.
- Stroke weight: ~1.5px, matching Hugeicons defaults.
- Default size: 24px in chrome and tab bar; 32–40px inside circular accent containers; 40px in the central play/pause control.

## Illustration & Imagery

This aesthetic lives or dies by its imagery style. All visual content — hero scenes, instructional figures, ambient backdrops — is rendered as **soft watercolor on warm paper**.

**Technique:** hand-painted watercolor look. Visible paper grain, soft pigment pooling at edges, gentle bleed where colors meet, no hard outlines. Subjects are simplified into flat washes of color with one or two tonal variations — not heavily shaded, not fully flat. A single faint warm-cream halo (a slightly darker wash of the page color) often sits behind a central subject as a ground.

**Edge treatment:** no outlines. Forms are defined by color edges, often with intentional irregularity and a faint dry-brush fringe. No stroke around figures.

**Palette per image:** 3–5 colors maximum, drawn from `illus-terracotta`, `illus-sage`, `illus-mauve`, `illus-peach`, `illus-moss` plus the cream paper. Saturation is medium-low; everything sits in a desaturated, dusty register. Skin tones, when figures appear, are warm peachy-tan washes.

**Composition:** the subject is centered, modest in scale relative to the canvas, with a lot of paper showing around it. Cast shadows are absent or rendered as a single soft mauve oval beneath the figure.

**Background:** the same warm cream as the page, so when set with `mix-blend-multiply` the rectangular boundary of the image dissolves and the painting reads as printed directly onto the surface.

**Anti-references:** NOT flat vector, NOT 3D / claymation, NOT photographic, NOT line art, NOT pixel, NOT bright cartoon, NOT high-saturation, NOT outlined, NOT gradient-shaded, NOT geometric.

**Style recipe (parameterized):** "A loose watercolor painting of [SUBJECT] on warm cream paper, soft washes of dusty terracotta, sage green, and muted mauve, visible paper texture, no outlines, gentle pigment bleed at edges, faint cream-toned halo behind the subject, minimal background, contemplative and serene mood — not vector, not 3D, not photographic."

**Display rule:** always render image elements with `mix-blend-multiply` and ~90% opacity inside a `{rounded.lg}` frame so the paper of the image fuses into the page paper.

## Hierarchy & Emphasis

Emphasis is created by **scale and color, not weight**.
- Headlines feel important because they are large and airy in Raleway Light, not because they're bold.
- A statistic shouts by being a 96px Raleway-200 numeral in terracotta above a 12px tracked-out cream label.
- Active states are signaled by switching the icon color to terracotta and optionally adding a 10% tint background — never by adding a shadow, fill swap, or stroke.
- Metadata always whispers: 10–12px Nunito, uppercase, tracked, in `{colors.on-surface-variant}`.

## Distinctive Details

1. **Inverted tonal stack** — cream page, *whiter* cards. White is the lifted plane; cream is the atmosphere.
2. **Italic-word color accent in display headings** — a single word inside a Raleway-Light heading switches to italic and `{colors.primary}` (Playfair italic also acceptable). Reserved for emotional/personal moments.
3. **Watercolor blend-multiply imagery** — every photograph or illustration is fused into the cream paper via `mix-blend-multiply`, removing the rectangular boundary that other apps' photos always have.
4. **Numerals as hero elements** — oversized Raleway ExtraLight numerals (`{typography.numeral-xl}`) are the loudest objects on a screen, paired only with whisper-tracked uppercase labels. The numeral-as-quiet-monument is a recurring move.

## Components

### card

```html
<div class="bg-white rounded-[40px] p-8 text-[#5C4E4D]">
  <h3 class="font-['Raleway'] text-2xl font-light tracking-wide">[Card title]</h3>
  <p class="mt-2 font-['Nunito_Sans'] font-light text-[#9E8E8B]">[Body copy]</p>
</div>
```

Cards are pure white on the cream page, deeply rounded, no border, no shadow.

### card-tile (horizontal-scroll)

```html
<div class="shrink-0 w-44 bg-white rounded-[40px] p-7 flex flex-col items-center justify-center text-center gap-5 transition-transform active:scale-95">
  <div class="w-16 h-16 rounded-full bg-[#FFF9F0] flex items-center justify-center text-[#7A9E7E]">
    <iconify-icon icon="hugeicons:[icon]" class="text-3xl"></iconify-icon>
  </div>
  <div>
    <h3 class="font-['Raleway'] text-xl font-medium tracking-wide">[Tile title]</h3>
    <p class="text-sm font-light text-[#9E8E8B] mt-1.5">[Meta]</p>
  </div>
</div>
```

A square-ish white pebble with a circular cream-tinted icon disc at the top. The icon disc rotates through `{colors.primary}`, `{colors.secondary}`, `{colors.accent}` to color-code categories.

### button-primary

```html
<button class="w-full bg-[#D4845A] text-white font-['Raleway'] text-[1.35rem] tracking-wide font-light py-5 rounded-[40px] flex items-center justify-center gap-3 transition-transform active:scale-95">
  [Action]
  <iconify-icon icon="hugeicons:arrow-right-02" class="text-2xl"></iconify-icon>
</button>
```

Full-width terracotta pebble. Raleway *Light* — never bold. No shadow. Active state is a 0.95 scale press.

### button-circle (transport)

```html
<button class="w-20 h-20 bg-[#D4845A] text-white rounded-full flex items-center justify-center transition-transform active:scale-90">
  <iconify-icon icon="hugeicons:pause-circle" class="text-4xl"></iconify-icon>
</button>
```

Used for the central play/pause-style action. Always 80px.

### icon-button

```html
<button class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-[#5C4E4D] transition-transform active:scale-90">
  <iconify-icon icon="hugeicons:[icon]" class="text-2xl"></iconify-icon>
</button>
```

White circular pebble for top-bar back / overflow / settings affordances.

### chip-icon (option group)

```html
<div class="bg-white rounded-[40px] p-4 flex items-center justify-around">
  <button class="flex flex-col items-center gap-1.5 p-2 rounded-2xl bg-[#7A9E7E]/10 text-[#7A9E7E]">
    <iconify-icon icon="hugeicons:[icon]" class="text-2xl"></iconify-icon>
    <span class="text-[10px] uppercase tracking-tighter">[Label]</span>
  </button>
  <button class="flex flex-col items-center gap-1.5 p-2 rounded-2xl text-[#9E8E8B]">
    <iconify-icon icon="hugeicons:[icon]" class="text-2xl"></iconify-icon>
    <span class="text-[10px] uppercase tracking-tighter">[Label]</span>
  </button>
</div>
```

Inactive chip is icon + uppercase label only, no fill. Active chip adds a 10% tint of its category color and switches the icon color to that category. The container hosting chips is itself a white card.

### list-row-soft

```html
<div class="bg-[#B8A9C9]/10 rounded-[40px] p-6 flex items-center justify-between transition-colors active:bg-[#B8A9C9]/20">
  <div class="flex items-center gap-4">
    <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-[#B8A9C9]">
      <iconify-icon icon="hugeicons:[icon]" class="text-2xl"></iconify-icon>
    </div>
    <div>
      <p class="text-xs uppercase tracking-widest text-[#B8A9C9] font-medium">[Eyebrow]</p>
      <h4 class="font-['Raleway'] text-lg font-light text-[#5C4E4D]">[Row title]</h4>
    </div>
  </div>
  <iconify-icon icon="hugeicons:arrow-right-01" class="text-2xl text-[#B8A9C9]/60"></iconify-icon>
</div>
```

A soft 10%-tinted row that uses the accent color as both eyebrow and chevron tint. The icon disc inverts to white over the tint.

### selection-circle (e.g. calendar today)

```html
<span class="text-sm font-light bg-[#D4845A] text-white w-6 h-6 rounded-full flex items-center justify-center">[N]</span>
```

A 24px terracotta disc; the smallest dot indicator (`selection-dot`) is a 6px sage circle placed below the day numeral.

### badge-circle / numeral hero

```html
<div class="text-center">
  <span class="font-['Raleway'] text-8xl font-extralight tracking-tighter text-[#D4845A]">[Number]</span>
  <p class="text-[#9E8E8B] uppercase tracking-[0.2em] text-xs mt-4">[Label]</p>
</div>
```

The hero numeral pattern: oversize Raleway-200, terracotta, paired with a tiny tracked uppercase label.

### top-app-bar

```html
<header class="pt-16 px-8 flex items-center justify-between">
  <button class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-[#5C4E4D]">
    <iconify-icon icon="hugeicons:arrow-left-01" class="text-2xl"></iconify-icon>
  </button>
  <div class="text-center">
    <h2 class="font-['Raleway'] text-xl font-light tracking-wide">[Title]</h2>
    <p class="text-xs text-[#9E8E8B] uppercase tracking-widest mt-0.5">[Eyebrow]</p>
  </div>
  <button class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-[#5C4E4D]">
    <iconify-icon icon="hugeicons:more-horizontal" class="text-2xl"></iconify-icon>
  </button>
</header>
```

No fill on the bar itself — it floats over the cream page. Side actions are circular white pebbles. The center stack pairs a Raleway-Light title with an uppercase tracked eyebrow underneath.

### tab-bar

```html
<nav class="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-[#FFF9F0] via-[#FFF9F0] to-transparent pt-10 pb-8 px-10">
  <div class="bg-white rounded-[40px] h-20 flex items-center justify-around px-2">
    <button class="flex-1 flex flex-col items-center justify-center gap-1 text-[#9E8E8B]">
      <iconify-icon icon="hugeicons:[icon]" class="text-2xl"></iconify-icon>
      <span class="text-[10px] font-medium tracking-widest">[LABEL]</span>
    </button>
    <button class="flex-1 flex flex-col items-center justify-center gap-1 text-[#D4845A]">
      <iconify-icon icon="hugeicons:[icon]" class="text-2xl"></iconify-icon>
      <span class="text-[10px] font-medium tracking-widest">[LABEL]</span>
    </button>
  </div>
</nav>
```

A floating white pebble bar above a cream-fade. Active state = terracotta color on the line icon and uppercase label. No pill, no underline, no shadow.

### illustration-frame

```html
<div class="relative w-full aspect-square bg-white rounded-[40px] p-8 flex items-center justify-center overflow-hidden">
  <img src="[watercolor-image]" alt="" class="w-full h-full object-contain mix-blend-multiply opacity-90" />
</div>
```

White rounded frame; image always rendered with `mix-blend-multiply` so paper-on-paper fusion occurs. For atmospheric hero images, `object-cover` and a subtle `bg-gradient-to-t from-black/5 to-transparent mix-blend-overlay` overlay is acceptable.

## Do's and Don'ts

### Do
- Default headings to **Raleway Light 300** or **ExtraLight 200**.
- Pair every oversize numeral with a 10–12px uppercase tracked label.
- Use `mix-blend-multiply` on every image and illustration.
- Reserve `{colors.primary}` for one focal element per screen.
- Keep page gutters and card padding at 32px or more.
- Use circular icon discs in `{colors.surface}` cream inside white tiles for category color-coding.
- Use a vertical fade-to-page gradient where any fixed bar overlays scrolling content.
- Use small caps with `tracking-[0.2em]` for all metadata labels.

### Don't
- Don't use bold weights. Bold is foreign to this aesthetic.
- Don't add `box-shadow` to anything — including buttons and the tab bar.
- Don't use `{colors.primary}` as a card or panel background.
- Don't use pure black for text — always the warm taupe `{colors.on-surface}`.
- Don't draw outlines around illustrations or use flat-vector imagery; the watercolor wash *is* the style.
- Don't tighten layouts to save space — whitespace is content here.
- Don't introduce sharp 90° corners; even small chips are 16px-rounded.
- Don't switch icons to filled variants on active state — change color, not weight.
- Don't render Playfair Display in UI chrome; it is reserved for editorial / quoted text.
- Don't decorate illustrations with sparkles, stars, or cartoon motifs — the watercolor stands alone.