Maximalism demo
Maximalism

An exuberant 'more is more' aesthetic that reacts against flat minimalism through dense layering, clashing colors, rich textures, and organic ornamental detail.
Category: Art & Illustration
Era: 2020s Modern
Prompt: 14.1 KB · 1888 words
# System Prompt — Maximalism Landing Page (Art & Illustration)

**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in a single attempt, generating the final code immediately. Every rule below is mandatory; where a rule conflicts with your default habits, the rule wins.

---

## 0. PROJECT BRIEF & CREATIVE DIRECTION

**Theme — Maximalism ("more is more"):** Dense layering, clashing color and pattern, big expressive type, many focal points, ornament, texture, collage, saturation, bold and joyful visual overload — built on a clean, minimal-organic structural backbone (semantic, uncluttered markup beneath the visual noise). Era: 2018–present. Reference mood: Gucci editorial; 2020s portfolio/agency sites.

**Category & Content Direction:** Art & Illustration. Invent a fictional brand (e.g., an illustration studio / art-print shop offering prints, commissions, and workshops) with a fitting name, and write all user-facing copy in English. Real, themed copy everywhere — lorem ipsum is forbidden.

**Required sections, in this order:**
1. **Header/Nav** — sticky, brand wordmark in display type, anchor links to all sections, theme toggle, accessible mobile menu.
2. **Hero** — layered CSS-only collage backdrop (decorative layers marked `aria-hidden="true"`), oversized display headline with fluid `clamp()` sizing up to `--text-5xl`, subheadline, badge, primary + secondary CTA.
3. **Features** — exactly 3 cards, each with a Material icon, title, and description; rotate the clashing accents (`--color-primary`, `--color-accent`, `--color-lime`, `--color-cyan`, `--color-orange`) across the cards.
4. **How It Works** — exactly 3 steps with oversized numerals (clash-gradient text via `background-clip: text`), title, and text; horizontal on desktop, vertical stack on mobile.
5. **Testimonials** — 3 quote cards with initials avatars (clash-gradient circles), names, roles, and star ratings using Material icons with accessible labels.
6. **Pricing** — 3 tiers; the middle tier is featured ("Most Popular" badge, accent border, `--shadow-pop`, visual elevation); each tier lists features with check icons and a CTA button.
7. **FAQ** — accessible accordion with 5 Q&As, CSS-animated open/close.
8. **Final CTA** — high-energy band with `--clash` gradient/pattern background, big display headline, and a newsletter email form.
9. **Footer** — secondary link groups (e.g., Explore, Company, Support, Follow), copyright line, and link hover/focus states.

**Palette (this is the DARK theme and the default):** bg `#14002e`, surface `#2a0a52`, text `#fff6d5`, text-muted `#f2c9ff`, primary `#ff007a`, accent `#ffd400`, lime `#aaff00`, cyan `#00e5ff`, orange `#ff6a00`.

**Signature visual moves:** layered collage backgrounds, clashing gradients, hard offset shadows (`--shadow-pop`), glows (`--shadow-glow`), blur, and repeating patterns — all constructed in pure CSS (gradients, blend modes, pseudo-elements, box-shadows). No external image files; no inline SVG.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in `index.html`, as are `<style>` blocks.
* All design properties, layout rules, and states are applied exclusively via class/ID selectors.
* HTML remains semantic and style-agnostic: retheming the site must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
* Adopt this Maximalism token block in `:root`:

```css
:root {
  /* color (dark theme / default) */
  --color-bg: #14002e; --color-surface: #2a0a52;
  --color-text: #fff6d5; --color-text-muted: #f2c9ff;
  --color-primary: #ff007a; --color-accent: #ffd400;
  --color-lime: #aaff00; --color-cyan: #00e5ff; --color-orange: #ff6a00;
  /* radius */
  --radius-sm: 6px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;
  /* shadow */
  --shadow-pop: 8px 8px 0 #ffd400, 16px 16px 0 #ff007a;
  --shadow-glow: 0 0 24px rgba(255,0,122,0.6);
  /* font */
  --font-sans: 'Fraunces','Poppins',system-ui,sans-serif;
  --font-display: 'Rubik Mono One','Fraunces',serif;
  --font-mono: 'Space Mono',monospace;
  /* text scale */
  --text-xs: .8rem; --text-sm: 1rem; --text-base: 1.15rem; --text-lg: 1.5rem;
  --text-xl: 2.1rem; --text-2xl: 3rem; --text-3xl: 4.2rem; --text-4xl: 6rem; --text-5xl: 8.5rem;
  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  /* ease + signature gradient */
  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
  --clash: linear-gradient(135deg, #ff007a, #ffd400, #00e5ff);
}
```

