--- version: 1 name: Quiet Almanac Mobile colors: canvas: "#F5F1EA" canvas-alt: "#EFEAE1" surface: "#FBF8F2" on-surface: "#1F2A24" on-surface-variant: "#5A6460" on-surface-muted: "#8A938E" primary: "#1F4A3A" primary-soft: "#2E6B54" on-primary: "#F5F1EA" warning: "#C89B3C" error: "#B85A42" nav-ink: "rgba(31, 42, 36, 0.94)" illus-forest: "#1F4A3A" illus-cream: "#F5F1EA" typography: display-xl: fontFamily: Inter fontSize: 88px fontWeight: 500 lineHeight: 1 letterSpacing: -0.04em display-md: fontFamily: Inter fontSize: 42px fontWeight: 500 lineHeight: 1 letterSpacing: -0.04em numeral-md: fontFamily: Inter fontSize: 26px fontWeight: 500 lineHeight: 1 letterSpacing: -0.04em headline-sm: fontFamily: Inter fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.02em body-md: fontFamily: Inter fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: -0.01em body-sm: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0em caption: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em label-uppercase: fontFamily: Inter fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.14em rounded: sm: 6px md: 12px lg: 20px full: 9999px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px gutter: 24px card-padding: 20px section-gap: 24px icons: set: ph default_variant: duotone active_variant: duotone utility_variant: regular stroke_weight: 1.5px default_size: 20px chrome_size: 18px components: card: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.card-padding}" shadow: "0 1px 2px rgba(31, 42, 36, 0.04), 0 8px 24px rgba(31, 42, 36, 0.04)" icon-tile: size: 40px rounded: "{rounded.md}" backgroundColor: "rgba(31, 74, 58, 0.10)" textColor: "{colors.primary}" iconSize: 20px icon-button: size: 40px rounded: "{rounded.full}" backgroundColor: "rgba(31, 42, 36, 0.05)" textColor: "{colors.on-surface}" iconSize: 18px chip: backgroundColor: "rgba(31, 74, 58, 0.07)" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.full}" paddingX: 10px paddingY: 4px gap: 4px badge-pill: typography: "{typography.label-uppercase}" rounded: "{rounded.sm}" paddingX: 6px paddingY: 2px avatar: size: 36px rounded: "{rounded.full}" backgroundColor: "#E4DED3" progress-bar-track: height: 6px rounded: "{rounded.full}" backgroundColor: "rgba(31, 74, 58, 0.10)" progress-bar-fill: height: 6px rounded: "{rounded.full}" backgroundColor: "{colors.primary}" progress-ring: size: 112px trackColor: "rgba(31, 74, 58, 0.12)" fillColor: "{colors.primary}" strokeWidth: 8px tab-bar: backgroundColor: "{colors.nav-ink}" rounded: "{rounded.full}" height: 60px paddingX: 8px paddingY: 8px width: 353px tab-item-active: backgroundColor: "rgba(245,241,234,0.12)" textColor: "{colors.on-primary}" rounded: "{rounded.full}" size: 44px iconSize: 20px tab-item-inactive: backgroundColor: transparent size: 44px rounded: "{rounded.full}" textColor: "rgba(245,241,234,0.6)" iconSize: 20px --- # Quiet Almanac Mobile ## Overview **Considered. Earthy. Almanac-grade.** This is a calm, literary aesthetic — the visual register of a hand-bound notebook left open on a wooden desk. The palette is warm cream and forest green, with terracotta and ochre reserved as semantic warnings. Type does the heavy lifting: large tabular Inter numerals set the rhythm, and tracked-out micro-caps label every section like field notes. Surfaces are softly elevated cards on a paper-toned canvas. Nothing is loud — even the data visualization (rings, bars, sparklines) reads as understated graphite marks rather than dashboard chrome. The implicit promise is *thoughtful pacing* over urgency. Suitable for products where the user wants to feel composed, in control, and a little bit poetic about their own life. ## Colors The system is a **warm-paper light mode** with a single saturated brand hue. - `{colors.canvas}` is the page — a desaturated cream that reads as paper, not white. `{colors.canvas-alt}` is a slightly deeper paper for layered backdrops. - `{colors.surface}` is the card paper, marginally lighter and warmer than the canvas; cards float by tonal lift, not stark contrast. - `{colors.on-surface}` is a near-black inked-green for primary type. `{colors.on-surface-variant}` and `{colors.on-surface-muted}` form a three-tier ink hierarchy — never use `#000` or pure gray for text. - `{colors.primary}` (deep forest) is the only saturated hue allowed in chrome — used for active progress fills, key numerals, primary chips, and active nav. `{colors.primary-soft}` is reserved for secondary brand accents. - **Semantic warnings**: `{colors.warning}` (ochre) for "near limit" / caution states and `{colors.error}` (terracotta) for "over" / negative states. These colors NEVER appear decoratively — only when the data demands them. - The bottom nav uses `{colors.nav-ink}` (translucent ink) — a high-contrast inversion, the only place dark surface appears. **Palette boundary rules:** Forest is the only chrome accent. Ochre and terracotta are *exclusively* semantic — never apply them to a category icon, button, or decorative element just to add color. The cream-to-paper gradient (canvas → canvas-alt → surface) is the only way to layer surfaces; do not introduce additional grays. ## Typography One family does all the work: - **Inter** (400, 500, 600, 700) for everything. Tabular and lining numerals are forced on (`tnum`, `lnum`) so all numerals align in columns — a load-bearing choice for this aesthetic since stats are central. Roles: - `{typography.display-xl}` — hero numerals, the single biggest number on a screen. Negative tracking (-0.04em) is essential; without it the number reads generic. - `{typography.display-md}` — secondary big numerals (sub-hero stats inside cards). - `{typography.numeral-md}` — list-row stats; the workhorse data size. - `{typography.headline-sm}` — card titles and personal-name strings (15/600). - `{typography.body-md}` — list-row primary labels (14/600). - `{typography.body-sm}` / `{typography.caption}` — supporting copy and inline metadata. - `{typography.label-uppercase}` (`micro-caps`) — section kickers, field-note metadata, status sub-labels. The +0.14em tracking and uppercase casing are non-negotiable; this is the design's signature *almanac* texture. **Weight strategy:** Medium 500 for numerals, Semibold 600 for titles and micro-caps, Regular 400 for body. Bold 700 is reserved and rarely appears. ## Spacing & Layout Density is **balanced-airy**. Cards stack with `{spacing.md}` (12px) gaps; sections separate by `{spacing.xl}–{spacing.2xl}`. The screen edge gutter is `{spacing.gutter}` (24px) — generous enough to feel like margins on a printed page. Internal card padding is `{spacing.card-padding}` (20px). Inside a row: an icon tile, then `{spacing.md}` gap, then the label block; the value lives flush-right. This left-icon / right-numeral pattern is universal in this aesthetic and gives every list a column-aligned, ledger-like feel. Vertical rhythm inside cards: title (semibold) → numeral block → progress bar, with `{spacing.md}` between the numeral and the bar. Above the page-level hero numeral, a kicker line of micro-caps separated by tiny dot dividers (`•`) sets the context. ## Elevation & Depth Depth is **whisper-soft**. The shadow recipe is: ``` box-shadow: 0 1px 2px rgba(31, 42, 36, 0.04), 0 8px 24px rgba(31, 42, 36, 0.04); ``` A 1px contact shadow plus a wide 24px ambient lift, both at 4% opacity. The cumulative effect is barely perceptible — cards lift more from their warm surface tone than from the shadow itself. Never increase shadow opacity or radius. Never add inner shadows or bevels. The bottom nav is the one exception: it uses dark fill + `backdrop-filter: blur(20px)` to pop against the warm canvas. Tonal layering does most of the elevation work: canvas (`#F5F1EA`) → surface (`#FBF8F2`). Dark on dark or border-only separation is never used. ## Shapes The radius vocabulary is small and deliberate: - `{rounded.sm}` (6px) — small status badges (NEAR LIMIT / OVER pills). - `{rounded.md}` (12px) — square-ish icon tiles inside cards. - `{rounded.lg}` (20px) — every card. This is the aesthetic's signature radius and should never be substituted. - `{rounded.full}` — chips, progress tracks/fills, avatars, icon buttons, and the bottom nav. Rule: containers are 20px-rounded; everything circular or pill-shaped is fully round; the only inline rectangles are tiny status badges at 6px. Never mix radii on a single card. ## Components ### card ```html
``` ### list-row (inside a card) The universal data row — left icon tile, label stack, right-aligned numeral, optional progress bar below. ```html
[Row title]
[Metadata]
[Value][.dec]
of [Goal]
``` ### chip ```html [Chip text] ``` ### badge-pill (status, semantic) ```html [STATUS] ``` Use ochre tint for caution, terracotta tint for negative — never forest, never neutral, since the badge's role is purely semantic. ### icon-button (top-bar) ```html ``` ### avatar ```html
``` ### progress-ring ```html
[N]% [Caption]
``` ### progress-bar ```html
``` ### sparkline A minimal SVG line, 1.5px stroke, forest at 85% opacity, with a 2.5r solid forest dot terminating the latest point. No fills, no gridlines, no axis labels. ```html ``` ### tab-bar (floating pill) ```html ``` All tab items are 44×44 circular and icon-only — no labels. The active item is signaled by a soft tonal-fill background (`rgba(245,241,234,0.12)`) and an icon color shift to full cream; inactive items have no background and a 60%-alpha icon. Inactive icons drop to the regular (line) variant; active uses duotone. ## Iconography The icon set is **Phosphor (`ph:`)**. Phosphor's rounded terminals and gentle proportions match the warm, considered tone — sharper sets like Lucide or Heroicons would feel too clinical here. - **Default variant for content icons**: `duotone` (e.g. `ph:[icon-name]-duotone`). The duotone secondary fill is what gives category icons their soft, illustrative feel inside tinted tiles. - **Variant for utility chrome** (search, bell, caret, magnifier, trend arrows): `regular` (line) — e.g. `ph:bell`, `ph:caret-down-bold`, `ph:trend-down-bold`. Bold weight only when the icon must hold its own at very small (≤12px) sizes. - **Active vs inactive in nav**: duotone-when-active, line-when-inactive, paired with an opacity drop on the inactive items. - Default chrome size is 18px; default content size is 20px; inline metadata icons (inside chips/badges) drop to 11–12px. - Icons inside category tiles always inherit the tile's accent color (forest by default, ochre/terracotta only when the tile carries semantic state). ## Illustration & Imagery **Style / Technique**: Hand-drawn line illustration with the texture of a fountain-pen or brush sketch on warm paper. Single-color line work in deep forest green, with one filled silhouette area also in forest. There's a faint paper-grain noise visible inside filled regions — not photorealistic, but tactile, as if printed letterpress on recycled stock. Drawings sit on the cream paper canvas itself, not on a separate plate. **Palette**: Strictly two-tone per illustration — `{colors.illus-forest}` ink on `{colors.illus-cream}` paper. No additional hues. If a third value is needed, it can only be a lighter wash of the same forest at ~30% opacity. **Edge treatment**: Visible hand-drawn outlines, ~2–3px equivalent stroke weight, with slightly irregular line quality (not perfectly mathematical). Linework is confident but not technical — small wobbles, occasional taper, no sharp corners. **Shading & light**: Flat. Either pure outline or a single solid forest fill area; no gradients, no cross-hatching, no soft shadows. The only "shading" is the subtle paper-grain texture inside filled shapes. **Composition & framing**: Subject is centered, contained well inside a circular frame with comfortable breathing room around it (the subject occupies roughly 60–75% of the circle's diameter). The composition is iconic and singular — one subject, head-on or three-quarter view, never a complex scene. **Background within the illustration**: The cream paper itself shows through; the area inside the frame circle is the same canvas color as the page. There is a thin forest-green circular outline around the subject that defines the avatar/illustration boundary. **Container styling**: Illustrations live inside a perfect circle (`rounded-full`) with no additional border (the line-drawn circle in the illustration *is* the border). When sized as an avatar, container is 36px; when used as a hero illustration, container scales up but maintains the 1:1 ratio. No card frame around the image — it sits directly on the canvas or surface. **CSS treatment on the `` element**: `object-cover`, `w-full h-full`. No `mix-blend-mode`, no opacity reduction, no filter. The illustration is delivered as-rendered. **Box-shadow on the image or its frame**: None. The illustration sits flat on the surface, exactly like a printed mark on paper. Adding a shadow would break the printed-page metaphor. **Aspect ratio rule**: Always 1:1 square source, presented inside a circular crop. Preserve the source ratio; do not crop off-center. **Anti-references**: NOT 3D, NOT photorealistic, NOT claymation, NOT vector flat-design with thick uniform strokes, NOT cartoony with bright multiple colors, NOT pastel airbrush, NOT outlined-and-filled with a contrasting accent color, NOT geometric / grid-constructed. **Style recipe prompt**: > *A hand-drawn line illustration of [SUBJECT], rendered in a single deep forest-green ink (#1F4A3A) on a warm cream paper background (#F5F1EA). Confident but slightly irregular brush-pen linework, ~2–3px stroke weight, with one or two areas of solid forest-green fill. Subtle paper-grain texture visible inside filled regions. The subject is centered within a thin circular forest-green outline, occupying roughly two-thirds of the frame, head-on or three-quarter view. Flat — no gradients, no cross-hatching, no shadows, no third color. Letterpress-on-recycled-paper feel; calm, considered, almanac-like. NOT 3D, NOT photoreal, NOT cartoon, NOT pastel, NOT vector flat-design.* ## Hierarchy & Emphasis The largest tabular numeral on a screen is always the loudest element — silence around it amplifies it. After that, deep forest signals "active / on track," ochre signals "approaching limit," terracotta signals "over / negative." Saturated color is *never* decorative; it always carries meaning. Metadata (uppercase micro-caps) recedes via lightness, not size. ## Distinctive Details 1. **Tabular-numeral hero with decimal demoted**: large numerals split the integer and the decimal portion into two type sizes (e.g. 88px integer + 32px decimal in muted ink). This is a load-bearing typographic move — it makes the number feel ledger-like and precise without being clinical. 2. **Micro-caps with mid-dot dividers**: kicker rows that read `LABEL · LABEL · LABEL` in 12px tracked uppercase. They function as breadcrumbs without being navigation. 3. **Tinted-icon-tile pattern**: every category row uses a 40px rounded square in the icon's accent color at ~10% alpha, holding a duotone icon at full color — a quiet color-coding strategy that never raises decibels. ## Do's and Don'ts ### Do - Use `font-variant-numeric: tabular-nums lining-nums` on every numeral. Always. - Reserve ochre and terracotta strictly for semantic warning / over states. - Round every card to 20px and every pill to full. - Layer surfaces by warmth shift (canvas → surface), not by adding borders or stronger shadows. - Pair duotone Phosphor icons with tinted square tiles for category content. - Track micro-caps to +0.14em — without it the kicker row falls apart. ### Don't - Don't use pure white for surfaces or pure black for text. The system is on warm paper. - Don't apply forest as a card background — it's an accent, not a fill. - Don't add multi-stop gradients, glows, or inner shadows. - Don't introduce icons from a different set; mixing Phosphor with Lucide/Material breaks the proportions. - Don't increase shadow opacity or radius beyond the recipe; cards should barely lift. - Don't use ochre or terracotta as decoration on a "good" / on-track row. - Don't introduce a fourth ink tier — the three-tier on-surface scale is intentional.