Markup Landing Page

Overview

A landing page has one job: turn a stranger into a buyer (or trial user). Everything else — logos, headers, badges, blog links — is decoration. This skill encodes the patterns that consistently convert: a tight design system that handles dark/light mode automatically, an opinionated section order that walks visitors through the buy decision, copy rules that avoid AI-generic language, and the SEO/structured-data baseline that gets the page found in the first place.

Pair with content-voice for copy. This skill handles structure, design system, and conversion mechanics. content-voice handles how the words sound.

Tech Stack Baseline

Default to the lightest possible stack. Heavy frameworks slow time-to-interactive, hurt SEO, and add maintenance burden for what should be ~80% prerendered HTML.

Recommended:

• SvelteKit + adapter-static for prerendered SSR. Zero JS on most pages, full SEO, instant LCP.
• Plain CSS with custom properties — no Tailwind, no UI library. CSS custom properties + prefers-color-scheme give you theming for free.
• System font stack — -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif. Zero font load, native OS feel.
• TypeScript in `` blocks.
• Vite for bundling.
• Cloudflare Pages or Vercel for hosting (static + edge functions).

Avoid unless specifically needed:

• React + Next.js for a marketing site (overkill, hydration cost)
• Tailwind for a single-domain landing (verbose class soup, design tokens scattered)
• Heavy animation libraries (GSAP, Framer Motion) for fade-ins (CSS does it in 4 lines)
• Web fonts (system fonts look better than 90% of imported fonts on Apple devices)
• Component libraries (Radix, shadcn) — landing pages need brand-specific UI, not generic primitives

Design System (Single Source of Truth)

All design tokens live in one CSS file as custom properties on :root. Components read tokens via var(--token). Hardcoded colors, spacing, or radii in components is a smell.

Color tokens

:root {
  /* Neutrals — Apple-style cold grays for premium feel */
  --gray-50: #fbfbfd;
  --gray-100: #f5f5f7;
  --gray-200: #e8e8ed;
  --gray-300: #d2d2d7;
  --gray-400: #aeaeb2;
  --gray-500: #86868b;
  --gray-600: #6e6e73;
  --gray-700: #48484a;
  --gray-800: #3a3a3c;
  --gray-900: #1d1d1f;

  /* Brand accent — pick ONE primary, use shades */
  --accent-50:  #eef2ff;
  --accent-100: #dbe4ff;
  --accent-200: #bfcfff;
  --accent-400: #6d8aff;
  --accent-500: #4a6cf7;  /* primary — buttons, links */
  --accent-600: #3451d1;  /* hover */

  /* Semantic — these are what components reference */
  --bg: var(--white);
  --bg-muted: var(--gray-100);
  --card-bg: var(--white);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --border: var(--gray-200);
  --border-light: var(--gray-100);
  --on-accent: #ffffff;  /* text on accent backgrounds — does NOT invert */
  --nav-bg: rgba(255, 255, 255, 0.72);

  /* Trust accent — green for privacy/security signals */
  --green-500: #30d158;
}

Typography scale

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
}

Spacing scale (8px base)

:root {
  --space-1: 0.25rem;   --space-5: 1.25rem;
  --space-2: 0.5rem;    --space-6: 1.5rem;
  --space-3: 0.75rem;   --space-8: 2rem;
  --space-4: 1rem;      --space-10: 2.5rem;
                        --space-12: 3rem;
                        --space-16: 4rem;
                        --space-20: 5rem;
                        --space-24: 6rem;
}

Effects

:root {
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);

  --transition: 0.2s ease;
  --nav-height: 56px;
  --max-width: 1100px;
}

Automatic Dark/Light Mode

This is non-negotiable for modern landing pages. Implement once at the token level — components shouldn't know which mode they're in.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-muted: #0a0a0a;
    --card-bg: #111113;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted: #6e6e73;
    --border: #2a2a2e;
    --border-light: #1c1c1f;
    --nav-bg: rgba(0, 0, 0, 0.72);

    /* Brighten accent slightly for dark mode contrast */
    --accent-500: #6d8aff;

    /* Adjust shadows — heavier on dark */
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  }
}

Rules:

• Never hardcode colors in components. Use var(--token).
• --on-accent does NOT invert — text on a colored button stays white in both modes.
• Test both modes. Dark mode reveals contrast bugs that pass in light.
• Add the meta tag so the OS chrome matches:

```html

```

• Component-specific cases (like a rgba(0,0,0,0.4) overlay) need explicit dark-mode overrides inside the component.

Section Anatomy (Top to Bottom)

Order matters. The page is a sales conversation. Each section answers the next objection.

1. Nav (sticky, blur backdrop)

• Fixed top, height ~56px
• Logo + 1–3 links + 1 primary CTA pill (accent fill)
• backdrop-filter: blur(20px) + translucent background
• Border-bottom appears on scroll (subtle shadow change)
• Mobile: same layout, smaller paddings — don't add a hamburger unless > 5 items

