Shoppu (Mochi) — Design Language

1. Visual Theme & Atmosphere

Shoppu by Mochi is an e-commerce storefront that fully commits to a retro-internet, pixel-art aesthetic. The use of PressStart (the canonical pixel video game font) is not a trend choice but a founding design decision. Pastel candy colours — sky blue, bubble-gum pink, bright yellow — reference the playful visual language of Japanese game culture and early web aesthetics. Uppercase headings and near-zero radii (asymmetric 5px 0px 0px) reinforce the pixelated, hard-edge quality. The black footer grounds the floaty pastels.

2. Color Palette & Roles

• Background — transparent/white: clean base behind the candy colours
• Primary text — rgb(0, 0, 0) (black): maximum contrast on light backgrounds
• Sky blue — rgb(90, 172, 250): featured section wrapper — primary brand playful accent
• Bubble-gum pink — rgb(253, 145, 198): section background — the sweetest accent
• Bright yellow — rgb(255, 240, 38): section background — energetic, cheerful
• Footer — rgb(0, 0, 0) with white text: grounding anchor at page bottom
• Link default — rgb(0, 0, 238) (browser-default blue): retained for nostalgic web reference

The candy trio (blue/pink/yellow) applied as section backgrounds creates a slot-machine-style page rhythm.

3. Typography Rules

• PressStart (weight 400): headings and display — pixel/8-bit video game typeface; the brand’s defining visual
• Jackey (weight 400): likely for subheadings or accent copy — another quirky face
• Times (weight 400/700): body reading text — a nod to early web browser defaults
• Arial (weight 400): UI fallback
• Sizes: 12.8–24.8px — no extreme display scale; pixel fonts work best at moderate sizes
• UPPERCASE transforms throughout — block-caps at pixel scale reads as retro game UI
• Weight 700 used contextually for bold states in Times

4. Component Stylings

• Unusual asymmetric radius: 5px 0px 0px (top-left only rounded) — deliberately off-grid, pixel-art panel aesthetic
• No shadows
• Section padding: 32px (desktop), 16px (mobile) — defined via custom properties
• Input fields: white background, black border — clinical contrast, retro form aesthetic

5. Layout Principles

• Section-based full-width colour blocks create a “world map” visual rhythm
• Featured wrapper as a distinct entry point with sky-blue background
• --app-height: 800px suggests a fixed-height app shell on desktop
• Standard horizontal navigation with bold candy colour sections below

6. Depth & Elevation

• No shadows — purely flat
• Depth created entirely through high-contrast background colour blocks
• The black footer creates visual terminus for the floating candy sections

7. Do’s and Don’ts

Do: Use PressStart for all headings — removing it removes the identity. Do: Apply the candy trio (blue/pink/yellow) as full-bleed section backgrounds in sequence. Do: Maintain asymmetric 5px 0px 0px radius for pixel-art panel components. Don’t: Add shadows or gradients — pure flat colour blocks only. Don’t: Use rounded corners on primary containers — the pixel aesthetic requires hard edges. Don’t: Introduce photographic or realistic imagery styles — keep visuals pixel-art aligned.

8. Responsive Behavior

• Section padding reduces from 32px to 16px on mobile (--sectionPaddingMobile: 16px)
• App height fixed at 800px on desktop — may become fluid on mobile
• PressStart font maintained at mobile sizes; may reduce from 24px to 14–16px
• Navigation simplifies to icon/hamburger

9. Agent Prompt Guide

Design like Shoppu: white base, PressStart pixel font for all headings uppercase, Times for body. Candy section backgrounds: sky blue (rgb(90,172,250)), bubble-gum pink (rgb(253,145,198)), bright yellow (rgb(255,240,38)). Black footer. Asymmetric 5px 0px 0px radius. No shadows. Retro-internet Japanese game aesthetic.

Generated by Sparkbites — extracted from live CSS analysis