Silicon Dreams demo
Silicon Dreams

A darker tech-corporate take on Frutiger Aero aesthetics, blending glossy retrofuturist interfaces with speculative fiction vibes.
Category: Dark Tech & Cyber
Era: 2000s Retro-Futurism
Prompt: 8.0 KB · 1049 words
# System Prompt: Build "Silicon Dreams" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. The theme is **Silicon Dreams** — dark glossy tech futurism (2005–2012 era, Frutiger Metro / corporate keynote aesthetic) with circuitry grids, electric-blue glow, glass sheen, and HUD hints.

**Sections required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. Architecture Rules (Mandatory)

**1.1 CSS-First & Zero Inline CSS**
- All styling lives in `style.css`. **No `style="..."` attributes in HTML.**
- Target everything via class/ID selectors only. HTML stays semantic and style-agnostic.
- No inline `<script>` blocks beyond one deferred `<script src="script.js" defer>` entry point.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` exactly as specified:

```css
--color-bg: #050b14; --color-surface: #0d1b2a; --color-surface-strong: #132840;
--color-border: #234a6b; --color-text: #eaf4ff; --color-text-muted: #8fb3d1;
--color-primary: #2fb8ff; --color-accent: #6ee7ff; --color-glow: rgba(47,184,255,0.55);
--radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
--shadow-md: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px var(--color-glow);
--shadow-lg: 0 18px 44px rgba(0,0,0,0.55), 0 0 32px var(--color-glow);
--font-sans: 'Frutiger', 'Segoe UI', system-ui, sans-serif;
--font-display: 'Frutiger', 'Eurostile', 'Segoe UI', sans-serif;
--font-mono: 'Consolas', ui-monospace, monospace;
--text-xs … --text-5xl; --space-1 … --space-24;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--circuit-grid: (faint blue grid, 24px cells, rgba(47,184,255,0.06));
--glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%);
--z-dropdown: 100; --z-modal: 200; --z-toast: 300;
--transition-fast: 150ms; --transition-normal: 250ms;
```

**Signature moves (repeat throughout):** the faint `--circuit-grid` on the page background paired with an electric-blue outer glow (`--shadow-md`/`--shadow-lg`) on raised surfaces (nav, cards, primary buttons, input focus), plus `--glass-sheen` overlays on glossy panels.

**1.3 Mandatory Light + Dark Mode**
- The source spec's default palette is dark. **You must also define a light mode** with a background that fits the theme's mood (never pure white; use `#fefefe` or a cool near-white like `#eef4fa` if appropriate), pairing light backgrounds with dark text and dark backgrounds with light text.
- Implement via `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`/`<body>`.
- Provide a visible theme toggle button in the nav with correct `aria-pressed` and `aria-label` ("Switch to light mode" / "Switch to dark mode").
- Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit.
- Validate contrast in **both** modes before finishing.

**1.4 Flexbox Layout & Mobile-First**
- Build all layouts with Flexbox. Every flex container defaults to `align-items: center` unless a section explicitly justifies otherwise (e.g., feature card body copy top-aligned).
- Mobile-first: rows collapse to columns on small viewports; no horizontal scrolling at any width; fluid type via `clamp()` where useful.

**1.5 Framework**
- Use Tailwind CSS via CDN **or** clean custom CSS driven by `@layer`/`@apply` — pick one and stay consistent. All utilities must map back to the CSS variables above and reusable generic classes (`.btn`, `.card`, `.input`, `.badge`, `.nav`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Text: Google Fonts `<link>` (e.g., **Inter** or **Chakra Petch** for the display face to evoke Eurostile/Frutiger futurism) bound to `--font-sans`/`--font-display`. Keep the fallback stacks from the token spec.
- Icons: **Google Material Symbols** only. Explicitly forbidden: raw inline SVGs, local icon files, emoji icons.
- All user-facing copy in **English**.

---

## 2. Component Specifications

**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--ghost`)**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; glossy `--glass-sheen` over `--color-surface-strong`; border `--color-border`.
- `.btn--primary`: gradient `linear-gradient(180deg, #3fc4ff, #1782c4)`, dark text `#041220`, `--shadow-md` blue glow.
- Hover: `--shadow-md` glow lift + `translateY(-1px)`, `cursor: pointer`.
- Focus-visible: `outline: 2px solid var(--color-accent); outline-offset: 2px;`
- Active: `transform: scale(0.97)`.
- Loading: `.btn--loading` disables pointer events, shows an animated Material Symbols spinner icon (CSS rotation), preserves button dimensions.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transform.
- Success/Error feedback states using `--text-success`/`--text-error` tokens (define them).

**2.2 Cards (`.card`)**
- Default: `--color-surface` + `--glass-sheen`, `--radius-lg`, `1px solid --color-border`, `--shadow-md` glow, `--space-6` padding.
- Hover (interactive cards): `--shadow-lg` + `translateY(-2px)`.
- Focus-within: border highlights `--color-accent` when a child link/button is focused.
- Skeleton: shimmer animation class for loading states.
- Empty state pattern: Material Symbol icon + guidance text.

**2.3 Forms & Inputs (`.input`)**
- States: empty, focused (blue glow ring via `--shadow-md` + `--color-primary` border), filled, valid (success border + check icon), invalid (error border, error text, error icon), disabled, read-only.
- Structure: flex `.input-group` wrapping label, input, and a dedicated error feedback element with `aria-live="polite"`.

**2.4 FAQ Accordion / Modal-like patterns**
- FAQ uses `<details>`/`<summary>` or ARIA-compliant buttons with `aria-expanded`; animated open/close via CSS transitions; keyboard operable.
- Any modal/popup (e.g., newsletter success): centered flex overlay, backdrop, Material Symbols close button, focus trapping, `Esc` and overlay-click closing, opening/closing transitions, `--z-modal` stacking.

---

## 3. Global UX & Micro-Interactions

- **Responsive by default** — fluid sizing, no horizontal overflow at any breakpoint.
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; respect `prefers-reduced-motion: reduce` (disable transforms/transitions).
- **Accessibility:** WCAG-sufficient contrast in **both light and dark modes**; never rely on color alone (pair error red with icons/text); semantic HTML5 (`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`); logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).
- **Mandatory visual feedback:** every click/hover/submit triggers a visible state change.
- **Destructive/danger actions:** `.btn-danger` visually distinct in both themes.
- **HUD hints:** use `--font-mono` for small uppercase labels/badges (e.g., "SYS.01 // FEATURES") to reinforce the HUD/circuitry aesthetic; decorative glow text on hero headline via `text-shadow: 0 0 24px var(--color-glow)`.

---

## 4. Deliverables & Output Format

- **Files:** `index.html`, `style.css`, `script.js` — separate files, one deferred script entry point.
- **Naming:** one consistent convention (BEM: `.btn--primary`, `.card__title`, `.faq__item`) across the entire deliverable. Never mix conventions.
- **Content:** write realistic, on-theme English marketing copy for a fictional tech product (e.g., a next-gen compute/cloud platform). No lorem ipsum — invent plausible copy matching the Silicon Dreams corporate-futurist tone.
- **Section coverage:** Hero (headline, subcopy, primary + secondary CTA, HUD-style decorative elements), Features (3 cards with Material Symbols icons), How It Works (3 numbered steps), Testimonials (3 quotes with avatars-as-initials), Pricing (3 tiers, middle tier highlighted as "recommended"), FAQ (5–6 items), Final CTA band, Footer with secondary links + legal + social icon links.
- **No unrequested placeholders** beyond what is genuinely unspecified.

Build the complete landing page now, on the first attempt, following every rule above.