Utilitarian demo
Utilitarian

A stark, no-frills design stripped to absolute essentials, prioritizing pure function and clarity for signage, industrial interfaces, and informative packaging.
Category: Brutalism & Raw
Era: 2020s Modern
Prompt: 17.8 KB · 2416 words
# SYSTEM PROMPT — CODING AGENT BUILD SPECIFICATION

**Project:** Complete "UTILITARIAN" Landing Page — production-ready, built correctly on the first attempt.
**Design Language:** Utilitarian — Industrial Design & Military Signage. Essential, function-over-form, stark, typography-driven, information-dense.
**Governing Mindset:** Every element must serve an informational or functional purpose. If a visual choice cannot be justified as function, delete it.

---

## 1. STRICT RULES & ARCHITECTURE

**1.0 Design Language Directive (Governs All Decisions)**
* **Zero decoration:** No gradients, no rounded corners (`border-radius: 0` everywhere), no box-shadows, no photographs, no illustrations, no ornament, no filler content.
* **Typography-driven:** Monospace only. Labels, headings, nav, buttons, and CTAs use `text-transform: uppercase`. Body copy remains sentence case for legibility at 14px.
* **Rigid grid:** Strict 12-column grid; visible 1px grid lines are a core design element, not a defect.
* **Functional color coding only:** Signal Red `#CC0000` = alert/error/destructive; Safety Yellow `#FFD700` = warning/attention/featured; Industrial Blue `#003366` = info/links/confirmation. Color is never decorative and never the sole carrier of meaning.
* **Density over comfort:** Base font 14px, `line-height: 1.4`, base padding unit 8px, high information density, minimal whitespace.
* **Motion policy:** No animations except functional state changes (hover, focus, active, loading, expand/collapse, open/close), all ≤100ms.

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
* All design properties, layout rules, and states are targeted exclusively via class/ID selectors.
* HTML stays clean, semantic, and style-agnostic: retheming the entire site must require editing `style.css` only — never the markup.
* No inline event handlers; all behavior attaches via `addEventListener` in `script.js`.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root`, overridden by theme selectors:
* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Functional signals:** `--signal-yellow: #FFD700`, `--signal-red: #CC0000`, `--industrial-blue: #003366`, `--dark-grey: #333333`, `--light-grey: #CCCCCC`, `--grid-line` (hairline color; flips with theme).
* **Light-mode mapping:** `--primary: #000000`, `--secondary: #666666`, `--bg-primary: #FFFFFF`, `--bg-secondary: #CCCCCC`, `--text-primary: #000000`, `--text-secondary: #666666`, `--text-success: #003366` (confirmation is coded as info-blue per this palette), `--text-error: #CC0000`, `--border-default: #000000`, `--border-error: #CC0000`, `--border-success: #003366`.
* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in every theme, not just the default.
* **Light Mode Background rule:** do not default to pure white; where a near-white is needed use `#fefefe`. **Explicit exception:** the Utilitarian spec mandates Pure White `#FFFFFF` as a functional palette token (true-white signage surface); therefore `--bg-primary: #FFFFFF` in light mode is the sanctioned exception for this build.
* **Radius & shadows:** define `--radius-sm`, `--radius-md`, `--radius-lg` (all `0px`) and `--shadow-sm`, `--shadow-md` (both `none`). Tokens must exist per architecture; values are zeroed per the no-decoration mandate.
* **Spacing & transitions:** `--spacing-gap: 8px`, `--transition-fast: 60ms`, `--transition-normal: 100ms`, `--ease-standard: linear` (mechanical; no easing flourish).
* **Elevation:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`. Layering is expressed via z-index + solid 1px borders only — never shadows.
* **Typography:** `--font-base: 'IBM Plex Mono', 'Courier New', monospace`; base `font-size: 14px`; `line-height: 1.4`.

**1.3 Mandatory Dark Mode Support**
* Dark mode is not optional. Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`.
* **Dark-mode mapping:** `--bg-primary: #000000`, `--bg-secondary: #333333`, `--text-primary: #FFFFFF`, `--text-secondary: #CCCCCC`, `--primary: #FFFFFF`, `--border-default: #FFFFFF`, `--grid-line: #FFFFFF` (grid lines invert to white hairlines). Buttons invert (white fill / black text).
* **Signal colors in dark mode:** Safety Yellow `#FFD700` passes on black and stays unchanged. Signal Red `#CC0000` fails AA as text on black — use a lightened error red for text/borders (e.g., `#FF5555`); solid `#CC0000` fills remain valid where the text on top is white. Industrial Blue `#003366` is too dark on black — use a lightened info blue for text (e.g., `#6699CC`). Hue identity must remain recognizable; verify WCAG AA in both modes.
* **Switching:** background and text variables swap seamlessly with zero HTML restructuring.
* **Persistence:** store the choice in `localStorage` (e.g., key `theme`); fall back to `prefers-color-scheme` on first visit. Provide a visible header toggle — a signage-style text button reading `THEME: LIGHT` / `THEME: DARK` (or Material Symbols `dark_mode`/`light_mode`) — with correct `aria-pressed` and `aria-label` state and a 44×44px minimum touch target.