2. Hero

The single most important section. Conversion is decided here.

• Badge above headline — context tag (e.g., "macOS 14+ · Apple Silicon"). Tiny, uppercase, muted.
• Headline — clamp(2.5rem, 6vw, 3.5rem), weight 700, letter-spacing -0.035em, line-height 1.08. Two lines max with ``. State the outcome, not the feature. "Talk to your computer, don't type." beats "AI-powered voice recognition for macOS."
• Subtitle — single sentence, max ~30 words, --text-lg, --text-secondary. Includes 2–3 specific features ("smart cleanup, live translation, meeting summaries").
• Primary CTA — pill button, accent fill, --text-lg, generous padding. Use action verbs. "Download Free" beats "Get Started." Concrete > abstract.
• Trust line under CTA — free trial limits ("100 free dictations · No credit card") in --text-sm muted.
• Alt install — brew install ... block in monospace if relevant.
• System requirements — last line, muted small text.

Vertical centering: min-height: calc(100vh - var(--nav-height)). Background: subtle radial gradient to accent-50 at top.

3. How It Works (3 steps)

Three cards, numbered 01/02/03. Headline + 1–2 sentence description per step. Each card: card-bg, 1px border, radius-lg, padding-8. Hover: translateY(-2px) + shadow-md.

4. Three Modes / Use Cases overview (if multi-feature product)

If the product has 3+ distinct modes/jobs (dictation + meetings + notes, etc.), establish them early as cards. Sets expectations for the rest of the page.

5. Feature deep-dives (alternating two-column blocks)

Each major feature gets its own section: text on one side, visual on the other. Alternate sides for rhythm. Each block:

• Section heading (--text-4xl, weight 700, letter-spacing -0.03em)
• 2–4 sentence paragraph
• 3-bullet list of specifics (with accent dot before each)
• Visual: real screenshot, demo card, or stylized illustration

6. Privacy / Trust section

If your product has any privacy/local/data angle, give it a section. People scroll for trust signals.

7. Pricing (vs subscription comparison)

Two cards minimum: yours (highlighted) and the alternative (cloud subscription). Show:

• Price (--text-4xl)
• Period ("once" vs "/month")
• Year-2 cost line (the kicker)
• Feature list with checkmarks (you) or X marks (them)
• "Best Value" badge on yours

8. Competitor Comparison Table

Feature-by-feature against named competitors. Your column highlighted with --accent-50 background. Strikethroughs for promo prices. Cost-after-2-years row at bottom in heavier border. This is often the highest-converting section — visitors scroll specifically to compare.

9. Performance / Stats (if applicable)

One big number ("150x realtime"). Bar chart or simple visual showing you vs competition.

10. Compatibility (where it works)

Pill grid of supported apps/integrations. Reassures buyers that the tool fits their existing workflow.

11. About / Made by

Brief: "Built by [team] in [city]. Selectively shipped." Link to company. Builds trust without taking up space.

12. FAQ

8–12 questions. Use `` element — zero JS, accessible, animates with CSS. Cover:

• "What is it?" (echo the headline differently)
• Privacy / data handling
• Platform / requirements
• Free trial details
• Pricing details
• Each major feature ("How does X work?")
• Common objections ("What if X doesn't work?")
• Refund / cancellation

13. Footer CTA

A repeat CTA section before the footer. Different headline from hero — emotional or summarizing ("Local. Fast. Yours."). Same CTA. Same trust line.

14. Footer

Brand + tagline on left, columns on right (Product, Company, Legal, Connect). Copyright at bottom. Keep it minimal — 3–4 columns max.

CTA Hierarchy

A landing page should have one primary action and zero or one secondary action. Multiple CTAs of equal weight = no CTA.

Hierarchy:

1. Primary CTA — accent-filled pill, white text. Use for the conversion goal (Download, Buy, Sign up). Placed in: Nav, Hero, FooterCTA. Same label, same color.
2. Secondary CTA — outline pill (accent border + accent text, transparent fill). Use for alternate paths (Learn more, Buy after free trial). Different label.
3. Tertiary — text links with underline-on-hover. Used in nav, footer, inline copy.

Rules:

• Never two filled accent CTAs in the same viewport.
• Never use red, orange, or yellow for primary CTAs unless brand-justified — they read as warnings.
• CTA text is a verb + outcome: "Download Free", "Start Trial", "Buy Vext" — not "Click here", "Learn more", "Submit".
• Pill radius (border-radius: 9999px) outperforms rounded rectangles in tests for software products.

Conversion Patterns

Show price prominently

Hide the price = lose the sale. Visitors who can't see the price assume "expensive" or "you have to talk to sales." Even if pricing is complex, show a starting number.

Compare against the alternative

People don't evaluate prices in isolation — they evaluate them against alternatives. Always include a comparison: subscription vs one-time, your-tool vs status-quo, you vs named competitors. Make the math visible (e.g., "$49 vs $200 over 2 years").

