--- version: 1 name: Peach Sticker Mobile colors: primary: "#FF7E5F" on-primary: "#FFFFFF" secondary: "#6BC5FF" accent: "#FFD23F" surface: "#FFF2E8" surface-alt: "#FFFFFF" surface-muted: "#F0E0D6" on-surface: "#2D2320" on-surface-variant: "#8A756E" border: "#EAD9CE" success: "#5EDBA8" error: "#FF4D4D" illus-coral: "#FF7E5F" illus-sky: "#6BC5FF" illus-butter: "#FFD23F" illus-mint: "#C9E8C9" illus-cream: "#FFF6E0" illus-blush: "#F4B8B0" illus-cocoa: "#4A2E26" typography: display-xl: fontFamily: Bricolage Grotesque fontSize: 80px fontWeight: 900 lineHeight: 1 letterSpacing: -0.03em display-lg: fontFamily: Bricolage Grotesque fontSize: 60px fontWeight: 900 lineHeight: 1 letterSpacing: -0.04em display-md: fontFamily: Bricolage Grotesque fontSize: 36px fontWeight: 900 lineHeight: 1.05 letterSpacing: -0.02em headline-lg: fontFamily: Bricolage Grotesque fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-md: fontFamily: Bricolage Grotesque fontSize: 24px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.01em headline-sm: fontFamily: Bricolage Grotesque fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: -0.01em body-lg: fontFamily: Nunito Sans fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0em body-md: fontFamily: Nunito Sans fontSize: 14px fontWeight: 600 lineHeight: 1.45 letterSpacing: 0em body-sm: fontFamily: Nunito Sans fontSize: 12px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0em label-lg: fontFamily: Nunito Sans fontSize: 16px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em label-md: fontFamily: Nunito Sans fontSize: 13px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0em label-sm: fontFamily: Nunito Sans fontSize: 10px fontWeight: 700 lineHeight: 1 letterSpacing: 0em rounded: sm: 12px md: 18px lg: 20px xl: 28px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 20px xl: 24px 2xl: 32px gutter: 24px card-padding: 24px section-gap: 20px icons: set: material-symbols default_variant: rounded active_variant: rounded stroke_weight: 2.5px default_size: 24px components: card: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: "{spacing.card-padding}" border: none boxShadow: "0 3px 12px rgba(0,0,0,0.06)" card-selected: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" borderColor: "{colors.primary}" borderWidth: 4px rounded: "{rounded.lg}" padding: 16px boxShadow: "0 3px 12px rgba(0,0,0,0.06)" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-lg}" rounded: "{rounded.full}" paddingX: 32px paddingY: 22px border: none boxShadow: "0 8px 30px rgba(255,126,95,0.3)" button-secondary: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 24px paddingY: 14px border: none boxShadow: "0 2px 8px rgba(0,0,0,0.04)" button-text: backgroundColor: transparent textColor: "{colors.on-surface}" typography: "{typography.body-lg}" paddingX: 0px paddingY: 8px border: none boxShadow: none button-icon: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" size: 48px rounded: "{rounded.full}" iconSize: 28px border: none boxShadow: "0 4px 16px rgba(255,126,95,0.3)" button-icon-soft: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" size: 40px rounded: "{rounded.full}" iconSize: 22px border: none boxShadow: "0 2px 8px rgba(0,0,0,0.04)" input-text: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.md}" paddingX: 18px paddingY: 14px border: none boxShadow: "0 2px 8px rgba(0,0,0,0.04)" focusRingColor: "{colors.primary}" chip: backgroundColor: "{colors.surface-muted}" textColor: "{colors.on-surface-variant}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 14px paddingY: 8px border: none boxShadow: none chip-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 14px paddingY: 8px border: none boxShadow: none badge-pill: backgroundColor: "{colors.accent}" textColor: "{colors.on-surface}" typography: "{typography.label-sm}" rounded: "{rounded.full}" paddingX: 10px paddingY: 4px border: none boxShadow: none badge-circle: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-sm}" size: 24px rounded: "{rounded.full}" border: none boxShadow: none avatar: backgroundColor: "{colors.surface-muted}" size: 48px rounded: "{rounded.full}" border: none boxShadow: none list-row: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" paddingX: 20px paddingY: 18px border: none boxShadow: "0 3px 12px rgba(0,0,0,0.06)" toggle-switch: backgroundColor: "{colors.surface-muted}" width: 56px height: 32px rounded: "{rounded.full}" border: none boxShadow: none toggle-switch-on: backgroundColor: "{colors.primary}" width: 56px height: 32px rounded: "{rounded.full}" border: none boxShadow: none top-app-bar: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.headline-lg}" paddingX: "{spacing.gutter}" paddingY: 16px border: none boxShadow: none --- # Peach Sticker Mobile ## Overview **Cozy, sticker-bright, sticker-soft.** A warm peach-cream surface system populated with chunky black-displayed numerals, fully-rounded pill controls, and oversized kawaii vector mascots that sit on cards like vinyl stickers. The aesthetic feels handmade and affectionate — high-saturation coral for primary action, buttery yellow for celebration, sky blue for calm — all anchored to a deep cocoa text color so nothing reads as washed out. The mood is playful but legible: typography does the structural work (very heavy display weights, generous tracking compression on numerals), while imagery does the emotional work (rounded illustrated characters with rosy blush cheeks). It's an aesthetic that wants to make daily-use moments feel friendly without becoming childish — adjacent to greeting-card and stationery design rather than children's app design. ## Colors The system splits into three palettes that must not bleed: - **Surface palette** — `{colors.surface}` is the warm cream page background; `{colors.surface-alt}` is pure white, used exclusively for cards and lifted controls; `{colors.surface-muted}` is the dustier peach used for inactive toggle tracks, inactive day pills, and other "off" states. - **Brand & action palette** — `{colors.primary}` (warm coral) is the single saturated CTA color, used for the primary button, the active toggle fill, the active day-pill, and selection borders. `{colors.secondary}` (sky blue) and `{colors.accent}` (butter yellow) appear in support roles: accent for streak/celebration moments at low alpha tints, secondary as a calm complement reserved for atmospheric or supporting contexts. - **Text palette** — `{colors.on-surface}` is a near-black warm cocoa; `{colors.on-surface-variant}` is a dusty mauve-taupe for metadata, helper copy, and inactive labels. The `border` color is a faint peach-tan, used only when a hairline separation is necessary; most separation is achieved with shadow + white-on-cream contrast. Illustration colors (`illus-*`) are reserved for generated character art only. Never use them as UI fills, button backgrounds, or chip colors. Conversely, the `primary` coral is for chrome only; it should not be used as a fill inside a generated illustration. ## Typography Two families do all the work: - **Bricolage Grotesque** at weight 900 (Black) handles every display, headline, and numeric centerpiece. Its compressed, slightly-wonky display cut is what gives the aesthetic its toy-poster character. Tracking is pulled tighter (`-0.02em` to `-0.04em`) at large sizes so numerals feel like a single sculpted block. - **Nunito Sans** at weights 600–900 covers all body, label, and metadata copy. The very heavy weights (800/900) for short labels are a load-bearing decision — labels in this system shout politely. Role assignments: - `display-xl` / `display-lg` — clock-style numerals and hero counters; tracking-tight, weight 900. - `display-md` / `headline-lg` — top-of-screen titles. - `headline-sm` — card title inside selection tiles. - `body-lg` — emphasized in-card primary text (e.g. row label). - `body-md` / `body-sm` — descriptive copy and helper text. - `label-lg` — primary button text, uppercased with `+0.05em` tracking. - `label-md` — chip / secondary button text. - `label-sm` — initial inside a day-pill, badge digits. There is no italic except for a single inline-italic helper-copy gesture used to mark locked / unavailable states. ## Spacing & Layout Generous and breathing. Screen gutters are `{spacing.gutter}` (24px). Cards stack with `{spacing.lg}` (20px) between them — this gap is intentionally a touch larger than feels efficient, because the empty cream surface between cards is part of the aesthetic. Internal card padding is `{spacing.card-padding}` (24px), giving content room around oversized numerals and stickered illustrations. Grids of selection tiles use 2 columns with `{spacing.md}` gap. Vertical rhythm inside cards stacks at 12–16px between sub-blocks. ## Elevation & Depth Depth is conveyed by **soft drop-shadows on white cards over a cream surface** — never by borders. The canonical shadow is `0 3px 12px rgba(0,0,0,0.06)` for resting cards. Primary buttons carry a colored shadow tinted with the button's own hue: `0 8px 30px rgba(255,126,95,0.3)` — this creates a warm "glow" beneath CTAs that reinforces the sticker / candy quality of the aesthetic. Press states scale the element to `0.95–0.98` (no shadow change). Hover is generally a no-op on touch surfaces. There is no glass / blur / translucency vocabulary. The system is opaque and warm. ## Shapes Radii are large and pillow-soft: - `{rounded.sm}` (12px) — never used on chrome; rare inline accents. - `{rounded.md}` (18px) — inputs. - `{rounded.lg}` (20px) — the workhorse card and list-row radius. - `{rounded.xl}` (28px) — large hero containers. - `{rounded.full}` — every button, every chip, every toggle, every avatar / day-pill / icon-button. **Default to `full` for any interactive control that isn't a card.** The shape philosophy: cards are squircle-ish soft rectangles; controls are pills. There are no sharp 90° interactive elements anywhere. ## Components ### card Resting white surface on the cream page. Soft drop-shadow, no border (selected state is the exception — see `card-selected`). ```html

