--- version: 1 name: Warm Cream Editorial Mobile colors: primary: "#ECAE36" on-primary: "#292524" surface: "#F9F7F2" surface-alt: "#FFFFFF" surface-muted: "#EFEBE6" surface-accent: "#FEF3C7" on-surface: "#44403C" on-surface-variant: "#78716C" on-accent: "#451A03" border: "#E7E5E4" muted: "#F5F5F4" error: "#EF4444" chart-1: "#ECAE36" chart-2: "#F4A261" chart-3: "#2A9D8F" chart-4: "#457B9D" chart-5: "#E76F51" typography: display-md: fontFamily: "DM Serif Display" fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: "DM Serif Display" fontSize: 30px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.01em headline-md: fontFamily: "DM Serif Display" fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.01em headline-sm: fontFamily: "DM Serif Display" fontSize: 18px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0em body-md: fontFamily: "Instrument Sans" fontSize: 14px fontWeight: 500 lineHeight: 1.55 letterSpacing: 0em body-sm: fontFamily: "Instrument Sans" fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0em label-md: fontFamily: "Instrument Sans" fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0em label-uppercase-md: fontFamily: "Instrument Sans" fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.2em label-uppercase-sm: fontFamily: "Instrument Sans" fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em caption: fontFamily: "Instrument Sans" fontSize: 11px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0em rounded: sm: 8px md: 14px lg: 16px xl: 24px 2xl: 32px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px gutter: 24px card-padding: 24px section-gap: 32px icons: set: solar default_variant: linear active_variant: bold stroke_weight: 1.5px default_size: 24px components: card: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: "0 1px 2px rgba(0,0,0,0.04)" rounded: "{rounded.2xl}" padding: "{spacing.card-padding}" card-accent: backgroundColor: "{colors.surface-accent}" textColor: "{colors.on-accent}" borderColor: "{colors.primary}" borderWidth: 1px boxShadow: none rounded: "{rounded.2xl}" padding: "{spacing.card-padding}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" paddingX: 24px paddingY: 16px border: none boxShadow: "0 8px 20px rgba(236,174,54,0.20)" gap: 8px button-secondary: backgroundColor: "{colors.surface-muted}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.xl}" paddingX: 24px paddingY: 16px border: none boxShadow: none gap: 8px button-text: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingX: 0px paddingY: 0px border: none boxShadow: none gap: 4px button-icon-circular: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" size: 48px rounded: "{rounded.full}" border: none boxShadow: "0 1px 2px rgba(0,0,0,0.05)" iconSize: 24px input-text: backgroundColor: "transparent" textColor: "{colors.on-surface}" typography: "{typography.body-md}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: none rounded: "0px" paddingX: 8px paddingY: 12px focusRingColor: "{colors.primary}" chip: backgroundColor: "{colors.surface-muted}" textColor: "{colors.on-surface-variant}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingX: 12px paddingY: 6px border: none boxShadow: none chip-active: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.md}" paddingX: 16px paddingY: 8px border: none boxShadow: "0 1px 2px rgba(0,0,0,0.05)" badge-pill: backgroundColor: "{colors.surface-muted}" textColor: "{colors.on-surface-variant}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingX: 8px paddingY: 4px border: none boxShadow: none badge-circle: backgroundColor: "{colors.surface-muted}" textColor: "{colors.on-surface}" size: 32px rounded: "{rounded.full}" border: none boxShadow: none avatar: size: 48px rounded: "{rounded.full}" borderColor: "{colors.surface-alt}" borderWidth: 2px boxShadow: "0 1px 2px rgba(0,0,0,0.05)" list-row: backgroundColor: "transparent" textColor: "{colors.on-surface}" typography: "{typography.body-md}" paddingX: 0px paddingY: 12px border: none boxShadow: none gap: 12px progress-bar: backgroundColor: "{colors.muted}" height: 8px rounded: "{rounded.full}" border: none boxShadow: none segmented-control: backgroundColor: "{colors.surface-muted}" rounded: "{rounded.xl}" padding: 4px border: none boxShadow: none top-app-bar: backgroundColor: "transparent" textColor: "{colors.on-surface}" paddingX: "{spacing.gutter}" paddingY: 16px border: none boxShadow: none height: 80px tab-bar: backgroundColor: "{colors.surface}" borderColor: "{colors.border}" borderWidth: 1px boxShadow: none paddingX: 48px paddingY: 16px height: 80px tab-item-active: textColor: "{colors.on-surface}" typography: "{typography.label-uppercase-sm}" iconSize: 28px gap: 4px border: none boxShadow: none tab-item-inactive: textColor: "{colors.on-surface-variant}" typography: "{typography.label-uppercase-sm}" iconSize: 28px gap: 4px border: none boxShadow: none --- # Warm Cream Editorial Mobile ## Overview **Warm, literary, and quietly optimistic.** A cream-paper canvas hosts crisp white cards bordered by a hairline. Headlines are set in a high-contrast didone serif (DM Serif Display) — generous and editorial — while everything else is a clean humanist sans (Instrument Sans), often locked into ALL-CAPS with wide tracking to act as kickers, captions, and labels. The single brand color is a warm honey-amber that reads as sunlight on paper rather than as a corporate accent. The mood lands somewhere between a hardcover memoir, a boutique wellness brand, and a stationery aesthetic. Surfaces feel calm; type does the dramatic work. There is no glossy gradient, no neon, no glassy chrome — just paper, ink, and a single warm highlight. ## Colors The palette is built around a warm-neutral system with one signal color. - **Page surface** uses `{colors.surface}` (`#F9F7F2`) — a soft cream paper that warms the entire screen. All chrome sits on this. - **Cards** use `{colors.surface-alt}` (`#FFFFFF`) with a 1px `{colors.border}` hairline plus a barely-there shadow — they read as printed cards laid on cream paper. - **`{colors.primary}` (`#ECAE36`)** is the one saturated honey-amber. Reserved for: the primary CTA fill, the active-tab icon, key data emphasis, the focus ring, and the highlight chart bar. Never use it as a card background or page surface. - **`{colors.surface-accent}` (`#FEF3C7`)** is a very soft butter tint, used only for "highlight" cards (insight callouts) that need to stand apart from white cards. Pair with `{colors.on-accent}` (`#451A03`), a deep warm brown, for body copy inside such cards. - **`{colors.surface-muted}` (`#EFEBE6`)** is the warm taupe used for secondary buttons, low-emphasis chips, and segmented-control rails. - **Foreground hierarchy**: `{colors.on-surface}` (`#44403C`) — warm graphite — is the primary text color (we deliberately avoid pure black). `{colors.on-surface-variant}` (`#78716C`) is the muted/metadata stone gray. - **Categorical chart palette** (`chart-1`..`chart-5`) ranges from amber → coral → teal → blue → terracotta. Use only inside data visualizations (bars, distribution rows, calendar cell tints at low alpha). Never as UI chrome fills. For low-attention secondary actions, render `button-primary` with `bg-{primary}/10` background and `text-{primary}` foreground — the amber tints down nicely on cream. ## Typography Two typefaces, sharply role-separated. - **DM Serif Display** is the *only* heading face. It carries every `display-*`, `headline-*` token. Set at weight 400 (the only weight available), it relies on its inherent high contrast and elegant stress for drama. Used for: greeting headlines, screen titles, mood labels, card titles, insight headers. Always set with negative tracking (`-0.01em` to `-0.02em`) to tighten the wide didone counters. - **Instrument Sans** handles everything else: body, paragraph, labels, buttons, captions. Weight 500 is the workhorse for body, 700 for labels and emphasis. It never sets headings. **The signature typographic move is wide-tracked uppercase labels.** `{typography.label-uppercase-md}` and `{typography.label-uppercase-sm}` (letter-spacing `0.2em` and `0.15em` respectively) are everywhere — kickers above headlines, calendar day initials, weekday axis labels, tab-bar captions, badge labels, "EDIT" CTAs. They function as small caps replacements and create a quiet typographic rhythm that pairs with the serif's elegance. Body copy stays at `body-md` (14px / 500) for paragraphs and at `body-sm` for compressed contexts. Avoid stacking serif headlines within a paragraph — let one serif phrase anchor a card, then sans takes over. ## Spacing & Layout Generous and breathing. Page gutter is `{spacing.gutter}` (24px). Cards pad inward another 24px (`{spacing.card-padding}`), so content inside a card sits ~48px from the screen edge. Sections separate with `{spacing.section-gap}` (32px) of vertical air. The vertical rhythm is unhurried — short headlines, short paragraphs, lots of negative space below each section. Avoid dense list-stack layouts; this aesthetic falls apart when crammed. Two-column splits are rare; the dominant pattern is single-column cards stacked. ## Elevation & Depth Depth is mostly *tonal*, not shadowed. The hierarchy goes: 1. **Page** — cream `{colors.surface}`. 2. **Cards** — white `{colors.surface-alt}` with 1px `{colors.border}` hairline and a whisper shadow `0 1px 2px rgba(0,0,0,0.04)`. The hairline does most of the separation work. 3. **Floating chrome** (icon buttons, the primary CTA, active segmented-control pill) — slightly stronger shadow `0 1px 2px rgba(0,0,0,0.05)` to lift them from the surface they sit on. 4. **Accent cards** — `{colors.surface-accent}` butter tint with a `{colors.primary}/5` border, no shadow. Never reach for heavy drop shadows, glass blurs, or gradient elevation. The aesthetic depends on flat, paper-like surfaces. ## Shapes Radii are generous and consistently soft. Cards use `{rounded.2xl}` (32px) — large, almost pillow-like. Buttons and segmented controls use `{rounded.xl}` (24px). Inner pills (chips, badges, calendar cells, the round nav buttons) use `{rounded.full}`. Small chips and the active segmented pill use `{rounded.md}` (14px). A defining shape rule: **circular elements anchor moments of warmth.** The mood orb behind the hero emoji, the avatar, the round icon buttons, the calendar dots, the active-state circle in the mood selector — circles signal human, soft, organic. Rectangles are reserved for cards and bars. ## Components ### card Tokens: see frontmatter `{components.card}`. ```html

