Soft Maximalism demo
Soft Maximalism

A soft maximalist style blending dense layered visuals, bold colors, and playful chaotic layouts with a friendly, approachable finish for young brands and creative campaigns.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 7.4 KB · 998 words
# System Prompt: Build a "Soft Maximalism" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Deliver only `index.html`, `style.css`, and `script.js` — no inline CSS, no inline `<script>` blocks beyond a single deferred entry-point reference.

**Theme:** Soft Maximalism — Controlled Chaos, Bold Typography, Scroll-Reactive, Layered Animation (2025–2026 Gen-Z Energy).
**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden in HTML.
* All design properties, layout rules, and states are targeted via class selectors (one consistent convention — BEM or a fixed utility set, never mixed).
* HTML stays semantic and clean; changing the theme must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` and theme classes:
* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Base palette:** Base Black `#0A0A0A`, Off-White `#FAFAFA`, Warm Gray `#2D2D2D`.
* **Pop accents (one disruptive pop per section):** Pop Magenta `#FF2D6F`, Pop Yellow `#FFE600`, Electric Blue `#3D5AFE`, Lime Green `#76FF03`. Assign each section exactly one pop color used boldly (background block, oversized word, or CTA) against a controlled base — never all pops in one section.
* **Contrast pairing:** every light background pairs with dark text, every dark background with light text — enforced in both themes. Light mode must not default to pure white; use `#FAFAFA` / `#fefefe` where near-white is needed.
* **Radius, shadows, spacing, transitions:** `--radius-sm/md/lg`, `--shadow-sm/md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component conflicts.

**1.3 Mandatory Dark Mode**
* Define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class on `<html>`/`<body>`.
* Theme toggle in the header: visible button, correct `aria-pressed`/`aria-label`, persists via `localStorage`, falls back to `prefers-color-scheme` on first visit. No HTML restructuring needed to switch.
* All four pop colors must retain sufficient contrast in both modes (adjust token values per theme if needed).

**1.4 Flexbox Layout & Mobile-First**
* All layout containers use Flexbox and default to `align-items: center` unless an exception is explicitly justified in a CSS comment.
* Mobile-first and fully responsive: rows collapse to columns on small viewports, `overflow-x: hidden` globally, no horizontal scrolling at any breakpoint.

**1.5 Framework**
* Use Tailwind CSS (CDN or build) or clean custom CSS via `@layer`/`@apply`. All utilities must map back to the CSS variables above or generic reusable classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Google Fonts via `<link>`/`@import` — a bold display face (e.g., Archivo Black, Anton, or Space Grotesk 800/900) for headlines bound to `--font-display`, plus a readable body face (Inter or Roboto) bound to `--font-base`.
* Icons: Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT SPECIFICATIONS

**2.1 Buttons**
* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.
* Hover: brightness/shadow shift + `cursor: pointer`; bold maximalist hover allowed (e.g., `transform: scale(1.05) rotate(-1deg)`).
* Focus: distinct visible focus ring using CSS variables for keyboard navigation.
* Active: `transform: scale(0.97)`.
* Loading: disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without changing button dimensions.
* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* Success/Error: temporary feedback states driven by `--text-success` / `--text-error`.
* `.btn-danger` / destructive actions visually distinct in both themes.

**2.2 Cards (Features, Pricing, Testimonials)**
* Default: flexible Flexbox layout, `--bg-secondary`, subtle borders, elevation via `--shadow-*`.
* Hover: `transform: translateY(-2px)` or dramatic scale/rotate consistent with the theme.
* `:focus-within`: highlighted border when a child link/button gains focus.
* Loading: skeleton shimmer animation defined in CSS (no layout jumps).
* Empty state: Google Icon + clear guidance text fallback.

**2.3 Forms (Final CTA email capture, FAQ search if present)**
* States: empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.
* Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live="polite"`.

**2.4 FAQ Accordion**
* Semantic `<details>`/`<summary>` or ARIA-compliant custom disclosure; fully keyboard operable; animated open/close via CSS transitions (400–600ms).

---

## 3. CORE UX, A11Y & SOFT-MAXIMALIST MOTION RULES

* **Oversized typography:** Hero and section headlines use `font-size: clamp(3rem, 10vw, 8rem); font-weight: 800–900;` filling up to ~80% of viewport width, breaking traditional margins (negative margins / full-bleed allowed) while remaining readable.
* **Scroll-reactive layering:** Use `IntersectionObserver` and/or CSS scroll-driven animations (`animation-timeline: scroll()`) for reveal, parallax, and rotate/scale-on-scroll effects. Layered elements may overlap using `mix-blend-mode: difference/exclusion` for text-over-image/text-over-text effects.
* **Sticky layering:** Use `position: sticky` for layered section transitions where appropriate.
* **Transitions:** `transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1)` (400–600ms range) with dramatic easing; `scroll-behavior: smooth` for anchor navigation.
* **Reduced motion:** All animations respect `@media (prefers-reduced-motion: reduce)` — disable parallax, blend-mode flicker, and transforms; keep content fully accessible.
* **Accessibility:** Sufficient contrast in both Light and Dark modes; never rely on color alone to communicate state; semantic HTML5; correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, FAQ toggles, loading states).
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Usability intact despite chaos:** clear CTAs, readable body text (`--font-base`, ≥16px), logical section flow, skip-to-content link.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js` (deferred entry point only). No inline styles, no inline scripts.
* **Naming:** one consistent convention across the whole deliverable.
* **Copy:** Write all user-facing copy in **English** — energetic, youth-focused, Gen-Z tone matching the theme (no lorem ipsum; real labels, headlines, and microcopy for every section listed above).
* **Content completeness:** All eight sections fully built with real content, correct heading hierarchy, and working anchor navigation from the header.
* Output the final code immediately, complete on the first attempt.