Precision Lithography Style demo
Precision Lithography Style

A precise, industrial visual style inspired by EUV semiconductor lithography, featuring clean technical layouts, engineered detailing, and high-contrast schematic aesthetics.
Category: Industrial & Mechanical
Era: 2020s Modern
Prompt: 15.3 KB · 2144 words
# CODING AGENT SYSTEM PROMPT — "PRECISION LITHOGRAPHY" EUV LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt. Theme: **Precision Lithography Style** — an industrial, scientific, precise landing page for EUV semiconductor lithography technology, set in the "2026+ Microchip Revolution" era. Output category: Industrial & Mechanical. All user-facing copy must be written in **English**.

---

## 0. PROJECT BRIEF & DESIGN DIRECTION

**0.1 Required Page Sections (in this exact order):**
1. Sticky Header — brand logo, nav links, theme toggle, CTA button, mobile hamburger
2. Hero — headline, subheadline, dual CTAs, EUV beam visualization, data readout strip
3. Features — exactly **3 cards**
4. How It Works — exactly **3 steps** with a manufacturing process animation
5. Testimonials — 3 quote cards
6. Pricing — 3 tiers, middle tier visually featured
7. FAQ — accessible accordion
8. Final CTA — full-width band with email capture form
9. Footer — secondary link columns plus legal line

**0.2 Visual Direction (all effects must be built in pure CSS — no images, no inline SVG):**
- **EUV light beam visualizations** — implemented as the spec-named class `.euv-beam-animation`
- **Complex machine diagrams** — implemented as the spec-named class `.machine-diagram`
- Subtle high-tech glows on components (box-shadow glows using Electric Blue)
- Clean, technical typography (see 0.4)
- Data micro-interactions (animated counters, monospace readouts that tick on scroll/hover)
- Modular elements (bordered panels, strict grid rhythm, machined-edge containers)
- Manufacturing process animations (a beam/pulse traveling through the 3-step process track)

**0.3 Color Palette → CSS Variable Token Map:**

Light theme (`:root`):
- `--primary: #003366` (Scientific Blue) · `--secondary: #00BFFF` (Electric Blue)
- `--bg-primary: #fefefe` — **Exception clause:** the source spec lists `#FFFFFF`; architecture forbids pure white, so use `#fefefe` everywhere a white surface is needed.
- `--bg-secondary: #F4F6F9` (cleanroom gray; the hero/section gradient uses `linear-gradient(to bottom, #F8F8F8, #fefefe)` per the spec baseline)
- `--text-primary: #003366` · `--text-secondary: #36454F` (Dark Gray)
- `--text-success: #0A8A3C` — **Exception clause:** the spec's `#00FF00` green fails contrast on light backgrounds; reserve `#00FF00` strictly for glow accents and dark-mode surfaces, never as text on light backgrounds.
- `--text-error: #C62828` · `--border-default: #D3D3D3` · `--border-success` / `--border-error` derived from the success/error tokens
- Accent roles: **Silver `#C0C0C0`** = metallic accents, dividers, diagram strokes; **Orange `#FFA500`** = highlight/warning accent only (featured pricing badge, "hot" process markers) — never the error color and never as low-contrast text.

Dark theme (`.dark` class and `@media (prefers-color-scheme: dark)`):
- `--bg-primary: #0A1626` (deep scientific navy) · `--bg-secondary: #10233B`
- `--text-primary: #EAF2FA` · `--text-secondary: #C0C0C0` (Silver)
- Interactive accents switch to `#00BFFF`; primary buttons in dark mode use an Electric Blue background paired with dark navy text
- `--text-success: #00FF00` (permitted here — passes contrast on dark navy) · `--text-error: #FF6B6B` · `--border-default: #2C4A6B`

**Contrast pairing is mandatory in every theme:** any light background token must pair with a dark text token, and any dark background token must pair with a light text token. Verify every surface/button pair in both themes.

**0.4 Typography & Icons:**
- `--font-base: 'Source Sans 3'` — **Exception clause:** the spec names "Source Sans Pro"; load its current Google Fonts successor **Source Sans 3** via `<link>` with `preconnect`.
- `--font-mono: 'IBM Plex Mono'` — for data readouts, spec labels, coordinates, step numbers, and technical annotations.
- **Icons:** Google Material Symbols (Outlined variable font) loaded via Google Fonts. **Inline SVGs and local icon files are explicitly forbidden.**

