Formicapunk demo
Formicapunk

A neon-drenched 1980s corporate and consumer futurism aesthetic that blends retrofuturistic optimism with speculative fiction and cyberpunk undertones.
Category: Dark Tech & Cyber
Era: 1980s Retro
Prompt: 10.2 KB · 1387 words
# System Prompt: Build a Formicapunk Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Formicapunk** — 1980s corporate futurism, Formica surfaces, neon Miami-Vice pastels + chrome, geometric 80s corporate style, grid patterns, glass towers, optimistic 80s consumer future, retrofuturism.

**Sections required:** 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 written in **English**.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* All styling must live in a dedicated `style.css` file. **The `style="..."` attribute is forbidden in HTML.**
* All design properties, layout rules, and states must be targeted via class or ID selectors only.
* HTML must remain clean, semantic, and styling-agnostic — changing the site's look must require editing only `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store all visual tokens in `:root` (and theme classes) using CSS variables. Use the Formicapunk token set as the **dark-mode default**:

* **Colors:** `--color-bg: #170f2e`, `--color-surface: #241a44`, `--color-surface-strong: #2e2158`, `--color-border: #5b4b96`, `--color-text: #f4eefe`, `--color-text-muted: #b6a7dd`, `--color-primary: #ff5fa2`, `--color-accent: #2fe6d8`, `--color-chrome: #c9c3e0`. Additionally define `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Signature gradients (mandatory):** `--bg-image: linear-gradient(180deg, #170f2e 0%, #291a4e 55%, #170f2e 100%)`, `--grid-lines` (fine repeating teal/pink grid lines at 40px intervals), `--neon-edge: linear-gradient(90deg, var(--color-primary), var(--color-accent))`. Apply `--grid-lines` behind the page background and raised surfaces, and `--neon-edge` as a top border/underline on nav, cards, and buttons — this is the theme's signature move.
* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa, in **both** light and dark themes.
* **Light Mode:** Must also be defined (see 1.3). Do not default to pure white; use a warm Formica-inspired light background (e.g., a pale Miami pastel like `#f4eefe` or `#fef6fa`) paired with dark text (`#170f2e`-family). Where a near-white is needed, use `#fefefe`, never `#ffffff`.
* **Radius & Shadows:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px`, `--radius-pill: 999px`; `--shadow-sm`, `--shadow-md`, `--shadow-lg` using the neon glow shadows from the token spec (pink/cyan glow + dark drop shadow).
* **Spacing, Transitions & Easing:** `--space-1` through `--space-24` scale, `--transition-fast`, `--transition-normal`, `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`.
* **Elevation/Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts.

### 1.3 Mandatory Dark Mode Support
The source spec declares no explicit modes and requires validation in both light and dark before publishing — therefore **both themes must be fully implemented**:

* **Dark mode is the default theme** (the Formicapunk palette above is inherently dark/neon).
* **Light mode** must be defined as a complete token set: Formica-style warm pastel surfaces, dark text, neon pink/teal accents adjusted for contrast on light backgrounds. All glows and shadows must be re-tuned for light mode so they remain visible.
* **Implementation:** Provide tokens under both `@media (prefers-color-scheme: light)` and a `.light` class selector (mirroring `.dark`), so switching requires no HTML restructuring.
* **Persistence:** Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle control in the nav with correct `aria-pressed` and `aria-label` states, using a Google Material Symbol icon (e.g., `dark_mode` / `light_mode`).

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with Flexbox. **Every flex container must default to `align-items: center`** unless there is an explicitly justified exception (document it in a CSS comment).
* Mobile-first responsive: card grids, pricing tiers, and step rows must collapse from multi-column rows to single columns on small viewports. No horizontal scrolling at any breakpoint.

### 1.5 Framework Default
Use Tailwind CSS or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives. All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`). Use the base component classes from the Formicapunk spec (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) as the foundation and extend them.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Fonts:** The spec's `--font-sans`/`--font-display` reference Eurostile/Bank Gothic, which are not on Google Fonts. Substitute with Google Fonts equivalents that preserve the condensed 80s corporate-futurist feel: e.g., **Michroma** or **Orbitron** for display headings, **Rajdhani** or **Chakra Petch** for body/UI text, and **Space Mono** for mono accents. Load via `<link>` tags and bind to `--font-sans`, `--font-display`, `--font-mono`. Use uppercase display headings with tight letter-spacing for the 80s corporate look.
* **Icons:** Use Google Material Symbols only. **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons
Style all states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44x44px. Primary variant uses the `--neon-edge` gradient with dark text; secondary variant uses `--color-surface-strong` with a border.
* **Hover:** Neon glow shift (`box-shadow: var(--shadow-md)`) with `cursor: pointer` and `transform: translateY(-1px)`.
* **Focus:** Distinct focus ring via `outline: 2px solid var(--color-accent); outline-offset: 2px;` for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)` / `translateY(0)` click feedback.
* **Loading:** Disables interactions, prevents double-clicks, renders an animated CSS spinner or rotating Google Material Symbol without distorting button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error`.
* **Danger:** `.btn-danger` must be visually distinct in both light and dark themes.

