Sakura Chroma demo
Sakura Chroma

A vintage Japanese cassette-tape packaging aesthetic featuring warm cream paper, diagonal rainbow ribbons, condensed bold typography, and JIS-style specification checkboxes in dark warm-brown ink.
Category: Retro & Pop
Era: 1980s Retro
Prompt: 18.8 KB · 2468 words
# SYSTEM PROMPT — CODING AGENT: BUILD THE "SAKURA CHROMA" LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-ready landing page on the first attempt — full HTML, CSS, and JavaScript in a single pass. No stubs, no TODOs, no lorem ipsum.

**Objective:** Build **Sakura Chroma** — a single-page landing site in a **1980s vintage-Japanese cassette product-catalogue** style: tactile, kawaii-tech, print-catalogue energy, with diagonal rainbow ribbon stripes, condensed display lockups, and JIS-style checkbox spec blocks. Required sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** Theme spec requires **full light + dark support** — both modes are mandatory.

**Product Concept (write all copy accordingly):** Sakura Chroma is a limited-run line of 1980s-style chrome cassettes in six collectible rainbow shells, sold in three tiers. Copy voice: Japanese product-catalogue English — short, punchy, confident; uppercase condensed labels; "★" star bullets; playful kawaii-tech asides ("Sugoi sound. Tiny shell."); invented-but-plausible spec codes ("TYPE-I 60 MIN", "JIS C-6432", "MODEL SC-84"). All user-facing copy must be written in **English**.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, inline event handlers (`onclick`, etc.), and presentational markup.
* Every rule is targeted via class or ID selectors only.
* HTML must remain semantic and styling-agnostic — changing the theme must never require markup edits.

**1.2 CSS Variables & Theme Tokens**
Define all visual tokens as CSS variables in `:root`; dark values in `:root.dark` (duplicated under `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`). Use exactly these names:

```css
:root {
  /* Sakura Chroma — Light: "Paper Catalogue" */
  --primary: #E5392A;         /* Cassette Red */
  --secondary: #E54489;       /* Sakura Pink */
  --accent-orange: #F09131;  /* Sunset Orange */
  --accent-yellow: #F0BC2A;  /* Chrome Yellow */
  --accent-green: #3D9F47;   /* Shibuya Green */
  --accent-blue: #1D5BBF;    /* JIS Blue — spec blocks + ribbon (per visual direction's red/blue/yellow/green set) */
  --bg-primary: #F5F0E0;     /* Cream paper (base background per technical spec) */
  --bg-secondary: #F1E6CB;   /* Paper panel (cards, inputs, cassette shell) */
  --text-primary: #3A2516;   /* Ink */
  --text-secondary: #6E4F38; /* Faded ink */
  --text-strong: #1A1A1A;    /* Fine-print micro-specs ONLY */
  --text-success: #2E7D32;
  --text-error: #C62828;
  --border-default: rgba(58, 37, 22, 0.28);
  --border-success: #3D9F47;
  --border-error: #E5392A;
  --radius-sm: 4px;  --radius-md: 10px; --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(58, 37, 22, 0.12);
  --shadow-md: 0 12px 28px rgba(58, 37, 22, 0.18);
  --shadow-hard: 0 4px 0 #3A2516; /* tactile "plastic key" press edge */
  --spacing-gap: clamp(1.25rem, 3vw, 2rem);
  --spacing-section: clamp(4rem, 9vw, 7rem);
  --transition-fast: 200ms;  --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;
  --font-display: 'Big Shoulders Display', sans-serif; /* hero <h1> ONLY */
  --font-heading: 'Barlow Condensed', sans-serif;     /* all other headings/labels/buttons, 800 */
  --font-base: 'Barlow', sans-serif;                  /* body copy */
  /* Diagonal rainbow ribbon — 45° */
  --ribbon: repeating-linear-gradient(45deg,
      var(--primary) 0 14px, var(--accent-orange) 14px 28px,
      var(--accent-yellow) 28px 42px, var(--accent-green) 42px 56px,
      var(--accent-blue) 56px 70px, var(--secondary) 70px 84px);
  /* Paper texture — supplied technical base */
  --paper-grain: repeating-linear-gradient(45deg,
      transparent 0, transparent 10px,
      rgba(255, 100, 100, 0.15) 10px, rgba(255, 100, 100, 0.15) 20px);
}
:root.dark { /* Ink Night */
  --bg-primary: #211610;  --bg-secondary: #2C1E14;
  --text-primary: #F5F0E0;  --text-secondary: rgba(245, 240, 224, 0.75);
  --text-strong: #F5F0E0;
  --text-success: #6FC273;  --text-error: #FF8A7A;
  --border-default: rgba(245, 240, 224, 0.28);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-hard: 0 4px 0 #120C08;
  --paper-grain: repeating-linear-gradient(45deg,
      transparent 0, transparent 10px,
      rgba(255, 100, 100, 0.08) 10px, rgba(255, 100, 100, 0.08) 20px);
}
body { background-color: var(--bg-primary); background-image: var(--paper-grain);
       color: var(--text-primary); font-family: var(--font-base); }
```

