Primer demo
Primer

GitHub's flat-platform design system featuring dense but calm layouts, Mona Sans and system fonts, octicon iconography, and robust light/dark theming built for content-first, code-friendly developer tools.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 15.0 KB · 1944 words
# Coding Agent Prompt — "Primer" Themed Landing Page

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in a single attempt — no partial output, no TODOs, no placeholders for unfinished work.

**Theme:** Primer — GitHub's design language. Keywords: developer-tool clarity, dense but calm, content-first, code-friendly, flat-platform, robust light/dark theming. **Signature move:** a single consistent 1px hairline border + 6px radius repeated identically across nav, cards, buttons, and inputs — developer-tool density paired with calm, never-noisy borders.

**Required sections (in this order):** Sticky Header/Nav (hosts the mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (with email capture), Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML. No `<style>` blocks in `index.html`.
- **Class/ID selectors only:** every design property, layout rule, and state is targeted via class or ID selectors in `style.css`.
- **Clean markup:** HTML stays semantic and style-agnostic — re-theming the page must require editing only `style.css`, never the markup.
- **Extend, don't rewrite:** the Primer base classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) are the foundation; extend them and keep the hairline-border + 6px-radius signature intact in every new component.

### 1.2 CSS Variables & Theme Tokens
- **Mandatory canonical tokens** in `:root`, mapped to Primer light values:
  `--primary: #1f883d; --secondary: #0969da; --bg-primary: #f6f8fa; --bg-secondary: #ffffff; --text-primary: #1f2328; --text-secondary: #59636e; --text-success: #1a7f37; --text-error: #cf222e; --border-default: #d0d7de; --border-error: #cf222e; --border-success: #1f883d;`
- **Extended Primer tokens** (define with these exact values): `--color-bg: #f6f8fa; --color-surface: #ffffff; --color-surface-strong: #f6f8fa; --color-border: #d0d7de; --color-text: #1f2328; --color-text-muted: #59636e; --color-primary: #1f883d; --color-accent: #0969da; --color-danger: #cf222e; --radius-sm: 6px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 0 rgba(31,35,40,0.04); --shadow-md: 0 3px 6px rgba(140,149,159,0.15); --shadow-lg: 0 8px 24px rgba(140,149,159,0.2); --font-sans: -apple-system, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', sans-serif; --font-display: -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace; --font-base: var(--font-sans);` type scale `--text-xs: 0.75rem` through `--text-5xl: 3.25rem` (sm 0.8125, base 0.875, lg 1, xl 1.25, 2xl 1.5, 3xl 2, 4xl 2.5); space scale `--space-1: 4px` through `--space-24: 80px` (2:8, 3:12, 4:16, 6:20, 8:28, 12:40, 16:56); `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --focus-ring: 0 0 0 3px rgba(9,105,218,0.3); --code-diff-add: #d1f4dc;`
- **Additional required tokens:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 200ms`, `--z-header: 900`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--header-height`.
- **Tokenize button values:** move the base button's hardcoded colors into `--btn-bg`, `--btn-hover-bg`, `--btn-active-bg`, `--btn-hover-border`, `--btn-primary-hover-bg` so dark mode can override them.
- **No hardcoded colors outside `:root`/theme blocks:** every rule references `var(--...)`.
- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in both themes, not just the default.
- **Background rule:** the page background is `#f6f8fa`, never pure white; where a near-white is needed use `#fefefe`, not `#ffffff`. **Exception (Primer spec):** `--color-surface: #ffffff` is an explicit theme token for cards/surfaces — retain it; `#ffffff` remains forbidden as a page-level background.

### 1.3 Mandatory Dark Mode Support
- **Implementation:** define dark token overrides both under `@media (prefers-color-scheme: dark)` (no-JS first visit) and a `.dark` class on `<html>` (toggle); the `.dark` class must win when applied.
- **Recommended dark palette (GitHub dark primitives):** `--color-bg: #0d1117; --color-surface: #161b22; --color-surface-strong: #21262d; --color-border: #30363d; --color-text: #e6edf3; --color-text-muted: #7d8590; --color-primary: #238636; --color-accent: #388bfd; --color-danger: #f85149; --code-diff-add: rgba(46,160,67,0.15); --focus-ring: 0 0 0 3px rgba(56,139,253,0.4);` canonical map: `--primary: #238636; --secondary: #388bfd; --bg-primary: #0d1117; --bg-secondary: #161b22; --text-primary: #e6edf3; --text-secondary: #7d8590; --text-success: #3fb950; --text-error: #f85149; --border-default: #30363d; --border-error: #f85149; --border-success: #2ea043;` button tokens: `--btn-bg: #21262d; --btn-hover-bg: #30363d; --btn-active-bg: #3d444d; --btn-primary-hover-bg: #2ea043;` shadows switch to black-based `rgba(1,4,9,…)`; badge text `#3fb950`.
- **Token-only switching:** theme changes must never require HTML restructuring or duplicated stylesheets.
- **Persistence:** store the choice in `localStorage` (key `"theme"`); on first visit fall back to `prefers-color-scheme`. Include `<meta name="color-scheme" content="light dark">` and update `<meta name="theme-color">` on toggle.
- **Toggle control:** visible in the header — icon-only button, min 44×44px, `aria-pressed="true"` when dark is active, dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"), sun/moon icon swap, visible focus ring.
- **Validation gate (source spec note, translated):** the source declares no theme modes — you must validate every section in both light and dark before delivering, with text contrast ≥ 4.5:1.

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Default alignment:** every flex container defaults to `align-items: center` unless an exception is explicitly justified (documented exception: feature/pricing/testimonial card grids use `stretch` so card heights match).
- **Mobile-first:** all multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to one column below 768px. No horizontal scrolling at any width from 320px up.
- **Sticky header:** flex row, `position: sticky; top: 0; z-index: var(--z-header)`, surface background, hairline bottom border; nav links collapse behind a menu button on mobile (see 2.5).

### 1.5 Styling Approach — Custom CSS, No Framework
- The source specification supplies its own token system and base classes; treat this as the requested styling approach: **pure hand-written CSS** in one `style.css` — no Tailwind, no Bootstrap, no CSS-in-JS, no preprocessors.
- Build **generic reusable classes** (`.btn`, `.btn--primary`, `.btn--danger`, `.card`, `.input`, `.badge`, `.nav`) and compose all sections from them.

### 1.6 Typography & Icons
- **Mandatory rule:** Google Fonts for text and Google Material Symbols for icons, bound to `--font-base`.
- **Exception (Primer theme, per source spec):** typography uses GitHub's system stack (`-apple-system, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', sans-serif`, optionally prepending Mona Sans loaded from its official CDN) with `ui-monospace` for code, and iconography uses **Octicons as inline SVG** — these replace Google Fonts/Material Symbols for this build.
- **Octicon rules:** every icon is an inline `<svg>` with `fill="currentColor"`, `aria-hidden="true"`, `focusable="false"`, default 16px, inheriting theme color automatically. No other inline SVG usage is permitted; no local icon files.
- **Code blocks** (hero visual) use `--font-mono` with token-driven colors and one `--code-diff-add` highlighted line.

---

## 2. PAGE BLUEPRINT & COMPONENT DESIGN SPECIFICATIONS

### 2.0 Required Sections (top to bottom)
1. **Header/Nav:** logo (mark-github octicon + product name), anchor links (Features, How It Works, Pricing, FAQ), theme toggle, "Sign up" `.btn--primary`.
2. **Hero:** `.badge` eyebrow, single `<h1>`, supporting copy, two CTAs (`.btn--primary` "Get started" + `.btn` "View documentation"), and a code-window card (mono font, one `--code-diff-add` diff line) as the visual; muted trust line beneath.
3. **Features:** section heading + 3 `.card`s in a responsive grid; each: octicon in a tinted square, `<h3>`, description, "Learn more" link.
4. **How It Works:** 3 numbered steps (numbered circles, hairline connector line), `<h3>` + text each; stacks vertically on mobile.
5. **Testimonials:** 3 cards — CSS initials-circle avatar (no external images), quote, name, muted role; skeleton and empty-state styles defined for these (see 2.2).
6. **Pricing:** 3 tier cards; middle tier elevated (primary/accent border + "Popular" `.badge`); each: tier name, price, check-octicon feature list, CTA. Include an accessible Monthly/Annual toggle that updates prices and announces changes via `aria-live="polite"`.
7. **FAQ:** 5–6 Q&A pairs as an accordion (see 2.4). **No modals anywhere on this page.**
8. **Final CTA:** full-width band on `--color-surface-strong`, `<h2>`, copy, and the email-capture form (see 2.3).
9. **Footer:** 4 columns of secondary links (Product, Resources, Company, Legal), social octicons with `aria-label`, copyright line, muted text throughout.

### 2.1 Button Component
Base `.btn` per spec: flex, `align-items: center; justify-content: center; gap: 0.5rem`, min 44×44px touch target, weight 500 at `--text-base`, padding `--space-2 --space-4`, `--radius-md`, `--btn-bg` background, 1px hairline border, `--shadow-sm`, fast transitions. All states via classes:
- **Hover:** background/border shift via `--btn-hover-bg`/`--btn-hover-border`, `cursor: pointer`.
- **Focus:** `:focus-visible` → `outline: none; box-shadow: var(--focus-ring)` — keyboard focus is never removed.
- **Active/pressed:** `transform: scale(0.97)` + `--btn-active-bg`.
- **Loading:** `.is-loading` (or `aria-busy="true"`): `pointer-events: none`, double-click-proof, CSS border spinner or rotating sync-octicon in the icon slot, button dimensions unchanged.
- **Disabled:** `opacity: 0.5; cursor: not-allowed;` greyscale; hover/active suppressed.
- **Success/Error:** `.is-success` / `.is-error` — border + text via `--text-success` / `--text-error`, used for temporary submit feedback.
- **Variants:** `.btn` (default), `.btn--primary` (green, white text, `--btn-primary-hover-bg` on hover), `.btn--danger` (defined for completeness; visually distinct in both themes).

### 2.2 Card Component
- **Default:** `.card` per spec — `--color-surface` background, 1px hairline border, `--radius-lg`, `--shadow-sm`, `--space-6` padding, flexbox internals.
- **Hover (interactive cards):** `transform: translateY(-2px)` + `--shadow-md`, `transition: var(--transition-normal) var(--ease-standard)`.
- **Focus-within:** when a child link/button is focused, the card border shifts to `--color-accent` — a visible keyboard path.
- **Loading (skeleton):** `.card--skeleton` with a CSS shimmer keyframe over muted blocks, `aria-busy="true"`, zero layout shift.
- **Empty state:** `.card--empty` — centered octicon + short guidance text, as a structured fallback for testimonial/feature content.

### 2.3 Form & Input (Final-CTA email capture)
- **Structure:** `.input-group` flex column wrapping `<label>`, `<input class="input">` (mono font, full width, hairline border, `--radius-md`), and a dedicated error/feedback container with `aria-live="polite"`; the input references it via `aria-describedby`.
- **States:** empty; focused (accent border + `--focus-ring`); filled; valid (`--border-success` + check octicon); invalid (`aria-invalid="true"`, `--border-error`, error octicon, red message text — never color-only); disabled; read-only.
- **Behavior:** validate email on blur and on submit; on submit the button enters loading (~1s simulated), then a success state with inline confirmation announced via `aria-live`. No page reload; no `alert()`.

### 2.4 FAQ Accordion
- Use `<details>/<summary>` (or button + `aria-expanded`/`aria-controls` if scripting); `<summary>` is flex, `align-items: center`, `justify-content: space-between`, with a chevron-down octicon rotating 180° on open.
- Smooth expand/collapse animation (grid-rows or measured max-height technique); fully disabled under `prefers-reduced-motion`.
- Hairline dividers between items; `:focus-visible` ring on the summary; full keyboard operability.

### 2.5 Theme Toggle & Mobile Menu
- **Theme toggle:** per 1.3 — icon-only, 44×44px, `aria-pressed`, dynamic `aria-label`, sun/moon octicon swap, focus ring.
- **Mobile menu:** three-bars button with `aria-expanded` + `aria-controls`; panel layered at `--z-dropdown`; closes on `Esc`, on link click, and on outside click; all links keyboard reachable.

---

## 3. CORE UX & MICRO-INTERACTION RULES
- **Responsive by default:** fluid type via the `--text-*` scale, breakpoints at ~640/768/1024px, zero horizontal overflow at any width ≥ 320px.
- **Smooth animations:** every state change transitions with `--transition-fast`/`--transition-normal` + `--ease-standard`; `@media (prefers-reduced-motion: reduce)` disables transforms, spins, shimmer, and smooth scrolling.
- **Accessibility (a11y):** skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); exactly one `<h1>`; logical heading, DOM, and focus order; full keyboard operability (no mouse-only interactions); visible focus everywhere; `aria-live` regions for form errors, pricing updates, and loading states; contrast ≥ 4.5:1 in both themes; state is never communicated by color alone (always icon + text).
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark (define it even if unused on this page).
- **Anchor navigation:** smooth scrolling with `scroll-margin-top: var(--header-height)` on all sections; disabled under reduced motion.

---

## 4. DELIVERABLE & OUTPUT FORMAT
- **Files:** `index.html`, `style.css`, `script.js` — three separate files. Exactly one `<script src="script.js" defer></script>`; no inline script blocks and no `onclick`-style handler attributes.
- **Naming convention:** BEM only (`block__element--modifier`) across the entire deliverable — never mix conventions. Section blocks: `.hero`, `.features`, `.steps`, `.testimonials`, `.pricing`, `.faq`, `.cta-final`, `.footer`.
- **Copy:** all user-facing copy in **English**. Invent a coherent fictional developer-tool product (e.g., a code review/CI platform) and write realistic copy for it — headline, feature descriptions, 3 testimonials with names and roles, 3 pricing tiers with features and prices, 5–6 FAQ Q&As, footer link labels. **No lorem ipsum.** No emoji in UI copy.
- **Assets:** fully self-contained — no external images; avatars are CSS initials circles; visuals are styled cards/code windows; icons are octicons only.
- **Completeness:** deliver the full working page on the first attempt — all 9 sections, both themes validated, every component state implemented as specified. No unrequested placeholders; where content was unspecified, invent realistic, theme-appropriate content.