Airbrush / 70s-80s Illustration demo
Airbrush / 70s-80s Illustration

A nostalgic style evoking the golden age of airbrush illustration, featuring smooth gradient shading, chrome textures, and sci-fi or van art aesthetics from the 70s and 80s.
Category: Retro & Pop
Era: 1970s-1980s Retro
Prompt: 15.2 KB · 2072 words
# Build Prompt — Coding AI Deliverable: "Airbrush / 70s-80s Illustration" Landing Page

**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single first attempt. Theme: **Airbrush / 70s–1980s Illustration** — the golden age of airbrushed sci-fi paperback covers, van murals, and retro album/poster art. Required sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. All user-facing copy must be authored in **English**.

**Theme Direction (enforce this identity everywhere):**
- Keywords: airbrushed, van art, smooth gradient shading and soft glows, chrome, lasers, fantasy sci-fi scenes, highly polished rendered surfaces, retro album/poster illustration.
- Palette (dark-native, from the source spec): background `#1a0f2e`, surface `#2b1b3d`, surface-strong `#3d2554`, border `#6b4a8a`, text `#fdf3e7`, text-muted `rgba(253,243,231,0.72)`, primary `#ff6b35` (sunset orange), accent `#ff2e88` (hot pink), chrome `#cbd5e1` (polished silver).
- **Signature move:** a soft radial "airbrushed" highlight — a glowing sunset arc feathered to transparency — painted over every raised surface to simulate polished, rendered sci-fi shading. It must repeat consistently on the nav, every card, and primary buttons (use the provided `--airbrush-glow` token).
- Shadows are **colored glows** (orange/pink), never neutral grays.
- Light/Dark note (translated from source): *the source specification does not declare light/dark modes; the page must be validated in both light and dark before publishing.* Treat the deep-purple palette as the dark theme and design a full light adaptation (see 1.3).
- All decorative artwork must be pure CSS: layered radial gradients (airbrush sun/horizon arcs), laser gradient lines, starfield dots via gradients/box-shadows, chrome lettering via `background-clip: text`. No raster images, no external image assets, no inline SVG.

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- Keep all styling strictly inside `style.css`. **Forbidden:** any `style="..."` attribute in HTML.
- Target every design property, layout rule, and state via class or ID selectors only.
- HTML must remain clean, semantic, and styling-agnostic — a full retheme must be possible by editing CSS only.

**1.2 CSS Variables & Theme Tokens**
Define the mandated canonical token set in `:root`, seeded with the source-spec values:
- Colors: `--primary: #ff6b35`, `--secondary: #ff2e88`, `--bg-primary: #1a0f2e`, `--bg-secondary: #2b1b3d`, `--bg-elevated: #3d2554`, `--text-primary: #fdf3e7`, `--text-secondary: rgba(253,243,231,0.72)`, `--border-default: #6b4a8a`, `--chrome: #cbd5e1`.
- **Mandatory additions missing from the source spec** — you must define them with WCAG-compliant contrast: `--text-success`, `--text-error`, `--border-success`, `--border-error` (suggest luminous mint ~`#7ef0b0` and hot red ~`#ff5d73` for dark; deeper `#0e8f52` / `#c81e3f` for light). Verify ≥ 4.5:1 for text on the paired background in **both** themes.
- Keep the spec's supplementary tokens: `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 32px`, `--radius-pill: 999px`, `--shadow-sm/md/lg` (colored glow shadows), the full `--text-*` type scale, the `--space-*` scale, `--bg-image`, and `--airbrush-glow`.
- Define the mandated tokens the spec lacks: `--spacing-gap` (map to `--space-6`), `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.3, 0, 0.15, 1)`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.
- **Contrast pairing:** every dark background token pairs with a light text token, every light background token pairs with a dark text token — enforced in every theme, not just the default.