* **Contrast pairing (mandatory, every mode):** light backgrounds pair with Ink text; dark backgrounds pair with Cream text. Yellow/Orange/Green surfaces always carry Ink text; Red/Pink/Blue surfaces carry Cream text at large sizes (≥1.2rem / weight 800). Verify WCAG AA (4.5:1 body, 3:1 large); if a pair fails, adjust the token's lightness — never its hue. Never use `#ffffff`; use `#fefefe` if a near-white is needed.
* **Spec conflict resolution (explicit):** the source spec lists both Big Shoulders Display and Barlow Condensed — reconcile as follows: **Big Shoulders Display renders the hero `<h1>` exclusively; every other heading, label, price, and button uses Barlow Condensed 800 uppercase; body copy uses Barlow.** The palette's Paper `#F1E6CB` maps to `--bg-secondary`; the technical cream `#F5F0E0` maps to `--bg-primary`; the technical `#1A1A1A` maps to `--text-strong` (fine print only).

**1.3 Mandatory Dark Mode Support**
* Implement the "Ink Night" palette exactly as tokenized above — same accent hues, inverted paper/ink pairing, no HTML restructuring required to switch.
* Toggle mechanism: `.dark` class on `<html>`, `color-scheme: dark` / `color-scheme: light` set per mode, persistence via `localStorage` (key `sakura-theme`), first-visit fallback to `prefers-color-scheme`.
* A **visible theme toggle** must sit in the top bar: 44px icon button swapping `light_mode` / `dark_mode` Material Symbols, with `aria-pressed="true|false"` and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"), visible focus ring, hover scale per §3. The media-query fallback guarantees correct rendering on first paint and with JS disabled.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`**; deviations (e.g., left-aligned JIS spec rows) must be commented as justified exceptions.
* Mobile-first: single column below 768px; Features/Steps/Testimonials/Pricing rows go 3 → 1; hero goes two-column → stacked. No horizontal overflow from 320px to 1920px; no fixed pixel widths on containers.

