Mintlify Green Docs demo
Mintlify Green Docs

A clean, modern documentation platform aesthetic with fresh green accents, structured layouts, and developer-friendly typography inspired by Mintlify.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 8.2 KB · 1094 words
# System Prompt: Build "Mintlify Green Docs" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Do not ask for clarification — the specification below is final and exhaustive.

**Theme:** Mintlify Green Docs — a 2024–2026 developer-documentation landing page: white canvas, Brand Green (#18E299) accents, atmospheric gradient hero, ultra-round corners, Inter typography, Geist Mono technical labels.

**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 RULES & ARCHITECTURE

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

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root`:
- Colors: `--primary: #18E299` (Brand Green), `--primary-deep: #0fa76e`, `--primary-light: #d4fae8`, `--bg-primary: #fefefe`, `--bg-secondary: #f7f7f7`, `--text-primary: #0d0d0d`, `--text-secondary: #666666`, `--text-tertiary: #333333`, `--text-success: #0fa76e`, `--text-error: #d33`, `--border-default: rgba(0,0,0,0.05)`, `--border-error`, `--border-success`.
- Radii: `--radius-sm: 12px`, `--radius-md: 16px` (containers), `--radius-lg: 24px` (featured cards), `--radius-pill: 9999px` (buttons).
- Shadows: `--shadow-sm`, `--shadow-md` (soft, green-tinted on hover: `rgba(24,226,153,0.15)`).
- Spacing/Transitions: `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- Elevation: `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
- Fonts: `--font-base: 'Inter', sans-serif`, `--font-mono: 'Geist Mono', monospace`.
- Contrast pairing: light backgrounds always pair with dark text tokens; verify for every component.

**1.3 Dark Mode Support (Mandatory)**
- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`.
- Dark palette: `--bg-primary: #0d0d0d`, `--bg-secondary: #1a1a1a`, `--text-primary: #f5f5f5`, `--text-secondary: #a3a3a3`, `--border-default: rgba(255,255,255,0.08)`, keep `--primary: #18E299` but pair it with near-black text on green buttons.
- Provide a visible theme toggle button (fixed, top-right of navbar) with `aria-pressed` and `aria-label="Toggle dark mode"`, using a Google Material Symbol icon (`dark_mode` / `light_mode`).
- Persist choice in `localStorage` key `theme`; fall back to `prefers-color-scheme` on first visit. Theme switching must require zero HTML restructuring.
- Exception clause: the source spec marks dark mode "Not Recommended" for this theme — implement it anyway per the mandatory rule, tuned so the light mode remains the canonical presentation.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox (`display: flex`).
- Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.
- Mobile-first: all grids of cards/steps/pricing convert from single column to multi-column at `min-width: 768px` / `1024px`. No horizontal scrolling at any viewport width.

**1.5 Framework**
- Use Tailwind CSS via CDN (`https://cdn.tailwindcss.com`) with custom utilities mapped to the CSS variables above, or clean custom CSS with reusable classes (`.btn`, `.btn-primary`, `.card`, `.container`, `.section-label`). Never mix conventions — pick BEM or a fixed utility set and apply it consistently.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Inter** (weights 400, 500, 600) and **Geist Mono** from Google Fonts via `<link>` tags; bind to `--font-base` and `--font-mono`.
- Load **Google Material Symbols** for all icons. Raw inline SVGs and local icon files are forbidden.
- Typography rules: display headings 64px/600 with `letter-spacing: -1.28px`; section headings ~40px/600 with `-0.8px`; body 400; UI labels 500; technical labels (e.g., "v2.4 · DOCS", section eyebrows) in Geist Mono, uppercase, `letter-spacing: 0.6px`, 12–13px.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill); min-height: 44px; min-width: 44px;` Primary button: `background: var(--primary); color: #0d0d0d;` Secondary/ghost: transparent with `var(--border-default)`.
- Hover: brightness shift + green shadow (`--shadow-md`), `cursor: pointer`.
- Focus: distinct `outline: 2px solid var(--primary); outline-offset: 2px;` visible in both themes.
- Active: `transform: scale(0.97)`.
- Loading: disables pointer events, shows a CSS spinner or animated Material Symbol, preserves button dimensions.
- Disabled: `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.
- `.btn-danger` (if any destructive action): visually distinct in both themes.

**2.2 Cards (Features, Pricing, Testimonials)**
- Default: `background: var(--bg-secondary)` or white with `border: 1px solid var(--border-default); border-radius: var(--radius-md);` featured cards use `--radius-lg` (24px).
- Hover: `transform: translateY(-2px)` + shadow shift.
- `:focus-within`: green border highlight when a child link/button is focused.
- Feature cards include a Google Material Symbol icon in a `--primary-light` rounded badge, a Geist Mono eyebrow label, a 600 heading, and 400 body copy.

**2.3 FAQ (Accordion-style, CSS/JS-light)**
- Each question is a `<button>` with `aria-expanded` toggling a panel; open/close animated with `max-height` transition using `--transition-normal`.
- Focus ring on questions; chevron Material Symbol rotates on open. Never rely on color alone to indicate state.

**2.4 Hero (Atmospheric)**
- Full-width hero with an atmospheric green-white gradient background: layered radial gradients (`--primary-light` → transparent) creating a soft cloud effect behind the headline; no images required.
- Content: Geist Mono eyebrow ("DOCS · v2.4"), 64px/600/-1.28px headline, subtitle in `--text-secondary`, two buttons (primary + ghost), and a floating mock "code/docs preview" card with `--radius-lg` and `--shadow-md` using Geist Mono.

**2.5 Pricing Tiers**
- 3 cards; middle tier "featured" with `--radius-lg`, green border (`1.5px solid var(--primary)`), and a Geist Mono "MOST POPULAR" badge. Each tier: name, price, feature list with check Material Symbols, and a CTA button.

**2.6 Footer**
- Flex column on mobile, row on desktop: brand mark, secondary link groups (Product, Resources, Company), and a bottom bar with copyright + social icon links (Material Symbols). All links have visible hover/focus states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography, no horizontal overflow, mobile-first breakpoints.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; wrap motion in `@media (prefers-reduced-motion: no-preference)`.
- **Accessibility:** WCAG AA contrast in both themes (Brand Green #18E299 buttons must use #0d0d0d text). Semantic HTML5, logical focus order, full keyboard operability (FAQ via Tab/Enter, theme toggle via keyboard), `aria-live` region for any dynamic feedback.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Copy:** All user-facing copy in **English**. Write realistic documentation-product copy (no lorem ipsum): e.g., features like "Instant Search", "Auto-generated API Reference", "MDX-powered Components"; testimonials with names/roles; FAQ with 5–6 real questions; realistic pricing ($0 / $20 / custom).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — separate files. Only a single deferred `<script src="script.js" defer>` reference in HTML; no inline `<script>` blocks.
- **Naming:** one consistent convention (BEM or fixed utility set) across the entire deliverable.
- **No unrequested placeholders:** all copy, labels, and content specified above must be written out in full.
- Deliver complete, runnable code on the first attempt.