# 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*