--- version: 1 name: "Editorial Cream Almanac Mobile" colors: primary: "#DA3A24" on-primary: "#FAF8F5" surface: "#FAF8F5" surface-alt: "#F0EBE1" on-surface: "#1A1A18" on-surface-variant: "#5A5853" border: "#EAE6DF" accent-gold: "#C5A059" accent-sage: "#8B9E8B" accent-stone: "#9CA8AE" illus-terracotta: "#A88A6A" illus-umber: "#7A5A3E" illus-paper: "#F0EBE1" typography: display-lg: fontFamily: Fraunces fontSize: 36px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em display-md: fontFamily: Fraunces fontSize: 30px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.015em headline-md: fontFamily: Fraunces fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.01em headline-sm: fontFamily: Fraunces fontSize: 20px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.005em serif-italic-meta: fontFamily: Fraunces fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.01em body-md: fontFamily: Inter fontSize: 15px fontWeight: 300 lineHeight: 1.6 letterSpacing: 0em body-sm: fontFamily: Inter fontSize: 13px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0em label-uppercase-sm: fontFamily: Inter fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.25em label-uppercase-xs: fontFamily: Inter fontSize: 10px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em button-label: fontFamily: Inter fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 6px md: 8px lg: 10px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px gutter: 32px card-padding: 32px section-gap: 48px icons: set: phosphor default_variant: light active_variant: regular stroke_weight: 1px default_size: 20px # Phosphor "regular" variant has NO suffix — write `ph:user`, NOT `ph:user-regular`. # Suffixed variants: -light, -bold, -fill, -thin, -duotone. components: card: backgroundColor: "{colors.surface}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: "0 4px 24px rgba(26,26,24,0.03)" rounded: "{rounded.lg}" padding: "{spacing.xl}" list-row: backgroundColor: "{colors.surface}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: none rounded: "{rounded.md}" padding: 28px typography: "{typography.body-md}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-label}" rounded: "{rounded.md}" paddingX: 24px paddingY: 16px border: none boxShadow: none button-text: backgroundColor: transparent textColor: "{colors.on-surface-variant}" typography: "{typography.label-uppercase-xs}" border: none boxShadow: none paddingX: 0px paddingY: 0px iconSize: 20px gap: 8px button-icon: backgroundColor: transparent textColor: "{colors.on-surface}" rounded: "{rounded.full}" size: 40px border: none boxShadow: none iconSize: 24px input-text: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: none rounded: "{rounded.md}" paddingX: 16px paddingY: 16px focusRingColor: "{colors.primary}" chip: backgroundColor: transparent textColor: "{colors.on-surface-variant}" typography: "{typography.label-uppercase-xs}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: none rounded: "{rounded.full}" paddingX: 20px paddingY: 8px chip-active: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.label-uppercase-xs}" borderColor: "{colors.primary}" borderWidth: 1px boxShadow: none rounded: "{rounded.full}" paddingX: 20px paddingY: 8px top-app-bar: backgroundColor: "{colors.surface}" height: 64px paddingX: "{spacing.xl}" border: none boxShadow: none tab-bar: backgroundColor: "{colors.surface}" height: 76px borderColor: "{colors.border}" borderWidth: 1px boxShadow: none paddingX: 40px paddingY: 20px tab-item-active: textColor: "{colors.on-surface}" iconSize: 28px border: none boxShadow: none tab-item-inactive: textColor: "{colors.on-surface-variant}" iconSize: 28px border: none boxShadow: none --- # Editorial Cream Almanac Mobile ## Overview **A printed-almanac-as-app aesthetic.** This system feels like a hand-bound almanac or quarterly journal: warm cream paper, a single saturated vermillion ink, gold and sage accents in tiny doses, and a serif headline face that does almost all of the emotional work. Body type is a low-weight sans, set generously in light gray on cream — the typography sets the rhythm of an unhurried read, not a scrollable feed. The mood is **considered, slow, editorial, slightly nostalgic**. Roman numerals, italic serif metadata, and `tracking-[0.25em]` uppercase eyebrows act as the chrome of a print volume. Decorative chrome is rare and always functional: a hand-drawn primary-color underline beneath the lead heading; a hairline rule capping every section eyebrow. The aesthetic transfers cleanly to any brief that wants to feel curated, archival, or quietly premium — financial journals, travel guides, reading apps, niche commerce, longform content. ## Colors The palette divides into three strict layers. **Chrome** is `{colors.surface}` (warm cream `#FAF8F5`), `{colors.on-surface}` (near-black ink `#1A1A18`), `{colors.on-surface-variant}` (warm gray `#5A5853`), and `{colors.border}` (faint dust `#EAE6DF`). Every surface is the same cream; cards do not change tone — they separate via hairline border, never fill. **Brand** is a single saturated vermillion `{colors.primary}` reserved exclusively for: the primary CTA fill, decorative underlines beneath lead headings, the active state of a bookmark / nav item, the numbered step glyphs (I, II, III), and the active chip border + label. Nothing else gets to be red. The primary is never used as a card background, never as body text. **Accents** sit in tiny editorial doses: `{colors.accent-gold}` (`#C5A059`) for an "Editor's Choice" or volume marker; `{colors.accent-sage}` (`#8B9E8B`) for soft positive metadata (timing, duration); `{colors.accent-stone}` (`#9CA8AE`) for a third-tier neutral if needed. `{colors.surface-alt}` (`#F0EBE1`) is the slight-warm-tan used only behind illustration containers and as a subtle hover wash. `illus-*` tokens describe pigments inside illustrations; they MUST NOT be used for chrome, text, or borders. ## Typography Two families do everything. **Fraunces** (serif, the workhorse heading face) sets every display, headline, italic metadata, and Roman numeral. It runs at weight 400 throughout — the elegance comes from size and italic, never from boldness. **Inter** (geometric sans) sets all body, labels, button text, and uppercase eyebrows, weight 300 for body and 500 for labels. - `{typography.display-lg}` — primary screen title (top of detail screens). - `{typography.display-md}` — hero card title; the lead title gets a hand-drawn vermillion squiggle underline. - `{typography.headline-md}` — secondary list-row titles. - `{typography.headline-sm}` — small companion-card titles, grid-tile titles. - `{typography.serif-italic-meta}` — italic Fraunces for "Volume IV" / "Autumn" / Roman-numeral indices on cards. This is a load-bearing visual choice: italic serif used as quiet metadata is the spine of the aesthetic. - `{typography.body-md}` — the standard 15px Inter Light line for descriptions and ingredient text. - `{typography.label-uppercase-sm}` — section eyebrows ("FEATURE OF THE WEEK"), 11px, `tracking-[0.25em]`, uppercase, in `{colors.on-surface-variant}`. Always paired with a hairline rule extending to the right edge. - `{typography.label-uppercase-xs}` — chip labels and inline metadata pills, 10–11px, `tracking-[0.1em]–[0.2em]`. - `{typography.button-label}` — uppercase, `tracking-[0.15em]`, weight 500, 13px — the only button copy style. **Tracking is load-bearing.** The wide `tracking-[0.25em]` on small caps and the negative `-0.01em` to `-0.02em` on serif headlines together carry the editorial feel. Do not deviate. **Composition recipe — Roman numeral indices:** numbered items (steps, list-row indices) render as `{typography.serif-italic-meta}` Fraunces italic with `text-primary` (for steps) or `text-muted-foreground` (for passive markers). Step numerals sit in their own column with `{spacing.lg}` gap to the body; passive markers anchor `absolute top-7 right-7` of the row. ## Spacing & Layout Generous, paper-like. `{spacing.gutter}` is **32px** — wider than typical mobile gutters; this is the page margin of a printed book, not a tight feed. `{spacing.section-gap}` is **48px** between major sections. Cards use **32px** internal padding. Lists breathe with `space-y-4` to `space-y-10` between items. Content max-width is **`max-w-md`** (448px) centered; nothing fills edge-to-edge except images inside their card frames. Density is **airy** — never pack two metadata bits where one will do. Top of every screen sits **64px** below the device top (`pt-16`) so the title floats. ## Elevation & Depth This is a near-flat system. Hierarchy comes from **type weight, italic, and color**, not shadow. Two soft, almost-imperceptible shadows exist: - Card resting: `shadow-[0_4px_24px_rgba(26,26,24,0.03)]` — a 3% black at 24px blur. Visible only as a faint warmth beneath the card. - Grid tile hover: `shadow-[0_8px_32px_rgba(26,26,24,0.05)]` — 5% black at 32px blur. Tab bar, app bar, inputs, chips, buttons all carry **`boxShadow: none`**. Separation everywhere else is by hairline border in `{colors.border}` or by whitespace alone. ## Shapes Restrained, rectilinear, paper-shaped. The radius scale is small: - `{rounded.sm}` (6px) — small image thumbnails inside list-rows. - `{rounded.md}` (8px) — buttons, list-rows, inputs, chip-checkbox frames. - `{rounded.lg}` (10px) — main image-bearing cards and category tiles. - `{rounded.full}` — pill chips and circular icon buttons only. The dominant feeling is **8–10px radii** — gentle but unmistakably rectangular, like trimmed-page corners. Pills appear only in filter chips; no pill-shaped CTAs, no fully rounded cards. ## Components **Card** — Hairline border on cream, no fill differentiation, 10px radius, faint 3%-black shadow, 32px internal padding. Image cards split into a 4:3 image well (with a hairline divider between image and content) above a 32px-padded content block. **List-row** — 8px-radius bordered card, 28px padding, hover wash to `bg-secondary/30`. Often carries a Roman-numeral marker absolutely positioned top-right in italic serif. **Button-primary** — Full-width by default, vermillion fill, cream label, uppercase letter-spaced 0.15em, weight 500, 8px radius. NO shadow. Active state dips opacity to 90% and scales to 0.98. Often pairs with a trailing `ph:arrow-right-light` icon at `text-lg`, set with `flex justify-between` so label sits left and arrow right. **Button-text** — Inline icon + uppercase label, no background, no border, the label in `tracking-[0.1em]` uppercase 11px. Hover lifts color from variant to on-surface and translates the icon up 2px. **Button-icon** — 40×40 transparent circle, 24px Phosphor light glyph, hover wash `bg-secondary/30`, used in app bars only. **Input-text** — Cream-on-cream with hairline border, 8px radius, 16px vertical padding, leading icon at left-4, optional trailing icon at right-4. Focus ring is `focus:ring-1 focus:ring-primary/20` — barely-there. **Chip / chip-active** — Full pill, 1px border, 20px×8px padding, uppercase `tracking-widest` 11px label. Inactive: border + label both `{colors.border}` / `{colors.on-surface-variant}`. Active: border + label both `{colors.primary}`. **No fill** in either state — the pill is always transparent. **Tonal recipe — checkbox row**: a 5×5 (20×20) box with `{colors.border}` 1px border, `{rounded.sm}`, hover-border `{colors.primary}`. Active state shows a `ph:check-light` glyph in primary. Renders inline at the start of a list-item row, with `{spacing.md}` gap to the body. **Composition recipe — section eyebrow**: every section opens with `{typography.label-uppercase-sm}` followed by a `flex-1 h-px bg-border` rule extending to the gutter edge. This is the single most repeated chrome unit; treat it as the section spine. **Composition recipe — metric trio (e.g. duration / count / index)**: three equal columns separated by `border-x border-border`, framed top and bottom by `border-y border-border`, 24px vertical padding. Each cell stacks `{typography.label-uppercase-xs}` label above an `{typography.headline-sm}` Fraunces value (Roman numerals welcome). Use any time three short stats need editorial weight. **Composition recipe — numbered step**: `{typography.serif-italic-meta}` Roman numeral in `text-primary` `text-xl` on the left, 24px gap to a column containing `{typography.label-uppercase-xs}` step name above `{typography.body-md}` body copy. **Top-app-bar** — Flat, 64px tall, no border, no shadow. Left holds a back / icon button, right holds 1–2 icon buttons. Active state uses `text-primary` fill (e.g. saved bookmark). **Tab-bar** — Fixed-bottom, full-width, hairline top border in `{colors.border}`, no shadow, cream surface. Phosphor glyphs at 28px. Active item uses the regular (no suffix) variant at `opacity-100`; inactive items use `-light` suffix at `opacity-60`. No pill, no underline, no dot — the variant + opacity swap is the entire indicator. ### Snippets ```html

