Studio demo
Studio

A high-voltage design studio aesthetic pairing a near-black canvas with one signature electric-yellow accent and bold Barlow typography for raw, credential-driven creative impact.
Category: Brutalism & Raw
Era: 2020s Modern
Prompt: 14.8 KB · 2044 words
# BUILD PROMPT — "STUDIO" HIGH-VOLTAGE DESIGN-STUDIO LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below in a single attempt — full files, no TODOs, no truncated output, no follow-up questions.

**Design Identity:** A 2020s electric design-studio site. Near-black canvas (`#1c1c1c`) with electric yellow (`#f5d200`) used as BOTH foreground type and accent. Barlow 900 uppercase display typography, loud high-contrast micro-interactions, glow/shadow accents on the dark canvas, and periodic reversals to a yellow-paper mode (`#f5d200` background, near-black type) for breathing sections.

---

### **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 the HTML.
* Target every visual property, layout rule, and state exclusively via class or ID selectors.
* Keep HTML semantic, clean, and style-agnostic: a full visual re-theme must be achievable by editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
* Define all visual tokens as CSS variables in `:root` (dark theme = default) and override them in a `.paper` theme class.
* Dark theme (default): `--primary: #f5d200`, `--secondary: #242422`, `--accent: #f5d200`, `--bg-primary: #1c1c1c`, `--bg-secondary: #242422`, `--bg-inverted: #f5d200`, `--text-on-inverted: #1c1c1c`, `--text-primary: #f5d200`, `--text-secondary: #b8b7ab`, `--text-success: #4ade80`, `--text-error: #ff6b6b`, `--border-default: #3a3a36`, `--border-success: #4ade80`, `--border-error: #ff6b6b`, `--focus-ring: #f5d200`, `--shadow-glow: 0 0 24px rgba(245, 210, 0, 0.35)`.
* Paper (light) theme overrides: `--bg-primary: #f5d200`, `--bg-secondary: #1c1c1c`, `--bg-inverted: #1c1c1c`, `--text-on-inverted: #f5d200`, `--text-primary: #1c1c1c`, `--text-secondary: #45412c`, `--text-success: #166534`, `--text-error: #b91c1c`, `--border-default: rgba(28, 28, 28, 0.35)`, `--border-success: #166534`, `--border-error: #b91c1c`, `--focus-ring: #1c1c1c`, `--shadow-glow: 0 0 24px rgba(28, 28, 28, 0.25)`.
* Shared tokens (both themes): `--radius-sm: 0.125rem`, `--radius-md: 0.25rem`, `--radius-lg: 0.5rem` (sharp, loud look — keep radii small), `--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4)`, `--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5)`, `--spacing-gap: 1rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--font-base: 'Barlow', sans-serif`.
* **Contrast pairing is mandatory in BOTH themes:** every light background pairs with dark text, every dark background with light text. Verify every surface/foreground combination.
* Never use pure `#ffffff`; if a near-white is ever needed, use `#fefefe` (this theme should not need it — yellow paper is the light surface).

**1.3 Mandatory Dark Mode & Theme Toggle**
* This theme is dark-native: the near-black + electric-yellow presentation is the default and must be fully realized.
* The mandatory light mode is the spec's "yellow-paper reversal": the `.paper` class flips the canvas to `#f5d200` with near-black type, while the inverted breathing sections automatically flip to near-black with yellow type — preserving the page's voltage rhythm in both modes.
* Implement switching by toggling the theme class on `<html>`; all changes flow through CSS variables — zero HTML restructuring.
* First visit: honor `prefers-color-scheme` (fallback default: dark). Persist the user's choice via `localStorage` (e.g., key `studio-theme`) and apply it before first paint to prevent flash.
* The header must contain a visible toggle button containing both Material Symbols icons (`dark_mode`, `light_mode`), shown/hidden purely via CSS based on the active theme class. JS must keep `aria-pressed` (true when paper mode is active) and a dynamic `aria-label` (e.g., "Switch to yellow-paper mode") in sync.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all structure with Flexbox (`display: flex`). Multi-card rows use `flex-wrap` with `flex-basis` — do not use CSS grid.
* Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified (permitted exceptions: text blocks inside cards may use `flex-start`; full-width children may use `stretch`).
* Mobile-first: single-column stacks below `640px`; rows adapt at `768px`/`1024px`. No horizontal scrolling at any viewport ≥ 320px (`overflow-wrap` on long words; the marquee track is contained with `overflow: hidden`).

