Burnt Orange Premium demo
Burnt Orange Premium

A warm, earthy, and elegant design style built around burnt orange tones, conveying a premium organic feel suited to farm-to-table restaurants, artisanal products, and natural lifestyle brands.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 7.1 KB · 971 words
# System Prompt: Build “Laranja Queimado Premium” Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in a **single attempt** with the following mandatory specifications.

**Theme:** Laranja Queimado Premium — Natural Elegance
**Keywords:** Warm, earthy, natural, premium, elegant, autumnal, rich, sophisticated, organic, cozy
**Era:** Timeless Organic Modern
**Sections Required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links
**All user-facing copy must be written in English.**

---

## 1. STRICT ARCHITECTURE RULES

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling must live in a dedicated `style.css` file. **The `style="..."` attribute is forbidden in HTML.**
- All design properties, layout rules, and states must target elements via class or ID selectors only.
- HTML must remain clean, semantic (`<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`), and agnostic of visual styling.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root` and theme classes:

- **Colors:** `--primary: #994C27` (Burnt Orange), `--secondary: #224229` (Deep Forest Green), `--bg-primary: #F5F5DC` (Cream Beige), `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`. Accent tokens: `--accent-gold: #B8860B`, `--accent-brown: #5C4033`, `--accent-yellow: #F0E68C`.
- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforced in both light and dark themes.
- **Light Mode Background:** Default to Cream Beige `#F5F5DC`, never pure white; use `#fefefe` only where a near-white surface is required.
- **Shape & Depth:** `--radius-sm: 6px`, `--radius-md: 8px`, `--radius-lg: 16px`, `--shadow-sm`, `--shadow-md: 0 4px 10px rgba(0,0,0,0.1)` (soft, diffused).
- **Spacing & Motion:** `--spacing-gap`, `--transition-fast: 0.2s`, `--transition-normal: 0.3s`, `--ease-standard: ease-in-out`.
- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

### 1.3 Mandatory Dark Mode
- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`.
- Dark palette: deep forest green / dark brown backgrounds (`#224229`, `#3B2A20`) with cream beige light text (`#F5F5DC`), burnt orange and muted gold accents preserved.
- Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit.
- Include a visible theme toggle button with correct `aria-pressed` and `aria-label` states.

### 1.4 Flexbox Layout & Mobile-First
- Build all layouts with Flexbox; **every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.
- All sections must be mobile-responsive out of the box: card grids, pricing tiers, and steps stack into columns on small viewports. No horizontal scrolling at any breakpoint.

### 1.5 Framework Default
- Use Tailwind CSS (via CDN) or clean custom CSS driven by `@layer`/`@apply`. All utility usage must map back to CSS variables or reusable generic classes (`.btn`, `.card`, `.input-group`, `.section`, `.container`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Headings:** Google Font `Playfair Display` (serif) bound to `--font-heading`.
- **Body:** Google Font `Open Sans` (sans-serif) bound to `--font-body`.
- **Icons:** Google Material Symbols only. **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT SPECIFICATIONS

### 2.1 Buttons
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Primary CTA uses `--primary` background with cream text; secondary uses outline style with `--primary` border.
- **Hover:** Brightness/shadow shift, `cursor: pointer`.
- **Focus:** Distinct focus ring via `outline`/`box-shadow` using CSS variables.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Danger:** Generic `.btn-danger` visually distinct in both themes.

### 2.2 Cards (Features, Testimonials, Pricing)
- **Default:** Flexible Flexbox layout, subtle borders, soft diffused elevation (`--shadow-sm`), `--bg-secondary` or `#fefefe` surfaces, `--radius-md` corners.
- **Hover:** `transform: translateY(-2px)` with shadow shift.
- **Focus-within:** Border highlight when a child link/button receives focus.
- **Loading (Skeleton):** Shimmer animation defined in CSS.
- **Empty State:** Google Icon plus clear guidance text fallback.
- Each Feature card includes a Google Material Symbol icon; each Pricing tier highlights the recommended plan with a distinct border/accent.

### 2.3 Forms & Inputs (FAQ contact / newsletter in Footer or Final CTA)
- **States:** Empty, Focused (outline ring), Filled, Valid (success border/icon), Invalid (error border, error text, error icon), Disabled, Read-only.
- **Structure:** Flex container wrapping label, input, and dedicated error feedback container. Never rely on color alone — pair with icons/text.

### 2.4 Modal / FAQ Accordion
- FAQ implemented as accessible accordion (`<details>` or ARIA `button`/`region` pattern): Opening, Open, Closing states animated via CSS transitions.
- If any modal is used: centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.

---

## 3. GLOBAL UX & MICRO-INTERACTIONS

- **Responsive by default:** fluid sizing, no horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.
- **Visual effects:** Soft gradients (cream → beige), subtle natural texture feel via layered gradients (no external image dependencies required), minimal diffused shadows, natural light/depth feel.
- **Accessibility:** WCAG-sufficient contrast in both light and dark modes; semantic HTML5; correct ARIA roles/labels on the toggle, accordion, and any custom widgets; logical focus order; full keyboard operability; `aria-live` regions for form feedback and dynamic messages.
- **Mandatory visual feedback:** Every click, hover, and submission triggers a visible state change.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — separate and complete. No inline `<script>` blocks beyond a single deferred entry-point reference.
- **Naming:** One consistent convention (BEM or a fixed utility set) across the entire deliverable — never mixed.
- **Content:** Write real, thematically appropriate English copy for every section (Hero headline, 3 feature descriptions, 3 steps, 3 testimonials with names, 3 pricing tiers with feature lists, 6+ FAQ questions, final CTA, footer secondary links). No lorem ipsum.
- **Footer:** Include secondary navigation links, social icon links (Google Material Symbols), and copyright line.
- Deliver the final code immediately, in one complete attempt, with no placeholders or TODOs.