Adobe Spectrum demo
Adobe Spectrum

A neutral, professional design system for creative tools featuring Adobe Clean typography, careful density scales, and strong theming with built-in accessibility.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 6.9 KB · 887 words
## System Prompt for Coding AI — Adobe Spectrum Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete Landing Page in the **Adobe Spectrum** design language on the first attempt. Follow every rule below strictly.

### 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.
- Target everything via class/ID selectors. HTML stays clean, semantic, and style-agnostic.
- Reskinning the page must only ever require editing the CSS file.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` exactly as specified (Adobe Spectrum palette):
- Colors: `--color-bg: #ffffff` (use `#fefefe` if a near-white is needed), `--color-surface: #f8f8f8`, `--color-surface-strong: #eaeaea`, `--color-border: #d5d5d5`, `--color-text: #1f1f1f`, `--color-text-muted: #5a5a5a`, `--color-primary: #1473e6`, `--color-accent: #9256d9`, `--color-negative: #e34850`.
- Also define generic aliases: `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- Contrast pairing: every light background token pairs with `--color-text` (dark); every dark background token pairs with light text (`#fff`). Enforce in both themes.
- Radius/shadows/spacing/ease: `--radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm/md/lg` per spec; spacing scale `--space-1` through `--space-24`; `--ease-standard: cubic-bezier(0.15, 0, 0.15, 1)`; `--transition-fast: .13s`, `--transition-normal: .25s`.
- Stacking: `--z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000`.
- **Signature Spectrum move:** the precise two-color focus ring `--shadow-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary)` (alias `--focus-ring`), applied to `.btn:focus-visible`, `.input:focus`, and nav active states.

**1.3 Mandatory Dark Mode**
- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`: `--color-bg: #1d1d1d`, `--color-surface: #262626`, `--color-surface-strong: #333333`, `--color-border: #444444`, `--color-text: #f5f5f5`, `--color-text-muted: #a8a8a8`; keep `--color-primary: #1473e6` (verify contrast) and adjust the focus ring's inner gap color to `#1d1d1d`.
- Theme toggle button in the nav with `aria-pressed` and `aria-label="Toggle dark mode"`. Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. No HTML restructuring to switch themes.

**1.4 Flexbox & Mobile-First**
- Build all layout structures with Flexbox; every flex container defaults to `align-items: center` unless a justified exception is documented in a CSS comment.
- Mobile-first: hero, feature cards, pricing tiers, steps, and footer link columns stack into columns on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework**
- Use plain CSS with the provided token set (Tailwind optional only if requested). Reusable generic classes: `.btn`, `.btn--primary`, `.btn--danger`, `.card`, `.input`, `.badge`, `.nav`. One naming convention (BEM-style modifiers) throughout — never mix conventions.

**1.6 Typography & Icons**
- Google Fonts: load **Source Sans Pro** (Adobe Clean is not on Google Fonts) via `<link>`; bind `--font-sans` and `--font-display` to `'Adobe Clean', 'Source Sans Pro', system-ui, sans-serif`.
- Icons: Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.
- Use the Spectrum text scale (`--text-xs` … `--text-5xl`) with careful medium/large density: generous section padding (`--space-24`), compact component density (`--space-2/3/4`).

### 2. SECTIONS & COMPONENT SPECIFICATIONS

Build these sections in order: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy in English.

**2.1 Buttons** — Flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem`), min 44×44px touch target, pill radius (`--radius-pill`), bold `--text-sm`. States: hover (`--color-surface-strong`), focus-visible (`--focus-ring`), active (`background: #dedede`), loading (CSS spinner, dimensions preserved, double-click prevented), disabled (`opacity: .45; cursor: not-allowed`), and `.btn--danger` using `--color-negative` — visually distinct in both themes.

**2.2 Cards** — `.card` on `--color-bg` with `--radius-md`, `--shadow-sm`, 1px `--color-border`, `--space-6` padding. Feature cards: hover elevation shift (`--shadow-md`) + `transform: translateY(-2px)`; `:focus-within` highlights the border. Include a skeleton/shimmer loading style and an empty-state pattern (Material Symbol + guidance text) for testimonial/pricing content areas.

**2.3 Forms (FAQ search / newsletter in Final CTA)** — Flex input group: label, `.input` (focus ring on focus), dedicated error container. States: empty, focused, filled, valid (success border + icon), invalid (`--color-negative` border, error icon, `aria-live` message), disabled, read-only.

**2.4 FAQ Accordion** — Semantic `<details>`/`<summary>` or button + `aria-expanded` region; animated open/close via CSS transitions; full keyboard operability; no mouse-only interactions.

**2.5 Modal (optional pricing detail)** — Centered flex overlay, backdrop, Material Symbol close button, focus trapping, `Esc`/overlay-click close, opening/closing transitions, `--z-modal` stacking.

### 3. GLOBAL UX RULES

- Responsive by default; fluid type; no horizontal overflow.
- All state changes transition with `--transition-fast`/`--transition-normal` and `--ease-standard`; respect `prefers-reduced-motion`.
- Accessibility: WCAG-sufficient contrast in **both light and dark modes** (validate before publishing — the source spec explicitly requires this). Never communicate state by color alone (pair icons/text with color). Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`), skip link, logical focus order, ARIA labels on custom widgets, `aria-live` for dynamic feedback.
- Every click/hover/submit produces visible feedback.

### 4. DELIVERABLE

- Files: `index.html`, `style.css`, `script.js` (theme toggle, accordion, form validation, loading states). No inline `<script>` beyond one deferred entry point; zero inline CSS.
- No lorem ipsum — write real, on-theme English copy for every section (hero headline, feature titles/descriptions, step labels, testimonial quotes with names/roles, pricing tier names/features/prices, FAQ questions/answers, CTA copy, footer link groups).
- Pricing: highlight the middle tier with a `.badge` ("Most popular") using `--color-primary`; include per-tier CTA buttons.
- Footer: secondary link columns (Product, Company, Resources, Legal) plus copyright line.

**Exception clause:** Adobe Clean is unavailable on Google Fonts — substitute Source Sans Pro as the primary typeface while keeping `'Adobe Clean'` first in the font stack for environments that have it.