Mistral Golden Amber demo
Mistral Golden Amber

A luxurious golden-amber landing page aesthetic blending premium French AI technology branding with elegant, high-end editorial styling.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 6.9 KB · 958 words
# System Prompt: Build "Mistral Golden Amber" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Mistral Golden Amber** — Golden Warm, Amber Gradients, Billboard Typography, Sharp Geometry, European Luxury (2024–2026 European AI Luxury era).

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

---

## 1. STRICT ARCHITECTURE RULES

**1.1 CSS-First & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden in HTML.
- Target everything via class/ID selectors only. HTML stays semantic and clean.
- Changing the theme must never require touching the markup.

**1.2 CSS Variables & Theme Tokens**
Define in `:root`:
- Colors: `--primary: #fa520f` (Mistral Orange), `--secondary: #ffa110` (Sunshine), `--bg-primary: #fffaeb` (Warm Ivory), `--bg-secondary: #fff0c2` (Cream), `--text-primary: #1f1f1f` (Mistral Black), `--text-secondary: #7f6315`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus `--gold: #ffd900` (Bright Gold) and `--flame: #fb6424`.
- Contrast pairing: every light background token pairs with dark text tokens; dark surfaces pair with light text. Enforce this everywhere.
- `--radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px` — sharp architectural corners, near-zero radius.
- Shadows: `--shadow-sm`, `--shadow-md`, and a multi-layer golden shadow token using `rgba(127,99,21,0.12)` (e.g. `-8px 16px 39px` plus layered offsets) to create the "golden hour" effect.
- `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Dark Mode (Mandatory)**
- Define dark tokens under `@media (prefers-color-scheme: dark)` and a `.dark` class.
- Dark palette: deep warm black surfaces (`#141210` / `#1f1f1f`), amber-tinted text (`#fffaeb`), same `--primary` accent adjusted for contrast.
- Persist user choice via `localStorage`, fall back to `prefers-color-scheme` on first visit. Include a visible toggle with correct `aria-pressed` / `aria-label` state. Note: the theme spec marks dark mode "Not Recommended" — implement it anyway as a functional, accessible fallback, tuned to keep the golden-amber mood.

**1.4 Flexbox & Mobile-First**
- Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- All rows convert to columns on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework**
- Use Tailwind CSS via CDN (or clean custom CSS mapped to generic classes: `.btn`, `.card`, `.input-group`). All utilities map back to the CSS variables above.

**1.6 Typography & Icons**
- Fonts: Google Fonts only — use **Archivo** (or **Inter**) as `--font-base`, weight **400 exclusively** across the entire page (no bold anywhere; authority through size, not weight).
- Headlines: **82px** (fluid via `clamp()` down to ~40px mobile), `letter-spacing: -2.05px`, weight 400.
- Body text: 16–18px, normal letter-spacing.
- Icons: **Google Material Symbols** only. Inline SVGs and local icon files are forbidden.
- Button labels: `text-transform: uppercase` for European formality.

---

## 2. THEME-SPECIFIC VISUAL DIRECTION

- **Background:** `#fffaeb` warm ivory; `#fff0c2` cream for secondary surfaces (cards, step blocks, pricing tiers).
- **Mistral Block Gradient:** `linear-gradient(135deg, #ffd900, #ffa110, #fa520f)` — use for the hero CTA button, section accent bars, pricing "featured" tier badge, and thin decorative rules. Never as full-page background.
- **Golden Shadows:** multi-layer `rgba(127,99,21,0.12)` shadows on cards and hero panel, e.g. `box-shadow: -8px 16px 39px rgba(127,99,21,0.12), 0 4px 12px rgba(127,99,21,0.08)`.
- **Corners:** 0px radius everywhere (max 2px) — sharp architectural geometry.
- **Photography:** any imagery uses golden-toned landscape photos (via picsum placeholders with warm overlay tinting acceptable).
- **Buttons:** uppercase labels, `--primary` fill with ivory text, or outlined `--text-primary` variants.

---

## 3. COMPONENT SPECIFICATIONS

**3.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px touch target.
- Hover: brightness shift + shadow lift, `cursor: pointer`.
- Focus: distinct focus ring via `outline`/`box-shadow` using theme variables.
- Active: `transform: scale(0.97)`.
- Loading: disabled interaction, CSS spinner, no dimensional distortion.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- `.btn-danger`: visually distinct in both light and dark themes (destructive actions in FAQ delete or footer — style it even if only referenced).

**3.2 Cards (Features, Steps, Pricing, Testimonials)**
- Default: flexbox layout, `--bg-secondary` surface, sharp corners, 1px `--border-default` border, golden shadow.
- Hover: `transform: translateY(-2px)` + shadow elevation shift.
- Focus-within: border highlight when a child link/button gains focus.
- Skeleton shimmer styles defined in CSS (for testimonial loading).
- Empty state: Google Icon + guidance text structure.

**3.3 Forms (FAQ contact / newsletter in Final CTA)**
- 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, dedicated error container.
- `aria-live` region for error/success feedback.

**3.4 FAQ Accordion / Modal-like disclosures**
- Opening/Open/Closing animated via CSS transitions.
- Keyboard operable, `aria-expanded` on triggers, `Esc` closes where applicable.

---

## 4. GLOBAL UX & ACCESSIBILITY

- Responsive by default; fluid `clamp()` typography; no horizontal overflow.
- All state changes transition with `var(--transition-normal)`, respecting `prefers-reduced-motion`.
- WCAG-sufficient contrast in light **and** dark modes. Never rely on color alone for state — pair icons/text with color.
- Semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), logical focus order, full keyboard operability.
- Every click/hover/submit triggers visible feedback.
- All user-facing copy in **English**. Write real, on-theme copy for a European luxury AI product (e.g., "Mistral-grade intelligence, amber-warm design") — no lorem ipsum.

---

## 5. DELIVERABLE

- Files: `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion, form validation feedback). No inline `<script>` beyond one deferred entry point; no inline CSS.
- One consistent naming convention (BEM or a fixed utility set) across the whole deliverable.
- Section order: Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers, middle tier featured with gradient badge) → FAQ → Final CTA → Footer with secondary links.
- Output the complete, working code immediately.