Neumorphism demo
Neumorphism

A soft UI style where elements appear gently extruded or pressed into the background using dual light and dark shadows, creating a smooth, tactile monochrome 3D effect.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 7.2 KB · 979 words
# System Prompt: Build a Neumorphism Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Neumorphism ("Soft UI") Landing Page** on the first attempt. Follow every rule below without exception.

**Landing Page Theme:** Neumorphism — soft, embossed, monochromatic, rounded.
**Sections Required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA, Footer with secondary links.

---

## 1. STRICT ARCHITECTURE RULES

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling must live in a dedicated `style.css` file. **The `style="..."` attribute is forbidden in HTML.**
- Target everything via class or ID selectors only.
- HTML must remain semantic and clean; changing the theme must never require markup edits.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root` and theme classes:
- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Neumorphic Palette:** Base background must be a soft pastel monochrome — Soft Blue `#C8E0F4`, Soft Pink `#F5E0E8`, Soft Grey `#E8E8E8` (pick one as the dominant surface; the others as accent tints). Derive secondary tones as ±30% tints/shades. Never use pure white — use `#fefefe` where near-white is required.
- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa, in **both** light and dark themes. Text must remain readable against the soft pastel surfaces (minimum WCAG AA contrast).
- **Neumorphic Shadow Tokens (mandatory):** `--shadow-out` (embossed: `-5px -5px 15px rgba(255,255,255,0.8), 5px 5px 15px rgba(0,0,0,0.1)`), `--shadow-in` (debossed/pressed: inset equivalent), `--shadow-sm`, `--shadow-md`, `--radius-sm: 12px`, `--radius-md: 14px`, `--radius-lg: 16px`.
- **Surfaces:** Use `background: linear-gradient(145deg, tint1, tint2)` subtle gradients on raised elements — no hard lines, no flat borders on neumorphic surfaces.
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal`, `--ease-standard`.
- **Elevation/Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

### 1.3 Mandatory Dark Mode
- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class. Dark neumorphism = darker monochrome surface (e.g., deep slate-grey) with inverted shadow tokens (dark outer shadow, subtle light inner highlight). Shadows must remain visible in dark mode.
- Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit.
- Include a visible neumorphic toggle button with correct `aria-pressed` / `aria-label` state. No HTML restructuring for theme switching.

### 1.4 Flexbox Layout & Mobile-First
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
- All layouts must be mobile-responsive out of the box: multi-column rows (features, pricing, steps) collapse to single columns on small viewports. **No horizontal scrolling at any breakpoint.**

### 1.5 Framework
- Use Tailwind CSS (or clean custom CSS via `@layer` / `@apply`) mapped back to the CSS variables and reusable class names (`.btn`, `.card`, `.input-group`, `.neu-out`, `.neu-in`).

### 1.6 Typography & Icons
- **Text:** Google Fonts only (e.g., Poppins or Nunito — rounded fonts suit Soft UI). Bind via `<link>` to `--font-base`.
- **Icons:** Google Material Symbols only. **Inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT SPECIFICATIONS

### 2.1 Buttons (`.btn`, `.btn-primary`, `.btn-danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` embossed (`--shadow-out`), rounded `--radius-md`, minimum 44×44px touch target.
- **Hover:** Slight shadow lift or gradient shift; `cursor: pointer`.
- **Focus:** Distinct focus ring (outline/box-shadow via CSS variables) for keyboard nav.
- **Active/Pressed:** Debossed effect — swap to `--shadow-in` with `transform: scale(0.97)` over `150ms`.
- **Loading:** Disabled interaction, double-click prevention, CSS spinner or animated Google Icon, no dimension shift.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error`.

### 2.2 Cards (Features, Pricing, Testimonials, Steps)
- **Default:** Flexbox layout, raised neumorphic surface (`--shadow-out`, gradient background, `--radius-lg`), `--bg-secondary`-derived surface.
- **Hover:** `transform: translateY(-2px)` with softened shadow shift.
- **Focus-within:** Highlight the card surface when a child link/button receives focus.
- **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.
- **Empty State:** Structured fallback with a Google Icon and guidance text.
- **Pricing:** Middle tier visually elevated (larger shadow, "Most Popular" badge). Destructive/danger variants must be distinct in both themes.

### 2.3 Forms (Newsletter signup in Final CTA / Footer)
- **States:** Empty, Focused (soft inset ring), Filled, Valid (success icon), Invalid (error border, error text, error icon), Disabled, Read-only.
- **Structure:** Flex container wrapping label, debossed (`--shadow-in`) input field, and a dedicated error feedback container with `aria-live="polite"`.

### 2.4 FAQ Accordion (treated as interactive disclosure)
- Opening/Open/Closing states animated via CSS transitions (`max-height`/grid-template technique).
- Semantic `<details>`/`<summary>` or ARIA-compliant custom accordion; fully keyboard operable; debossed panel when open.
- Google Icon chevron that rotates on open.

### 2.5 Modal (if any CTA triggers one)
- Opening/Open/Loading/Success/Error/Closing states, all CSS-animated; centered flex container with backdrop overlay; Google Icon close button; focus trapping; close via `Esc` or overlay click.

---

## 3. UX & MICRO-INTERACTION RULES (GLOBAL)

- **Responsive by default:** fluid sizing, no overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; press feedback at `150ms`; respect `prefers-reduced-motion`.
- **Accessibility:** AA contrast in both modes; never rely on color alone for state; semantic HTML5; correct ARIA roles/labels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).
- **Mandatory visual feedback:** every click, hover, or submission triggers a visible state change (emboss → deboss is the core neumorphic interaction language).
- **Neumorphic discipline:** no hard borders, no sharp corners (12–16px radius everywhere), monochromatic harmony, consistent single light source across all shadows.

---

## 4. DELIVERABLES & OUTPUT FORMAT

- **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference.
- **Naming:** One consistent convention (BEM or fixed utility set) throughout — never mix conventions.
- **Copy:** Write all user-facing copy in **English**. Real, meaningful marketing copy for every section — no lorem ipsum.
- **No unrequested placeholders.**

Build the complete landing page now, on the first attempt, following every rule above.