Productive Flat Design demo
Productive Flat Design

A clean and efficient flat design landing page for a task management app, using simple shapes, solid colors, and a streamlined layout for modern SaaS websites.
Category: Corporate & SaaS
Era: 2010s Modern
Prompt: 15.4 KB · 2130 words
# CODING AI SYSTEM PROMPT — "FLAT DESIGN PRODUTIVO" TASK MANAGEMENT LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt — no partial deliverables, no follow-up questions. Output category: **Corporate & SaaS** — professional, trustworthy, conversion-focused.

**Project Brief:**
- **Product:** A modern task management / productivity SaaS app.
- **Design Language:** "Flat Design Produtivo" (Productive Flat Design) — simple, efficient, modern, vibrant, focused. Era: 2026+ Digital Productivity. Keywords: task management, productivity, flat design, clean, intuitive, vibrant, focused.
- **Aesthetic Laws:** Flat UI elements with **zero shadows and zero gradients**; solid vibrant colors; clean modern sans-serif typography; simple vector icons; click micro-interactions with color feedback; fast, direct element transitions.
- **Sections (in order):** Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
- **Copy:** Write ALL user-facing copy in **English** (translate any Portuguese source concepts — e.g., "Produtividade Digital" → "Digital Productivity"). Invent a believable product name, headlines, feature copy, testimonials, prices, and FAQ answers. Lorem ipsum is forbidden.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes anywhere in the HTML.
- Target all design properties, layout rules, and states via class/ID selectors only.
- HTML stays semantic (`header`, `nav`, `main`, `section`, `article`, `footer`) and visually agnostic — changing the look must require editing CSS only, never the markup.

### 1.2 CSS Variables & Theme Tokens
Declare all tokens in `:root` (light) and override in the dark scope:

**Colors (light):**
- `--primary: #00BFFF` (Sky Blue) · `--secondary: #32CD32` (Lime Green)
- `--bg-primary: #FFFFFF` — **Exception:** the source palette explicitly defines #FFFFFF as the primary background; use it for `--bg-primary`, reserving `#fefefe` only for any near-white surface not covered by the palette.
- `--bg-secondary: #F0F0F0` (Light Gray)
- `--text-primary: #333333` · `--text-secondary: #6E6E6E`
- `--text-success: #2E7D32` (darkened lime — text-safe on light; raw `#32CD32` is fill/border-only, always paired with `#333333` text) · `--text-error: #D32F2F` (flat red — the single palette extension, required for error semantics)
- `--border-default: #F0F0F0` · `--border-error: #D32F2F` · `--border-success: #32CD32`
- Accents: `--accent-orange: #FF8C00` · `--accent-purple: #9370DB` · `--accent-yellow: #FFD700` · `--bg-dark: #333333`

**Mandatory contrast pairing table (verified, enforced in every theme):**
- Fills `#00BFFF`, `#32CD32`, `#FFD700`, `#FF8C00` → text `#333333`
- Fill `#333333` → text `#FFFFFF` / `#F0F0F0`
- Fill `#9370DB` → text `#FFFFFF`, bold/large text only; otherwise purple is decorative (icons, shapes)
- Light backgrounds → `#333333` primary / `#6E6E6E` secondary text
- Dark backgrounds → vibrant accents may serve as text (verified ≥4.5:1); never `#333333` text on dark

**Radius & Shadows:**
- `--radius-sm: 4px` · `--radius-md: 8px` · `--radius-lg: 16px`
- `--shadow-sm: none` · `--shadow-md: none` — **Exception:** the flat aesthetic forbids rendered shadows; the tokens must still be declared per architecture but resolved to `none`, with all hover/active feedback delivered via solid color shifts and transforms, never elevation.

**Spacing & Transitions:**
- `--spacing-gap: 1rem` · `--spacing-gap-lg: 2rem`
- `--transition-fast: 0.15s ease-in-out` · `--transition-normal: all 0.2s ease-in-out` · `--ease-standard: ease-in-out` (fast and direct — no bouncy/spring easings)

**Stacking:**
- `--z-dropdown: 100` · `--z-modal: 200` · `--z-toast: 300`

### 1.3 Mandatory Dark Mode Support
- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class; switching must require zero HTML restructuring.
- Dark palette: `--bg-primary: #1E1E1E` · `--bg-secondary: #2A2A2A` · `--text-primary: #F0F0F0` · `--text-secondary: #B0B0B0` · `--border-default: #3A3A3A`; keep all vibrant accents at full saturation (contrast-safe on dark). No shadows, no gradients in dark mode either.
- Persistence: `localStorage` with `prefers-color-scheme` fallback on first visit; visible toggle (sun/moon Material Symbols) with correct `aria-pressed` and `aria-label`.
- **Exception:** the source theme spec declares light-mode-only; light mode is therefore the default and primary experience, but the complete dark token set and toggle must still ship per architecture.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- Mobile-first: multi-column rows collapse to columns on small viewports; no horizontal scrolling at any width from 320px up. Center content in a `max-width: 1200px` container with consistent horizontal padding.

