Ethical AI Style demo
Ethical AI Style

A clean, trustworthy landing page aesthetic for safe conversational AI products, emphasizing clarity, professionalism, and modern tech credibility.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 13.7 KB · 1819 words
# SYSTEM PROMPT — Build a Complete Landing Page: "Ethical AI Style" (Corporate & SaaS)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page for a safe conversational AI product in the **Ethical AI Style** — clean, trustworthy, thoughtful (2026+ Responsible AI era). Generate the final code immediately, in a single response, following every rule below. **All user-facing copy must be written in English.**

---

## 1. THEME & DESIGN DIRECTION

**1.1 Style Identity**
- **Name:** Ethical AI Style
- **Type:** Clean, Trustworthy, Thoughtful
- **Keywords:** AI, ethical AI, safe AI, conversational AI, trustworthy, thoughtful, clean, minimalist, responsible, secure
- **Mood:** Calm, transparent, non-hype. Generous whitespace, modular layout, highly legible sans-serif typography.

**1.2 Color Palette → Required CSS Token Mapping (Light Mode, `:root`)**
- `--primary: #1A73E8` (Ethical Blue — brand, actions) · `--primary-strong: #1557B0` (hover/pressed)
- `--secondary: #34A853` (Green — trust/success accents)
- `--accent-cyan: #00BCD4` (conversational-flow accents) · `--accent-yellow: #FBBC05` (progress fills, ratings) · `--accent-red: #EA4335` (danger accents)
- `--bg-primary: #fefefe` (page canvas) · `--bg-secondary: #F8F9FA` (alternating sections, footer) · `--bg-surface: #FFFFFF` (cards/elevated surfaces)
- `--text-primary: #3C4043` · `--text-secondary: #5F6368`
- `--text-success: #188038` · `--text-error: #D93025` (AA-compliant text derivatives of palette green/red)
- `--border-default: #DADCE0` · `--border-success: #34A853` · `--border-error: #EA4335`
- `--radius-sm: 6px` · `--radius-md: 8px` · `--radius-lg: 16px`
- `--shadow-sm: 0 2px 8px rgba(0,0,0,0.1)` · `--shadow-md: 0 8px 24px rgba(0,0,0,0.12)`
- `--spacing-gap: 1.5rem` · `--transition-fast: 0.15s ease-in-out` · `--transition-normal: 0.3s ease-in-out` · `--ease-standard: ease-in-out`
- `--z-header: 900` · `--z-dropdown: 1000` · `--z-modal: 1050` · `--z-toast: 1100`
- `--font-base: "Roboto", Arial, sans-serif`

> **Exception (source palette):** The source spec explicitly lists `#FFFFFF`; reserve pure white for card surfaces (`--bg-surface`) and the specified hero gradient — the base page canvas token stays `#fefefe` per mandatory rules.

**1.3 Mandatory Dark Mode Tokens** (defined under a `.dark` class **and** `@media (prefers-color-scheme: dark)`, guarded so an explicit user choice always wins):
- `--primary: #8AB4F8` · `--primary-strong: #A8C7FA` · `--secondary: #81C995`
- `--bg-primary: #202124` · `--bg-secondary: #292A2D` · `--bg-surface: #303134`
- `--text-primary: #E8EAED` · `--text-secondary: #9AA0A6` · `--text-success: #81C995` · `--text-error: #F28B82`
- `--border-default: #3C4043` · `--border-success: #81C995` · `--border-error: #F28B82`
- `--accent-cyan: #4DD0E1` · `--accent-yellow: #FDD663` · `--accent-red: #F28B82`
- Shadows deepen (`rgba(0,0,0,0.4)` / `rgba(0,0,0,0.5)`); trust glows switch to `rgba(138,180,248,0.15)`.
- **Enforce contrast pairing in both themes:** light backgrounds pair with dark text; dark backgrounds pair with light text.

**1.4 Signature Visual Effects (pure CSS + Google Icons — no SVG)**
- `.conversation-flow-animation` (exact class name required): chat mockup with alternating user/AI bubbles, staggered fade-and-rise entrance via `animation-delay`, looping three-dot typing indicator; cyan accents on the AI side.
- `.ai-safety-diagram` (exact class name required): modular pipeline (Input → Guardrails → Verified Output) built from Material icons connected by an animated gradient progress line.
- `.trust-glow`: subtle glow on trust badges/chips (primary-tinted `box-shadow` alpha); must remain subtle in dark mode.
- `.research-progress`: ethical research progress bars (e.g., "Bias reduction 94%") whose fill animates when scrolled into view (JS adds `.is-visible`; CSS animates width).
- Security feedback micro-interactions: check icons animate in on hover/focus of safety chips; form success swaps button content to an animated check.
- Hero background: `linear-gradient(to bottom, #F8F9FA, #FFFFFF)` (dark mode equivalent: `#202124 → #171719`).

