Material AI Style demo
Material AI Style

A clean, vibrant Material Design-inspired landing page style for generative AI platforms, featuring bold colors, soft elevation, and polished modern surfaces.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 6.5 KB · 860 words
# System Prompt: Build "Estilo Material AI" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Follow every rule below strictly.

**Theme:** Estilo Material AI — Clean, Vibrant, User-Friendly generative AI platform.
**Style Category:** Glass & Soft UI (soft elevation, subtle glassmorphism surfaces, rounded corners, gentle gradients) fused with Material Design principles.
**Sections:** 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. Architecture Rules (Mandatory)

**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. HTML stays semantic and clean.
- One consistent naming convention (BEM, e.g. `.hero__title`, `.pricing-card__feature`) across the whole deliverable — never mix conventions.

**1.2 CSS Variables & Theme Tokens**
Define in `:root`:
- Colors: `--primary: #4285F4`, `--secondary: #EA4335`, `--accent-yellow: #FBBC05`, `--accent-green: #34A853`, `--accent-cyan: #00BCD4`, plus `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- Light mode background: use `#fefefe` / `#F8F9FA` — never pure `#ffffff` as page background.
- Contrast pairing: every light background token pairs with dark text tokens, every dark background token pairs with light text tokens — in **both** themes.
- Shape & depth: `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 24px`, `--shadow-sm`, `--shadow-md`, plus a glass token `--glass-bg: rgba(255,255,255,0.65)` and `--glass-blur: blur(14px)`.
- Motion & spacing: `--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**
- Provide dark tokens via `.dark` class AND `@media (prefers-color-scheme: dark)` fallback.
- Theme toggle in the header: Google Material Symbols icon (dark_mode/light_mode), correct `aria-pressed` and `aria-label`.
- Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. No HTML restructuring when switching.

**1.4 Flexbox & Mobile-First**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless a documented exception exists.
- Mobile-first responsiveness: hero stacks vertically, pricing tiers become a single column, features grid wraps. No horizontal scrolling at any viewport width.

**1.5 Framework**
- Use plain CSS (or Tailwind via `@layer`/`@apply`) — all utilities must map back to the CSS variables above and generic reusable classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Only)**
- Fonts: Google Fonts — **Roboto** for body, **Poppins** or Roboto for headings; bind to `--font-base`.
- Icons: **Google Material Symbols** only. No inline SVGs, no local icon files, no emoji icons.

---

## 2. Component Specifications

**2.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px.
- Hover: brightness/shadow shift, `cursor: pointer`. Focus: distinct focus ring via `outline`/`box-shadow` using theme variables. Active: `transform: scale(0.97)`.
- Loading: `.is-loading` disables interaction, shows a CSS spinner or animated Material Symbol without distorting dimensions. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Primary CTA uses the dynamic gradient `linear-gradient(to right, #4285F4, #34A853)` with a subtle material shadow.

**2.2 Cards (feature cards, pricing tiers, testimonials, FAQ items)**
- Default: flexbox layout, glass surface (`--glass-bg` + `--glass-blur`), soft border, `--radius-lg`, `--shadow-sm`.
- Hover: `transform: translateY(-2px)` and shadow elevation shift. `:focus-within` highlights the border when a child link/button is focused.
- Skeleton shimmer animation defined in CSS for loading states. Empty/error fallback layouts use a Material Symbol icon plus guidance text.

**2.3 Forms (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 a dedicated error feedback container with `aria-live="polite"`.

**2.4 FAQ Accordion / Modals**
- FAQ items open/close animated via CSS transitions (`max-height`/grid rows), keyboard operable, `aria-expanded` on triggers, `aria-hidden` on panels.
- Any modal: centered flex container, backdrop overlay, Material Symbol close button, focus trapping, close via `Esc` and overlay click. States: opening, open, loading, success/error, closing — all CSS-animated.

---

## 3. Global UX & Micro-Interaction Rules

- **Responsive by default:** fluid sizing, breakpoints for tablet/mobile, zero horizontal overflow.
- **Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion: reduce` (disable transforms/shimmer/spinners).
- **Accessibility:** WCAG-sufficient contrast in both themes; never rely on color alone to communicate state; semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`); logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback.
- **Visual feedback:** every click, hover, and submission triggers a visible state change (Material ripple effect class `.material-ripple-effect` on buttons is encouraged).
- **AI flavor:** include an `.ai-loading-animation` (animated gradient/pulse orb) in the Hero and on CTA loading states; abstract data illustrations built with CSS gradients/shapes (no images required).
- **Destructive/danger actions:** `.btn-danger` visually distinct in both themes.

---

## 4. Deliverables

- Files: `index.html`, `style.css`, `script.js` — separate, no inline `<script>` beyond one deferred entry-point reference, no inline CSS.
- All copy in English, real and meaningful (no lorem ipsum): hero headline/subheadline, 3 feature cards, 3 how-it-works steps, 3 testimonials with names/roles, 3 pricing tiers with feature lists and highlighted "Popular" tier, 5+ FAQ questions with answers, final CTA, footer secondary links.
- Complete, runnable on first attempt — no placeholders for content specified above.

Begin coding immediately.