Beacon

Beacon is a SaaS landing page built for a fictional uptime monitoring product targeting engineering teams — designed to demonstrate how a product-led growth company presents itself to a technical audience.

The design is dark, dense, and confident. SaaS buyers are skeptical and fast-moving; the site earns trust with specifics (30-second check intervals, 8 global monitoring locations, named integrations) rather than vague benefit statements.

Key Features

• Monthly/annual pricing toggle across three tiers (Free, Pro at $29/mo, Business at $99/mo) with clear feature differentiation
• CSS-built dashboard mockup in the hero — no design tool exports, pure Tailwind
• Feature grid with 9 capabilities organized by category (Monitoring, Alerting, Reporting)
• Integration logo strip (Slack, PagerDuty, OpsGenie, GitHub, AWS, Datadog, Jira, Zapier)
• Social proof strip with logos from Vercel, Linear, Loom, Retool, Brex, and Figma
• Full features, pricing, about, and contact/demo pages

Design Decisions

The orange-on-dark palette positions Beacon as alert-oriented and high-stakes — appropriate for infrastructure tooling. The hero dashboard mockup is built entirely in code (no image exports) so it renders crisply at any resolution and can be animated. The pricing section uses a spring-animated toggle to switch between billing periods without a page reload.

Copy throughout leads with outcomes for a technical buyer: “Know before your customers do” beats “Monitor your uptime” at every stage of the funnel.