Voxel Art demo
Voxel Art

A 3D digital art style that builds scenes from cube-shaped pixels, producing blocky, volumetric renders reminiscent of Minecraft and MagicaVoxel.
Category: Art & Illustration
Era: 2010s Digital
Prompt: 20.4 KB · 2711 words
# CODING AGENT PROMPT — VOXEL ART LANDING PAGE (FULL BUILD SPECIFICATION)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt — no clarifying questions, no partial output. Generate the full, final code immediately, following every rule below.

**Product identity:** Build the page for **"VoxelForge"** — a browser-based voxel art studio (Minecraft / MagicaVoxel-adjacent creative tool). Write **all user-facing copy in English** — real, themed, playful-crafty-confident copy. Lorem ipsum is forbidden.

**Theme:** Voxel Art — 3D cubes as pixels, blocky charming forms, bright toy-like palette, isometric voxel dioramas, hard offset "cube shadows," chunky solid outlines, top-face highlight gradients. **No blur, no rounded corners, no soft gradient fills.**

**Sections (in this order):** Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT ARCHITECTURE RULES

**1.1 CSS-First & Zero Inline CSS**
- All styling lives exclusively in `style.css`. The `style="..."` attribute is **forbidden** in HTML.
- Target everything via class/ID selectors only. HTML must stay semantic and visually agnostic — reskinning must never require markup edits.