* Retain these token names and **extend** the block with the mandatory semantic tokens (adjust example values only to preserve AA contrast):
  * **Aliases:** `--bg-primary: var(--color-bg)`, `--bg-secondary: var(--color-surface)`, `--text-primary: var(--color-text)`, `--text-secondary: var(--color-text-muted)`, `--primary: var(--color-primary)`, `--secondary: var(--color-accent)`, `--font-base: var(--font-sans)`, `--spacing-gap: var(--space-6)`.
  * **Feedback (defined per theme):** `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success` — e.g., dark theme success `#aaff00` / error `#ff4d6d`; light theme uses darker AA-compliant equivalents.
  * **Motion:** `--transition-fast: 120ms var(--ease-standard)`, `--transition-normal: 260ms var(--ease-standard)`.
  * **Depth:** `--shadow-sm`, `--shadow-md` (subtle variants alongside the signature `--shadow-pop` / `--shadow-glow`).
  * **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
* **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark text, dark backgrounds with light text. Dark theme: `#14002e`/`#2a0a52` ↔ `#fff6d5`/`#f2c9ff`. Light theme: cream `#fff6d5` background ↔ `#14002e` text.
* Saturated accents (`#ffd400`, `#aaff00`, `#00e5ff`) are reserved for large display type, ornament, borders, shadows, or as backgrounds carrying `#111` text (as in `.btn--primary` / `.badge`) — never for small body text on light backgrounds.
* The light-mode background must never be pure white; the palette cream `#fff6d5` is the light background. If a near-white is required, use `#fefefe`, not `#ffffff`.

**1.3 Mandatory Dark Mode Support**
* The provided palette is the dark theme and lives in `:root` as the default.
* Define the light theme by overriding **only the color tokens** under an `html.light` class — theme switching must never require HTML restructuring.
* First visit: respect `prefers-color-scheme` (OS light → apply `.light`; otherwise stay dark). Returning visitors: restore their choice from `localStorage`.
* Provide a visible toggle in the header: Material icon (`dark_mode` / `light_mode`), correct `aria-pressed`, and an `aria-label` reflecting the action ("Switch to light theme" / "Switch to dark theme").
* Before considering the build complete, validate legibility and contrast in **both** themes (the source spec declared no modes — both must be explicitly verified).

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structure with Flexbox.
* Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `.card__body` uses `flex-start` for reading flow).
* Mobile-first: base styles target small screens and enhance upward via `min-width` media queries. Multi-column rows (features, steps, testimonials, pricing, footer groups) stack into single columns below ~768px.
* No horizontal scrolling at any viewport from 320px up — achieve this with fluid `clamp()` type, `flex-wrap`, and `max-width: 100%`, not overflow hacks.

**1.5 CSS Approach — Token-Driven Custom CSS**
* Use clean, token-driven custom CSS (the provided spec is a custom-CSS system; this counts as the requested framework). Do not add Tailwind or any other CSS framework.
* Build on generic, reusable component classes — `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge` — and extend them with BEM modifiers. Never mix naming conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load Google Fonts via `<link>`: **Fraunces** (including italic and optical sizing), **Rubik Mono One**, and **Space Mono**, bound to `--font-sans`, `--font-display`, `--font-mono` (and `--font-base`).
* Icons: **Google Material Symbols (Rounded)**, loaded from Google Fonts and used as `<span class="material-symbols-rounded" aria-hidden="true">icon_name</span>`. Inline SVGs, local icon files, and emoji-as-icons are forbidden.
* Big expressive type is a theme pillar: display headlines use `--font-display` with fluid `clamp()` sizing; body copy uses `--font-sans` at `--text-base` minimum.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** (all states as CSS classes)
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; token-wired padding, radius, and shadow.
* **Hover:** `cursor: pointer` plus a visible maximalist shift — e.g., `--shadow-pop` offset grows with `translateY(-2px)`, or a brightness change.
* **Focus:** distinct `:focus-visible` ring (outline via `--color-accent` with offset), clearly visible in both themes.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** `.is-loading` — disables interaction, prevents double-clicks/double-submits, and renders a CSS spinner or rotating Material icon without changing button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no transforms.
* **Success/Error:** temporary `.is-success` / `.is-error` feedback tinted by `--text-success` / `--text-error`, always paired with an icon or text — never color alone.
* Define `.btn--danger` (visually distinct in both themes) even if the page does not use it.

