--- version: 1 name: Warm Cream Mascot Mobile colors: primary: "#EC5E3A" on-primary: "#FFFFFF" surface: "#FFFAF3" surface-alt: "#FFFFFF" surface-muted: "#F5EDE4" surface-tonal: "#F0E6D6" on-surface: "#4A3831" on-surface-variant: "#6B5247" on-surface-muted: "#9E857B" border: "#F0E6D6" accent: "#2F855A" on-accent: "#FFFFFF" warning: "#F59F00" destructive: "#C92A2A" illus-tomato: "#EC5E3A" illus-tomato-shadow: "#C44A2C" illus-leaf: "#7BA05B" illus-leaf-shadow: "#5C7A42" illus-outline: "#5C2E20" typography: display-xl: fontFamily: Work Sans fontSize: 88px fontWeight: 900 lineHeight: 1 letterSpacing: -0.04em display-lg: fontFamily: Work Sans fontSize: 72px fontWeight: 900 lineHeight: 1 letterSpacing: -0.04em headline-lg: fontFamily: Work Sans fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-md: fontFamily: Work Sans fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: -0.02em headline-sm: fontFamily: Work Sans fontSize: 18px fontWeight: 900 lineHeight: 1.2 letterSpacing: -0.01em metric-lg: fontFamily: Work Sans fontSize: 24px fontWeight: 900 lineHeight: 1 letterSpacing: -0.01em body-md: fontFamily: Nunito Sans fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0em body-sm: fontFamily: Nunito Sans fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0em label-cta: fontFamily: Nunito Sans fontSize: 18px fontWeight: 700 lineHeight: 1 letterSpacing: 0.05em label-uppercase-md: fontFamily: Nunito Sans fontSize: 12px fontWeight: 900 lineHeight: 1 letterSpacing: 0.15em label-uppercase-sm: fontFamily: Nunito Sans fontSize: 10px fontWeight: 900 lineHeight: 1 letterSpacing: 0.2em tab-label: fontFamily: Nunito Sans fontSize: 10px fontWeight: 900 lineHeight: 1 letterSpacing: 0.2em rounded: sm: 12px md: 16px lg: 24px xl: 32px 2xl: 40px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px gutter: 24px card-padding: 24px card-padding-lg: 32px section-gap: 24px icons: set: solar default_variant: bold-duotone active_variant: bold-duotone accent_variant: bold default_size: 24px components: card: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" rounded: "{rounded.2xl}" padding: "{spacing.card-padding}" border: none boxShadow: "0 8px 30px rgb(0,0,0,0.04)" card-elevated: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" rounded: 40px padding: "{spacing.card-padding-lg}" border: none boxShadow: "0 12px 40px rgb(0,0,0,0.05)" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-cta}" rounded: "{rounded.full}" paddingX: 32px paddingY: 20px border: none boxShadow: "0 10px 25px rgba(224,49,49,0.25)" gap: 12px iconSize: 24px pressedBackground: "darken(8%)" button-secondary: backgroundColor: "{colors.surface-tonal}" textColor: "{colors.on-surface-variant}" typography: "{typography.body-md}" rounded: "{rounded.full}" paddingX: 24px paddingY: 20px border: none boxShadow: none button-text: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingX: 8px paddingY: 4px border: none boxShadow: none button-icon: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface-variant}" rounded: "{rounded.full}" size: 48px iconSize: 24px border: none boxShadow: "0 4px 12px rgb(0,0,0,0.03)" button-utility: backgroundColor: "{colors.surface-alt}" textColor: "{colors.primary}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingY: 20px paddingX: 16px iconSize: 24px gap: 4px border: none boxShadow: "0 8px 20px rgb(0,0,0,0.04)" input-text: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.full}" paddingX: 24px paddingY: 16px border: none boxShadow: "0 4px 12px rgb(0,0,0,0.03)" focusRingColor: "{colors.primary}" chip: backgroundColor: "transparent" textColor: "{colors.on-surface-muted}" typography: "{typography.body-sm}" rounded: "{rounded.full}" paddingX: 16px paddingY: 10px border: none boxShadow: none chip-active: backgroundColor: "{colors.surface-alt}" textColor: "{colors.primary}" typography: "{typography.body-sm}" rounded: "{rounded.full}" paddingX: 16px paddingY: 10px border: none boxShadow: "0 1px 2px rgb(0,0,0,0.05)" chip-status: backgroundColor: "color-mix(in srgb, {colors.primary} 10%, transparent)" textColor: "{colors.primary}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingX: 24px paddingY: 8px border: none boxShadow: none gap: 8px badge-pill: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.label-uppercase-sm}" rounded: "{rounded.full}" paddingX: 20px paddingY: 10px border: none boxShadow: "0 4px 12px rgb(0,0,0,0.03)" gap: 8px iconSize: 18px badge-circle: backgroundColor: "color-mix(in srgb, {colors.primary} 10%, transparent)" textColor: "{colors.primary}" rounded: "{rounded.full}" size: 40px iconSize: 18px border: none boxShadow: none avatar: backgroundColor: "{colors.surface-muted}" rounded: "{rounded.full}" size: 40px border: none boxShadow: none list-row: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" rounded: "{rounded.xl}" paddingX: 20px paddingY: 20px gap: 16px border: none boxShadow: "0 4px 20px rgb(0,0,0,0.03)" progress-bar: backgroundColor: "color-mix(in srgb, {colors.surface-tonal} 40%, transparent)" rounded: "{rounded.full}" height: 8px border: none boxShadow: none progress-bar-fill: backgroundColor: "{colors.primary}" rounded: "{rounded.full}" progress-ring: trackColor: "color-mix(in srgb, {colors.surface-tonal} 30%, transparent)" fillColor: "{colors.primary}" trackWidth: 5px fillWidth: 7px border: none boxShadow: none top-app-bar: backgroundColor: "transparent" textColor: "{colors.on-surface}" typography: "{typography.headline-md}" paddingX: "{spacing.gutter}" paddingY: "{spacing.lg}" border: none boxShadow: none tab-bar: backgroundColor: "color-mix(in srgb, {colors.surface-alt} 90%, transparent)" textColor: "{colors.on-surface}" rounded: "{rounded.full}" paddingX: 16px paddingY: 12px borderColor: "color-mix(in srgb, {colors.border} 50%, transparent)" borderWidth: 1px boxShadow: "0 12px 40px rgb(0,0,0,0.1)" tab-item-active: textColor: "{colors.primary}" typography: "{typography.tab-label}" iconSize: 24px gap: 4px backgroundColor: "transparent" border: none boxShadow: none tab-item-inactive: textColor: "{colors.on-surface-muted}" typography: "{typography.tab-label}" iconSize: 24px gap: 4px backgroundColor: "transparent" border: none boxShadow: none --- # Warm Cream Mascot Mobile ## Overview **Warm, friendly, and confidently chunky.** This is a cream-paper aesthetic built around an oversized illustrated mascot, vivid tomato-orange brand color, and pillow-rounded surfaces that float on a soft background. The personality is approachable but earnest — playful enough for a kid-friendly app, structured enough for productivity tooling. The defining moves: (1) every interactive surface is a fully-rounded pill or generously-rounded card, (2) typography swings between a heavy black geometric display face and a sturdy humanist sans for body, (3) the chrome is mostly flat-white-on-cream with one hot brand-orange accent that anchors hierarchy, (4) ambient color blobs sit far behind the content as soft atmospheric haze, and (5) a hand-drawn mascot character carries emotional weight that the otherwise-clean UI doesn't try to provide itself. The aesthetic feels like a children's-book illustration paired with confident editorial typography — warm but never saccharine, organized but never austere. ## Colors **Mode**: light only. **Page surface** uses `{colors.surface}` (#FFFAF3) — a warm cream that sets the entire mood. It is NOT white; the cream cast is load-bearing. **Card surfaces** use `{colors.surface-alt}` (pure white) — every card, button, input, and tab bar lifts off the cream by being the brighter white. This two-layer surface system is the primary way depth is conveyed. `{colors.primary}` (#EC5E3A) is the brand tomato-orange — used for the main CTA fill, active state text, key icons, progress fills, and the colon punctuation inside the timer display. It is saturated and warm; never use it as a card background (the card stays white) and never tint a large chrome surface with it. Tints (`primary/5`, `primary/10`) appear as ambient blur blobs and as the fill behind small status pills / icon containers. `{colors.surface-tonal}` (#F0E6D6) and `{colors.surface-muted}` (#F5EDE4) are neutral warm-beige tones used for secondary buttons, segmented-control tracks, progress-bar tracks, and dividers. They harmonize with the cream surface without competing for attention. `{colors.on-surface}` (#4A3831) is a warm dark espresso — body text and headings. Never pure black. `{colors.on-surface-variant}` and `{colors.on-surface-muted}` step it down for metadata and de-emphasized labels. `{colors.accent}` (#2F855A — forest green) is a categorical/positive color used in stat icons and "improvement" indicators. `{colors.warning}` (#F59F00) and `{colors.destructive}` (#C92A2A) appear only in semantic contexts. The `illus-*` palette is reserved exclusively for illustrations and mascot artwork. Those colors must NEVER bleed into UI chrome — UI chrome stays in the cream + white + tomato + beige + espresso family. ## Typography Two type families do the work: - **Work Sans** (the heading family) is a warm geometric sans used at heavy Black 900 weight for displays, headlines, and stat numerals. Its slightly humanist warmth keeps the chunky weight from feeling brutalist. - **Nunito Sans** (the body / label family) is a soft humanist sans used at Bold 700 and Black 900. It carries body text, button labels, and all the tracked-out uppercase eyebrows. **Weight strategy is heavy throughout.** There is essentially no Regular weight in this aesthetic — body is Bold 700, labels and metadata are Black 900, headings are Black 900. Lightness is conveyed by *size and color*, not by weight reduction. Role explanations: - `{typography.display-xl}` and `{typography.display-lg}` — hero numerals (large counters, central display values). Tabular-nums, tight tracking, Black 900. Always paired with a tinted-orange separator character (`:`, `/`, `.`) at 30% opacity to break up the number rhythm. - `{typography.headline-lg}`, `{typography.headline-md}`, `{typography.headline-sm}` — screen headers, card group titles, section anchors. Work Sans Black 900, tight tracking. - `{typography.metric-lg}` — secondary stat values inside small tiles ("24", "8d"). - `{typography.body-md}`, `{typography.body-sm}` — list-row primary text and supporting prose. Nunito Sans Bold. - `{typography.label-cta}` — primary button label. Slightly tracked-out (+0.05em). - `{typography.label-uppercase-md}` and `{typography.label-uppercase-sm}` — the tracked-out uppercase eyebrows that appear above stats, on streak pills, on tab labels, and as metadata captions. The +0.15em–0.2em letter-spacing IS the visual signature of this aesthetic; do not reduce it. Always Black 900. - `{typography.tab-label}` — bottom tab bar text, identical treatment to `label-uppercase-sm`. Tabular-nums on every numeric display. The opacity-30 brand-orange separator inside numerals is a recurring trick worth preserving. ## Spacing & Layout **Density**: airy and generous. The `{spacing.gutter}` is 24px and rarely violated. Cards are large with `{spacing.card-padding}` (24px) or `{spacing.card-padding-lg}` (32px) for hero cards. Vertical rhythm clusters around 24px and 32px gaps between sections. Inside cards, content stacks with 16–24px gaps. Buttons sit in groups separated by 16px gaps; primary CTAs get extra breathing room above and below. The screen is constrained to a max-width of `max-w-md` (~28rem) and centered, with the bottom tab bar floating above content rather than docking to the edge — there is always a 24px inset around the tab bar. ## Elevation & Depth Three depth tiers, all conveyed through soft diffuse shadows on white-on-cream surfaces: 1. **Base chrome** (icon buttons, list rows, small tiles, inputs) — `boxShadow: "0 4px 12px rgb(0,0,0,0.03)"` to `"0 4px 20px rgb(0,0,0,0.03)"`. Barely-there but present. 2. **Cards** — `boxShadow: "0 8px 30px rgb(0,0,0,0.04)"`. Soft and wide, no harsh edge. 3. **Hero cards & floating tab bar** — `boxShadow: "0 12px 40px rgb(0,0,0,0.05)"` to `"0 12px 40px rgb(0,0,0,0.1)"`. Lifted but never aggressive. The primary CTA gets a colored shadow: `"0 10px 25px rgba(224,49,49,0.25)"` — the only place a chromatic shadow appears in chrome. It tints the cream surface beneath the button with a faint orange glow, reinforcing the brand color. **Atmospheric blur blobs** sit behind everything: full-circle divs with `bg-primary/5` or `bg-chart-3/10`, sized 80×80 to 96×96 viewport units, `blur-[100px]` to `blur-[120px]`, positioned offscreen at corners. They never carry information; they're pure mood. Pointer-events disabled so they never intercept input. ## Shapes Pillow-rounded throughout. The radius philosophy is **pill-or-generous-rounded, never sharp**: - `{rounded.full}` — every button, every input, every chip, every icon container, every progress bar, the bottom tab bar, and the streak pill. If it's interactive or a status indicator, it's a pill. - `{rounded.2xl}` (40px) — hero cards. The signature card shape that holds the timer, the weekly-average card, etc. - `{rounded.xl}` (32px) — standard cards (stat tiles, list rows). - `{rounded.lg}` (24px) — secondary cards. - `{rounded.md}` (16px) — small interior tiles (e.g. the icon-container squircle inside a stat tile uses `rounded-2xl` ≈ 16px). There are no sharp corners anywhere. There are no hairline-thin strokes used as separators — separation is done through whitespace, surface contrast, or a soft shadow. ## Components Refer to the YAML frontmatter for canonical token values. Snippets below are the canonical Tailwind renderings. ### card ```html