[Section kicker]

[Body copy]

``` ### card-accent For insight / highlight callouts that need to stand apart from the white-card stack. ```html

[Insight title]

[Insight body with [emphasized data] woven in.]

``` ### button-primary ```html ``` ### button-secondary ```html ``` ### button-icon-circular The signature back/close button — a white pill on cream paper. ```html ``` ### input-text Inputs are intentionally minimal — bottom-rule only, no fill. They feel like writing on paper. ```html ``` ### chip / chip-active ```html [Label] ``` ```html ``` ### segmented-control (composition recipe) A row of three or more `chip-active`/inactive buttons inside a `bg-[#EFEBE6]/50 p-1 rounded-2xl` rail. Active item gets a white pill with shadow; inactive items are transparent with `text-[#78716C]`. ### list-row A list row in this aesthetic is rendered borderless with `{spacing.md}` of vertical padding and `{spacing.sm}` gap between an icon, a label, and a trailing value. Dividers are not drawn — the rhythm of card padding does the separation work. ### progress-bar ```html
``` ### avatar ```html
[Person]
``` ### top-app-bar (composition recipe) A header row at `pt-12 pb-4 px-6` with three slots: left circular icon-button, center wide-tracked uppercase label (`{typography.label-uppercase-md}`), right circular icon-button. On home/feed screens, replace the slot system with a left-aligned greeting block (kicker + serif headline) and a single trailing avatar. ### tab-bar / tab-item A bottom nav with hairline top border and translucent backdrop blur. Active item uses the icon set's `bold` variant in `{colors.on-surface}`; inactive uses `linear` in `{colors.on-surface-variant}`. Both label with `{typography.label-uppercase-sm}`. ```html ``` ## Iconography The icon set is **`solar`** at Iconify. Solar's two-variant system maps cleanly to active/inactive states: - **Inactive / default** → `solar:[name]-linear` (clean line, ~1.5px stroke). - **Active / emphasis** → `solar:[name]-bold` (filled, soft-cornered). Default icon size in chrome contexts is **24px**; tab-bar icons step up to **28px**; small inline icons inside chips/list rows are **20px**. Icon color follows the surrounding text color rather than introducing its own. For emoji-style accents (mood, reaction, expressive markers in stat rows or hero areas), use the **`fluent-emoji`** Iconify set — its softly-modeled, slightly-3D faces are a deliberate aesthetic counterpoint to the otherwise flat paper surfaces and are a signature ingredient of this look. Size them at 20–144px depending on context. ## Illustration & Imagery **Style / Technique**: Soft naturalistic photography with shallow depth-of-field. Subjects are rendered sharp against gently blurred environmental backgrounds — landscapes, dunes, neutral terrain, ambient light. The aesthetic favors warm-grade portraiture and lifestyle photography that *feels* like ambient daylight on cream paper. Two distinct image vocabularies coexist: (1) realistic photographs as user/profile imagery, and (2) plump, slightly-dimensional emoji glyphs from the `fluent-emoji` set used as expressive markers. **Palette**: Photography is warm-graded — soft creams, sunlit tans, sage greens, dusty blues, gentle terracottas. The grade should feel adjacent to the cream `{colors.surface}` so images don't fight the page. Avoid cool/blue casts, hard shadows, neon saturation. Emoji glyphs bring their inherent saturated palette and act as bright punctuation against the muted UI. **Edge treatment**: No outlines. Photos are presented as continuous tone. Emoji glyphs carry their own subtle outline from the source set. **Shading & light**: Soft natural light, no hard cast shadows. Subjects sit against an out-of-focus environmental gradient. Emoji glyphs use soft cel-shaded volume — a defining warmth-bringer. **Composition & framing**: Portrait images crop tightly to head-and-shoulders, subject centered, eyes near the upper third. Plenty of background bokeh. Square or 1:1 crops dominate (avatars, profile thumbnails). Emoji glyphs are centered in their containers with generous breathing room. **Background within the illustration**: Photographic backgrounds are environmental and blurred — never studio-stark, never cut-out. Emoji glyphs sit on a transparent background and are placed inside soft tonal circles (`{colors.surface-accent}/40` or `{colors.primary}/10`) for a halo effect. **Container styling**: Profile photographs are presented inside a `rounded-full` mask with a 2px white (`{colors.surface-alt}`) ring and the standard `0 1px 2px rgba(0,0,0,0.05)` whisper shadow — a printed-locket feel. Emoji glyphs sit inside `rounded-full` halo circles tinted `bg-[#FEF3C7]/40` or `bg-[#ECAE36]/10` at 32–96px depending on context. Hero emoji moments may add an outer blurred bloom (a `bg-[#FEF3C7]/60 rounded-full blur-3xl` placed beneath via `-z-10`) — the signature warm-glow treatment. **CSS treatment on the `` element**: `class="size-full object-cover"` — always cover-cropped, never letterboxed. No `mix-blend-mode`, no `opacity` change, no CSS `filter`. Photographs are presented as-is with their natural warm grade. **Box-shadow on the image or its frame**: Whisper only — `0 1px 2px rgba(0,0,0,0.05)` on the circular frame. Emoji halos may carry a `drop-shadow-xl` Tailwind utility on hero placements but flat halos elsewhere. **Aspect ratio rule**: 1:1 square for all profile/avatar imagery. Cover-crop preserves the subject. For wider editorial photography (cover images, hero illustrations), use 4:5 portrait inside a `rounded-[32px]` frame. **Anti-references**: NOT studio-stark, NOT high-contrast b&w, NOT cool/blue grade, NOT illustration, NOT 3D-rendered, NOT cartoon, NOT pixel, NOT line art, NOT pastel-only, NOT collage. **Style recipe prompt**: > *Warm-graded natural-light photograph of [SUBJECT], shallow depth-of-field with a softly blurred environmental background (open landscape, dunes, neutral terrain, ambient daylight). Subject sharp and centered, framed at portrait crop. Color grade leans cream, honey, sage, and dusty terracotta — adjacent to a warm cream-paper UI. Soft natural shadows only. No studio backdrop, no hard rim light, no cool/blue cast, no illustration or render — pure ambient photography that reads like a candid editorial moment.* ## Hierarchy & Emphasis Emphasis is granted, in order, by: (1) DM Serif Display headline weight in `{colors.on-surface}`, (2) the warm-amber `{colors.primary}` reserved for the most actionable element on a screen, (3) wide-tracked uppercase labels which signal *scaffolding* rather than emphasis, and (4) `{colors.on-surface-variant}` for everything that whispers. Numerical highlights inside body copy are bolded and tinted `{colors.primary}` — a literary footnote technique. ## Distinctive Details 1. **The amber bloom.** A blurred warm halo (`bg-[#FEF3C7]/60 blur-3xl`) placed behind the hero element of a screen — it's the warmth radiating from beneath. Use sparingly, once per screen at most. 2. **Serif-and-sans pairing as a structural hierarchy.** Every screen-level statement (`headline-lg`, mood label, insight title) is set in DM Serif Display; its presence marks "this is the headline." Sans is everything that supports it. Never break this rule. 3. **Wide-tracked uppercase as decorative scaffolding.** Letter-spacing `0.2em` ALL-CAPS labels are everywhere — kickers, calendar headers, weekday axis labels, tab text, "EDIT" CTAs. They are the visual equivalent of a fine pinstripe and carry the editorial mood as much as the serif does. ## Do's and Don'ts ### Do - Set every heading in DM Serif Display, weight 400, with negative tracking. - Use `{colors.primary}` as a single highlight per screen — CTA, active tab, or one inline data emphasis. - Render kickers, axis labels, badges, and tab labels in wide-tracked ALL-CAPS sans. - Keep cards white with a hairline border on a cream page — let the paper tone do the warming. - Anchor warmth moments with circular forms (avatars, mood orbs, icon buttons, calendar dots). - Reach for the `fluent-emoji` set when you need expressive human warmth in a data or moment context. ### Don't - Don't use `{colors.primary}` as a card or page background — it's an accent only. - Don't apply heavy drop shadows or glassmorphism — separation is hairline + tonal. - Don't set body or labels in DM Serif Display — serif is exclusively for headings and named values. - Don't introduce a third typeface or a cool/blue palette — it breaks the warm-paper mood. - Don't outline photographs or apply a CSS filter — let the natural warm grade carry. - Don't densely stack rows; this aesthetic depends on generous vertical breathing room. - Don't use the chart palette as UI chrome — those colors live inside data only. - Don't pure-black any text — `{colors.on-surface}` (`#44403C`) is the darkest foreground.