**1.5 Typography & Icons**
- Google Fonts: **Roboto** (400/500/700) via `<link>`, bound to `--font-base`. Headings 700 with tight tracking; body 400, line-height 1.6; fluid sizes via `clamp()`.
- Google **Material Symbols (Rounded)** via `<link>`; icons rendered as `<span class="material-symbols-rounded" aria-hidden="true">shield</span>`. Suggested set: `shield`, `verified_user`, `lock`, `forum`, `psychology`, `supervisor_account`, `check_circle`, `error`, `star`, `format_quote`, `expand_more`, `arrow_forward`, `dark_mode`, `light_mode`, `menu`, `close`. **Forbidden: inline SVGs, local icon files, emoji icons.**

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **No `style="..."` attributes in HTML.** Class/ID selectors only. HTML stays semantic and style-agnostic so the look can change via CSS alone.

**2.2 CSS Variables & Theme Tokens**
- Every color, spacing, radius, shadow, transition, and z-index value must come from the tokens in 1.2/1.3. No hard-coded hex values outside `:root` and the dark token blocks.

**2.3 Mandatory Dark Mode Support**
- Dark mode fully defined per 1.3. Visible toggle in the header (sun/moon Material icons, correct `aria-pressed` and dynamic `aria-label`). User choice persists via `localStorage`.
> **Exception (source spec):** The source style sheet designates light mode as the only supported mode; honor it by defaulting to **light on first visit** (instead of `prefers-color-scheme`), while keeping dark mode fully implemented and toggleable.

**2.4 Flexbox Layout & Mobile-First Alignment**
- Every layout container uses `display: flex` and **defaults to `align-items: center`** (any deviation must be a justified, commented exception). Rows collapse to columns at breakpoints. Zero horizontal scrolling at 320px; `box-sizing: border-box` globally.

**2.5 Framework & Naming Convention**
- Clean custom CSS in `style.css` organized with CSS cascade layers (`@layer tokens, base, components, utilities`). **BEM naming only** (`.card`, `.card__title`, `.card--featured`). Reusable component classes (`.btn`, `.card`, `.input-group`) must bind to CSS variables. Never mix naming conventions.

**2.6 File Structure**
- Separate `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer>` reference; no other inline scripts.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons (`.btn` + variants `.btn--primary`, `.btn--secondary`, `.btn--danger`)**
- **Default:** flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`; minimum touch target 44×44px; `--radius-md`.
- **Hover:** brightness/shadow shift, `cursor: pointer`. **Focus:** distinct ring via `box-shadow` using `--primary` (never remove outlines without replacement). **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** CSS spinner (animated border circle) that does not change button dimensions; `pointer-events: none` + `aria-busy="true"` to prevent double submissions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback styled with `--text-success` / `--text-error` plus icon swap.
- `.btn--danger` must be visually distinct in **both** themes and never rely on color alone (pair with icon/label).

**3.2 Cards (`.card`)**
- **Default:** `--bg-surface`, 1px `--border-default`, `--radius-md`, `--shadow-sm`; flex column layout.
- **Interactive cards** (features, pricing): hover `translateY(-2px)` + `--shadow-md`; `:focus-within` highlights the border with `--primary` and a trust glow.
- Define `.card--skeleton` (shimmer keyframe, preserves layout) and `.card--empty` (Material icon + guidance text) as part of the card system.
- `.card--featured` (recommended pricing tier): primary border, trust glow, "Most Trusted" badge.

**3.3 Forms & Inputs (`.input-group`)**
- Flex column wrapping a label, input, and dedicated error container. States required: empty, focused (ring), filled, valid (success border + check icon), invalid (error border + error icon + message), disabled, read-only. Error feedback lives in `.input-group__error` with `aria-live="polite"`; never color alone. Used for the Final CTA email capture.

**3.4 FAQ Accordion**
- Button triggers with `aria-expanded` + `aria-controls`; answer regions animated via CSS (`grid-template-rows: 0fr → 1fr`); `expand_more` chevron rotates; fully keyboard operable with visible focus.

**3.5 Modal/Popup (conditional)**
- If any overlay is implemented (optional), it must use a centered flex overlay + backdrop, CSS-animated opening/open/loading/success/closing states, a Material icon close button, `Esc` and backdrop-click closing, and a keyboard focus trap.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography; breakpoints ~640/768/1024px; no horizontal overflow.
- **Smooth animations:** all state changes use `transition: var(--transition-normal)`; fully respect `prefers-reduced-motion` (disable transforms/animations and smooth scrolling; keep instant state changes).
- **Accessibility:** WCAG AA contrast in both themes; semantic landmarks (`header`/`nav`/`main`/`section[aria-labelledby]`/`footer`); skip-to-content link; logical focus order; every interaction keyboard operable; `aria-live` regions for form feedback and dynamic status; never rely on color alone.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change; the sticky header gains a shadow when scrolled (`.is-scrolled` via JS).
- Anchor navigation uses smooth scrolling with `scroll-margin-top` compensating for the sticky header.

---

## 5. LANDING PAGE SECTION SPECIFICATION

**5.0 Page Shell** — Sticky header: brand (shield/verified icon + an invented concise product name), nav links (Features, How It Works, Pricing, FAQ), theme toggle, "Get Started" `.btn--primary`. Mobile hamburger (`aria-expanded`) opens a flex-column panel that closes on link click or `Esc`.

**5.1 Hero** — Gradient background per 1.4. Two-column flex (stacks on mobile): left = eyebrow trust chip ("Responsible AI · 2026", trust glow), H1 (e.g., "Conversational AI you can actually trust"), subhead, dual CTAs (primary "Start a Safe Conversation" → `#pricing`; secondary "See How It Works" → `#how-it-works`), trust chip row (`lock` "Private by design", `verified_user` "Independently audited", `supervisor_account` "Human oversight") with hover check micro-interactions. Right = `.conversation-flow-animation` chat mockup (3–4 bubbles + typing indicator). Below: a strip of three `.research-progress` bars ("Bias reduction 94%", "Harm-free responses 99.2%", "Safety eval pass 98%") animating on scroll.