**1.5 Framework: Tailwind CSS (Structure Only)**
* Load Tailwind via Play CDN. Use its utilities ONLY for structural layout (flex, alignment, gap, padding, max-width, wrap).
* ALL colors, typography, borders, shadows, and effects come from semantic component classes in `style.css` bound to the CSS variables. No `dark:` variants, no arbitrary color values in markup, no inline Tailwind config script.
* Required reusable classes: `.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`, `.card`, `.card--featured`, `.input-group`, `.section`, `.section--paper`, `.badge`, `.faq`, etc.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load Barlow from Google Fonts (weights 500, 700, 900) via `<link>`; bind to `--font-base`.
* Display type: Barlow 900, `text-transform: uppercase`, tight leading (0.95–1.05). Hero headline: `clamp(3rem, 6vw, 6rem)`. Section headings: `clamp(2rem, 5vw, 5rem)`. Body copy: Barlow 500, normal sentence case, 1–1.125rem, line-height 1.6 — never uppercase body text.
* Icons: Google Material Symbols (Outlined) via Google Fonts `<link>`. Inline SVGs and local icon files are **forbidden**.
* Icon set to use: `bolt`, `check`, `check_circle`, `close`, `arrow_forward`, `format_quote`, `dark_mode`, `light_mode`, `menu`, `mail`, `alternate_email`, `error`, `expand_more`, plus `palette`, `animation`, `devices` for feature cards.

---

### **2. COMPONENT DESIGN SPECIFICATIONS**

**2.1 Buttons**
* `.btn`: `display: flex`, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, uppercase Barlow 700, minimum touch target 44×44px, `border-radius: var(--radius-md)`.
* Variants: `.btn--primary` (accent fill, `--text-on-inverted` text — flips with theme), `.btn--ghost` (1px accent border + accent text), `.btn--danger` (visibly distinct red in BOTH themes).
* Hover: bold color shift within `var(--transition-fast)` (150ms) — e.g., primary inverts to outline, ghost fills — plus `cursor: pointer` and a glow/brightness shift.
* Focus: distinct `:focus-visible` ring via `outline: 3px solid var(--focus-ring)` with offset. Never remove it.
* Active: `transform: scale(0.97)` high-contrast pressed feedback.
* Loading: `.btn--loading` blocks interaction and double-clicks (`pointer-events: none`, `aria-busy="true"`), rendering a CSS border-spinner that does NOT distort button dimensions.
* Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* Success/Error: temporary `.btn--success` / `.btn--error` states driven by `--text-success` / `--text-error`.

**2.2 Cards**
* `.card`: flex column, `background: var(--bg-secondary)`, 1px `var(--border-default)` border, `border-radius: var(--radius-md)`, generous padding.
* Hover: `transform: translateY(-2px)` plus a shadow/glow shift (`--shadow-glow`) within 150ms.
* Focus-within: card border highlights in `--accent` when a child link/button receives focus.
* Skeleton/empty states: NOT applicable — all card content is authored static copy; do not invent skeleton loaders.

**2.3 Forms & Inputs (Final CTA email capture)**
* Structure: `.input-group` flex container (row ≥ 768px, column below) wrapping a visible `<label>`, an `<input type="email">`, the submit `.btn`, and a dedicated error/status `<p>` bound to `aria-live="polite"`.
* Input states via classes: empty, focused (accent ring), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, `error` icon, error text in `--text-error` — never color alone), disabled, read-only.
* Submit flow: prevent default → validate email format → on invalid: inline error + `aria-live` announcement → on valid: `.btn--loading` for ~1.2s → `.btn--success` + success message ("We'll be in touch.") announced via `aria-live` → reset after ~4s.

**2.4 FAQ Accordion (no modal required)**
* No modal/popup is needed for this build — do not add one.
* Build the FAQ from native `<details>`/`<summary>` for free keyboard and a11y semantics; each `<summary>` wraps an `<h3>`.
* Summary: uppercase Barlow 700; a chevron Material Symbol (`expand_more`) rotating 180° on `[open]`; items separated by `--border-default`.
* Animate open/close in pure CSS (grid-rows or max-height technique) with a graceful non-animated fallback; the rotation must respect `prefers-reduced-motion`.

---

### **3. CORE UX & MICRO-INTERACTION RULES**

* **Responsive by default:** fluid sizing via `clamp()`; verify at 320px, 768px, 1024px, and 1440px with zero horizontal overflow.
* **Smooth animations:** every state change transitions — 150ms for hover/color shifts, 300ms for layout/reveal — using `--ease-standard`. Wrap all motion in `@media (prefers-reduced-motion: no-preference)`; reduced-motion users get no marquee scroll, no transforms, instant opacity changes.
* **Accessibility (a11y):** WCAG AA contrast in BOTH themes (verify `--text-secondary` on both canvases). Never communicate state by color alone — always pair icons with text. Semantic HTML5 landmarks (`header`, `nav[aria-label]`, `main`, `section[aria-labelledby]`, `footer`), a skip-to-content link, exactly one `h1` with a logical h2→h3 hierarchy, full keyboard operability (Tab, Enter, Space, Esc), visible `:focus-visible` styles on every interactive element, and `aria-live` regions for all dynamic feedback (form errors, success, loading).
* **Mandatory visual feedback:** every hover, click, and submission produces a visible state change.
* **Destructive actions:** none on this page, but `.btn--danger` must still be defined and legible in both themes.

---

### **4. LANDING PAGE BLUEPRINT (all copy in English, realistic design-studio voice, NO lorem ipsum)**