**1.5 Framework & Naming**
* Default to Tailwind CSS, or clean custom CSS in `style.css` — pick one and stay consistent. Every utility value must resolve back to the tokens above.
* **BEM is the single naming convention** (`.card`, `.card__title`, `.card--featured`, `.faq-item__trigger`). If Tailwind is used, its utilities appear only inside `@apply` definitions of BEM classes — never scattered in the HTML. Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* `<head>` must include:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Big+Shoulders+Display:wght@700;800&family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0&display=block" rel="stylesheet">
```
* Type scale: hero `<h1>` = `--font-display`, 800, uppercase, `clamp(3rem, 9vw, 6.5rem)`; section `<h2>` = `--font-heading` 800 uppercase, `clamp(2rem, 5vw, 3.5rem)`; buttons/labels 700–800 uppercase, letter-spacing 0.02–0.12em; body = `--font-base` 1rem–1.125rem.
* Icons: **Google Material Symbols Rounded only** (FILL 1 via `font-variation-settings`). **Forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Decorative icons get `aria-hidden="true"`; icon-only buttons require `aria-label`.
* Recommended icon set: `cassette`, `check_box`, `star`, `play_arrow`, `music_note`, `palette`, `tune`, `bolt`, `local_shipping`, `workspace_premium`, `verified`, `favorite`, `expand_more`, `close`, `light_mode`, `dark_mode`, `progress_activity`, `check_circle`, `error`, `mail`, `send`, `public`, `share`, `alternate_email`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons (`.btn` + modifiers)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-heading` 800 uppercase ≥1.05rem; `border-radius: var(--radius-md)`.
* **Variants:** `.btn--primary` (Red bg, Cream text, `box-shadow: var(--shadow-hard)` tactile edge); `.btn--secondary` (paper bg, 2px Ink border, hard shadow); `.btn--ghost` (transparent, underlined label); `.btn--danger` (must be visually distinct on both cream and ink-night backgrounds, even if unused on this page).
* **Hover:** `transform: scale(1.03)` over `var(--transition-fast)` with `--ease-bounce`, plus brightness/shadow lift; `cursor: pointer`.
* **Focus:** `:focus-visible` → `outline: 2px solid var(--secondary); outline-offset: 2px;` (distinct in both modes).
* **Active/Pressed:** `transform: scale(0.97) translateY(2px)` + hard-shadow compression — the mandated bouncy click via `--ease-bounce`.
* **Loading (`.is-loading`):** `aria-busy="true"`, `pointer-events: none`, blocks double submits; label swaps to a spinning `progress_activity` icon; fixed `min-width` so dimensions never shift.
* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` — no hover/active transforms.
* **Success/Error (`.is-success`, `.is-error`):** temporary ~1.5s feedback — border/bg tint via `--border-success` / `--border-error` plus `check_circle` / `error` icon and a text label. Never color alone.

**2.2 Cards (`.card`)**
* **Default:** `--bg-secondary` paper, 2px `--border-default`, `--radius-md`, `--shadow-sm`, flex column, `align-items: center`, centered text, `--spacing-gap` internal rhythm.
* **Hover:** `transform: translateY(-2px) scale(1.03)`, elevation to `--shadow-md`, `var(--transition-fast)`.
* **Focus-within:** border shifts to `--primary` when any child link/button receives focus.
* **Skeleton (`.card--skeleton`):** CSS shimmer keyframes reserving the exact card footprint — zero layout jump.
* **Empty state (`.card--empty`):** structured fallback with a Material Symbol and one clear guidance line.
* **Featured (`.card--featured`):** `--ribbon` band across the top edge, `--shadow-md`, badge chip "★ MOST POPULAR", slight desktop emphasis.

**2.3 Forms & Inputs (`.input-group`)**
* **Structure:** flex column wrapping `<label>` (Condensed 700 uppercase), `<input type="email">`, and a dedicated `.input-group__error` container (`aria-live="polite"`, reserved min-height to prevent jumps).
* **States — all styled:** empty (2px `--border-default`, paper bg); focused (`:focus-within` border `--primary` + `box-shadow: 0 0 0 3px rgba(229,57,42,0.25)` ring); filled; valid `.is-valid` (`--border-success` + green `check_circle`); invalid `.is-invalid` (`--border-error`, `error` icon, `--text-error` message, `aria-invalid="true"`); disabled (0.5 opacity, not-allowed); read-only (dashed border).
* Every state communicates via icon and/or text — never color alone.

**2.4 FAQ Accordion, Toast, Modal**
* **FAQ accordion:** native `<details class="faq-item">` + `<summary class="faq-item__trigger">` so content works with JS disabled; `expand_more` icon rotating 180° on `[open]`; animate height via `grid-template-rows: 0fr → 1fr` over `var(--transition-normal)` where supported; summary is a 44px target with visible focus.
* **Toast (`.toast`):** fixed, bottom-centered, `z-index: var(--z-toast)`, `role="status" aria-live="polite"`, icon + message + `close` icon button with `aria-label`; auto-dismiss after 4s; success/error variants.
* **Modal:** not required for this page. If any dialog is added, it must include: backdrop overlay, centered flex container, `role="dialog" aria-modal="true" aria-labelledby`, Google-icon close button, focus trap with focus restoration, Esc + overlay-click closing, `--z-modal`, and animated opening/open/loading/success/closing states via CSS transitions.

**2.5 Theme Components (Sakura Chroma signatures)**
* **Hero cassette object (`.cassette`):** pure CSS, decorative (`aria-hidden="true"`, `role="presentation"`), no images/SVGs. Ink-bordered rounded shell (`--radius-lg`, aspect-ratio ≈ 1.6/1, `--bg-secondary`), two circular spool hubs with 2px Ink borders and cream centers, tape-window strip, label area carrying a mini `--ribbon` stripe band, four corner "screw" dots via pseudo-elements. Scales fluidly; on hover: `scale(1.03)` with a playful ~2° tilt, 200ms.
* **Rainbow ribbons (`.ribbon`):** full-bleed dividers (`height: 10–14px; background: var(--ribbon);`) placed after the hero and above the footer; a 6px mini-ribbon accents featured cards and the Final CTA frame.
* **JIS spec blocks (`.spec-list`):** rows of `check_box` Material Symbols in green + Condensed 700 uppercase spec text (e.g., "JIS C-6432 TYPE-I • 60 MIN • SHIBUYA GREEN"); left-aligned flex rows — the one commented exception to the centering default.
* **Eyebrow lockups (`.eyebrow`):** "★ TEXT ★" chips, Condensed 700, letter-spacing 0.12em, pink on cream / brightened pink in dark.
* **Condensed display lockups:** uppercase, tight tracking, oversized numerals for prices and step numbers; optionally one hero word in outlined style via `-webkit-text-stroke` (transparent fill) — must retain ≥3:1 contrast in both modes.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing throughout; max container width 1200px; stacked layouts under 768px; zero horizontal scroll.
* **Smooth animations:** every state change transitions (`--transition-fast` for hover/click, `--transition-normal` for panels/sections). Under `@media (prefers-reduced-motion: reduce)`: remove scale, tilt, shimmer, spin, and smooth-scroll; leave instant opacity changes only. Add `scroll-behavior: smooth` with the reduced-motion guard; hero ghost CTA smooth-scrolls to its anchor.
* **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `main`, `section[aria-labelledby]`, `footer`); exactly one `<h1>` (hero) with no skipped heading levels; skip-to-content link; full keyboard operability with visible focus on every control in a logical DOM order; `aria-live` regions for form errors, toasts, and loading; star ratings rendered as an icon group with `role="img" aria-label="Rated 5 of 5 stars"` and `aria-hidden` stars; state never conveyed by color alone; AA contrast verified in both light and dark.
* **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible change (scale, shadow, icon, toast, ring).
* **Destructive actions:** `.btn--danger` must remain clearly distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `<script src="script.js" defer></script>` before `</body>` — no other inline scripts and no inline event handlers.
* **Naming:** BEM exclusively, across all three files.
* **Copy:** write all user-facing copy yourself in the catalogue voice defined above — English only. No lorem ipsum. Footer demo links may use `href="#"` but must be real, focusable anchors.
* **Assets:** no external resources beyond Google Fonts and Material Symbols; every visual is CSS + icons. No `<img>` files, no inline SVGs.
* **JS scope (script.js only):** (1) theme toggle with localStorage + `prefers-color-scheme` fallback + `aria-pressed` sync; (2) newsletter validation → loading → success/error + toast; (3) current-year injection; (4) optional FAQ smooth-height enhancement. Nothing else. The page must remain fully readable with JS disabled.
* **Definition of done (self-check before output):** zero `style=` attributes; both themes pass AA and the toggle persists across reloads; all button states styled (hover/focus/active/loading/disabled/success/error); a complete keyboard-only pass works top to bottom; no horizontal scroll at any width; reduced-motion honored; one `<h1>`; semantic landmarks; `aria-live` wired; complete real copy — no placeholders, no TODOs.

---

## 5. PAGE SPECIFICATION — SECTION-BY-SECTION BUILD

**5.1 Top Bar (slim):** skip link; brand lockup "SAKURA CHROMA ★" (Condensed 800); theme toggle per §1.3. No full navigation menu — not requested.

**5.2 Hero:** cream striped background; eyebrow "★ LIMITED 1984 REISSUE ★"; `<h1>` in Big Shoulders Display (e.g., "PLAY IT IN FULL COLOR."); one-sentence lede in body font; CTA pair — `.btn--primary` "ORDER THE SET" → `#pricing`, `.btn--ghost` "READ THE SPEC" → `#features`; the `.cassette` object beside the copy (stacked below on mobile); a spec-chip row ("TYPE-I CHROME • 60 MIN • SIX SHELLS"); exit with a full-bleed `.ribbon` divider.