**1.4 Layout System — Rigid 12-Column Grid + Flexbox Internals**
* **Page macro-layout (Grid):** `display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;` — **justified exception** to the flexbox-default rule, mandated by this theme's rigid-grid spec.
* **Visible grid-line technique:** the grid container's background is `--grid-line` (black in light mode, white in dark mode); every cell's background is `--bg-primary`. The 1px gaps expose the container background as hairline grid lines. Grid lines must remain visible at every breakpoint.
* **Component internals (Flexbox):** every flex container defaults to `align-items: center` unless an exception is documented in this spec (e.g., `.input-group` uses `align-items: stretch` to stack label/input/error vertically).
* **Mobile-first responsiveness:** no horizontal scrolling, ever. Breakpoints at ~640px / 768px / 1024px. Below 768px the 12-column grid collapses (e.g., `repeat(2, 1fr)` or single column) while preserving the 1px grid lines; multi-column rows (features, steps, pricing) stack vertically.

**1.5 Framework Default & Tailwind CSS Integration**
* Default framework: Tailwind CSS. Custom theme CSS lives in `style.css` using Tailwind's `@layer` / `@apply` directives.
* **Markup carries semantic BEM classes only** (`.btn`, `.card`, `.input-group`, `.grid-12`, `.cell`, `.section-label`). Do not paste utility-class soup into the HTML — apply Tailwind utilities inside the BEM classes via `@apply` so retheming never touches markup.
* All utility values must map back to the CSS variables defined in 1.2.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** load IBM Plex Mono from Google Fonts (weights 400, 500, 700) via `<link>` in `<head>`; bind to `--font-base`. Monospace everywhere — no secondary font, no sans-serif anywhere.
* **Icons:** Google Material Symbols (Outlined) via Google Fonts. **Inline SVGs and local icon files are forbidden. No emoji.** Icons are functional only — state indicators (error, close, check), never decoration. Where the signage aesthetic prefers typographic glyphs (`+`, `−`, `→`, `[X]`), monospace text glyphs are permitted — they are typography, not icon assets.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

All states are styled via CSS classes. Every state change must be visible; never rely on color alone.