**2.2 Card Component Requirements**
* **Default:** flexible Flexbox layout, `--bg-secondary` surface, subtle `--border-default` border, elevation via shadow tokens.
* **Hover:** elevation shift and/or `transform: translateY(-2px)`; a playful `rotate(-1deg)` is permitted for maximalism.
* **Focus-within:** card border highlights in an accent color when a child link/button receives focus.
* **Loading (Skeleton):** define a `.skeleton` shimmer animation utility that preserves layout dimensions.
* **Empty State:** define an `.empty-state` pattern (Material icon + guidance text) available for any dynamically loaded region.

**2.3 Form & Input Requirements** (newsletter form in the Final CTA)
* **Structure:** a flex `.input-group` wrapping a `<label>`, an `<input class="input">`, and a dedicated error-feedback container.
* **States:** empty, focused (outline ring per `.input:focus`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, error text, error icon, specific message), disabled, read-only.
* Validate the email in `script.js` on submit and blur; render errors in an `aria-live="polite"` container; on success show inline success feedback plus a toast, and briefly set the submit button to `.is-success`.

**2.4 Modal / Popup / Accordion Requirements**
* **FAQ accordion:** each question is a `<button>` with `aria-expanded` + `aria-controls`; answers animate via CSS transitions (e.g., the `grid-template-rows: 0fr → 1fr` technique); a `expand_more` icon rotates on open; fully keyboard operable.
* **Any dialog/lightbox** (e.g., artwork detail, if included) must be: `role="dialog"` + `aria-modal="true"`, a centered flex container (`align-items: center`) over a backdrop overlay, Material-icon close button, keyboard focus trap, closable via `Esc` and overlay click, with CSS-animated opening/open/closing states and loading/success/error states if async.
* **Toasts:** fixed position, `aria-live` region, layered above everything via `--z-toast`, auto-dismiss, animated in/out with a reduced-motion fallback.
* **Mobile nav menu:** disclosure panel toggled by an icon button (`aria-expanded`, `aria-controls`), closes on `Esc` and outside click, layered via `--z-dropdown`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing, breakpoints at ~480/768/1024px, zero horizontal overflow from 320px up.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; scroll-reveal entrance animations (IntersectionObserver) are optional progressive enhancement — all content must remain visible and usable with JavaScript disabled; respect `prefers-reduced-motion` (disable transforms, shimmer, parallax, and smooth scrolling).
* **Accessibility (a11y):** WCAG AA contrast in both light and dark themes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); a skip-to-content link; correct ARIA on the accordion, theme toggle, mobile menu, and toasts; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading states.
* **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change — nav links, buttons, cards, accordion items, pricing CTAs, and footer links included.
* **Destructive actions:** any destructive control uses `.btn--danger` and is visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer></script>` reference; no inline `<script>` blocks, no inline styles, no `<style>` blocks.
* **Naming convention:** BEM only (`block__element--modifier`), consistent with the provided base classes (`.btn--primary`, `.card`, `.nav`, `.input`, `.badge`). Never mix conventions.
* **Copy:** all user-facing text in English, written for the fictional Art & Illustration brand — no lorem ipsum and no placeholder-only sections.
* **Dependencies:** no JS libraries, no build step, no external images; the only external resources are Google Fonts and Material Symbols.
* **Definition of done:** the page runs correctly on first open; both themes are validated for contrast; a keyboard-only pass completes (theme toggle, nav, accordion, form); no horizontal scroll at any width; zero inline CSS; every component state in Section 2 is implemented.