--- 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

[Card title]

[Body copy]

``` Cards are pure white on the cream page, deeply rounded, no border, no shadow. ### card-tile (horizontal-scroll) ```html

[Tile title]

[Meta]

``` 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 ``` Full-width terracotta pebble. Raleway *Light* — never bold. No shadow. Active state is a 0.95 scale press. ### button-circle (transport) ```html ``` Used for the central play/pause-style action. Always 80px. ### icon-button ```html ``` White circular pebble for top-bar back / overflow / settings affordances. ### chip-icon (option group) ```html
``` 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

[Eyebrow]

[Row title]

``` 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 [N] ``` 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
[Number]

[Label]

``` The hero numeral pattern: oversize Raleway-200, terracotta, paired with a tiny tracked uppercase label. ### top-app-bar ```html

[Title]

[Eyebrow]

``` 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 ``` 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
``` 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.