Industrial Workbench Schematic demo
Industrial Workbench Schematic

A rugged industrial design evoking a garage workshop atmosphere with metal textures, tool imagery, and hardware-focused utilitarian styling.
Category: Industrial & Mechanical
Era: 2020s Modern
Prompt: 7.6 KB · 1036 words
# System Prompt: Build "Industrial Workbench Schematic" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below strictly. Do not ask clarifying questions; make sensible decisions where unspecified.

---

## 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 anywhere in the HTML.**
- Target all design properties, layout rules, and states exclusively via class or ID selectors.
- HTML must remain clean, semantic, and style-agnostic: changing the site's look requires editing only CSS, never markup.

**1.2 CSS Variables & Theme Tokens**
Define all visual tokens in `:root`:
- Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- Industrial palette mapping: `--bg-primary: #cfd3d6` (brushed steel background), `--text-primary: #1f1f1f`, `--primary: #ffc107` (accent), `--secondary: #8B4513` (rust), plus tokens for Steel `#71797E`, Rubber Black `#2B2B2B`, and Caution Yellow `#FFD700`.
- Contrast pairing: every light background token pairs with dark text, every dark background token pairs with light text. Where a near-white is needed, use `#fefefe`, never `#ffffff`.
- Structure tokens: `--radius-sm`, `--radius-md`, `--radius-lg` (keep radii small — 4px max — industrial hardware is not rounded), `--shadow-sm`, `--shadow-md` (realistic soft drop shadows), `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode Support**
- The source spec marks Light/Dark as "Full / No" — however, **dark mode is mandatory regardless**: define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class. Dark mode should read as "garage at night": Rubber Black `#2B2B2B` backgrounds, brushed-metal dark textures, Caution Yellow `#FFD700` accents, light text.
- Theme switching must not require HTML restructuring; persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.
- Include a visible toggle control with correct `aria-pressed` / `aria-label` state, styled as a metal toggle switch or tool-switch aesthetic.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an explicitly justified exception exists.
- Mobile-first: all rows (feature cards, pricing tiers, steps, footer columns) collapse to single-column stacks on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework**
- Use Tailwind CSS (CDN or build) or clean custom CSS driven by Tailwind's `@layer` / `@apply`. All utilities must map back to CSS variables or reusable class names (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Text: load **Roboto Condensed** via Google Fonts `<link>` and bind to `--font-base`. Headings may use a heavier condensed weight; body copy in regular weight.
- Icons: **Google Material Symbols** only. Inline SVGs and local icon files are forbidden.
- Industrial texture: apply the brushed aluminum background image (`https://www.transparenttextures.com/patterns/brushed-alum.png`) via CSS only, layered over `--bg-primary`. Simulate scratches, metallic plaques, and workshop tool borders with CSS gradients/borders — never with extra markup.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Style as metal plaques: 4px solid `#444` borders, 4px radius, brushed texture, caution-yellow primary variant.
- Hover: brightness/shadow shift, `cursor: pointer`.
- Focus: distinct focus ring via CSS variables for keyboard navigation.
- Active: `transform: scale(0.97)`.
- Loading: disables interaction, prevents double-clicks, renders an animated Google Icon spinner 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` (destructive) must be visually distinct in both themes.

**2.2 Cards (Features, Pricing, Testimonials)**
- Default: flexible Flexbox layout, `--bg-secondary` surfaces, 4px solid borders evoking metal plates or tool-etched edges, soft realistic drop shadows.
- Hover: `transform: translateY(-2px)` and shadow elevation shift.
- Focus-within: border highlight when a child link/button receives focus.
- Loading: CSS shimmer skeleton animation with no layout shift.
- Empty state: Google Icon + guidance text fallback structure.

**2.3 Forms (FAQ search, CTA email capture, newsletter in footer)**
- States: empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.
- Structure: flex container wrapping label, input, and a dedicated error feedback container with `aria-live="polite"`.
- Style inputs as recessed metal panels (inset shadows, dark inner border).

**2.4 Modals (FAQ answers may open in a modal)**
- States: opening, open, loading, success/error, closing — all CSS-transition animated.
- Centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay clicks.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.
- **Accessibility:** sufficient contrast in both modes; never rely on color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); ARIA roles/labels on custom widgets (toggles, accordions, modals); logical focus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading states.
- **Mandatory visual feedback** for every click, hover, and submission.
- **Industrial flavor:** caution-yellow hazard stripe accents (CSS gradients) on section dividers or CTA bars; metallic plaque styling for section headings; rust `#8B4513` for secondary emphasis — but never at the cost of contrast.

---

## 4. DELIVERABLE & OUTPUT FORMAT

**Sections required (in order):**
1. **Hero** — headline, subcopy, primary CTA button, secondary link; brushed-metal backdrop with subtle tool/workshop texture; mobile-stacked flex layout.
2. **Features** — 3 cards, each with a Google Material Symbol icon, title, and description.
3. **How It Works** — 3 numbered steps with connecting visual flow (CSS-only connectors), each step on a metal plaque.
4. **Testimonials** — 3 quote cards with attribution.
5. **Pricing** — 3 tiers; middle tier visually elevated as "recommended" (caution-yellow highlight border).
6. **FAQ** — accessible accordion (`<details>`/`<summary>` or ARIA accordion), keyboard operable.
7. **Final CTA** — full-width section with hazard-stripe accent bar and email capture form.
8. **Footer** — secondary links grouped in flex columns, newsletter signup, copyright, theme toggle.

**Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond one deferred entry-point reference. All user-facing copy in English, written to fit the rugged workshop/hardware tone (e.g., "Built to last. Backed by pros."). No lorem ipsum — write real copy.

**Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.