**5.2 Features (3 cards)** — Section header (eyebrow, H2 "Built responsibly, by default", subtext) + grid of three `.card--feature`: `verified_user` "Transparent by Design" (shows sources and reasoning), `supervisor_account` "Human Oversight" (review controls and escalation), `lock` "Privacy First" (encrypted; never trained on your data). Each: icon in a tinted circle, title, 2–3 line description, "Learn more" arrow link → `#faq`.

**5.3 How It Works (3 steps)** — Three `.step` cards in a flex row (column on mobile) connected by an `.ai-safety-diagram` progress line: 01 `forum` "You ask" → 02 `shield` "Guardrails reason" (intent checks, source citation) → 03 `check_circle` "Verified answer" (confidence, sources, feedback loop). Numbered badges; staggered scroll reveal.

**5.4 Testimonials (3 cards)** — Quote cards: `format_quote` icon, 5-star row (`star` icons in `--accent-yellow`), realistic quote, author row with initials avatar (palette-tinted circle), name, role/company (e.g., Head of Trust & Safety at a fintech; CTO at a healthcare platform; AI research lead). Real English copy — no lorem ipsum.

**5.5 Pricing (3 tiers)** — Starter $0 (personal use, limited conversations, `.btn--secondary` "Start Free"); Pro $20/mo (`.card--featured`, "Most Trusted" glow badge, expanded guardrails, priority support, `.btn--primary` "Go Pro"); Enterprise Custom (SSO, independent audits, dedicated review team, `.btn--secondary` "Contact Sales"). Feature lists use `check_circle` icons in `--text-success`; include billing microcopy.

**5.6 FAQ** — 5–6 accordion items (per 3.4) covering: preventing harmful outputs, data training policy, human review options, safety standards/compliance, model transparency. Real 2–3 sentence answers.

**5.7 Final CTA** — Centered panel (`--bg-surface`, `--radius-lg`, `--shadow-md`, trust glow): H2 "Build with AI you can trust", supporting line, inline email form (`.input-group`): input + `.btn--primary` "Request Access" with the full state machine (loading → success check + `aria-live` confirmation "Thanks — we'll be in touch"); reassurance microcopy "No spam. Your data stays private."

**5.8 Footer** — `--bg-secondary`. Brand block (logo, one-line mission, trust badges: "Audited", "End-to-end encrypted", "Human-reviewed") + four secondary link columns (Product, Company, Resources, Legal) with realistic English labels; bottom bar with copyright (dynamic year via JS) and responsible-AI microcopy.

---

## 6. DELIVERABLE & ACCEPTANCE CHECKLIST

Output complete `index.html`, `style.css`, and `script.js` in one response.
- Zero inline `style` attributes; a single deferred script; Google Fonts + Material Symbols `<link>` tags in `<head>`.
- BEM naming only; all values token-driven; dark mode fully functional with a persisted, accessible toggle.
- No lorem ipsum — write all real English copy; invent a concise product name and use it consistently.
- Verify before finishing: no horizontal scroll at 320px; full keyboard pass (nav, FAQ, forms, toggle); visible focus everywhere; AA contrast in both themes; `prefers-reduced-motion` honored; every button and link has hover/focus/active feedback.