### 2.2 Cards (Features, Pricing, Testimonials)
* **Default:** Flexible Flexbox layout, `--color-surface` background, `--neon-edge` top border via `border-image`, `--shadow-md`, `--radius-lg`.
* **Hover:** Elevation/glow shift plus subtle `transform: translateY(-2px)`.
* **Focus-within:** Card borders highlight 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 Material Symbol icon and clear guidance text.
* **Pricing tiers:** The recommended/middle tier must be visually elevated (stronger neon glow, a `.badge` label like "MOST POPULAR") without relying on color alone.

### 2.3 Forms & Inputs (Final CTA / newsletter signup)
* **States:** Empty, Focused (accent outline ring), Filled, Valid (success border + icon), Invalid (error border, error text, error icon), Disabled, Read-only.
* **Structure:** Flex container wrapping a label, input field (`.input`), and a dedicated error feedback container. Errors must be announced via an `aria-live="polite"` region.

### 2.4 FAQ Accordion
* Use semantic `<details>`/`<summary>` or ARIA-correct custom accordion with keyboard operability (Enter/Space to toggle, arrow-key navigation if custom).
* Animated open/close via CSS transitions; chevron Google Material Symbol rotates on open.
* Never rely on color alone to indicate expanded state.

### 2.5 Modal / Popup (if any interactive element requires one)
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX:** Centered flex container (`align-items: center`), backdrop overlay, Google Material Symbol close button, keyboard focus trapping, close via `Esc` or overlay click.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing, no horizontal overflow, mobile-first breakpoints.
* **Smooth Animations:** CSS transitions on all state changes using `--transition-normal` and `--ease-standard`; respect `prefers-reduced-motion` by disabling transforms and animations.
* **Accessibility (a11y):** Sufficient contrast in both light and dark modes (validate both before publishing). Never rely solely on color to communicate state. Semantic HTML5 elements (`header`, `nav`, `main`, `section`, `footer`), correct ARIA roles/labels on custom widgets, logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, toasts, loading states).
* **Mandatory Visual Feedback:** Every click, hover, or submission must trigger a visible state change (neon glow, transform, or border shift).
* **Theme Mood:** Evoke optimistic 80s consumer futurism — perspective grid backgrounds, chrome text accents (`--color-chrome`), neon glows, geometric section dividers — while keeping all text legible and all interactions modern and accessible.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference. No inline CSS.
* **Naming:** One consistent class-naming convention (BEM, matching the spec's `.btn--primary` pattern) across the entire deliverable — never mix conventions.
* **Content:** Write real, themed English copy for every section (hero headline, feature descriptions, step titles, testimonial quotes with names/roles, pricing tier names and feature lists, FAQ questions and answers, CTA copy, footer link labels). Do not submit lorem-ipsum placeholders — the content was left to you, so author it in the Formicapunk voice: confident, optimistic, corporate-futurist.
* **Footer:** Include secondary links (About, Privacy, Terms, Contact, social links as icon buttons) with proper `aria-label`s.
* Generate the final code immediately, complete and functional on the first attempt.