### 1.5 Framework Default & Tailwind CSS Integration
- Use Tailwind CSS (or clean custom CSS driven by `@layer`/`@apply`); every utility must map back to the CSS variables above.
- Core reusable classes mandated by the theme's technical spec: `.flat-button`, `.vibrant-card`, `.simple-icon` — extended with BEM modifiers (`.flat-button--primary`, `--secondary`, `--dark`, `--ghost`, `--danger`; `.vibrant-card--feature`, `--pricing`, `--testimonial`). One convention (BEM) everywhere — never mix conventions.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Open Sans via Google Fonts `<link>` (weights 400, 600, 700, 800), bound to `--font-base: "Open Sans", sans-serif`. Fluid `clamp()` type scale; 700/800 headings; generous line-height for body copy.
- **Icons:** Google Material Symbols (Rounded) via the official Google Fonts link. `.simple-icon` styles symbol spans (sizing, `font-variation-settings`, `aria-hidden="true"` when decorative). **Forbidden:** raw inline SVGs and local icon files.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.flat-button`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` solid vibrant fill, `--radius-sm`, no shadow/gradient; minimum touch target 44×44px; `font-weight: 700`.
- **Hover:** flat color shift — darken fill via `filter: brightness(0.92)`; `cursor: pointer`; `var(--transition-fast)`.
- **Focus:** distinct 2px solid outline (`--accent-orange` on light, `--primary` on dark) with 2px offset — always visible for keyboard navigation; never remove outlines.
- **Active/Pressed:** `transform: scale(0.97)` plus the theme's signature color-feedback flash (fill swaps to a complementary vibrant color for the press duration).
- **Loading:** `aria-busy="true"`, pointer events disabled to prevent double-clicks, flat CSS spinner (solid-color ring using `currentColor`) or rotating Material Symbol; button dimensions must not change.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error` (e.g., CTA flips to lime green with a check icon on success; red with an error icon on failure).
- **Variants:** `--primary` (#00BFFF fill, #333333 text) · `--secondary` (#32CD32 fill, #333333 text) · `--dark` (#333333 fill, #FFFFFF text) · `--ghost` (transparent, 2px solid current-color border) · `--danger` (#D32F2F fill, #FFFFFF text — visually distinct in both themes).

### 2.2 Card Component (`.vibrant-card`)
- **Default:** flexible Flexbox layout; white or `--bg-secondary` surfaces separated by solid flat blocks / 1px `--border-default` rules; no shadows, no gradients.
- **Hover:** no elevation (flat law) — instead solid color feedback: a 4px vibrant top accent bar and/or background tint shift, optionally with `transform: translateY(-2px)`.
- **Focus-within:** accent border/bar highlights when a child link or button receives focus.
- **Loading (Skeleton):** flat skeleton — solid gray blocks pulsing opacity (0.5↔1.0); no gradient shimmer; dimensions match final content to prevent layout jumps.
- **Empty State:** Material Symbol icon in a flat colored square plus clear guidance text.

### 2.3 Form & Input Requirements
- **States:** Empty; Focused (2px solid `--primary` ring — flat outline, no glow); Filled; Valid (`--border-success` + check Material Symbol); Invalid (`--border-error`, red helper text, error icon); Disabled; Read-only.
- **Structure:** flex container wrapping a label, the input field, and a dedicated error feedback container; errors announced via `aria-live="polite"` and linked with `aria-describedby`.
- Applied to the Final CTA email capture and any footer newsletter mini-form.

### 2.4 Accordion (FAQ) & Modal / Popup
- **FAQ Accordion:** each item is a button-controlled disclosure — `aria-expanded`, `aria-controls`, open/close animated via CSS only (grid-template-rows or max-height, `var(--transition-normal)`); chevron Material Symbol rotates 180°; fully keyboard operable — never mouse-only.
- **Modal (if used, e.g., plan comparison):** Opening, Open, Loading, Success/Error, and Closing states all animated via CSS transitions; centered flex container (`align-items: center`); flat solid backdrop `rgba(51,51,51,0.6)` (no blur, no gradient); Material Symbol close button; keyboard focus trapping; close via `Esc` and overlay click; `role="dialog"` + `aria-modal="true"`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing, responsive breakpoints, zero horizontal overflow from 320px to 1440px+.
- **Smooth, Fast Animations:** every state change transitions with `var(--transition-normal)` (all 0.2s ease-in-out) — fast and direct per the theme; fully respect `prefers-reduced-motion` (disable transforms, color flashes, and reveals).
- **Accessibility (a11y):** contrast pairs per the table in §1.2 in both light and dark modes; never rely on color alone to communicate state (pair color with icons, text, or ARIA state); semantic HTML5; correct ARIA roles/labels on the theme toggle, mobile nav, accordion, and billing toggle; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading states; visible skip-to-content link.
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change — the theme's signature is click color feedback (fill flashes to a complementary vibrant color) with fast, direct transitions.
- **Destructive Actions:** `.flat-button--danger` must be visually distinct in both light and dark themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry point (`<script src="script.js" defer></script>`). No inline styles anywhere.
- **Naming Convention:** BEM throughout, anchored on `.flat-button`, `.vibrant-card`, `.simple-icon` — never mix conventions.
- **No Unrequested Placeholders:** write real, production-quality English copy for every section — product name, headlines, feature descriptions, three named testimonials with roles, three pricing tiers with realistic prices and feature lists, 5–6 FAQ questions with substantive answers, and footer link labels.
- **Complete First Attempt:** the page must be fully functional — theme toggle, mobile nav, accordion, billing toggle, form validation, smooth scrolling, and toasts all working without further iteration.

---

## 5. PAGE SECTION-BY-SECTION SPECIFICATION

**5.0 Header (sticky):** flat white bar with a 1px `--border-default` bottom rule; flat logo mark (colored square/circle) + wordmark; anchor links (Features, How It Works, Pricing, FAQ); theme toggle; "Get Started" `.flat-button--primary`. On mobile, a Material Symbol hamburger opens a flat slide-down panel (`aria-expanded`, `aria-controls`, closes on `Esc` and link click).

**5.1 Hero:** two-column flex (column on mobile). Left: eyebrow badge (flat lime pill, #333 text), bold H1 (e.g., "Turn chaos into checked-off tasks"), subheadline, CTA pair (`.flat-button--primary` + `.flat-button--ghost`), trust row (flat initial avatars + stat). Right: a pure-CSS flat app mockup — task cards with flat checkboxes in sky blue / lime / orange, a lime progress bar, and flat geometric accents (solid circle, square, quarter-circle in palette colors), all decorative and `aria-hidden`. No photographic images.

**5.2 Features (3 cards):** section on `--bg-secondary`. Three `.vibrant-card--feature` cards, each with a `.simple-icon` inside a flat colored square (sky blue, lime green, orange), a bold title, and 2–3 lines of real copy (e.g., Smart Task Organization, Focus Timers, Team Collaboration). Hover reveals the vibrant top accent bar + `translateY(-2px)`.

**5.3 How It Works (3 steps):** white background; horizontal flex on desktop, vertical on mobile; three steps, each with a numbered flat circle (1 sky blue, 2 lime green, 3 orange — #333 numerals), a Material Symbol, a title, and a short description; flat connector line between steps (vertical or hidden on mobile).

**5.4 Testimonials:** `--bg-secondary` background; three `.vibrant-card--testimonial` cards: flat initial avatar in a vibrant circle, five `--accent-yellow` star Material Symbols, quote, name, and role — realistic invented personas.

**5.5 Pricing (3 tiers):** white background; a flat monthly/yearly pill toggle (sliding solid knob, `aria-pressed`, prices update with an `aria-live` announcement — yearly shows a discount). Three `.vibrant-card--pricing` cards: Starter (Free), Pro (highlighted: #333333 fill, white text, lime "Most Popular" badge, slightly larger), Team. Each card: plan name, price, feature list with lime check Material Symbols, and a `.flat-button` (primary on Pro, ghost on the others).

**5.6 FAQ:** white background; single centered column (max-width ~800px); 5–6 accordion items per §2.4 on `--bg-secondary` surfaces with 1px flat separators.

**5.7 Final CTA:** full-width `--primary` (#00BFFF) band with `#333333` text (contrast-verified pairing); bold headline, short subline, and an inline flex email-capture group: white input (#333 text, flat focus ring) + `.flat-button--dark`. On submit: validate → loading state → success (button flips lime green + check icon + toast "You're on the list!") or inline error (red border + `aria-live` message).

**5.8 Footer:** `--bg-dark` (#333333) with `#F0F0F0` text; four secondary link columns (Product, Company, Resources, Legal) with hover color feedback (`--primary`); social row of Material Symbol links; copyright line.

---

## 6. JAVASCRIPT BEHAVIOR REQUIREMENTS (all in `script.js`, deferred)

- **Theme toggle:** read `localStorage` → fallback `prefers-color-scheme` → apply `.dark` class; persist on change; update `aria-pressed` / `aria-label`; swap sun/moon Material Symbols.
- **Mobile nav:** open/close with `aria-expanded`, `Esc` to close, focus management.
- **FAQ accordion:** toggle `aria-expanded`; animate via CSS classes only.
- **Pricing billing toggle:** swap price values, `aria-pressed`, `aria-live` price announcement.
- **Email forms:** regex validation, inline errors via `aria-live`, loading → success/error button states, and a toast component (fixed position, `--z-toast`, `role="status"`).
- **Smooth scrolling** for all anchor links; **scroll-reveal** via IntersectionObserver adding a CSS class — disabled entirely under `prefers-reduced-motion`.
- No JS may inject inline styles; all state changes toggle classes defined in `style.css`.