Salesforce Lightning demo
Salesforce Lightning

A token-driven enterprise design system (SLDS) featuring dense, consistent CRM layouts with data tables, utility icons, and a neutral professional palette.
Category: Corporate & SaaS
Era: 2010s Modern
Prompt: 12.7 KB · 1748 words
# System Prompt: Salesforce Lightning (SLDS) Landing Page — Corporate & SaaS

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. The page markets a fictional enterprise SaaS CRM platform (invent one plausible product name, e.g., "Vertex CRM," and use it consistently). The entire page must read as a Salesforce Lightning Experience interface: dense enterprise layout, hairline-bordered surfaces, token-driven theming, utility icons, and a neutral professional palette.

**Theme:** Salesforce Lightning (SLDS) — claude-artisan/flat-platform, 2015–present, Corporate & SaaS.
**Source note (translated from spec):** The source does not declare light/dark modes; you must define and validate both light and dark appearances before considering the work complete.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in a dedicated `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target every element via class or ID selectors only. HTML must remain semantic and styling-agnostic: changing the theme must never require markup edits.
- Use semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) with one `h1` (Hero) and one `h2` per section.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root` using the required names, populated with the SLDS palette:

- **Colors:** `--primary: #0176d3`, `--secondary: #04844b`, `--bg-primary: #f3f3f3`, `--bg-secondary: #ffffff`, `--bg-surface-strong: #f4f6f9`, `--text-primary: #181818`, `--text-secondary: #706e6b`, `--text-success: #04844b`, `--text-error: #ba0517`, `--border-default: #dddbda`, `--border-error: #ba0517`, `--border-success: #04844b`, `--brand-rule: var(--primary)`.
- **Exception clause:** The mandatory "use `#fefefe` instead of `#ffffff`" rule is waived only for the SLDS brand surface token `--bg-secondary: #ffffff`, which is explicitly declared by this theme's palette; any *additional* near-white surface must use `#fefefe`.
- **Contrast pairing:** Every light background token pairs with a dark text token and vice versa — enforced in both themes, not just the default.
- **Radius & shadows:** `--radius-sm: 4px`, `--radius-md: 4px`, `--radius-lg: 8px`, `--radius-pill: 999px`, `--shadow-sm: 0 1px 2px rgba(0,0,0,0.10)`, `--shadow-md: 0 2px 6px rgba(0,0,0,0.12)`, `--shadow-lg: 0 4px 14px rgba(0,0,0,0.14)`.
- **Spacing & motion:** Keep the dense SLDS scale (`--space-1: 4px` through `--space-24: 88px`) and expose `--spacing-gap: var(--space-4)`; `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Typography scale (dense CRM sizing):** `--text-base: 0.875rem`, `--text-sm: 0.8125rem`, `--text-xs: 0.75rem`, up through `--text-5xl: 3.25rem`; use `clamp()` for fluid display sizes.
- **Elevation:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`. The sticky nav and mobile menu panel use `--z-dropdown`; nothing may create z-index conflicts.

### 1.3 Mandatory Dark Mode Support
- Define a full dark token set under both `@media (prefers-color-scheme: dark)` and a `.dark` class. Suggested SLDS dark equivalents (validate every pair against WCAG AA 4.5:1 before publishing): `--bg-primary: #181818`, `--bg-secondary: #232323`, `--bg-surface-strong: #2e2e2e`, `--text-primary: #f3f3f3`, `--text-secondary: #b0afab`, `--primary: #1b96ff`, `--text-success: #4bca81`, `--text-error: #fe5c4d`, `--border-default: #333333`.
- In dark mode, filled primary buttons must switch to dark text (`#181818`) on the lightened brand blue to preserve the contrast pairing rule.
- Provide a visible theme toggle in the nav with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode"). Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Swapping themes must require zero HTML changes.

### 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 CSS comments.
- Mobile-first: rows convert to columns below ~768px, grids use `auto-fit`/`minmax`, and horizontal scrolling is forbidden at every viewport width. The nav is sticky with `scroll-margin-top` set on all anchor targets.