**5.3 Features (#features):** section head (eyebrow + Condensed 800 `<h2>` + lede); three `.card`s — CHROME PLUS FORMULA, RAINBOW SHELLS, ANTI-JAM MECHANISM — each with a Material icon in a bordered badge, `<h3>`, 1–2 sentence copy, and a `.spec-list` of 2–3 JIS checkbox rows.

**5.4 How It Works:** three numbered step cards — 01 PICK YOUR SHELL / 02 DUB YOUR MIX / 03 PLAY IT LOUD — oversized Condensed numerals cycling palette accents (red → pink → orange), dashed flex connector on desktop, stacked column on mobile.

**5.5 Testimonials:** three quote cards: star icon groups (two 5-of-5, one 4-of-5), short catalogue-voice quotes, name + role chip, and a `verified` "VERIFIED BUYER" tag.

**5.6 Pricing (#pricing):** three `.card` tiers — SOLO SHELL $12 / TWIN PACK $22 (`.card--featured`, "★ MOST POPULAR") / FULL SET $48 ("★ BEST VALUE"); each with an oversized Condensed price lockup, a `.spec-list` checklist, and a per-card CTA (`.btn--primary` on featured, `.btn--secondary` elsewhere).

**5.7 FAQ:** five `<details>` items in catalogue voice — deck compatibility, tape formulation, shell colorways, shipping, returns/warranty.

**5.8 Final CTA:** inverted ink panel (light mode: Ink bg + Cream text; dark mode: paper panel — contrast-paired both ways) framed by a mini-ribbon; Condensed 800 headline ("YOUR MIX DESERVES COLOR."); email capture per §2.3 with `.btn--primary` submit that runs loading → success toast + `.is-success`, or inline error + `.is-error` + toast, all announced via `aria-live`.

**5.9 Footer with secondary links:** mini `.ribbon` top edge; brand lockup + one-line tagline; three secondary link columns (SHOP / SUPPORT / COMPANY) as focusable anchors; icon-only social buttons (`alternate_email`, `public`, `share`) with `aria-label`s; fine-print row in `--text-strong` microtype with auto-injected © year and a playful kawaii disclaimer line.