---
version: 1
name: Warm Paper Watercolor Mobile
description: A tender, journal-like aesthetic built on cream paper, ink-warm typography in a soft serif, and watercolor washes as the primary imagery language. Surfaces are flat and slightly luminous, separated by gentle tonal shifts and the faintest soft shadow rather than hard borders. Color is restrained — terracotta as the warm interactive accent, lavender as the contemplative atmospheric, sage and storm-blue as semantic mood swatches, all sitting on a paper-pulp background. Typography pairs an italic-leaning Fraunces serif for emotional content with a quiet Inter sans for tracked-out micro-labels, producing a literary, diaristic feel that breathes.
colors:
primary: "#C76F4A" # terracotta — primary CTA, accent text
on-primary: "#FFFFFF"
surface: "#F5EFE4" # paper — page background
surface-alt: "#FBF6EC" # warmer cream — cards, raised surfaces
surface-alt-2: "#EFE7D8" # paper-2 — inset / pressed surfaces
on-surface: "#2A2622" # ink — primary text
on-surface-variant: "#6B5F55" # ink-soft — secondary text, body
on-surface-muted: "#9A8E82" # ink-mute — captions, metadata
border: "#6B5F5526" # 15% ink — hairlines, dashed seps
accent-soft: "#E6B8A2" # terracotta-soft — quote marks, glints
atmospheric: "#B4A7CC" # lavender — today/contemplative marker
atmospheric-soft: "#D9CFE6" # lavender-soft — atmospheric tints
semantic-positive: "#9BAE8A" # sage — growth / rooted moods
semantic-heavy: "#6E7E8E" # storm — heavy / cool moods
semantic-warm: "#A77363" # clay — warm / earthy moods
illus-terracotta: "#C76F4A"
illus-sage: "#9BAE8A"
illus-lavender: "#B4A7CC"
illus-storm: "#6E7E8E"
illus-clay: "#A77363"
illus-paper: "#F5EFE4"
typography:
display-lg:
fontFamily: Fraunces
fontSize: 34px
fontWeight: 400
lineHeight: 1
letterSpacing: "-0.01em"
display-md:
fontFamily: Fraunces
fontSize: 26px
fontWeight: 500
lineHeight: 1.15
letterSpacing: "-0.005em"
headline-md:
fontFamily: Fraunces
fontSize: 20px
fontWeight: 400
lineHeight: 1.25
letterSpacing: "0em"
body-lg:
fontFamily: Fraunces
fontSize: 16px
fontWeight: 400
lineHeight: 1.55
letterSpacing: "0em"
body-md:
fontFamily: Fraunces
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
letterSpacing: "0em"
body-numeric:
fontFamily: Fraunces
fontSize: 15px
fontWeight: 400
lineHeight: 1.3
letterSpacing: "0em"
caption-italic:
fontFamily: Fraunces
fontSize: 13px
fontWeight: 400
lineHeight: 1.4
letterSpacing: "0em" # used italic for diaristic asides
label-eyebrow:
fontFamily: Inter
fontSize: 10px
fontWeight: 600
lineHeight: 1.2
letterSpacing: "0.28em"
label-meta:
fontFamily: Inter
fontSize: 11px
fontWeight: 500
lineHeight: 1.2
letterSpacing: "0.22em"
label-md:
fontFamily: Inter
fontSize: 12px
fontWeight: 600
lineHeight: 1.2
letterSpacing: "0.02em"
label-chip:
fontFamily: Inter
fontSize: 10px
fontWeight: 500
lineHeight: 1.2
letterSpacing: "0.06em"
rounded:
sm: 12px
md: 18px
lg: 20px
xl: 28px
full: 9999px
spacing:
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
gutter: 28px
card-padding: 24px
section-gap: 40px
icons:
set: phosphor # ph: prefix
default_variant: duotone # the soft duotone style fits the watercolor mood
active_variant: duotone # active distinguishes by color, not weight
stroke_weight: 1.5px
default_size: 22px
components:
card:
backgroundColor: "{colors.surface-alt}"
rounded: "{rounded.lg}"
padding: "{spacing.card-padding}"
# Signature: subtle inner highlight + soft warm shadow
# box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -12px rgba(90,70,50,0.08), 0 2px 6px -2px rgba(90,70,50,0.04)
card-soft:
backgroundColor: "linear-gradient(180deg, #FBF6EC 0%, #F7F0E2 100%)"
rounded: "{rounded.lg}"
padding: "{spacing.card-padding}"
# box-shadow: 0 10px 30px -14px rgba(90,70,50,0.10)
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.label-md}"
rounded: "{rounded.full}"
height: 44px
paddingX: 20px
iconSize: 18px
# box-shadow: 0 8px 20px -6px rgba(199,111,74,0.55)
button-text:
backgroundColor: transparent
textColor: "{colors.primary}"
typography: "{typography.label-md}"
paddingX: 0px
paddingY: 4px
gap: 4px
iconSize: 12px
input-text:
backgroundColor: "rgba(180,167,204,0.10)"
textColor: "{colors.on-surface-variant}"
typography: "{typography.body-md}" # rendered italic
rounded: 18px
paddingX: 20px
paddingY: 16px
chip:
backgroundColor: "rgba(107,95,85,0.08)"
textColor: "{colors.on-surface-variant}"
typography: "{typography.label-chip}"
rounded: "{rounded.full}"
paddingX: 10px
paddingY: 4px
chip-active:
backgroundColor: "rgba(199,111,74,0.10)"
textColor: "{colors.primary}"
typography: "{typography.label-md}"
rounded: "{rounded.full}"
paddingX: 16px
paddingY: 10px
gap: 8px
avatar:
size: 52px
rounded: "{rounded.full}"
avatar-hero:
size: 168px
rounded: "{rounded.full}"
# signature ring: 0 0 0 1px rgba(180,167,204,0.35), 0 0 0 6px rgba(180,167,204,0.12), 0 20px 40px -18px rgba(120,100,150,0.35)
list-row:
backgroundColor: transparent
paddingY: 20px
gap: 20px
# separator: thin vertical line of border color, threaded through avatar column (timeline-style)
top-app-bar:
backgroundColor: transparent
height: 56px
paddingX: "{spacing.gutter}"
tab-bar:
backgroundColor: "rgba(245,239,228,0.72)"
rounded: "{rounded.xl}"
height: 60px
paddingX: 12px
paddingY: 10px
# backdrop-filter: blur(18px) saturate(1.2)
# box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px -18px rgba(60,40,30,0.25)
tab-item-active:
backgroundColor: "rgba(199,111,74,0.10)"
textColor: "{colors.primary}"
typography: "{typography.label-md}"
rounded: "{rounded.full}"
paddingX: 16px
paddingY: 10px
gap: 8px
tab-item-inactive:
backgroundColor: transparent
textColor: "{colors.on-surface-variant}"
rounded: "{rounded.full}"
paddingX: 12px
paddingY: 10px
iconSize: 22px
fab:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
size: 44px
rounded: "{rounded.full}"
iconSize: 18px
# box-shadow: 0 8px 20px -6px rgba(199,111,74,0.55)
---
# Warm Paper Watercolor Mobile
## Overview
**Tender, literary, slow-breathing.** This is an aesthetic that wants to feel like a kept journal — paper-pulp surface, ink-warm type, a single saturated terracotta accent, and washes of watercolor pigment standing in for photography. Whitespace is generous, type sits in italic when it speaks emotionally, and chrome is barely-there.
The mood lands somewhere between a hand-bound notebook and a small-press indie magazine. Nothing is glossy; nothing is flat-design either. Surfaces have the faintest interior glow, shadows are warm and soft, and color is rationed carefully — terracotta is the only voice that raises itself, and only for action.
The system reads as introspective and adult. It avoids anything cute, anything hard-edged, anything that would feel digital-first. It is a "candles and a window" aesthetic, not an "office and a notification" one.
## Colors
The palette divides cleanly into four roles. Keep these boundaries strict — crossing them collapses the aesthetic.
- **Paper chrome.** `{colors.surface}` (paper) is the canvas. `{colors.surface-alt}` (warmer cream) is for any raised surface — cards, modals, the floating nav. `{colors.surface-alt-2}` is reserved for inset / pressed states. Together they form a tonal stack so subtle that hierarchy is felt more than seen.
- **Ink.** `{colors.on-surface}`, `{colors.on-surface-variant}`, and `{colors.on-surface-muted}` form a three-tier text scale. The darkest is reserved for headlines and primary content; the middle for body; the lightest for captions, metadata, and tracked-out eyebrows. Body copy in this aesthetic skews soft — variant ink, not full ink, is often the right choice.
- **Brand & atmospheric.** `{colors.primary}` (terracotta) is the only "active" color — CTAs, primary action FAB, active tab text, link-style affordances. `{colors.atmospheric}` (lavender) is reserved for *contemplative* signals (today markers, focus rings, gentle pulses) — it never acts as a button. `{colors.accent-soft}` is for ornamental glints (open quote, edge fades).
- **Semantic mood swatches.** `{colors.semantic-positive}` (sage), `{colors.semantic-heavy}` (storm), `{colors.semantic-warm}` (clay) are categorical labels — used as text color on tracked-out eyebrows and as low-alpha pill backgrounds (`rgba(...,0.12–0.15)`). They are NOT semantic-success/error/warning — they are emotional categorical hues. Any chip rendered in these colors must use the matching low-alpha tint, not a saturated fill.
- **Illustration palette.** The `illus-*` tokens belong inside watercolor washes only. They MUST NOT be used as UI fills. The boundary is enforced: chrome stays in paper + ink + terracotta; pigment stays in imagery.
The page itself carries two pinpoint radial gradients — terracotta at 5% alpha top-left, lavender at 6% alpha bottom-right — to mimic afternoon light passing through a window. This is atmosphere, not branding.
## Typography
Two families, used with discipline.
- **Fraunces** (variable serif, `SOFT 50, WONK 0`) does all emotional, content, and headline work. Its slight optical wonk gives the book-press feel. Use weights 300–500 only — Fraunces at 600+ feels too declarative for this voice. Italic Fraunces is the signature emotional move: hero mood label, footnotes, prompt teasers, "currently feeling" subtitles all skew italic. Default to Roman; italic is reserved for moments of feeling.
- **Inter** handles all micro-typography: tracked-out eyebrows, tab labels, chips, metadata. Inter is *never* used at sizes ≥16px in this system — at body sizes it's all Fraunces.
Roles, anchored to the `{typography.*}` tokens:
- `{typography.display-lg}` — the emotional centerpiece on a hero card (single italic word, often a noun-as-feeling). Always rendered italic.
- `{typography.display-md}` — primary screen title in the header.
- `{typography.headline-md}` — section anchors above content groups.
- `{typography.body-lg}` — primary diaristic / paragraph copy. Read at full width, line-height 1.5–1.55.
- `{typography.body-md}` — secondary paragraph copy, often italic for asides.
- `{typography.caption-italic}` — italic Fraunces footnotes, page-count summaries, gentle subtitles.
- `{typography.label-eyebrow}` — tracked-out 0.28em uppercase Inter, the workhorse "kicker" above any title or section.
- `{typography.label-meta}` — date/timestamp metadata, slightly less tracked.
- `{typography.label-md}` — Inter semibold for tab labels and CTAs.
- `{typography.label-chip}` — uppercase Inter inside pill chips, lightly tracked.
Tracking is load-bearing: 0.18–0.30em on Inter labels gives the editorial feel and visually balances the soft serif.
## Spacing & Layout
Airy. Generous. Unhurried.
- Side gutter is `{spacing.gutter}` (28px) for headers and most content; cards inset slightly less (20px from screen edge) to feel like they sit a half-step inside the gutter.
- Card internal padding is `{spacing.card-padding}` (24px), often with extra vertical padding on hero surfaces (28–32px top, 32px bottom).
- `{spacing.section-gap}` (40px) between major sections — never less. The breathing room is part of the voice.
- Vertical rhythm prefers warm-air gaps over dividers. When a divider is needed, use a dashed separator (8px-on / 8px-off, 1px tall, 25% ink) — never a solid line.
- List rows for diaristic content use a "timeline thread" pattern: avatar/glyph in a fixed-width left column with a 1px vertical hairline running through it, content in the right column with generous vertical padding. The thread breaks at the last item.
## Elevation & Depth
Depth is conveyed by warmth and softness, not contrast.
- **Flat surfaces (default):** plain `{colors.surface-alt}` on `{colors.surface}` with no shadow at all. The tonal shift alone separates them.
- **Raised cards:** the signature warm-shadow recipe — `0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -12px rgba(90,70,50,0.08), 0 2px 6px -2px rgba(90,70,50,0.04)`. The inset highlight is critical: it makes the surface feel like paper catching window-light.
- **Hero surfaces:** `card-soft` adds a vertical gradient (top 0%, bottom slightly darker) and a single soft drop `0 10px 30px -14px rgba(90,70,50,0.10)`.
- **Floating chrome (nav):** backdrop-blur 18px + saturate 1.2 on a 72%-opacity paper, with a stronger warm shadow `0 18px 40px -18px rgba(60,40,30,0.25)` and the same inset highlight.
- **Today/focus ring:** a triple-shadow halo around the hero avatar — 1px hairline + 6px soft halo + long warm drop. This treatment is reserved for the single most important focal element on a screen.
- **Primary CTA:** carries a colored shadow `0 8px 20px -6px rgba(199,111,74,0.55)` to make terracotta feel warm and lit.
Never use hard 1px borders on cards. Never use cool/blue shadows. Shadows in this system are always warm-brown.
## Shapes
Roundness is universal but moderated — nothing is sharp, nothing is fully circular except dots and avatars.
- `{rounded.sm}` (12px) — small inline accents, rare.
- `{rounded.md}` (18px) — input fields, inset wells inside cards.
- `{rounded.lg}` (20px) — every card. The system's primary radius.
- `{rounded.xl}` (28px) — the floating nav and any "container of containers."
- `{rounded.full}` — every button, every chip, every avatar, every dot.
Rule of thumb: anything interactive is fully pill-rounded; anything containing content uses 20px; anything wrapping the whole UI uses 28px.
## Components
### card
```html
```
### tab-bar (floating, blurred)
```html
```
## Iconography
- **Set:** Phosphor (`ph:` prefix). Phosphor's softly rounded terminals match the watercolor mood; Lucide and Tabler are too geometric for this aesthetic.
- **Variant:** `duotone` is the default and active variant. The duotone fill carries enough warmth to live on cream paper without feeling corporate. The active state is signaled by **color change** (to terracotta or atmospheric lavender), never by switching to a different variant.
- **Phosphor naming reminder:** Phosphor's regular variant has NO suffix (`ph:bookmark`, not `ph:bookmark-regular`). Variants are appended as `-bold`, `-fill`, `-light`, `-thin`, `-duotone`. Since this system uses duotone, all icon names should end in `-duotone` — except for the rare cases where a bold geometric mark is wanted (e.g. `ph:plus-bold` on the FAB) or a thin caret/arrow inline (`ph:arrow-right`).
- **Sizes:** 18–22px for inline UI; 12–14px for inline-with-text affordances. Always use Tailwind `size-*` classes, never width/height attributes.
- **Color:** icons inherit `{colors.on-surface-variant}` by default; active icons take `{colors.primary}` or `{colors.atmospheric}`.
## Illustration & Imagery
The signature image language is **watercolor washes on warm paper** — abstract pigment shapes with no representational subject. Every image in the source HTML is either a circular watercolor color-field or a flowing watercolor ribbon. This is unusual and load-bearing: the aesthetic *replaces photographs and figurative illustration entirely* with mood-pigment.
- **Style / Technique:** traditional-feel watercolor painting — visible paper grain, soft pigment pooling, slightly darker edges where the wash dried (the classic watercolor "edge bloom"), gentle internal mottling from non-uniform pigment density. Single-color or simple gradient washes only. NOT digital flat color, NOT vector, NOT photographic.
- **Palette:** drawn exclusively from the `illus-*` tokens — terracotta, sage, lavender, storm, clay, occasionally a paper base. Each illustration is **one color** (a single-pigment wash) or **two-to-three colors blending** (in the case of ribbons / flowing forms). Never more than three pigments per illustration. Saturation is always slightly muted, never punchy.
- **Edge treatment:** soft natural watercolor edges — slightly irregular, with a darker pigment line where the wash met the paper. No hard outlines, no strokes, no vector clean edges. The edge variation is part of the character.
- **Shading & light:** the only "shading" is the natural pooling of pigment within the wash — darker zones where more water pooled, lighter zones where it dried thinly. No gradients applied digitally; the lighting is whatever the painted pigment naturally produced.
- **Composition & framing:** for circular washes, the form is roughly centered with generous paper margin (about 25–30% of canvas in cream around the shape). For flowing / ribbon forms, the wash spans most of the width, sitting horizontally with paper visible above and below.
- **Background within the illustration:** always the cream paper (`{colors.illus-paper}`) with visible paper texture/grain. Never transparent, never a different color, never a scene.
- **Container styling:**
- For avatars (mood, recent entries): cropped to a perfect circle (`rounded-full`), no border, no padding inside the container — the wash bleeds to the edge of the circular crop.
- For the hero avatar: wrapped in the **today-ring** — a triple box-shadow halo (`0 0 0 1px rgba(180,167,204,0.35), 0 0 0 6px rgba(180,167,204,0.12), 0 20px 40px -18px rgba(120,100,150,0.35)`) that sits as concentric soft rings around the circle.
- For ribbons (week / arc visualizations): contained inside a `{rounded.lg}` card (no extra border or padding around the ribbon itself; the ribbon lives flush in a 92px-tall slot inside the card's normal padding) and faded at the horizontal edges with a CSS mask: `mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)`. This makes the wash dissolve into the card surface rather than ending abruptly.
- **CSS treatment on ``:** `object-cover` on every image. `opacity: 0.9` on ribbons (lets the paper read through). No `mix-blend-mode`, no filters except an optional very slight `filter: saturate(0.95)` on small mood dots to make them sit gently. No `filter: drop-shadow`.
- **Box-shadow on the image or its frame:** none on the image element itself. The hero avatar's "today-ring" is the only shadow treatment, and it's applied to the *wrapping* div, not the ``. List-row avatars have no shadow at all — they sit flat on the page.
- **Aspect ratio rule:** circular washes are 1:1 (square source, circular crop). Ribbons are wide, roughly 3:1 to 4:1 horizontal. Always preserve the source ratio; never stretch a circular wash into an oval.
- **Anti-references:** NOT photographic, NOT 3D, NOT claymation, NOT vector flat-design, NOT line-art, NOT cartoon characters, NOT mascots, NOT illustrated scenes with subjects, NOT bright/saturated, NOT gradient-mesh digital art.
- **Style recipe prompt:**
> *A traditional watercolor painting of [SUBJECT] on warm cream paper with visible paper grain. Single-pigment wash (or 2–3 muted pigments blending softly), executed with natural watercolor edges — slightly irregular, with subtle darker edge-blooms where the wash met the paper. Internal pigment mottling from natural water-pooling, no digital gradients, no outlines, no linework. Pigments are muted and earthy: terracotta, sage green, dusty lavender, slate blue, or clay brown. The subject occupies roughly 65–75% of the canvas, centered, with generous cream paper margin. NOT photographic, NOT 3D, NOT vector, NOT cartoon, NOT character-based, NOT bright or saturated. Soft, contemplative, hand-painted, journal-page feel.*
When a brief calls for an avatar, profile image, mood marker, period-summary chart, or any decorative imagery, render it as a watercolor wash matching this recipe, with the [SUBJECT] swapped for an abstract concept word ("calm," "growth," "evening," "focus") rather than a literal object. The aesthetic actively *resists* literal representation — keep imagery abstract.
## Hierarchy & Emphasis
- **Italic Fraunces is the loudest voice in any composition** — it's reserved for emotional content (the mood word, the prompt, asides). Used sparingly, it pulls the eye instantly.
- **Saturated terracotta is the only "hot" color** — it appears on the FAB, the active tab text, and the section "view more" link. Three or four terracotta touches per screen, no more.
- **Tracked-out uppercase Inter labels whisper** — they're small, muted, and ornamental. They establish structure without competing for attention.
- **Body Fraunces is the calm middle** — set in soft ink (`{colors.on-surface}`), 1.5 line-height, full readability without shouting.
- **Metadata is always the quietest thing on the screen** — `{colors.on-surface-muted}` at 10–11px tracked.
The hierarchy moves from *italic feeling* → *saturated action* → *body content* → *quiet metadata*. Headlines sit above body in size but rarely in saturation.
## Distinctive Details
- **The oversized open-quote glyph.** A 72px Fraunces curly quote in `{colors.accent-soft}`, positioned absolutely with negative line-height so it floats as a watermark before quoted/prompted text. It's a typography-as-decoration move — the quote is ornament, not content.
- **The today-ring halo.** A triple-shadow concentric soft ring in lavender wrapping the day's primary focal element. It signals "now / present" without using a badge or label.
- **Tracked-out micro-eyebrows.** Every section, every entry, every card opens with a 0.22–0.30em tracked Inter label in `{colors.on-surface-muted}`. This is the single most repeated visual rhythm in the system — it's how the design "speaks editorially" instead of "speaks app."
- **Italic em-dash footnotes.** Closing summaries and gentle stats are wrapped in italic Fraunces with surrounding em-dashes (`— [statement] —`), centered, in muted ink. A small but signature literary tic.
- **Dashed hairline separators.** When a divider is needed inside a card, it's an 8px-on/8px-off dashed line at 25% ink — softer than a solid rule, more present than nothing.
## Do's and Don'ts
### Do
- Use Fraunces for everything emotional, italic for the most emotional moments only.
- Reach for the warm-shadow recipe whenever a card needs to feel raised; never skip the inset highlight.
- Reserve terracotta for the single hottest action per screen.
- Render avatars and decorative imagery as abstract watercolor washes.
- Use tracked-out uppercase Inter eyebrows above titles and sections — this is the signature rhythm.
- Allow generous whitespace; let the paper breathe.
- Use phosphor `-duotone` icons by default; signal active state by color, not variant.
- Use the dashed separator inside cards instead of solid rules.
### Don't
- Don't use the `illus-*` palette as UI fills — pigments live inside imagery, not on chrome.
- Don't use lavender as an action color — it's atmospheric/contemplative only.
- Don't introduce hard 1px borders on cards — depth comes from warm shadow + tonal shift.
- Don't use Inter at body sizes (≥16px); body copy is always Fraunces.
- Don't apply cool/blue shadows; all shadows are warm-brown.
- Don't render imagery as photographs, 3D, vector flat-design, or characters/mascots — only as watercolor washes.
- Don't use Fraunces at weight ≥600 — it loses the literary softness.
- Don't write "regular" suffix on Phosphor icon names (`ph:bookmark` ✓, `ph:bookmark-regular` ✗).
- Don't pack content density-high; this aesthetic resists tightness — generous gutters and section gaps are non-negotiable.
- Don't add saturation to the page; the muted palette is the voice.