**0.5 Industrial Form Language:**
- `--radius-sm: 2px` · `--radius-md: 4px` · `--radius-lg: 8px` (sharp, machined edges — nothing pill-shaped)
- `--shadow-sm: 0 2px 5px rgba(0,0,0,0.05)` (per spec) · `--shadow-md: 0 8px 24px rgba(0,20,45,0.12)`
- `--spacing-gap: 1.5rem` · `--transition-fast: 150ms` · `--transition-normal: 300ms` · `--ease-standard: ease-in-out` (spec baseline: `0.3s ease-in-out`)
- `--z-dropdown: 100` · `--z-modal: 1000` · `--z-toast: 1100`

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must require editing only `style.css`, never the markup.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
- All visual tokens defined in **0.3** and **0.5** must live in `:root` (light) and be overridden in `.dark` / `prefers-color-scheme: dark`.
- No hardcoded hex values may appear inside component rules — every color, radius, shadow, and transition must reference a CSS variable.

**1.3 Mandatory Dark Mode Support**
- **Note:** The source style specification flagged Dark Mode as not required; per mandatory architecture standards, **full Dark Mode support is required** and must be implemented as defined here.
- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector; background and text variables must switch seamlessly with zero HTML restructuring.
- **Persistence:** Store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle (header) with correct `aria-pressed` and `aria-label` states, swapping the Material Symbol (`dark_mode` / `light_mode`).

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with **Flexbox** (`display: flex` / Tailwind flex utilities).
- **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
- **Mobile-first:** all rows must collapse to columns on small viewports; **horizontal scrolling is prohibited at any width.**