**1.2 Design Tokens (CSS Variables, mandatory)**
- Store every visual token in `:root`. Implement the following base token sheet **exactly**, then extend it as specified:
```css
:root {
  /* color */
  --color-bg: #a8e0f0;
  --color-surface: #ffffff;
  --color-surface-strong: #eef7fb;
  --color-border: #16324a;
  --color-text: #16324a;
  --color-text-muted: #3b5a72;
  --color-primary: #ff6b3d;
  --color-accent: #2fbf71;
  --color-yellow: #ffc93c;
  /* radius — voxel = always square */
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 0px;
  /* shadow — hard offset cube shadows, no blur */
  --shadow-sm: 3px 3px 0 var(--color-border);
  --shadow-md: 5px 5px 0 var(--color-border);
  --shadow-lg: 8px 8px 0 var(--color-border);
  /* font */
  --font-sans: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-display: 'Press Start 2P', 'Space Grotesk', monospace;
  --font-mono: 'VT323', ui-monospace, monospace;
  /* text scale */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;
  --text-4xl: 2.75rem; --text-5xl: 3.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 stepped motion */
  --ease-standard: steps(4, end);
  /* signature effects */
  --voxel-top: linear-gradient(180deg, rgba(255,255,255,0.55) 0 30%, transparent 30%);
  --voxel-side: 4px solid var(--color-border);
  --pixel-notch: 8px;
}
```
- **Required additions (same `--color-*` naming family, no other convention):** `--font-base: var(--font-sans);` (bind the body font to it); `--spacing-gap: var(--space-4);`; `--transition-fast: 0.1s;`; `--transition-normal: 0.2s;`; `--z-dropdown: 100; --z-modal: 200; --z-toast: 300;`; `--color-bg-secondary` (alias of `--color-surface-strong`); `--color-text-primary` (alias of `--color-text`); `--color-text-secondary` (alias of `--color-text-muted`); `--color-border-default` (alias of `--color-border`); `--color-text-success: #15734a;`; `--color-text-error: #b3362e;`; `--color-border-success: #1a8f55;`; `--color-border-error: #b3362e;` plus on-fill text tokens `--color-on-primary: #16110c;`, `--color-on-accent: #0a2416;`, `--color-on-yellow: #16324a;`.
- **Contrast pairing rule:** every light background token pairs with a dark text token and vice versa — enforced in both light and dark themes (see 1.3). Bright fills (`--color-primary`, `--color-accent`, `--color-yellow`) always pair with their dark `--color-on-*` text tokens, never with `--color-text`.
- **Light-mode background exception:** the page background must use `--color-bg` (#a8e0f0) — never pure white. **Declared-theme exception:** this spec explicitly defines `--color-surface: #ffffff` for card/nav surfaces; retain that exact declared value for surfaces only.

**1.3 Mandatory Dark Mode ("night diorama" palette)**
The source spec does not declare theme modes — therefore you **must design, implement, and visually validate both light and dark modes before considering the build complete.**
- Define dark tokens (identical values) in **two places**: the `.dark` class selector, and `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`:
```css
/* Dark theme — moonlit navy; bright toy colors stay */
--color-bg: #141f33;
--color-surface: #1d2b42;
--color-surface-strong: #273a58;
--color-border: #a8d8ec;      /* chunky outlines + offset shadows glow moonlit blue */
--color-text: #eef7fd;
--color-text-muted: #a9c4d9;
--color-primary: #ff6b3d;    /* unchanged */
--color-accent: #2fbf71;
--color-yellow: #ffc93c;
--color-text-success: #6fdcae;
--color-text-error: #ff9d8f;
--color-border-success: #2fbf71;
--color-border-error: #ff6b5e;
```
- Theme switching must work purely through the CSS variables — **zero HTML restructuring** between modes.
- **Persistence:** store the user's choice in `localStorage` (key: `voxelforge-theme`), falling back to `prefers-color-scheme` on first visit. `script.js` toggles `.dark` / `.light` on `<html>` as early as possible to minimize flash, and follows OS-level scheme changes when no stored preference exists.
- Provide a **visible toggle button** in the header nav: Google Material Symbol (`dark_mode` / `light_mode`), correct `aria-pressed` state, and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox (and CSS Grid only for card grids).
- Every flex container defaults to `align-items: center` unless an explicitly justified exception exists.
- All layouts must be mobile-responsive out of the box: multi-column rows convert to a single column below ~768px. **No horizontal scrolling at any viewport ≥320px** (use `minmax(0, 1fr)`, fluid `clamp()` type, `max-width: 100%`).

**1.5 Styling Approach — Clean Custom CSS**
- No framework was requested and the design system is hand-authored custom CSS: use **clean custom CSS organized in cascade layers** — `@layer tokens, base, components, sections, utilities;` — with `@apply`-style consolidation only if it helps. Do **not** add the Tailwind CDN or mix utility-class conventions into the markup.
- The base component sheet in §2 is your mandatory foundation: implement it exactly, then extend.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load via Google Fonts `<link>` tags (with `preconnect`): **Space Grotesk** (500, 700) for body/UI, **Press Start 2P** (400) for display headlines, **VT323** (400) for numerals/mono accents — all with `font-display: swap`. Bind the base font to `--font-base`.
- Icons: **Google Material Symbols — Sharp variant with FILL 1** (define a shared `.icon` class with `font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24`). **Raw inline SVGs and local icon files are forbidden.**
- Decorative icons get `aria-hidden="true"`; icon-only controls get `aria-label`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.0 Mandatory Base Component Sheet (implement exactly, then extend)**
```css
body { margin: 0; color: var(--color-text); font-family: var(--font-base); background: var(--color-bg); }
.nav { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6);
  background: var(--color-surface); border: var(--voxel-side); box-shadow: var(--shadow-md); }
.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 700 var(--text-base)/1 var(--font-sans); color: var(--color-text);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
  background: var(--color-yellow); color: var(--color-on-yellow);
  border: var(--voxel-side); background-image: var(--voxel-top);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .1s var(--ease-standard), box-shadow .1s var(--ease-standard); }
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translate(3px,3px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); background-image: var(--voxel-top); }
.card { background: var(--color-surface); color: var(--color-text); padding: var(--space-6);
  border: var(--voxel-side); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); position: relative; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--voxel-top); }
.input { width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-sans);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-surface-strong); border: var(--voxel-side); box-shadow: var(--shadow-sm); }
.input::placeholder { color: var(--color-text-muted); }
.input:focus { outline: none; box-shadow: var(--shadow-md); }
.badge { display: inline-flex; align-items: center; gap: .4em; font-size: var(--text-xs); font-weight: 700;
  padding: .3em .8em; border-radius: var(--radius-pill); background: var(--color-accent);
  color: var(--color-on-accent); border: 2px solid var(--color-border); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } }
```

**2.1 Buttons — full state matrix**
- **Default:** flex, centered, ≥44×44px touch target, cube-shadow + chunky border + top-face highlight (above).
- **Hover:** cube "lift" (`translate(-2px,-2px)` + shadow growth); **Active/Pressed:** cube "press" (`translate(3px,3px)`, shadow removed); **Focus:** visible 3px ring (above) — all via classes only.
- **Loading (`.is-loading`):** disables interaction and prevents double-clicks; hide the label visually (`visibility: hidden`) and overlay an absolutely-centered **square CSS spinner** (a bordered square rotating with `steps(8, end)`, no blur) — button dimensions must not change; set `aria-busy="true"`.
- **Disabled:** `opacity: .5`, desaturated, `cursor: not-allowed`, no hover/active transforms.
- **Success/Error transient states (`.btn--success`, `.btn--error`):** temporary post-submit feedback — success uses `--color-accent`/`--color-on-accent` with a `check` icon; error uses `--color-border-error` + `--color-text-error` with an `error` icon. Both must stay distinct in light and dark.
- **Destructive (if ever added):** `.btn-danger` must be visually distinct in **both** themes (error border + error text on surface). None is expected in this build.

**2.2 Cards — full state matrix**
- **Default:** flexbox column layout, `--color-surface`, chunky border, cube shadow, top highlight strip (above).
- **Hover:** voxel-consistent lift — `translate(-2px,-2px)` with shadow growth (matching the button language).
- **Focus-within:** border color shifts to `--color-primary` when a child link/button receives focus.
- **Loading (Skeleton):** `.card--skeleton` shimmer defined in CSS — a flat, hard-edged repeating-gradient sweep (no blur), sized to prevent layout jumps.
- **Empty state:** structured fallback with a Material Symbol icon and short guidance text.
- The hover/focus-within states are mandatory on Features, Testimonials, and Pricing cards; define skeleton/empty classes regardless.

**2.3 Forms & Inputs — full state matrix**
- Structure: `.input-group` as a flex container wrapping a visible `<label>`, the `.input` field, and a dedicated `.input-feedback` container (`aria-live="polite"`).
- States: **Empty, Focused** (shadow growth per base sheet + focus-visible ring), **Filled, Valid** (`.is-valid`: `--color-border-success` + `check` icon), **Invalid** (`.is-invalid`: `--color-border-error`, `--color-text-error` message + `error` icon — never color alone), **Disabled, Read-only.**
- The Final CTA email form implements every one of these states live (see §3.8).

**2.4 FAQ Accordion**
- Use native `<details>` / `<summary>` (keyboard-accessible by default). Style `summary` as a flex row (question + `expand_more` icon), ≥44px target, focus-visible ring, icon rotating 90° via a stepped CSS transition on `[open]`; add `name="faq"` for exclusive-open behavior with graceful degradation. Respect `prefers-reduced-motion`.

**2.5 Modal / Toast (conditional)**
- No modal is required by this build — do not add one. If any overlay is ever introduced: centered flex container, backdrop, `--z-modal`, Material Symbol close button, focus trapping, Esc + overlay-click close, animated open/close. Feedback toasts (if used) use `--z-toast` + `aria-live`.

**2.6 Signature Voxel Visual System (pure CSS, no images)**
- **Voxel cube:** a `.voxel-cube` component — a square box sized by `--cube-size` containing three absolutely-positioned full-size faces clipped with `clip-path` polygons: **top** `polygon(50% 0, 100% 25%, 50% 50%, 0 25%)` (lightest — base color mixed toward white), **left** `polygon(0 25%, 50% 50%, 50% 100%, 0 75%)` (mid), **right** `polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%)` (darkest — mixed toward black). Light comes from upper-left; keep lightness ordering consistent everywhere. Use `color-mix()` or precomputed hexes.
- **Diorama:** the hero visual is an isometric CSS diorama — 6–12 `.voxel-cube` elements (e.g., a small floating grass platform, a tree with orange trunk cubes and accent-green leaf cubes, a yellow cloud cube) inside a `position: relative` stage, entirely `aria-hidden="true"`, decorative, scaling gracefully across breakpoints (cube size via `--cube-size`, stage via percentage positioning or transform scale). Give one or two cubes a gentle stepped "bob" (`translateY` ±4px, ~2.4s, `steps(6, end)`, infinite alternate) that `prefers-reduced-motion` disables.
- **Brand mark:** one mini `.voxel-cube` beside the Press Start 2P wordmark in the nav and footer.
- **Global aesthetic constraints:** `border-radius` stays 0 everywhere; no blur shadows; no soft gradients (the only gradient allowed is the flat `--voxel-top` highlight); interaction easing is always `var(--ease-standard)`.

---

## 3. PAGE SECTION REQUIREMENTS (all copy in English, real and themed)

**3.1 Header/Nav** — Sticky header using the `.nav` pattern (bottom voxel border + shadow, above all content). Contains: brand mark + "VOXELFORGE" wordmark, links (Features, How It Works, Pricing, FAQ) with smooth CSS `scroll-behavior` (auto under reduced motion), and the **dark-mode toggle** (per §1.3). Mobile: hamburger (`menu` icon) toggles a dropdown panel using `--z-dropdown`, with `aria-expanded`, Esc-to-close, and focus management. Include a "Skip to content" skip link. Apply `scroll-margin-top` to all anchored sections.

**3.2 Hero** — Two-column flex row (text + diorama) → single column mobile, `align-items: center`. Contents: `.badge` announcement, H1 in Press Start 2P with fluid `clamp()` sizing and generous line-height, muted subtitle in Space Grotesk, two CTAs (`.btn--primary` "Start building free" → `#pricing`; `.btn` "See how it works" → `#how`), and a small VT323 stats line (e.g., "1.4M cubes placed · 12,000 builders"). Diorama per §2.6.

**3.3 Features — 3 cards** — `.card` grid (3 → 1 columns). Each card: an icon tile (square, chunky border, cube shadow, palette-colored background cycling yellow/primary/accent, Material Symbol icon — e.g., `view_in_ar` "Stack cubes in your browser", `download` "Export to .vox, .obj, and .gltf", `groups` "Remix community galleries"), Space Grotesk 700 title, muted body copy. Mandatory hover + focus-within states.

**3.4 How It Works — 3 steps** — Horizontal flex row → vertical stack mobile. Each step: a number tile (square, chunky border, cube shadow, Press Start 2P numeral "01/02/03" on cycling palette fills), step title, description. Connect steps on desktop with a dashed pixel divider (flat repeating-linear-gradient, `--color-border`), hidden on mobile. Steps: 01 Pick your canvas → 02 Stack your cubes → 03 Export & share.

**3.5 Testimonials — 3 cards** — Each: a 5-star rating row (filled Material Symbol `star` icons, `aria-label="Rated 5 out of 5 stars"`), quote in Space Grotesk, a dashed divider, an avatar tile (square, palette background, VT323 initials, voxel border), name + muted role. Real English quotes from plausible creators.

**3.6 Pricing — 3 tiers** — Three `.card`s, middle tier highlighted: `.badge` "MOST POPULAR", `--shadow-lg`, modest `translateY(-8px)` lift on ≥768px (hover still moves it), and the `.btn--primary` CTA. Price numerals in large VT323 with a muted "/month" label. Feature lists: `check` icons in `--color-text-success` for included, muted `close` icons for absent. Outer tiers use `.btn` and scroll to `#cta`. Stack vertically on mobile.

**3.7 FAQ** — 4–6 real `<details>` items (per §2.4) covering exports, browser support, cube limits, refunds — each styled as a bordered card consistent with the voxel language, under an H2.

**3.8 Final CTA** — Full-bleed band: `--color-surface-strong` background, voxel borders top and bottom, Press Start 2P headline, short copy, and the email form (per §2.3): `.input-group` flex row → column mobile, visible label, `type="email"` `.input`, `.btn--primary` submit. `script.js` handles submit: prevent default → regex-validate → invalid: `.is-invalid` + `--color-text-error` message in the `aria-live` feedback container → valid: button enters loading state (~800ms simulated) → button success state + inline success message ("Cube reserved — check your inbox.") + cleared input. All feedback respects reduced motion.

**3.9 Footer with secondary links** — Top area: brand (cube mark + wordmark) + one-line blurb + social icon buttons (44px square, chunky borders, aria-label per network, Material Symbol glyphs; `href="#"` permitted here only as unspecified destinations). Middle: three link columns (Product / Resources / Company) — in-page anchors where targets exist, otherwise clearly-labeled `#` placeholders. Bottom bar: © current year VoxelForge, tagline "Made of 100% cubes.", and a back-to-top link (`arrow_upward`) with smooth scroll. Footer sits on `--color-surface` with a top voxel border; every link has hover + focus-visible feedback.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography, no horizontal overflow — self-test at 320px, 768px, 1024px, 1440px.
- **Smooth stepped animations:** every state change transitions with `var(--transition-fast)`/`var(--transition-normal)` and `var(--ease-standard)`; the existing `prefers-reduced-motion` block must be extended to cover **all** animations and transforms globally.
- **Accessibility:** contrast ≥ 4.5:1 for text in **both** light and dark (verify at minimum: text/bg, text/surface, muted/bg, on-fill tokens, success/error tokens per theme — validate with a contrast tool before finishing). Never rely on color alone — pair icons with text. Semantic HTML5 landmarks (`header`, `main`, `footer`), one H1, logical heading order, `aria-labelledby` on every section, full keyboard operability (nav menu, accordion, form, toggle), logical focus order, visible focus rings everywhere, `aria-live` for all dynamic feedback.
- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.
- **All CTAs must have real behavior** (in-page anchors or the working form) — no dead primary buttons.

---

## 5. DELIVERABLES & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `<script src="script.js" defer></script>` before `</body>` — no other inline scripts. Google Fonts + Material Symbols `<link>` tags with `preconnect` in `<head>`. No external images — every visual is CSS-built.
- **Naming:** one convention throughout — **BEM** (`block__element--modifier`), consistent with the provided `.btn--primary` pattern. Never mix conventions.
- **No unrequested placeholders:** all copy is real English product copy; `lorem ipsum` is forbidden; `#` links are allowed only for unspecified footer/social destinations.
- **Final self-check before submitting:** zero `style="..."` attributes · zero `<svg>` elements · dark mode persists via localStorage with correct toggle `aria-pressed`/`aria-label` · both themes contrast-validated · reduced motion disables all animation · no horizontal scroll ≥320px · heading order and landmarks correct · all buttons/links wired · FAQ keyboard-operable · form states fully implemented · base component sheet implemented exactly as specified.