**1.3 Mandatory Dark Mode Support**
- Dark mode must always be defined. The provided deep-purple palette is the **dark theme (default)**; additionally design a full **light theme**.
- Light mode direction: warm cream backgrounds fitting the sunset/airbrush mood (e.g., `#fdf6ec` / `#f8ecdc`); never default to pure white — where a near-white is required, use `#fefefe` instead of `#ffffff`. Text flips to deep purple (≈ `#241533`); primaries stay orange/pink but are tuned for AA contrast on cream; airbrush gradients and glows are re-tuned (softer opacity, darker glows) for the light background.
- Implementation: light values in `:root`, dark overrides under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`, so switching requires zero HTML restructuring.
- Persistence: store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme` (if the OS expresses no preference, apply the dark-native theme). Provide a visible toggle in the nav using a Google Material Symbol icon, with correct `aria-pressed` state and `aria-label` ("Switch to dark theme" / "Switch to light theme").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (Tailwind flex utilities or equivalent custom classes).
- Every flex container must default to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment (e.g., `align-items: stretch` for equal-height pricing cards).
- Mobile-first: rows collapse to columns on small viewports; zero horizontal scrolling at any width.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS, or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives. The provided seed CSS is the foundation — integrate its values via Tailwind theme extension or `@layer components`.
- All utility classes must map back to CSS variables or reusable generic classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Text: load fonts from Google Fonts only, via `<link>` (with preconnect) or `@import`, bound to `--font-base`. **Exception clause:** the source spec requests 'Avenir Next', 'Century Gothic', and 'Eurostile', which are not Google Fonts — honor their character by loading Google equivalents (geometric sans for body, e.g., **Poppins** or **Questrial**; squared sci-fi display face for headings, e.g., **Chakra Petch** or **Michroma**) while keeping the original stacks as fallbacks: `--font-base: 'Poppins', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;` and `--font-display: 'Chakra Petch', 'Eurostile', 'Century Gothic', sans-serif;`.
- Icons: Google Material Symbols only (e.g., `rocket_launch`, `auto_awesome`, `bolt`, `flare`, `check_circle`, `star`, `arrow_forward`, `menu`, `close`). **Forbidden:** raw inline SVGs and local icon files.
- **Chrome lettering:** render the hero headline (and the featured pricing tier's accents) as polished chrome — a multi-stop silver gradient (`#f8fafc → #cbd5e1 → #94a3b8 → #e2e8f0`) with `background-clip: text` and a soft glow, plus a solid-color fallback for contrast; in light mode, use darker steel tones to preserve AA contrast.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component** (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger` if a destructive action exists)
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum touch target 44×44px, pill radius `--radius-pill`, display font.
- `.btn--primary`: the signature `--airbrush-glow` layered over the orange→pink gradient, borderless, dark text `#1a0f2e`, weight 800.
- Hover: brightness/shadow elevation shift with `translateY(-2px)`, `cursor: pointer`.
- Focus: distinct visible ring on `:focus-visible` using `--chrome` or `--secondary` (`outline` or `box-shadow`) for keyboard navigation.
- Active/pressed: `transform: scale(0.97)`.
- Loading: `[aria-busy="true"]` / `.is-loading` — disables interaction, prevents double-clicks, and renders a CSS spinner or rotating Google icon **without changing button dimensions**.
- Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- Success/Error: temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form submit).

**2.2 Card Component** (`.card` — used by Features, Testimonials, Pricing, FAQ panels)
- Default: flexbox layout, `--bg-secondary`/`--bg-elevated` surface, `1px solid var(--border-default)`, `--radius-lg`, colored glow `--shadow-md`, and the signature `--airbrush-glow` overlay.
- Hover: `translateY(-2px)` plus glow elevation shift (pointer-fine devices only).
- Focus-within: card border highlights when a child link/button receives focus.
- Loading (skeleton): shimmer animation defined in CSS to prevent layout jumps.
- Empty state: structured fallback with a Google Icon and clear guidance text.

**2.3 Form & Input Requirements** (Final CTA email capture)
- `.input` states: empty, focused (accent ring, e.g., `box-shadow: 0 0 0 3px rgba(255,46,136,0.3)`), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error icon, error message in `--text-error` — never color-only: pair icon + message), disabled, read-only.
- Structure: flex container wrapping a `<label for>`, the `<input>`, and a dedicated error-feedback `<p>` wired via `aria-describedby` and `aria-invalid`.
- Submit flow: loading → success, announced via an `aria-live="polite"` region.

**2.4 FAQ Accordion & Overlays**
- FAQ: accessible accordion — `<button aria-expanded aria-controls>` heading toggling a region panel; smooth CSS height/opacity transition; rotating chevron (Material Symbol); full keyboard operability; no mouse-only interaction.
- If any modal/popup is introduced, it must cover opening / open / loading / success-error / closing states (all CSS-animated), a centered flex container (`align-items: center`), backdrop overlay, Google-icon close button, keyboard focus trapping, Esc and overlay-click closing, and `--z-modal` / `--z-toast` stacking. If none is required, do not invent one.

## 3. CORE UX & MICRO-INTERACTION RULES