**2.1 Button (`.btn`; variants `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.btn--info`, `.btn--warning`)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase, 1px solid border, `border-radius: 0`, minimum touch target 44×44px, padding `8px 16px`. `.btn--primary`: solid `--primary` fill with inverted text. `.btn--secondary`: transparent, 1px `--border-default`, `--text-primary` text. `.btn--danger`: Signal Red — visually distinct in both themes. `.btn--warning`: Safety Yellow fill + black text (featured pricing CTA).
* **Hover:** fill/text inversion (black↔white flip) or brightness shift; `cursor: pointer`. Inversion is the theme-preferred pattern.
* **Focus:** always-visible ring: `outline: 2px solid var(--industrial-blue)` (lightened info blue in dark mode), `outline-offset: 2px`. Never remove focus rings.
* **Active/Pressed:** `transform: scale(0.97)` with `transition: var(--transition-fast)`.
* **Loading (`.is-loading`):** disables interaction and blocks double-clicks (JS sets `disabled` + `aria-busy="true"`); renders a monochrome CSS spinner (rotating 1px-bordered square) or animated Material Icon without changing button dimensions; announced via `aria-live`.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`, hover inversion removed.
* **Success/Error (`.is-success` / `.is-error`):** temporary feedback driven by `--text-success` / `--text-error`, always paired with a text label or icon ("OK" / "ERROR"), announced in an `aria-live` region.

**2.2 Card (`.card`)**
* **Default:** grid cell or flex column; background `--bg-primary` (or `--bg-secondary` for panel variants); 1px solid `--border-default`; `border-radius: 0`; no shadow; 8px internal padding; dense internal layout.
* **Hover (interactive cards only):** since shadows are forbidden, feedback = border weight 1px→2px, header-strip inversion, or subtle `transform: translateY(-2px)`. A visible change is mandatory.
* **Focus-within:** border shifts to info blue / 2px when a child link or button receives focus.
* **Loading (skeleton):** flat `--bg-secondary` blocks with a stepped opacity blink (`steps()`) — gradient shimmer is decorative and forbidden. Under `prefers-reduced-motion`, the blink is disabled (static blocks). Skeletons must match final dimensions to prevent layout jumps.
* **Empty state:** centered Material Icon (functional) + uppercase guidance text.

**2.3 Form & Input (`.input-group`)**
* **Structure:** flex column wrapping an uppercase `<label>`, the field, and a dedicated error-feedback container. Documented exception: `align-items: stretch` (vertical stack).
* **States:** empty; focused (2px solid info-blue outline ring — no glow); filled; valid (`--border-success` + "OK" text or check icon); invalid (`--border-error` + red error text + error icon + message — icon and text mandatory, color alone forbidden); disabled (`opacity: 0.5`, `cursor: not-allowed`); read-only (`--bg-secondary` background, no focus ring).
* Labels bound with `for`/`id`; errors wired via `aria-describedby` and announced in an `aria-live` region.

**2.4 Modal / Popup (`.modal`)**
* **States:** opening, open, loading, success/error, closing — all animated via CSS transitions limited to ≤100ms opacity (functional state changes only; no scale/slide flourishes).
* **UX:** centered flex container (`align-items: center`); solid backdrop `rgba(0,0,0,0.7)`; panel = `--bg-primary` + 1px `--border-default`, no radius/shadow; `z-index: var(--z-modal)`; Material Icon `close` button (44×44px, `aria-label="Close dialog"`); keyboard focus trap; close via `Esc` and overlay click; focus returns to the trigger; `role="dialog"` + `aria-modal="true"`.

**2.5 FAQ Accordion (`.faq__item`)**
* Each item: uppercase question as a `<button>` with `aria-expanded` + `aria-controls`, and a collapsible answer region. Indicator: monospace text glyph `+` / `−` (or Material `expand_more`). Expand/collapse transition ≤100ms (functional). Full keyboard operability; visible focus rings; never color-only state signaling.

---

## 3. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION

**Global structure:** semantic `<header>`, `<main>`, `<footer>`. `<main>` is the `.grid-12` container (12 columns, visible 1px lines per 1.4). Every section opens with a full-width **section label bar** — e.g., `SEC/01 // HERO` — uppercase, inverted strip (black bar / white text in light mode; inverted in dark). These bars are functional wayfinding, not decoration. Write all user-facing copy in English, in a terse industrial-signage voice (imperative, technical, zero marketing fluff). **Lorem ipsum is prohibited** — compose real thematic copy. No photographs or illustrations anywhere; the brand is a text wordmark.

**Header (sticky):** 1px bottom border; flex row, `align-items: center`; text wordmark left; uppercase nav links (FEATURES / PROCESS / PRICING / FAQ) with hover inversion and visible focus rings; theme toggle (per 1.3) right; a skip-link precedes it in the DOM (hidden until focused: Safety Yellow bar, black text).

**SEC/01 — HERO:** left cell spans 7–8 columns: metadata strip (REF/date/version-style data), H1 (32–48px monospace, uppercase), one sentence-case subline, `.btn--primary` + `.btn--secondary` CTAs. Right cell spans 4–5 columns: a dense "SYSTEM STATUS" panel — key-value rows (`STATUS: OPERATIONAL` in info blue, `UPTIME: 99.99%`, `BUILD: V2.4.1`, `REGION: EU-WEST`) demonstrating functional color coding.

**SEC/02 — FEATURES (3 cards):** three `.card` cells, 4 columns each (stack on mobile). Each card: index `F-01`, one functional Material Icon, uppercase title, dense sentence-case description, footer link `READ MORE →`. Apply all 2.2 states.