**1.5 Framework Default & Tailwind CSS Integration**
- Use **Tailwind CSS (Play CDN)** for layout, spacing, and responsive utilities only.
- All colors, typography, shadows, radii, and component states must be defined in `style.css` as reusable classes (`.btn`, `.card`, `.input-group`, `.euv-beam-animation`, `.machine-diagram`) driven by CSS variables. Never hardcode colors in arbitrary-value utility classes.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load Source Sans 3 and IBM Plex Mono from Google Fonts; bind them to `--font-base` and `--font-mono`.
- Use Google Material Symbols for every icon. Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** (classes: `.btn`, `.btn--primary`, `.btn--outline`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**.
- **Hover:** brightness/shadow shift with `cursor: pointer`.
- **Focus:** distinct focus ring built from CSS variables (`outline`/`box-shadow`) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error`.
- `.btn--danger` must be visually distinct in **both** themes.

**2.2 Card Component Requirements** (`.card`, used by Features, Testimonials, Pricing)
- **Default:** flexible Flexbox layout, subtle border (`--border-default`) and elevation using `--bg-secondary` and shadow variables.
- **Hover:** shadow shift plus `transform: translateY(-2px)`.
- **Focus-within:** card border highlights in `--secondary` when a child link/button receives focus.
- **Loading (Skeleton):** define a shimmer `@keyframes` and a `.card--skeleton` utility in the stylesheet as part of the design system.
- **Empty State:** define a structured fallback pattern (Google Icon + guidance text) as a reusable `.card--empty` class.

**2.3 Form & Input Requirements** (`.input-group`, used in the Final CTA)
- **States:** Empty, Focused (outline ring), Filled, Valid (success border + check icon), Invalid (error border, error text, error icon), Disabled, Read-only — all as CSS classes.
- **Structure:** Flex container wrapping a `<label>`, the input, and a dedicated error-feedback element wired to an `aria-live` region.

**2.4 Modal / Popup Requirements** (`.modal`, triggered from the Hero)
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
- **UX Features:** centered flex container (`align-items: center`), backdrop overlay, Google Icon close button (`aria-label="Close"`), keyboard **focus trapping**, close via `Esc` and overlay click, body scroll locked while open.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; **all beam sweeps, counters, and process animations must be disabled or reduced under `prefers-reduced-motion`.**
- **Accessibility (a11y):** sufficient contrast in Light and Dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, single `h1`); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, loading, success).
- **Mandatory Visual Feedback:** every click, hover, and submission must trigger a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (defined in the design system even if unused on this page).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred `script.js` entry-point reference (plus the Tailwind CDN and Google Fonts links in `<head>`).
- **Naming Convention:** **BEM** consistently (`.hero__title`, `.pricing-card--featured`, `.faq__summary`). The two spec-mandated classes `.euv-beam-animation` and `.machine-diagram` are retained verbatim as named component classes. Never mix conventions.
- **No Unrequested Placeholders:** write realistic, specific English copy for a fictional EUV lithography systems company (invent a plausible brand name); **lorem ipsum is prohibited anywhere**. Technical claims should be plausible for EUV lithography (13.5 nm wavelength, nanometer-scale resolution, wafer throughput).

---

## 5. LANDING PAGE SECTION-BY-SECTION SPECIFICATIONS

**5.1 Header:** sticky; `background: var(--bg-primary)`, `border-bottom: 1px solid var(--border-default)`, `box-shadow: 0 2px 5px rgba(0,0,0,0.05)` (per spec baseline). Flex row, `align-items: center`; collapses to a hamburger menu on mobile (toggle button with `aria-expanded`, animated panel). Nav links get an Electric Blue underline on hover and a visible focus ring. Theme toggle per rule 1.3.

**5.2 Hero:** two-column flex on desktop (copy left, visualization right), single column on mobile. Headline + subheadline in `--font-base`; primary CTA `.btn--primary` ("Request a System Demo") and secondary CTA `.btn--outline` ("View Process Diagram") which opens the modal (5.10). Right column: `.euv-beam-animation` — a pure-CSS animated EUV beam built from layered `linear-gradient` beams (Electric Blue core, Silver halo) with keyframed sweep/pulse and a subtle glow. Below the copy: a monospace data readout strip in `--font-mono` (e.g., `WAVELENGTH 13.5 NM · RESOLUTION ≤ 8 NM · THROUGHPUT 200 WPH`) with animated counters triggered on load/scroll.

**5.3 Features:** exactly 3 `.card` modules in a responsive 3-column → 1-column flex layout. Each card: a Material Symbol icon inside a bordered "component socket" square, a title, and a description. Apply the full card state set from 2.2.

**5.4 How It Works:** exactly 3 steps in a horizontal track on desktop (vertical on mobile). A CSS-animated beam/pulse travels along the connecting track (the manufacturing process animation). Each step: monospace numbered marker (`01` / `02` / `03`), Material Symbol, title, description. Staggered scroll-reveal via `IntersectionObserver` as progressive enhancement — content must be fully visible without JS.

**5.5 Testimonials:** 3 quote cards. CSS-built initials avatar (circle, `--primary` background, light text), `format_quote` Material Symbol, quote, name, role, company. Full card hover/focus-within states.

**5.6 Pricing:** 3 tiers; the middle tier gets `.pricing-card--featured` — Electric Blue border, subtle glow, and a monospace uppercase "RECOMMENDED" badge (Orange accent allowed for the badge with accessible pairing). Each tier: name, price, feature list with `check` Material Symbols, and a CTA button (featured tier uses `.btn--primary`; others `.btn--outline`).

**5.7 FAQ:** native `<details>` / `<summary>` accordion (no JS required). Summary is a flex row, `align-items: center`, `justify-content: space-between`, with an `expand_more` Material Symbol rotating 180° when open. Visible focus ring on summary; smooth expansion respecting reduced motion.

**5.8 Final CTA:** full-width band with a Scientific Blue → Electric Blue gradient (light mode) / navy glow (dark mode). Contains a headline and an email-capture `.input-group` per 2.3: label, input, and a `.btn--primary` submit that demonstrates **Loading** (CSS spinner, dimension-stable), **Success** (check icon, `--text-success`, `aria-live` announcement), and **Error** (invalid email: `--border-error`, error icon, `--text-error` message, `aria-live`). Simulate the request with a JS timeout — no backend.

**5.9 Footer:** secondary link columns (Product, Company, Resources, Legal), repeated brand mark, copyright line, and text links with hover/focus states. Dark-mode-safe styling via variables.

**5.10 Modal — Process Diagram:** opened from the Hero's secondary CTA. Backdrop overlay, centered flex container, and inside it the `.machine-diagram`: a pure-CSS schematic of an EUV lithography machine — bordered modular blocks connected by animated beam lines, pulsing nodes, and monospace labels (`LIGHT SOURCE`, `OPTICS CHAIN`, `WAFER STAGE`). Must implement the complete modal spec from 2.4 (focus trap, `Esc`, overlay click, open/close animations, scroll lock).

---

## 6. FINAL QUALITY CHECKLIST (verify before submitting)

- Zero occurrences of `style="..."` in the HTML; zero inline SVGs; zero hardcoded hex values outside `:root`/`.dark`.
- Dark mode toggle works, persists via `localStorage`, and every surface passes contrast pairing in both themes.
- Full keyboard pass: header nav, buttons, FAQ accordion, modal (focus trap + `Esc`), form — all operable without a mouse.
- No horizontal scroll at 320px width; all flex containers default to `align-items: center`.
- `prefers-reduced-motion` disables beam sweeps, counters, and reveals.
- All copy is realistic English; no lorem ipsum; BEM naming is consistent throughout.