Notion Warm Workspace demo
Notion Warm Workspace

A clean, Notion-inspired landing page style with warm neutral tones, minimal layout, and friendly document-like aesthetics for productivity and knowledge tools.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 12.6 KB · 1728 words
# BUILD PROMPT — "Notion Warm Workspace" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt. Follow every rule below exactly — do not omit any token, state, section, or accessibility requirement.

**Project Brief**
- **Theme:** Notion Warm Workspace — Warm Minimalism, Whisper Borders, Inter Typography, Blue Accent (Era: 2024–2026 Warm Workspace)
- **Sections (in order):** Sticky Header (required to host the mandatory theme toggle and anchor navigation), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links
- **Copy Locale:** All user-facing copy must be written in **English**.

**Design Language (source spec, translated from Portuguese)**
- White canvas with near-black text via `rgba(0,0,0,0.95)` — never pure `#000`.
- Warm gray scale with yellow-brown undertones: `#f6f5f4`, `#615d59`, `#a39e98`.
- Whisper borders: ultra-thin `1px solid rgba(0,0,0,0.1)`.
- Multi-layer shadows with every layer's opacity below `0.05`.
- Notion Blue `#0075de` as the single accent, reserved for CTAs and highlights.
- Sections alternating white and warm white `#f6f5f4`.
- Headlines: `64px`, weight `700`, letter-spacing `-2.125px`.
- Pill badges: `9999px` radius with tinted blue backgrounds.
- Radii: `4px` buttons, `12px` cards, `9999px` badges.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling — changing the site's look must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` using these exact names and reference values:
- **Colors:** `--primary: #0075de` (Notion Blue) · `--secondary: #213183` (Navy) · `--bg-primary: #fefefe` (white canvas) · `--bg-secondary: #f6f5f4` (warm white) · `--text-primary: rgba(0,0,0,0.95)` (near black) · `--text-secondary: #615d59` (warm gray) · `--text-muted: #a39e98` (light gray) · `--text-success: #0f7b6c` · `--text-error: #d44c47` · `--border-default: rgba(0,0,0,0.1)` (whisper border) · `--border-success: rgba(15,123,108,0.5)` · `--border-error: rgba(212,76,71,0.5)` · `--blue-tint: rgba(0,117,222,0.08)` (pill badge background)
- **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in every theme, not just the default.
- **Light Mode Background:** The white canvas is implemented as `#fefefe`, never `#ffffff`. **Exception clause:** the source palette lists `#ffffff`; it is mapped to `#fefefe` per design-system rules.
- **Radii:** `--radius-sm: 4px` (buttons/inputs) · `--radius-md: 12px` (cards) · `--radius-lg: 16px` (large panels/modals) · `--radius-pill: 9999px` (badges)
- **Shadows:** `--shadow-sm` and `--shadow-md` must be multi-layer (e.g., `0 1px 2px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.03), 0 12px 28px rgba(0,0,0,0.02)`); every layer's opacity must stay below `0.05`.
- **Spacing & Transitions:** `--spacing-gap: 1.5rem` · `--transition-fast: 150ms` · `--transition-normal: 280ms` · `--ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Elevation/Stacking:** `--z-dropdown: 100` · `--z-modal: 200` · `--z-toast: 300`
- **Typography tokens:** `--font-base: 'Inter', sans-serif` · `--tracking-headline: -0.033em` (≈ -2.125px at 64px)

**1.3 Mandatory Dark Mode Support**
- **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector. Warm-dark reference set (fine-tunable, but must preserve the yellow-brown undertone and pass WCAG AA): `--bg-primary: #1f1e1c` · `--bg-secondary: #292724` · `--text-primary: rgba(255,255,255,0.95)` · `--text-secondary: #a39e98` · `--text-muted: #8a857f` · `--border-default: rgba(255,255,255,0.1)` · `--blue-tint: rgba(77,163,247,0.14)`; lighten the accent to `#4da3f7` for text/icons on dark surfaces, while buttons may keep `#0075de` with near-white text.
- **Theme Switching:** Background and text variables must swap seamlessly with zero HTML restructuring.
- **Persistence:** Store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit; provide a visible toggle in the header using Google Material Symbols (`light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` states.
- **Exception clause:** The source spec marks Dark Mode as "Not Recommended"; the mandatory dark-mode architecture still applies — implement it as a faithful warm-dark adaptation and default the presentation to light mode.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with **Flexbox**.
- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified.
- **Mobile-Friendly First:** All multi-column rows collapse to a single column at ≤768px; no horizontal scrolling at any viewport width; content sits in a centered max-width container (~1120px); headline and body sizes scale fluidly via `clamp()`.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`). All utility classes must map back to the CSS variables above and to generic reusable class names (`.btn`, `.card`, `.input-group`, `.badge-pill`, `.accordion__item`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Load Google Fonts **Inter** (weights 400, 500, 600, 700) via `<link>` and bind it to `--font-base`. Note: the source keyword "NotionInter" refers to Notion's proprietary typeface — use Inter as the closest Google Fonts equivalent.
- **Icons:** Use Google Material Symbols exclusively. Raw inline SVGs and local icon files are explicitly forbidden.
- **Headlines:** Hero H1 at `64px`, weight `700`, letter-spacing `-2.125px` on desktop, scaling fluidly with `clamp()`; apply proportional tracking (`-0.033em`) to all section headings. Body text 16–18px.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** — all states styled via CSS classes:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, radius `var(--radius-sm)`. Variants: `.btn-primary` (Notion Blue background, near-white text), `.btn-secondary` (whisper border, `--bg-primary` background, near-black text), `.btn-danger` (visually distinct in both themes).
- **Hover:** brightness/shadow shift with `cursor: pointer`.
- **Focus:** distinct focus ring via CSS variables (`outline` / `box-shadow`) — never removed.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** disables interactions, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error`.

**2.2 Card Component Requirements:**
- **Default:** flexible Flexbox layout, whisper border, `var(--radius-md)`, multi-layer sub-0.05 shadow; white cards on warm-white sections and vice versa.
- **Hover:** shadow elevation shift or subtle `transform: translateY(-2px)`.
- **Focus-within:** card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** shimmer animation defined entirely in CSS, preventing layout jumps.
- **Empty State:** structured fallback with a Google Icon and clear guidance text.

**2.3 Form & Input Requirements:**
- **States:** Empty, Focused (outline ring), Filled, Valid (success border/icon), Invalid (error border, red text, error icon), Disabled, Read-only.
- **Structure:** Flex container wrapping a label, input field, and dedicated error feedback container.
- **Newsletter capture** (in the Final CTA or Footer): client-side email validation, errors rendered in an `aria-live` region, visible success state.

**2.4 Modal / Popup Requirements:**
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
- **UX Features:** centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click, stacked at `--z-modal`. Any popup (e.g., pricing plan confirmation) must comply.

**2.5 FAQ Accordion Requirements:**
- Button-triggered items with `aria-expanded` + `aria-controls`; `expand_more` Google Icon rotating 180° on toggle; CSS-animated expand/collapse; fully keyboard operable; state never communicated by color alone.

**2.6 Landing Page Section Requirements:**
- **Sticky Header:** wordmark with Google Icon logo, anchor navigation (Features, How It Works, Testimonials, Pricing, FAQ), the mandatory theme toggle (per 1.3), and a compact `.btn-primary`; whisper bottom border; solid or blurred backdrop.
- **Hero (white canvas):** tinted-blue pill badge (`.badge-pill` — `--radius-pill`, `--blue-tint` background, Notion Blue text), 64px headline, warm-gray subheadline, `.btn-primary` + `.btn-secondary` pair, and a CSS-composed workspace mockup (sidebar, content blocks, text lines) built from whisper-bordered boxes with multi-layer shadows — no external images required.
- **Features (warm white `#f6f5f4`):** section heading plus 3 cards (per 2.2), each with a Material Symbol inside a tinted-blue circular container, title, and description; flex row → column on mobile.
- **How It Works (white):** 3 numbered steps (01/02/03), one Material Symbol each, connected by a whisper-border line or arrow icons; flex row → column on mobile.
- **Testimonials (warm white):** 3 quote cards with `format_quote` icon, quote text, CSS-initial avatar circles (no external images), name and role.
- **Pricing (white):** 3 tier cards; the middle tier is featured with a Notion Blue border or tinted background, a "Most Popular" pill badge, and elevated shadow; `check_circle` icons per feature; one CTA button per tier.
- **FAQ (warm white):** accessible accordion per 2.5 with 5–6 realistic Q&As.
- **Final CTA:** full-bleed Notion Blue panel — `#0075de` background with `rgba(255,255,255,0.95)` text (contrast pairing enforced, ≥4.5:1), headline, and a white primary button (white background, blue text). If contrast cannot be maintained, fall back to a white card with a blue CTA.
- **Footer (warm white, whisper top border):** grouped secondary link columns (Product, Company, Resources, Legal), copyright line, hover/focus states on every link; use on-page anchors where targets exist and `href="#"` only for genuinely external routes.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing and standard breakpoints with zero horizontal overflow.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shimmer, spinners, and smooth scrolling).
- **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes; never rely solely on color to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, strict h1→h3 hierarchy); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading states).
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** `.btn-danger` must be visually distinct in both light and dark themes.
- **Scrolling:** smooth anchor scrolling with `scroll-padding-top` compensating for the sticky header.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js` files; no inline `<script>` blocks beyond a single deferred entry-point reference; zero inline CSS.
- **Naming Convention:** One consistent convention across the entire deliverable — BEM recommended (`.hero__badge`, `.card--featured`, `.accordion__item`); never mix conventions.
- **Copy:** Write realistic English marketing copy for a plausible Notion-style workspace product (invent a product name); lorem ipsum is prohibited; placeholders are allowed only where content is genuinely unspecified.
- **External Resources:** Google Fonts (Inter) and Google Material Symbols links only.
- **script.js Scope:** theme toggle with persistence, FAQ accordion behavior, smooth scrolling, form validation, and optional scroll-reveal — all accessibility-compliant.
- **Output:** Deliver the complete code for all three files immediately in a single response, followed by a brief implementation explanation.