Showroom · Build notes

How Northstar was made

A SaaS landing page built as the counter-argument: no particle hero, no gradient soup, no carousel — one accent color, one typeface, and copy that answers the questions a buyer actually has.

What it demonstrates

Restraint as a deliberate, expensive-looking choice. Every landing-page cliché this page skips is replaced by specificity: named check regions instead of "global infrastructure", exact thresholds instead of "smart alerting", one price per plan stated once. The single data visual keeps the same discipline — its uptime percentage is computed in the page from the 90 generated bars beneath it, and a caption admits the data is sample data. Nothing on the page pretends.

Techniques, honestly named

• One-accent system — a slate ink-and-gray scale with a single blue (#1D4ED8) doing every job: links, buttons, icons, focus rings, bars.
• Computed status card — a seeded Lehmer LCG generates 90 up/degraded/down days; the 99.88% figure is derived from that series in JavaScript, so the visual and the number cannot disagree.
• Native-element FAQ — details/summary accordions, keyboard-operable with zero script.
• Sticky translucent header — backdrop-filter blur over a hairline, the only "effect" on the page.
• Micro-transitions only — 150ms border and background shifts, all removed under prefers-reduced-motion.
• Accessible by structure — the status card is role="img" with a described-by caption so screen readers hear the summary, not ninety meaningless bars.

Recreate it