Page Patterns
Use this reference for landing, dashboard, docs, and pricing work.
Landing Page
Structure:
- Compact nav with text links, thin separators, and one restrained primary action.
- Hero with literal H1, concise support copy, primary/secondary actions, and a technical artifact in the first viewport.
- Proof band with metrics, customer/workload proof, benchmark, or product constraints.
- Product workflow section using rows, diagrams, code, or tables.
- Comparison or architecture section.
- Pricing or getting-started section with clear limits.
- Footer with docs, status, security, terms, and support links.
Rules:
- H1 should be a product/category claim, not a vibe.
- Show a hint of the next section below the fold.
- Avoid giant empty bands and oversized decorative screenshots.
Dashboard Or App UI
Structure:
- Dense top bar or sidebar.
- Compact page header with command actions.
- Filter/search controls where useful.
- Tables, rows, timelines, and split panes over card grids.
- Status colors used sparingly and consistently.
- Empty states that show the next concrete action.
Rules:
- Prioritize repeated-use scanning over marketing drama.
- Prefer row density and clear labels.
- Do not turn every metric into a large card.
Docs Surface
Structure:
- Left nav or compact section nav.
- Strong page title and short summary.
- Code/API example early.
- Parameters, examples, errors, and changelog links.
- Thin dividers and readable content width.
Rules:
- Show the command before explaining it.
- Use mono labels for API names, package names, env vars, and IDs.
- Avoid decorative docs heroes.
Pricing
Structure:
- Plain plan table or compact tiers.
- Feature limits and usage constraints.
- Billing interval control if needed.
- FAQ focused on cancellation, refunds, overages, invoices, security, and support.
Rules:
- Be explicit about limits.
- Avoid vague feature names.
- Use comparison rows when plan differences matter.