[Card title]

[Body copy]

``` ### card-elevated The hero card variant — used for the most prominent surface on a screen. ```html
``` ### button-primary ```html ``` ### button-secondary ```html ``` ### button-icon The 48×48 chrome icon-button used in headers (settings, share, back). ```html ``` ### button-utility The vertical icon-over-label utility button (e.g. play-controls in a row). ```html ``` ### input-text ```html ``` ### chip + chip-active (segmented control pattern) ```html
``` ### chip-status The streak / status pill with leading icon + tracked-out label. ```html
[STATUS LABEL]
``` For a low-attention tonal variant, swap `bg-white` for `bg-[#EC5E3A]/10` and `text-[#4A3831]` for `text-[#EC5E3A]`. ### badge-circle A 40×40 circular icon container used inside list rows and stat tiles. The fill is the categorical color at 10% alpha; the icon is the same color at full saturation. ```html
``` The square-radius variant (`rounded-2xl` instead of `rounded-full`) is used inside stat tiles where the icon container should feel like a small inset card rather than a token. ### list-row ```html

[Row title]

[Metadata]

[Value]
``` ### progress-bar A vertical progress bar used inside bar-chart tiles (each "bar" is a full-height pill track with a fill anchored to the bottom): ```html
``` For a horizontal progress bar, swap height/width and anchor the fill to the left. ### progress-ring ```html ``` The fill stroke is *thicker* than the track stroke (7 vs 5) — this is a deliberate visual move that gives the progress fill more presence than the track. ### top-app-bar A flat header — no background fill, no border, just centered content with `{spacing.gutter}` padding. Often holds an icon button on the right and either a status pill (centered) or a screen title (left-aligned headline). ```html

[Screen title]

``` ### tab-bar (floating pill) A signature element. The bottom navigation is a floating pill, NOT a docked bar. ```html ``` The active state is signaled by full-saturation brand-orange on both icon and label; inactive items drop to muted-brown at 50% opacity. No underline, no indicator dot — just color and opacity. ### Composition recipes (not separate components) - **Stat tile** = `card` with reduced padding (`p-5`), a `badge-circle` (or square-radius variant) at the top, then a `{typography.metric-lg}` value and a `{typography.label-uppercase-sm}` caption stacked below. Used in 2-column grids. - **Hero metric card** = `card-elevated` containing a mascot image at left and a stat block (eyebrow + big number + delta indicator) at right. - **Section header** = horizontal flex row with `{typography.headline-sm}` on the left and a `button-text` (uppercase, tracked) on the right ("VIEW ALL"). - **Bar-chart tile** = `card` containing a header row (title + segmented `chip`/`chip-active`) and a flex row of 7 vertical `progress-bar` tracks with day-of-week labels below. ## Iconography **Set**: `solar` (Iconify). The aesthetic is committed to this set — the rounded, slightly chunky terminals match the pillow-rounded UI shapes and would clash with sharper sets like Lucide or Tabler. **Variant convention**: `bold-duotone` is the default for navigation, status, and decorative icons (it gives the warm two-tone treatment that matches the warm palette). `bold` is used inside the primary CTA and for play-control glyphs where a single-tone heavier mark reads better at smaller scale. Active and inactive states are conveyed through *color and opacity*, not by switching variants. Icon sizing: 18px (size-[18px]) inside small badges, 24px (size-6) as the default in chrome and tab bars, occasionally 28–32px for utility-button icons. Always sized via Tailwind classes, never via `width`/`height` attributes. ## Illustration & Imagery **Style / Technique**: Hand-drawn 2D vector character illustrations rendered as flat-color shapes with strong dark outlines, soft cel-shaded shadow patches, and minimal interior linework. The look is "warm storybook character sticker" — the same family as modern children's-book digital illustration. Subjects (a `[SUBJECT]` placeholder fills in the brief's mascot or hero figure) are anthropomorphized with oversized expressive eyes, a small mouth, and squat compact bodies. The treatment is consistent: a single character at a time, posed centered, rendered at sticker-scale on a transparent background. **Palette**: 3–5 colors per illustration drawn from `{colors.illus-tomato}` (warm vermillion red-orange) and `{colors.illus-leaf}` (sage/forest green) as primary fills, with `{colors.illus-tomato-shadow}` and `{colors.illus-leaf-shadow}` as cel-shaded shadow tones, and `{colors.illus-outline}` (deep brown, NOT pure black) for all outlines. Whites of eyes are off-white. The illustration palette stays warm and natural — NEVER cool blues, purples, or neon colors. **Edge treatment**: Strong consistent outlines in `{colors.illus-outline}`, ~3% of the canvas width — chunky enough to read at small sizes. Outlines are slightly imperfect / hand-drawn rather than mathematically uniform, giving a "drawn with a brush pen" feel. Internal forms (eye sockets, mouth, body segments) also outlined. **Shading & light**: Cel-shaded with one or two flat shadow patches per shape, no gradients, no airbrush. A small soft highlight may sit on the upper-left of the main body (a single off-white blob). A faint cast shadow oval sits beneath the character's feet. **Composition & framing**: Single character, centered in a square canvas, occupying ~70–80% of the canvas height with generous transparent margin around all sides. The character faces forward or three-quarter front. Pose is expressive (waiting, focused, teaching, etc.) and tells a one-emotion story. **Background within the illustration**: Transparent. Always. The character is a sticker that sits on the page surface or inside a card. **Container styling**: No frame. The image has no container border, no card around it, no clip-path. It sits directly on the page or card surface as a transparent PNG. When placed in a hero composition, it may have a soft circular `bg-primary/10` blur blob sized 75–100% of the image, positioned behind it (`absolute inset-0 ... blur-3xl`), as an atmospheric backing — but this blob is a chrome element, not part of the image. **CSS treatment on the `` element**: `object-contain` always. No `mix-blend-mode`. No `opacity` reduction. No filters except `drop-shadow` (see below). **Box-shadow on the image**: A soft `drop-shadow` is applied directly to the `` element (not to a container) to give the sticker subtle physical presence: - Default: `drop-shadow-md` or `drop-shadow-xl`. - Hero contexts: `drop-shadow-[0_15px_15px_rgba(224,49,49,0.15)]` — a faintly orange-tinted drop-shadow that ties the character to the brand color. **Aspect ratio rule**: Square canvas (1:1). Preserve the source aspect; do not crop. Sized via height/width classes (e.g. `size-40`, `w-56 h-56`, `w-24 h-24` depending on context). **Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel-only, NOT line-art-only without fills, NOT pixel art, NOT realistic anatomy, NOT cool-toned, NOT minimalist geometric (these characters are expressive and detailed, not abstract glyphs). **Style recipe prompt**: > *A hand-drawn 2D vector cartoon illustration of [SUBJECT], rendered as a centered character sticker on a transparent background. Warm storybook style: chunky uneven dark-brown outlines, flat color fills in a warm palette (vermillion red-orange, sage green, off-white, deep brown outline), one or two flat cel-shaded shadow patches per shape — no gradients, no airbrush. Oversized expressive eyes with small light reflections, a small simple mouth, squat compact body. A soft off-white highlight on the upper left of the main body. A faint soft oval cast shadow beneath the feet. Square 1:1 canvas, character occupies 70–80% of canvas height, generous transparent margin around all sides. NOT 3D, NOT claymation, NOT photoreal, NOT line-art-only, NOT pixel-art, NOT cool-toned.* ## Hierarchy & Emphasis The most-emphasized element on every screen is the **central numerical display or the mascot illustration** — both render at hero scale (~72–88px for numerals, ~160–224px for the mascot). Everything else steps down sharply. Saturated brand-orange `{colors.primary}` is reserved for: (1) the primary CTA fill, (2) active state text/icons, (3) progress fills, (4) the colon punctuation inside hero numerals at 30% opacity, (5) status pill leading icons. Never as a card background. Never as body text. Tracked-out uppercase labels (`{typography.label-uppercase-*}`) always whisper — they're black-weight but small, in muted-brown, with heavy letter-spacing. The whisper IS their job: they identify what a number means without competing with the number itself. Body text in `{colors.on-surface}` at Bold 700 is the workhorse; metadata drops to `{colors.on-surface-muted}` at Black 900 uppercase. There's no "regular weight prose" in this aesthetic — every text element is committed to a specific weight role. ## Distinctive Details 1. **The atmospheric blur blob** — every screen has at least one large circular `blur-[100px]` div in the brand-orange family (or a categorical color) sitting offscreen at a corner. It carries no information; it adds warm color glow to the cream surface and ties the screen to the brand. Always `pointer-events-none`. Always behind content (`-z` or first-in-DOM with `relative` content above). 2. **The opacity-30 colored separator inside hero numerals** — when displaying any compound numeric ("HH:MM", "X/Y", "X.Y"), the separator character is wrapped in a span with `opacity-30 text-primary mx-1` (or `mx-2` for larger sizes). This single typographic move makes every hero numeral feel like part of the same family. 3. **The colored drop-shadow on the primary CTA AND the mascot illustration** — both elements get `rgba(224,49,49,0.X)` tinted shadows that bleed warm orange into the cream beneath them. This is the only chromatic shadow treatment in the system; everything else uses neutral `rgba(0,0,0,0.0X)`. ## Do's and Don'ts ### Do - Stack white-on-cream surfaces; let the cream `{colors.surface}` be visible between cards as the breathing space. - Use `{rounded.full}` on every button, input, chip, and status indicator without exception. - Pair every hero numeric with an opacity-30 brand-orange separator and tracked-out uppercase caption beneath. - Float the bottom tab bar with margin on all sides; never dock it to the screen edge. - Reserve brand orange for the single primary action, active state, and progress fill on each screen. - Render mascot illustrations as transparent-background stickers with a soft drop-shadow, sized 40–60% of the available width in hero contexts. - Use `bold-duotone` solar icons as the default; switch to `bold` only inside the primary CTA and play-control glyphs. ### Don't - Don't use brand orange as a card background, a body-text color, or a large chrome surface fill. White cards with orange accents only. - Don't use pure black anywhere — text is `{colors.on-surface}` warm espresso, outlines in illustrations are `{colors.illus-outline}` deep brown. - Don't introduce sharp corners, hairline-thin borders, or rectangular non-pill buttons. Everything is generously rounded. - Don't reduce font weight to communicate hierarchy — every text element is Bold 700 or Black 900. Use size and color instead. - Don't compress letter-spacing on the uppercase labels; the +0.15em–0.2em tracking IS the aesthetic. Tight uppercase looks wrong here. - Don't put the mascot inside a clipped circle, framed card, or shaped container. It is always a transparent sticker on the surface. - Don't add cool blues, purples, or neon colors to illustrations. The illustration palette is warm-only. - Don't let `illus-*` colors leak into UI chrome (icons, buttons, text). Chrome stays in cream/white/tomato/beige/espresso. - Don't render hero numerals in anything but Work Sans Black 900 with tabular-nums and tight tracking. - Don't add a header background fill or border — the top app bar is always flat-on-cream.