**SEC/03 — HOW IT WORKS (3 steps):** three cells, 4 columns each. Each step: `STEP 01` label, uppercase title, sentence-case description, separated by the grid's 1px lines (structural dividers only).

**SEC/04 — TESTIMONIALS:** three record-style entries styled as data records/log lines: sentence-case quote, metadata row (`NAME: … / ROLE: … / CO: … / REF: …`) in uppercase secondary text, 1px separators. Layout: single column or two-per-row, collapsing on mobile.

**SEC/05 — PRICING (3 tiers):** three `.card` cells, 4 columns each. Each: uppercase tier name, large monospace price with `/MO` unit, dense feature list using functional notation — `[+]` included, `[−]` excluded (notation, not color, carries meaning) — and a CTA. **Featured middle tier:** Safety Yellow header bar or 2px yellow border + text tag `RECOMMENDED` (text + color, never color alone); its CTA is `.btn--warning`. Other tiers use `.btn--secondary`. CTAs demonstrate loading → success states with `aria-live` feedback.

**SEC/06 — FAQ:** five to six accordion items (per 2.5), full-width rows with 1px dividers; each row: `Q-01` index, uppercase question, `+`/`−` indicator.

**SEC/07 — FINAL CTA:** full-width inverted panel (black background / white text in light mode; inverted in dark) with a 4px solid `--signal-yellow` left border (attention coding). Contains: uppercase headline, one sentence-case line, and an email capture `.input-group` + `.btn--primary` submit demonstrating the full state machine: empty → loading → success/error, announced via `aria-live`.

**SEC/08 — FOOTER:** grid of cells: wordmark/colophon cell; three to four uppercase link columns (secondary links: PRODUCT, COMPANY, RESOURCES, LEGAL) with hover inversion and focus rings; bottom bar: copyright line, `SYSTEM STATUS: OPERATIONAL` (info blue), dense `--bg-secondary` or inverted strip. Link columns collapse 4 → 2 → 1 across breakpoints.

---

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, no horizontal overflow at any width, grid lines preserved on mobile.
* **Smooth animations:** transitions only on functional state changes, using `transition: var(--transition-fast|normal) var(--ease-standard)`. Honor `prefers-reduced-motion`: reduce all transitions to 0ms, disable skeleton blink and spinner rotation (fall back to text status + `aria-busy`).
* **Accessibility:** WCAG AA contrast in both light and dark modes (apply the dark-mode signal-color adjustments from 1.3). Never rely on color alone — pair every coded color with text, icon, or notation. Semantic HTML5 throughout (`header`, `nav`, `main`, `section`, `footer`, correct `h1`–`h3` hierarchy). Correct ARIA roles/labels on the theme toggle, accordion, modal, and form feedback. Logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for all dynamic feedback (form errors, loading, success).
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (inversion, border weight, outline, or text status).
* **Destructive actions:** `.btn--danger` must be visually distinct in both themes (solid `#CC0000` + white text, or red border + lightened red text in dark mode).

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `<script>` blocks and no inline styles; the only script reference is a single deferred `<script src="script.js" defer>`. Google Fonts / Material Symbols `<link>` tags go in `<head>`.
* **Naming convention:** BEM only (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.faq__item`, `.pricing-card--featured`, `.grid-12`, `.cell`, `.section-label`). Never mix conventions; Tailwind utilities appear only inside `@apply` in `style.css`.
* **No unrequested placeholders:** all copy is real, English, and theme-appropriate (no lorem ipsum, no TODOs). Build exactly the sections specified — header plus SEC/01–SEC/08 — and nothing extra.
* **First-attempt completeness:** the delivered page must fully work out of the box: theme toggle with persistence, accordion, all button/form states, responsive grid, and full keyboard and screen-reader operability.

**Final compliance checklist (self-verify before submitting):** zero `style=""` attributes · zero inline SVGs · zero border-radius · zero box-shadows · zero gradients · monospace-only typography · visible 1px grid lines at all breakpoints · complete dark mode with AA contrast · localStorage theme persistence with `aria-pressed` toggle · all component states present (hover/focus/active/loading/disabled/valid/invalid) · `prefers-reduced-motion` honored · no horizontal scroll · BEM-only custom classes · three files, one deferred script.