[Card title]

[Body copy]

``` ### card-selected For selection-grid tiles, selection is shown via a 4px coral border that replaces some inner padding (so layout doesn't jump). A small coral check-circle pinned top-right confirms. ```html
``` For locked / unavailable tiles in the same grid, render the tile with `grayscale opacity-60` and overlay a centered white-translucent lock badge: ```html
``` ### button-primary The shouting CTA. Uppercased, heavy-tracked label; coral fill; warm coral-tinted glow shadow. Always pill-shaped. ```html ``` For full-width hero CTAs, add `w-full max-w-xs`. The `text-2xl` size is used for the largest hero variant (oversized hero CTA at ~24px). ### button-secondary / button-text Secondary is a white pill with the soft generic shadow. `button-text` is a plain bold underlined link, used for low-attention dismiss actions ("Snooze for 9m"–style negative-space CTAs): ```html ``` ### button-icon Circular coral floating action button with the same coral glow as `button-primary`, used wherever a single-icon "add / new" affordance is needed. ```html ``` For the soft variant (e.g. a back-arrow in the top app bar), use `button-icon-soft`: smaller size-10, white background with a subtle generic shadow, on-surface foreground. ### toggle-switch iOS-style pill toggle. Track is `{colors.surface-muted}` when off and `{colors.primary}` when on. White thumb at 20px diameter with 6px inset. ```html ``` ### chip / chip-active Small pill labels. The signature use is the **day-of-week pill row**: a strip of 7 size-6 circles, each containing a single bold uppercase initial in `{typography.label-sm}`. Active days fill coral with white text; inactive days fill `surface-muted` with `on-surface-variant` text. This is a composition of `chip` + `chip-active` at circular size — not a separate component. ```html
M
T
``` ### badge-pill / badge-circle Pill badges use accent-yellow fill at full or 20% alpha; circular badges use the primary coral. The accent-tint card recipe — `bg-[#FFD23F]/20` with a `border-2 border-[#FFD23F]/30` — is the standard recipe for celebratory / streak callouts. ### list-row Cards-as-rows. Use `{components.card}` styling but with the row's content (label left, control right). Reserve `list-row` for screens that genuinely list multiple homogeneous items; otherwise just compose with `card`. ### top-app-bar Flat — no shadow, no fill differentiation from the cream page. Just generous top padding (`pt-16`) and a left-aligned heavy display title with an optional right-aligned `button-icon` for the primary screen action. ```html

[Screen title]

``` ### Composition recipes (not components) - **Hero numeral block** — render the value in `display-xl` or `display-lg` with `tracking-tighter` next to a smaller `text-xl font-bold text-muted-foreground` qualifier (e.g. unit, suffix). The qualifier baseline-aligns with the numeral via `flex items-baseline gap-2`. - **Disabled / inactive item** — wrap the entire card in `opacity-60` and recolor the headline numeral to `on-surface-variant`; do not change the card's shadow or radius. - **Streak / celebratory callout** — `bg-[#FFD23F]/20` fill, `border-2 border-[#FFD23F]/30`, padding `{spacing.lg}`, an accent-yellow circle holding a single emoji or icon on the left. - **Accent-tint card** — to reserve a low-attention non-white card for special content, use any palette color at `/20` alpha background with a `border-2` of the same color at `/30` alpha. Never use full-saturation accent or primary as a card fill. ## Iconography `material-symbols:*-rounded` is the primary chrome icon set — its softened terminals match the pillow-shaped pill controls. `solar:*-bold` and `hugeicons:*` appear for icons not available in material-symbols-rounded (lock states, directional chevrons). Stroke-weight feel is medium-heavy; never use thin / light variants. Default chrome size is 24px (`size-6`); FAB-scale icons are 28px (`size-7`); inline label icons are 16–18px. For decorative emoji moments (e.g. a streak fire), `fluent-emoji:*` is acceptable — used sparingly inside accent-tint callouts only, never as a primary-action icon. ## Illustration & Imagery Illustrations are the soul of this aesthetic — the chrome is plain enough that the imagery does most of the personality work. Treat them as the most carefully-styled element on the page. - **Style / Technique**: Flat 2D vector kawaii sticker illustrations. Each character is a single rounded silhouette with a thick uniform dark-cocoa outline (`{colors.illus-cocoa}`, ~6–8% of the canvas width in stroke). Big sparkling cartoon eyes (two large dark circles, each with two white highlight dots), a tiny smiling mouth, and two blush-pink oval cheek dots. Simplified anatomy — no fingers, no toes, often no limbs at all. Sticker-style: each illustration reads as a die-cut peel-off vinyl sticker. - **Palette**: 2–4 colors per illustration drawn from `{colors.illus-coral}`, `{colors.illus-sky}`, `{colors.illus-butter}`, `{colors.illus-mint}`, `{colors.illus-cream}`, `{colors.illus-blush}`, plus `{colors.illus-cocoa}` for the outline and facial features. Saturation is medium-soft — not pastel, not neon. Each character body is one flat dominant color with at most one secondary fill (belly, ear, accent) and the universal blush-pink cheek dots. - **Edge treatment**: Always outlined. Uniform stroke weight, dark cocoa color, slightly rounded line-caps. Outlines are NEVER skipped, NEVER tapered, NEVER colored to match the fill. The outline IS the aesthetic. - **Shading & light**: Flat fills with at most ONE soft tonal step (e.g. a slightly darker rim along one curve to suggest volume), and a small white specular highlight inside the eyes. No gradients, no airbrush, no cel-shaded planes. - **Composition & framing**: Subject is centered, fills 70–85% of the canvas, faces forward (toward the viewer), and sits on a transparent background. Generous symmetrical margin around the silhouette so the sticker reads cleanly when placed over a card. Subjects are roughly square in aspect. - **Background within the illustration**: Always transparent PNG. The character must read on any surface color in the system. - **Container styling**: Most illustrations are placed *unframed* — directly on a card surface as a sticker. When pinned to a card corner, size is roughly 56×56px (`w-14 h-14`) with a small tilt (`rotate-[-12deg]` to `rotate-[8deg]`) to reinforce the stuck-on-by-hand sticker feeling. When used as a tile centerpiece, size is roughly 96×96px (`w-24 h-24`) with no rotation. When used as a hero (alarm-ringing-style screens), size scales up to 288×288px (`w-72 h-72`) and may sit over an atmospheric gradient backdrop. - **CSS treatment on the `` element**: `object-contain` is implicit (illustrations are square PNGs). The signature treatments are: `drop-shadow-sm` for the small sticker shadow under each character (this is what sells the sticker quality — a tiny offset shadow as if the vinyl is sitting just above the surface); for hero-scale uses, `drop-shadow-2xl` for a more dramatic floating feel. For locked / unavailable states, apply `grayscale opacity-60` (or `grayscale-[50%]` for partial) — never blur, never recolor. - **Box-shadow on the image or its frame**: None on the container — the illustration's own `drop-shadow-sm` does the work. Containers stay flat shadow-wise; the sticker has its own micro-shadow. - **Aspect ratio rule**: Always 1:1 square. Crop / pad the source to a square canvas before placement. Do not stretch. - **Atmospheric / scenic imagery**: Beyond character stickers, the system also accepts soft minimal landscape backdrops — gradient sky from cream-peach (bottom) to soft sky-blue (top), with simplified rolling hills as flat shapes in 2–3 mint/sage tones, and a small cluster of rounded white clouds. No outlines on these landscapes (this is the one place the outline rule is suspended — atmospheres are flat, character stickers are outlined). Used as full-screen backgrounds on hero / full-bleed moments only. - **Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel-washed-out, NOT line-art-only (no fills), NOT realistic anatomy, NOT detailed textures, NOT painterly, NOT pixel art, NOT chibi-anime (the proportions are rounder and simpler than anime chibi). - **Style recipe prompt**: *Flat 2D vector kawaii sticker illustration of [SUBJECT], centered on a transparent background, square 1:1 canvas. Single rounded silhouette with a thick uniform dark cocoa-brown outline (#4A2E26) of consistent stroke weight. Big sparkling cartoon eyes (two large dark cocoa circles each with two small white highlight dots), a tiny simple smiling mouth, two soft pink-blush oval cheek dots. Body filled with a single medium-saturation color from this palette: warm coral, sky blue, butter yellow, soft mint, cream, blush pink. At most one secondary accent fill (belly, ear, tuft). Flat fills with at most one subtle tonal step for volume, no gradients, no airbrush, no cel-shaded planes. Subject fills 70–85% of canvas, faces forward, generous symmetrical margins. Reads as a die-cut vinyl peel-off sticker. NOT 3D, NOT claymation, NOT photoreal, NOT pastel-washed-out, NOT realistic anatomy, NOT pixel art, NOT anime.* ## Hierarchy & Emphasis Weight (Bricolage Black 900) and *size* carry hierarchy more than color does. Coral is reserved — it appears at most twice on a screen (the FAB and an active toggle, or a primary CTA). Inactive / disabled states drop the entire element to `opacity-60` rather than recoloring piece by piece. Metadata always whispers in `on-surface-variant` at body-sm; never in coral. ## Distinctive Details 1. **Sticker-on-card placement**: oversized illustrated mascots pinned to card corners with a slight rotation (`rotate-[-12deg]` to `rotate-[8deg]`) and a `drop-shadow-sm`. This is the single most identifying gesture — flat cards become tactile when the sticker breaks the corner. 2. **Coral-tinted glow shadow on primary CTAs**: `0 8px 30px rgba(255,126,95,0.3)` rather than a neutral shadow. Buttons appear to *radiate* warmth. 3. **Day-of-week initial pills**: a strip of seven `size-6` circles with single bold initials, fully replacing what other systems do with checkboxes or 5-letter abbreviations. Becomes a decorative micro-pattern in itself. ## Do's and Don'ts ### Do - Use Bricolage Grotesque Black for any number that matters; tracking-tight at large sizes. - Default every interactive control (buttons, chips, toggles, day-pills) to fully rounded. - Stick to the white-card-on-cream-surface contrast; let shadow do the lifting. - Pin character stickers to card corners with a small rotation and a `drop-shadow-sm`. - Reserve coral for primary action — at most one or two coral elements per screen. - Use `opacity-60` (with optional `grayscale`) to communicate locked / disabled / past states. ### Don't - Don't use coral as a card background — it's a chrome accent, never a surface. - Don't add borders to resting cards (selected state is the only exception, with a 4px coral border). - Don't use thin or light icon variants — chrome icons are always rounded, medium-heavy. - Don't reach for gradient fills or glassy backdrop blurs — the system is opaque and warm. - Don't use the illustration palette colors (`illus-*`) as UI fills; they live inside generated PNGs only. - Don't use Playfair Display or JetBrains Mono — they're loaded historically but not part of this aesthetic's working set. - Don't render character illustrations without their dark cocoa outline; the outline is the aesthetic. - Don't crop a sticker tightly to its silhouette; preserve its symmetric square margin.