Specific over abstract

"150x realtime" beats "blazingly fast." "$24.50 with VEXT50" beats "Save big." Numbers, named features, named competitors, named integrations. Every abstract claim should be replaced with something checkable.

Trust signals layered throughout

Don't bunch all trust at the bottom. Sprinkle:

• System requirements badge in hero
• "No credit card" in trial copy
• Privacy section mid-page
• Real screenshots (not stock illustrations)
• Specific company name + jurisdiction in footer

Free trial with explicit limits

"Free trial — 100 dictations, 50 notes, 10 meeting recordings — no credit card" outperforms "Try free." Numbers make the offer concrete.

Urgency without manipulation

If you have a real launch promo or deadline, show it: pulsing dot pill, deadline date, original price strikethrough. Never use fake countdowns or invented deadlines — buyers detect them, and trust dies fast.

Multiple CTAs, one ask

The CTA should appear in nav, hero, mid-page (after pricing), and footer. All point to the same action. Don't split between "Buy" and "Sign up free" and "Watch demo" — pick one primary outcome and repeat.

Copy Rules (apply on top of content-voice)

Headlines

• State the outcome, not the feature. "Talk to your computer, don't type." > "AI-powered voice recognition."
• Two lines max — use `` to control wrapping. Mobile gets the same break.
• Verb-driven when possible. "Capture a thought before it's gone." > "Voice notes feature."
• No marketing dead words in headlines: "revolutionary", "next-generation", "ultimate", "powerful". Use the words your customer would use describing it to a friend.

Subtitles / lead paragraphs

• One sentence. Two if you must.
• Includes 2–3 concrete features by name.
• Ends with a trust signal ("No cloud. No subscription.") or differentiator.

Section headings

• Short. 1–4 words ideally. End with a period for tonal calm: "Voice notes." "How it works." "What you earn."
• Avoid "Discover", "Unlock", "Experience", "Explore" — dead AI vocabulary.

Body copy

• Apply content-voice rules: contractions, dramatic rhythm, no dead words.
• Concrete examples > abstract claims.
• One idea per paragraph.
• Bullet lists only when you have 3+ parallel items. Otherwise use prose.

CTAs

• 1–3 words. "Download Free", "Buy for $24.50", "Get started".
• Action + outcome. Never "Click here" or "Submit".
• Match what happens next. "Buy" → checkout. "Download Free" → trial. "Start" → signup. Don't bait.

SEO + Social Baseline

Every page (not just the landing) must set:

Page Name — Brand
  

  

OG image generation

Generate per-page OG images at build time as 1200×630 SVG → PNG (use @resvg/resvg-js or similar).

• PNG only for og:image and twitter:image — Facebook, Slack, LinkedIn don't render SVG.
• Brand-consistent: dark background, accent gradient bar at top/bottom, logo top-left, headline center-left, domain footer.
• Auto-wrap titles with dynamic font sizing (drop from 80px → 64px → 52px as line count grows).
• Generated files in .gitignore — they're build artifacts, not source.

JSON-LD structured data

For a software product landing page, include SoftwareApplication:

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "...",
  "description": "...",
  "url": "...",
  "applicationCategory": "UtilitiesApplication",
  "operatingSystem": "macOS 14+",
  "offers": {
    "@type": "Offer",
    "price": 49,
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "publisher": { "@type": "Organization", "name": "...", "url": "..." }
}

Plus Organization and FAQPage (if you have a FAQ section).

Never invent aggregateRating with fake review counts — Google penalizes this. Only include if you have real reviews.

Canonical and sitemap

• Every page sets ``.
• Static sitemap.xml listing all routes with lastmod and reasonable priority (1.0 for home, 0.7 for content, 0.3 for legal).
• robots.txt allowing everything except /api/ and /_.

Error Pages (404, 5xx)

A non-existent route is a conversion opportunity, not a dead end. Most sites ship the framework's default 404 — generic, brand-broken, no recovery path. Don't.

One component, all errors

Build a single +error.svelte (SvelteKit) / error.tsx (Next) / equivalent that handles every status code. Branch the headline and copy on status:

• 404 — "Lost in transcription." / "Page not found." Light, on-brand, slight humor if it fits the voice.
• 5xx — "Something glitched on our end." Acknowledge the problem honestly. Don't blame the user.
• Other (403, 401, etc.) — fall back to the actual error message in a plain frame.

Required elements

1. Status badge — small monospace pill ("Error 404"). Tells the user what category of problem it is without the page looking like a debug screen.
2. Headline — clamp(2rem, 5vw, 2.75rem), on-brand, friendly. Avoid all-caps "

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Muvon
• Source: Muvon/octomind-tap
• License: Apache-2.0
• Homepage: https://octomind.run/tap/

Install and usage instructions live in the source repository linked above.