- Responsive by default: fluid `clamp()` typography, breakpoints, zero horizontal overflow.
- Smooth animations: `transition: var(--transition-normal) var(--ease-standard)` on all state changes; respect `prefers-reduced-motion` — disable transforms, starfield twinkle, and spinner motion (keep opacity-safe fades).
- Accessibility: AA contrast in **both light and dark**; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles/labels on the theme toggle, accordion, mobile menu, and pricing switch; logical DOM/focus order; full keyboard operability; `aria-live` regions for all dynamic feedback (form errors, pricing updates, toasts).
- Mandatory visual feedback: every click, hover, and submission triggers a visible state change.
- Destructive actions (if any, e.g., "Cancel plan"): `.btn-danger` visually distinct in both themes.
- Decorative section dividers: glowing 2px laser lines — `linear-gradient(90deg, var(--primary), var(--secondary))` with a soft glow — marked `aria-hidden="true"`.

## 4. DELIVERABLE & OUTPUT FORMAT

- Files: separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference.
- Naming: one consistent **BEM** convention throughout (`.card`, `.card__title`, `.btn--primary`, `.faq__item`, `.pricing__tier`). Never mix conventions.
- No unrequested placeholders: the user supplied no copy, so author original, on-theme English marketing copy for a fictional product in the retro sci-fi/chrome/laser spirit (e.g., a creative or design tool). **No lorem ipsum anywhere.** All labels, headings, and link text must be meaningful and internally consistent.
- Preserve this provenance comment in `style.css`: `Reference specification: references/00-flagship-implementation-specs/airbrush.md`.
- Global head requirements: `<html lang="en">`, viewport meta, `<meta name="color-scheme" content="light dark">`, unique `<title>` and meta description on theme, and a visually hidden skip-to-content link.

## 5. PAGE SECTION REQUIREMENTS

**5.1 Nav (persistent):** floating pill `.nav` with the `--airbrush-glow` surface; brand wordmark in the display font (chrome or gradient text); anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with a hover laser-underline effect; theme toggle (per 1.3); primary "Get Started" button. On mobile: hamburger (`menu` Material Symbol) opens a dropdown panel at `--z-dropdown`, fully keyboard operable with `aria-expanded`.

**5.2 Hero:** full-viewport; layered `--bg-image` plus CSS-only airbrush artwork — a setting sun as a radial-gradient arc, a horizon laser line, scattered starfield dots; a `.badge` kicker; a display headline in chrome lettering or primary→accent gradient text; subcopy in `--text-secondary`; two CTAs (`.btn--primary` with `rocket_launch` icon + `.btn--ghost` with `arrow_forward`); a scroll cue.

**5.3 Features (3 cards):** responsive grid (single column on mobile); each `.card` contains a gradient icon chip (Material Symbol), a title, and 2–3 lines of copy; hover lift and focus-within glow per 2.2.

**5.4 How It Works (3 steps):** numbered steps connected on desktop by a glowing gradient laser line that collapses to a vertical stack on mobile; each step has a chrome-gradient number badge, a heading, and copy; optional scroll-reveal fades that respect reduced motion.

**5.5 Testimonials:** 3 quote `.card`s; CSS gradient avatar circles with initials (no photos); italic quote, author name, role; a 5-star row using Material Symbol `star` with an `aria-label` on the group.

**5.6 Pricing (3 tiers):** middle tier featured — scaled up, chrome gradient border, `--airbrush-glow` surface, `.badge` "MOST POPULAR"; every tier: name, price, feature list with `check_circle` icons, CTA (featured uses `.btn--primary`). Include a monthly/yearly billing toggle: a segmented control with `aria-pressed` (or radiogroup) states, prices updating with `aria-live="polite"` and a CSS transition; verify the featured tier's contrast in **both light and dark** (explicit source requirement).

**5.7 FAQ:** 5–6 realistic Q&A accordion items about the fictional product, built per 2.4.

**5.8 Final CTA:** high-impact panel — `--airbrush-glow` over a primary→accent gradient or elevated surface with `--shadow-lg`; headline, supporting copy, and an email-capture form per 2.3 (label, input, `.btn--primary` submit). Success triggers the button's success state plus an inline `aria-live` confirmation; invalid input shows inline error feedback.

**5.9 Footer:** multi-column secondary links (Product, Company, Resources, Legal) with authored labels; social icons as Material Symbols with `aria-label`; brand wordmark; copyright line with a dynamically generated year via `script.js`.

## 6. FINAL VALIDATION CHECKLIST (before you submit)

- Zero inline styles; zero inline SVGs; zero lorem ipsum.
- Both light and dark themes render with AA contrast and correct toggle persistence (source spec explicitly requires validating light and dark before publishing).
- All flex containers use `align-items: center` unless a commented exception exists; no horizontal scroll at any width from 320px up.
- Every interactive element has visible default, hover, focus, active, loading, and disabled treatments.
- All mandated tokens (`--text-success`, `--text-error`, `--border-success`, `--border-error`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--z-dropdown`, `--z-modal`, `--z-toast`) are defined and used.