General: this is a type-driven design — no photography or images anywhere. Avatars are initial-monogram circles styled in CSS. Alternate dark and paper sections to create voltage rhythm. Numbered section eyebrows ("01", "02"…) precede each h2.

**4.0 Header (sticky):** Barlow 900 uppercase logo wordmark (e.g., "VOLTAGE®"); anchor nav (Services, Process, Pricing, FAQ); the theme toggle per 1.3; a mobile `menu`/`close` toggle button (`aria-expanded`, `aria-controls`) revealing a flex-column nav panel — Esc closes it and returns focus to the toggle. Header sits at `--z-dropdown`.

**4.1 Hero (dark):** full-viewport `min-height`; an eyebrow line; giant headline at `clamp(3rem, 6vw, 6rem)` Barlow 900 uppercase in `--text-primary` (e.g., "WE MAKE BRANDS LOUD."); a one-sentence subhead in `--text-secondary`; two CTAs — `.btn--primary` "Start a project" with `arrow_forward` and `.btn--ghost` "See our work". Add a subtle yellow radial glow accent behind the type.

**4.2 Marquee band (inverted strip):** a `--bg-inverted` strip with an infinite CSS-keyframe ticker of uppercase keywords ("BRANDING", "MOTION", "WEB", "ART DIRECTION", "TYPE") separated by `bolt` icons; duplicate the track with `aria-hidden="true"` for a seamless loop; contain with `overflow: hidden`; disable animation under reduced motion.

**4.3 Features / Services (dark):** eyebrow "01 — SERVICES" + h2; three `.card`s in a flex-wrap row (1 column mobile → 3 columns ≥ 1024px), each with a Material Symbol icon (`palette` / `devices` / `animation`), an uppercase h3 (Brand Systems / Digital Products / Motion & Interaction), 2–3 sentences of copy, and a text link with `arrow_forward` that triggers the 2.2 focus-within highlight.

**4.4 How It Works (paper section, `.section--paper`):** eyebrow "02 — PROCESS" + h2; three steps stacked on mobile, side-by-side ≥ 1024px: oversized Barlow 900 numerals 01/02/03, uppercase step titles (Brief it / Build it / Launch it), and short copy. Dark type on yellow here; flips automatically with the global theme per 1.3.

**4.5 Testimonials (dark):** eyebrow "03 — WORD ON THE STREET" + h2; three quote `.card`s, each with a `format_quote` icon, a 1–2 sentence sentence-case quote, a monogram avatar circle, and a believable name + role/company.

**4.6 Pricing (dark):** eyebrow "04 — PRICING" + h2; three tier cards in a flex-wrap row (e.g., Spark / Studio / Scale) with a per-project price, 4–5 feature lines each prefixed by `check` icons, and one CTA per tier. The middle tier uses `.card--featured`: 2px accent border + `--shadow-glow`, slight elevation, and a `.badge` "MOST POPULAR" (accent fill, `--text-on-inverted` text). Featured CTA is `.btn--primary`; the others are `.btn--ghost`.

**4.7 FAQ (dark):** eyebrow "05 — FAQ" + h2; 5–6 `<details>` items per 2.4 with realistic Q&As (timelines, pricing model, revision rounds, handoff files, process).

**4.8 Final CTA (paper section):** a giant uppercase headline ("READY TO GET LOUD?") plus the email capture `.input-group` per 2.3.

**4.9 Footer (dark, on `--bg-secondary`):** logo + one-line tagline; secondary link columns (Studio: Work, About, Careers, Contact; Legal: Privacy, Terms); contact/social links using generic Material Symbols (`mail`, `alternate_email`, `public`), each with a descriptive `aria-label` — no brand logos; a copyright line.

---

### **5. DELIVERABLE & OUTPUT FORMAT**

* **Files, exactly:** `index.html`, `style.css`, `script.js`. The only script reference in the HTML is a single `<script src="script.js" defer></script>`. All external dependencies load via `<link>` CDNs (Tailwind Play, Google Fonts Barlow, Material Symbols).
* **Naming convention:** one convention only — BEM (`block__element--modifier`) for all custom classes, with Tailwind utilities restricted to structure per 1.5. Never mix conventions, never invent one-off names.
* **JavaScript scope (`script.js` only):** theme init/toggle/persistence (1.3), mobile menu open/close (4.0), the email form validate → loading → success flow (2.3), and an optional IntersectionObserver reveal enhancement (sections visible by default without JS; disabled under reduced motion). Nothing else — no libraries, no dead code.
* **Progressive enhancement:** with JS disabled, the page must remain fully readable and navigable (details/summary and anchors still work).
* **Copy:** 100% English, realistic design-studio voice; no lorem ipsum and no unrequested placeholder content — every label, heading, price, and feature line is final authored copy.
* **Single attempt:** deliver complete, runnable code that works by opening `index.html`. Before finishing, verify: zero `style=` attributes, zero inline SVGs, zero inline scripts, the dark ↔ paper toggle persists across reload, a full keyboard pass (toggle, menu, links, form, FAQ), no horizontal scroll at 320px, AA contrast in both themes, and all animations respect `prefers-reduced-motion`.