[Section name]

``` ```html ``` ```html ``` ```html
``` ```html

[I]

[Row title]

[Body copy.]

[Meta]
``` ```html ``` ## Iconography **Phosphor** is the icon set. Two variants are in play: **`-light`** (1px stroke) is the default, used everywhere a glyph is decorative or inactive. **Regular** (the bare name with NO suffix — write `ph:bookmark-simple`, never `ph:bookmark-simple-regular`) is used only for active / selected states (active tab, saved bookmark) — it has visibly thicker terminals than `-light`. **Critical Phosphor quirk**: the regular variant of every Phosphor icon is the BARE name with no suffix at all. `ph:user-regular`, `ph:home-regular` do NOT exist and will render as missing-icon glyphs. Correct: `ph:user`, `ph:home`. Suffixed Phosphor variants are `-light`, `-bold`, `-fill`, `-thin`, `-duotone`. Stroke weight is thin throughout — the `-light` variant matches the lightness of the body type. Default size is 20px (`size-5`); tab-bar glyphs are 28px (`size-7`); large CTA-trailing arrows use `text-xl`/`text-2xl` for inline alignment with the button label. ## Illustration & Imagery **Style / Technique**: Hand-painted watercolor on warm cream paper. Forms render with soft, washy edges, visible brush texture, and loose pigment pools. The edge of every illustration fades irregularly into the cream paper rather than terminating in a clean silhouette — this is the signature move. **Palette**: A narrow warm range — terracotta `#A88A6A`, deep sepia `#7A5A3E`, raw umber, soft ochre, with a single accent of muted sage `#8B9E8B` or dusty stone-blue `#9CA8AE` for shadow undertones. Maximum 4–5 pigments per illustration. Painted forms breathe in `{colors.illus-terracotta}` and `{colors.illus-umber}` warmth; cool tones appear ONLY as 5–10% area shadow accents. No saturated reds, no greens beyond muted sage, no synthetic colors. **Edge treatment**: No outlines. Forms are defined by tonal value and pigment edge. The outer perimeter of the painting bleeds into a deckle-edge wash — never a hard rectangle. **Shading & light**: Soft, single-direction warm light from upper-left. Form modeled with washes of progressively deeper pigment, never with hard shadows or gradients. Highlights are "lifted" white-of-paper, not added white paint. **Composition & framing**: Painted area covers roughly 60–70% of canvas with white-of-paper negative space surrounding the wash. Pigment extends asymmetrically — paint pools, drips, and washes aren't bounded by rectangular composition logic. **Background within the illustration**: Pure white-of-paper (transparent when knocked out). The painted area itself extends only as far as the wash naturally stops. **Container styling** (extracted exact): the illustration sits inside a `border border-[#EAE6DF] rounded-[10px]` frame with a `bg-[#F0EBE1]` (warm tan, `{colors.surface-alt}`) inner background. The frame carries the card's `shadow-[0_4px_24px_rgba(26,26,24,0.03)]`. There is no padding inside the container — the image fills it edge-to-edge. Smaller companion thumbnails use `rounded-[6px]` with the same border and tan background, sized `size-20`. **CSS treatment on the ``**: `object-cover`, `mix-blend-multiply`, `opacity-[0.85]` (lifts to `opacity-100` on hover). The blend-multiply against the warm tan container is what gives the illustrations their printed-on-paper feel — without it, the white background of the illustration would punch out as bright white. **This blend-mode + tan-backed container is non-negotiable** — it is the single rule that ties imagery to the rest of the aesthetic. **Box-shadow on the image / frame**: only the parent card's `0 4px 24px rgba(26,26,24,0.03)`. The `` itself has no shadow. **Aspect ratio rule**: hero cards are `aspect-[4/3]`. Browse-by-category tiles are `aspect-square`. Companion thumbnails are square (`size-20`). Always position the painted area so any crop falls through the soft wash perimeter, not through high-detail passages. **Anti-references**: NOT 3D, NOT photographic, NOT flat vector, NOT line art, NOT cartoon, NOT pastel, NOT digital airbrush, NOT high-saturation, NOT clean-edged. **Style recipe prompt**: > *A hand-painted watercolor illustration of [SUBJECT], rendered on warm cream paper. Loose washy edges with visible brush texture; pigment pools and asymmetric washes form part of the composition. Painted area covers roughly two-thirds of the canvas with white-of-paper negative space around it. Palette is narrow and earthy — terracotta, deep sepia, raw umber, soft ochre, with one cool accent of sage or dusty stone-blue used sparingly for shadow. No outlines; form is defined by value and pigment edge. Soft single-direction warm light from upper-left, highlights lifted from the white of the paper. The painted area fades irregularly into deckle-edge transparency at the perimeter — never a hard rectangle. Background is pure paper-white / transparent. Editorial almanac plate, considered and slow. NOT 3D, NOT photographic, NOT flat vector, NOT cartoon, NOT high-saturation.* ## Hierarchy & Emphasis Weight is carried by **size + serif italic + the single primary red**. The largest Fraunces title on a screen is the loudest thing; everything else recedes into 15px Inter Light. Saturated red is reserved for: lead-title underline squiggle, primary CTA, active-state icon (saved bookmark, current tab), step numerals, active chip border. Metadata always whispers — small caps, wide tracking, gray. Never use bold sans for emphasis; if something needs to feel important, switch it to Fraunces italic. ## Distinctive Details 1. **The hand-drawn underline squiggle.** Every lead title has a thin SVG path (`d="M0 5 Q 50 10 100 2"`) drawn in `{colors.primary}` at `opacity-60` to `opacity-80` directly below it. It's the closest thing to a logo the system has — a pen flourish under the headline of a quarterly almanac. 2. **Italic-serif metadata as chrome.** "Volume IV", "Autumn", Roman-numeral indices on cards, step numerals — all set in Fraunces italic, never sans. This is what makes the system feel printed rather than digital. 3. **`mix-blend-multiply` on a warm tan tile.** Every illustration in the app sits on `bg-secondary` (`#F0EBE1`) with `mix-blend-multiply` and `opacity-[0.85]`, knitting the painted whites into the cream UI. Without this single CSS pairing, the aesthetic falls apart. ## Do's and Don'ts ### Do - Use Fraunces 400 for every heading, every italic metadata, every Roman numeral. - Open every section with the small-caps `tracking-[0.25em]` eyebrow + hairline rule. - Draw the SVG underline squiggle below the lead title on the primary screen. - Reserve `{colors.primary}` for: CTA fill, lead-title underline, active state, step numerals. - Wrap every illustration in a `bg-[#F0EBE1]` tile and apply `mix-blend-multiply opacity-[0.85]` to the ``. - Use Phosphor `-light` for default icons and bare-name (no suffix) for active. - Keep gutters at 32px and section gaps at 48px — the system needs the whitespace. - Set buttons in uppercase, weight 500, `tracking-[0.15em]`. ### Don't - Don't use `{colors.primary}` as a card background, body text, or large surface fill. - Don't write `ph:user-regular` or `ph:bookmark-regular` — Phosphor's regular variant has NO suffix. - Don't introduce a third typeface; Fraunces and Inter cover everything. - Don't add elevated shadows beyond the listed 3% / 5% recipes — the system is near-flat. - Don't fill chips with a background color; they are always transparent with a 1px border. - Don't use bold weights for emphasis — switch to Fraunces italic instead. - Don't crop illustration washes into rectangles or apply hard borders to the painted edge. - Don't tighten gutters below 24px or pack content edge-to-edge — the editorial breathing room is the design.