### 1.5 Styling Framework
- Use token-driven custom CSS per the supplied SLDS specification — no Tailwind. Extend the provided base classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) and map every utility back to CSS variables or reusable class names.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Load **Inter** from Google Fonts via `<link>` and bind it to `--font-base`/`--font-display` with the stack `'Salesforce Sans', 'Inter', system-ui, sans-serif` (Salesforce Sans is not distributed on Google Fonts; Inter is the served substitute and may remain second in the stack).
- **Icons:** Use Google Material Symbols (Outlined) via `<link>` for every icon. **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component
Style all states via CSS classes only:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. `.btn` is neutral (surface background, hairline border, `--shadow-sm`); `.btn--primary` is filled `--primary` with white text.
- **Hover:** background shifts to `--bg-surface-strong` (light) / darker surface (dark), shadow to `--shadow-md`, `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring (`outline: 2px solid var(--primary); outline-offset: 1px`).
- **Active:** `transform: scale(0.97)` click feedback.
- **Loading:** disables interaction, prevents double-clicks, renders a CSS-animated spinner that does not change button dimensions; set `aria-busy="true"` via JS.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`, no shadow.
- **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error`. Define `.btn--danger` with visually distinct styling in both themes even if unused on this page.

### 2.2 Card Component
Applies to feature cards, step cards, testimonial cards, pricing tiers, and the FAQ container:
- **Default:** flex layout, `--bg-secondary` surface, 1px hairline border, **3px top rule in `--brand-rule`** (the SLDS signature move), `--radius-sm`, `--shadow-sm`, generous internal padding.
- **Hover:** `transform: translateY(-2px)` and shadow shift on interactive cards only (pricing tiers, cards containing links).
- **Focus-within:** border highlights when a child link/button receives focus.
- **Loading/Empty:** not required for static content; if any async content is ever introduced, define a shimmer `.card--skeleton` in CSS.

### 2.3 Form & Input Requirements
Used in the Final CTA email capture and footer newsletter:
- **Structure:** flex container wrapping a visible `<label>`, the `.input` field, and a dedicated error/success message container.
- **States:** empty, focused (border `--primary` + `box-shadow: 0 0 0 1px var(--primary)` ring), filled, valid (success border + check icon), invalid (error border, error text, error icon, `aria-invalid="true"`, message linked via `aria-describedby`), disabled, read-only.
- **Feedback:** messages render in an `aria-live="polite"` region; submit shows the loading state, then inline success confirmation. Never rely on color alone — pair every state with an icon and/or text.

### 2.4 FAQ Accordion
- Each item: a `<button>` trigger with `aria-expanded` and `aria-controls`, chevron Material Symbol that rotates 180°, and a panel with `role="region"`. Fully keyboard operable (Enter/Space), smooth CSS height/opacity transition, hairline dividers between items, respects `prefers-reduced-motion`.

### 2.5 Modal / Popup (only if you include an overlay)
If the Hero's "Watch demo" CTA opens a dialog, it must be: centered flex container (`align-items: center`), backdrop overlay, Google Material Symbol close button, animated open/close via CSS transitions, focus trapped inside, closable via `Esc` and overlay click, and layered at `--z-modal`. If no overlay is included, omit silently.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing, standard breakpoints, zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; disable transforms/transitions under `prefers-reduced-motion: reduce`.
- **Accessibility:** WCAG AA contrast in both light and dark modes; semantic HTML5; correct ARIA roles/labels on the accordion, mobile menu, and theme toggle; logical DOM/focus order; full keyboard operability; a visually hidden skip-to-content link; `aria-live` regions for all dynamic form feedback.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both themes (define it even if unused).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline styles; no inline `<script>` blocks beyond one deferred `script.js` reference.
- **Naming:** strict BEM (`block__element--modifier`) everywhere — extend the supplied `.btn--primary` pattern; never mix conventions.
- **Copy:** all user-facing copy in **English**, professional enterprise-SaaS tone. Write realistic content — real feature names, testimonial names/roles/companies, credible USD pricing, substantive FAQ answers. **Lorem ipsum is forbidden.**
- **Final validation:** verify light and dark modes, all component states, and keyboard navigation before finishing.

---

## 5. PAGE COMPOSITION & CONTENT REQUIREMENTS

1. **Sticky Nav:** brand mark (Material Symbol + product wordmark), anchor links (Features, How It Works, Pricing, FAQ), theme toggle, neutral "Sign in" button, primary "Get started" button. On mobile: a Material Symbol menu button toggles a dropdown panel (`aria-expanded`, `aria-controls`, `--z-dropdown`, closes on `Esc`).
2. **Hero:** pill `.badge` ("New" announcement), `h1`, supporting paragraph, primary CTA + secondary "Watch demo" CTA, and a static product-preview `.card` containing a small **SLDS-style data table** (e.g., "Recent opportunities": Name, Stage, Amount, Close date; 3–4 rows) with hairline borders, striped rows via `--bg-surface-strong`, and stage badges (`.badge--success`, `.badge--neutral`, `.badge--error`).
3. **Features (3 cards):** responsive grid; each card has a Material Symbol icon in a tinted square, title, description, and a "Learn more" text link with arrow icon; hover lift and focus-within highlighting.
4. **How It Works (3 steps):** numbered steps (01/02/03) connected by a hairline rule on desktop, stacked vertically on mobile; each step pairs an icon with title and copy.
5. **Testimonials (3 cards):** quote Material Symbol, realistic quote, CSS initials-circle avatar (no external images), name, role, company, and a 5-star rating via filled star Material Symbols with an accessible "Rated 5 out of 5" label.
6. **Pricing (3 tiers):** card grid; the middle tier is highlighted ("Most popular" `.badge`, stronger primary border); each tier shows name, realistic per-user/month USD price, feature list with check icons, and a CTA (primary button on the featured tier, neutral elsewhere). Below the tiers, include a compact **SLDS-style comparison table** (hairline borders, striped rows, check/close Material Symbols per feature).
7. **FAQ:** accordion with 5–6 substantive enterprise questions (security, integrations, migration, pricing, support, compliance) inside a `.card` container with the 3px top rule.
8. **Final CTA:** full-width band on `--bg-surface-strong` containing a `.card` with heading, copy, and the email-capture form (all Section 2.3 states) with inline success confirmation.
9. **Footer:** hairline top border; brand blurb plus secondary link columns (Product, Company, Resources, Legal), newsletter input, and a bottom bar with copyright and legal links; muted `--text-secondary` links with visible hover/focus states.

---

## 6. SALESFORCE LIGHTNING VISUAL DIRECTION

- **Signature move:** a 3px brand-blue top rule plus 1px hairline borders on the nav and every card-type container (features, steps, testimonials, pricing tiers, FAQ, CTA) — the page must read as one consistent enterprise data system.
- **Flat and dense:** near-zero radii (4px), subtle shadows only, compact spacing, 0.875rem base type, generous muted-text hierarchy.
- **Neutral professionalism:** no gradients, no decorative illustration; color is reserved for the brand blue, green success accents, and red danger states. Badges are pill-shaped with tinted backgrounds in both themes.
- **Do not:** use rounded-organic shapes, large hero imagery, or non-token colors anywhere.