HashiCorp Infra Dual demo
HashiCorp Infra Dual

A dark, developer-oriented infrastructure landing page style inspired by HashiCorp, featuring technical grid motifs, monospace details, and a clean multi-product platform layout for cloud and DevOps tooling.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 10.9 KB · 1476 words
# CODING AGENT SYSTEM PROMPT — "HashiCorp Infra Dual" Landing Page

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-grade landing page on the first attempt — full HTML, CSS, and JS, all sections built, no placeholders, no clarifying questions. Where this spec is silent, make expert decisions consistent with the rules below.

---

## 0. PROJECT BRIEF & DESIGN SYSTEM

- **Theme:** HashiCorp Infra Dual — Enterprise Infrastructure, Dual Light/Dark, Multi-Product Colors, Micro-Shadows, Uppercase Labels (2024–2026 Cloud Infrastructure era).
- **Sections (in this exact order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
- **Copy:** Write all user-facing copy in **English**, targeted at DevOps, platform engineering, and cloud infrastructure buyers. No lorem ipsum — author real, confident, enterprise-grade copy.

**Visual language (mandatory):**
- **Dual-mode rhythm:** clean white sections alternating with dramatic dark bands (`#15181e`) for the Hero and Final CTA. Depth comes from color layering, not heavy shadows.
- **Palette — Neutrals:** Black `#000000`, White `#ffffff`, Dark Charcoal `#15181e`, Light Gray `#f1f2f3`.
- **Palette — Product accents:** Terraform Purple `#7b42bc`, Vault Yellow `#ffcf25`, Waypoint Teal `#14c6cb`, Vagrant Blue `#1868f2`.
- **Micro-shadows:** dual-layer only, e.g., `box-shadow: 0 1px 1px rgba(97,104,117,0.05), 0 2px 4px rgba(97,104,117,0.05);` — nothing heavier.
- **Typography:** headings weight 600–700 with tight tracking (−0.01em to −0.02em) and `font-feature-settings: 'kern'` enabled; hero headline up to **82px at weight 600** on desktop (fluid — see 1.4); body text relaxed with `line-height: 1.63–1.69`.
- **Uppercase labels:** every section carries an eyebrow label at 13px, weight 600, `letter-spacing: 1.3px`, uppercase.
- **Border-radius:** tight — 2–8px only (default 5px). No pill shapes, no large rounds.

---

## 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 are targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays clean, semantic (`header`, `main`, `section`, `footer`, `nav`), and styling-agnostic — changing the look must require editing only the CSS.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
- Store all tokens in `:root` (and theme classes): `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- Add theme-specific tokens: `--bg-band-dark` (dark section band), `--terraform-purple`, `--vault-yellow`, `--waypoint-teal`, `--vagrant-blue`, plus accessible on-light/on-dark text variants of each accent (see 1.3).
- **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:** never pure `#ffffff` for large surfaces — map the spec's clean-white sections to `#fefefe`. Reserve pure white for text on dark bands.
- **Radius & Shadows:** `--radius-sm: 2px`, `--radius-md: 5px`, `--radius-lg: 8px`; `--shadow-sm`/`--shadow-md` built from the dual-layer micro-shadow formula above.
- **Spacing, Transitions, Elevation:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode Support**
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class.
- **Preserve the dual-band rhythm in dark mode:** light bands become elevated dark surfaces (e.g., `#1a1e25`), dark bands go deeper (e.g., `#0d0f13`), so section alternation remains visible. Theme switching must not require HTML restructuring.
- **Accent contrast:** full-saturation accents may be used for decorative fills, borders, and badges (with correctly contrasting text inside). When an accent is used **as text or icon color**, verify WCAG AA (4.5:1 body, 3:1 large/graphics) and define darker variants for light backgrounds (e.g., teal/blue) and lighter variants for dark backgrounds (e.g., `#a97ce0` purple, `#ffd75e` yellow).
- **Persistence:** user choice saved in `localStorage`, falling back to `prefers-color-scheme` on first visit; a visible toggle control with correct `aria-pressed`/`aria-label` state (sun/moon Google Icon).
- Dark-mode shadows must switch to black-based values so elevation stays perceptible.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with **Flexbox**; every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- The 82px hero headline must be fluid: `clamp(2.75rem, 5vw + 1.5rem, 5.125rem)`. All grids/flex rows collapse to columns on small viewports. **No horizontal scrolling from 320px up.**

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (or clean custom CSS driven by `@layer`/`@apply`). All utility classes must map back to CSS variables or generic reusable classes: `.btn`, `.card`, `.input-group`, `.label-eyebrow`, `.section-band--dark`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** load **Inter** (closest Google Fonts match to HashiCorp Sans) via `<link>`/`@import`, bound to `--font-base`. *Exception clause:* the source spec requests `system-ui` — honor it only as the fallback stack (`'Inter', system-ui, -apple-system, sans-serif`) and always enable `font-feature-settings: 'kern'`.
- **Icons:** Google Material Symbols only. Raw inline SVGs and local icon files are forbidden. Use them for feature icons, step markers, testimonial quote marks, FAQ chevrons, footer social icons, the theme toggle, button arrows, and loading spinners.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-md`, weight 600.
- **Variants:** `.btn-primary` (black on light bands / white on dark bands, token-driven), `.btn-secondary` (outlined), product-accent variants (`.btn-terraform`, `.btn-vault`, etc.), and `.btn-danger` visually distinct in **both** themes.
- **Hover:** brightness/shadow shift, `cursor: pointer`. **Focus:** distinct ring via `outline`/`box-shadow` using CSS variables. **Active:** `transform: scale(0.97)`.
- **Loading:** disables interactions, 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 styles driven by `--text-success`/`--text-error`.

**2.2 Card Component Requirements**
- **Default:** flexible Flexbox layout, `--bg-secondary`, `--border-default`, micro-shadow, `--radius-lg`.
- **Hover:** `transform: translateY(-2px)` or elevation shift. **Focus-within:** border highlight when a child link/button is focused. **Loading:** CSS shimmer skeleton that prevents layout jumps. **Empty state:** Google Icon plus guidance text.
- **Feature cards (3):** each carries one product accent (Terraform Purple, Vault Yellow, Waypoint Teal) as a 2px top border and tinted icon; uppercase eyebrow, title, body.
- **Pricing cards (3):** middle tier featured with an accent border and a "Most popular" badge; price + billing period, feature list with check icons, per-tier CTA.
- **Testimonial cards (3):** quote icon, quote, author initials block (CSS-styled, no external images), role, company.

**2.3 Form & Input Requirements**
- Newsletter signup in the footer: flex container wrapping a label, input, and a dedicated error feedback container.
- **States:** empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only. Errors and success messages announced via `aria-live`.

**2.4 Modal / Popup Requirements**
- Triggered from the Final CTA's secondary action ("Request a demo").
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
- **UX:** centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping with focus return, closable via `Esc` and overlay clicks, stacked at `--z-modal`.

**2.5 Page Section Requirements**
- **Sticky header:** wordmark, anchor nav (Features, How It Works, Pricing, FAQ), theme toggle.
- **Hero (dark band):** uppercase eyebrow label, fluid 82px H1, relaxed subcopy, primary + secondary CTAs, subtle CSS-only product-color accent (gradient edge or accent bar — no images).
- **Features (white band `#fefefe`), How It Works (Light Gray band `#f1f2f3`, 3 numbered steps `01/02/03` with uppercase labels and connecting line), Testimonials and Pricing (white bands), FAQ (accessible accordion: `aria-expanded` buttons, rotating chevron icons, animated panels), Final CTA (dark band, opens the modal), Footer (near-black band: brand + newsletter column, secondary link columns — Product, Resources, Company, Legal — copyright, social icons).** Every link and button has visible hover/focus states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow at any width.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shimmer, and panel animations).
- **Accessibility (a11y):** sufficient contrast in both Light and Dark modes; never rely on color alone to communicate state (pair icons/text with color); semantic HTML5; correct ARIA roles/labels on the toggle, accordion, and modal; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback, toasts, and loading states.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn-danger` and delete-style actions must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer>`).
- **JS responsibilities:** theme toggle with `localStorage` persistence, FAQ accordion, modal open/close with focus trap, newsletter validation with success/error states, smooth anchor scrolling — all reduced-motion aware.
- **Naming:** one consistent **BEM** convention (`.card`, `card__title`, `card--featured`) across the entire deliverable. Never mix conventions.
- **No unrequested placeholders:** author real English copy for every section; placeholders are permitted only where content was genuinely left unspecified.
- **First-attempt completeness:** deliver the full landing page — all eight sections, all component states, both themes functional — in one response.