Steal this vault

The filter lives in the URL (?f=is,source,Google), so a drilled view is a link someone can share or bookmark.

The demo is the real dashboard for plausible.io with live numbers, linked from the marketing site. The product is its own screenshot.

One purple tints the graph and the selected KPI; everything else is zinc greys. Colour means 'the series you are looking at'.

Over the form sits a four-part tab strip (User Authentication, Multi-tenancy, Enterprise Authentication, Agent Authentication), the active one in a grey pill with a purple dot. Steal a tab strip above the hero demo that names one buyer use case per tab.

In place of a CTA button pair, the hero carries a box labeled "Build with agents" with one mono line, "> Add Clerk auth to my app: clerk.com/SKILL.md", and a copy icon; the nav has no filled button, only "Sign in" and "Sign up" as text. Steal a copyable one-line prompt as the developer CTA, written as the exact instruction to paste into a coding agent.

The second headline line, "Scale to millions", switches to green #03875f under a near-black "Build in a weekend", and the same green fills "Start your project" in the hero and the nav, where it sits beside a GitHub mark and the star count "111.2K". Steal a two-line headline whose payoff line takes the primary button's color.

Just below the fold line starts a product grid: a double-width Postgres Database card with three check items, then Authentication (a blurred grid of user emails) and Edge Functions (a "$ supabase functions deploy" chip over a wireframe globe), then a row of four narrower cards. Card copy sets the key phrase dark and the rest grey. Steal product cards that each carry a fragment of their real interface and one darkened phrase.

The CTA pair is two equal rectangles: a filled indigo "Start free trial" and a white "View live demo" with indigo text and a soft shadow; the nav repeats "Start free trial" as its only filled button. Steal a demo button sized equal to the trial button, for a product whose live dashboard is its best argument.

The product shot is the dashboard itself in a browser frame: "150 current visitors" with a green dot, a strip of six KPI tiles (Unique visitors 952k, Total visits 1.6M, Total pageviews 6M, Views per visit 3.78, Bounce rate 42%, Visit duration 7m 28s) each with a percent-change arrow, and an area chart beneath. Steal a hero screenshot that opens on the KPI strip, so the numbers a customer would get are legible above the fold.

Each paid card carries its billing switch in its own header ("YEARLY" in tiny caps beside a toggle), a blue "Save 25%" chip beside the price, and every card has a one-line footnote under its button: "Free forever", "14 day free trial", "*Annual pricing". Steal a footnote under each plan button that states the commitment the click makes.

Feature lists open with an inheritance header ("Free plan features, plus:", "Teams plan features, plus:") and most items carry a dotted underline, the usual marker for a term with an explanation behind it. Steal dotted-underlined feature names in the plan list so the detail lives in the list instead of a separate comparison table.

The billing control is a segmented "Pay monthly | Pay yearly" pill with yearly selected, followed by a blue text link "Save up to 20% with yearly" and, at the far right of the same row, "Price in USD". Directly under the headline, "Trusted by teams at" leads a row of five grey logos. Steal one control row above the plans that holds the toggle, the discount and the currency.

Button fill encodes the recommendation: Business carries a "Recommended" chip and the only solid blue "Get started", Free and Plus get pale blue fills, and Enterprise gets a white "Contact Sales". Feature lists open with "Everything in Plus, and:" so nothing repeats across columns. Steal one saturated button per pricing page, plus feature lists that show only the delta from the plan before.

The nav ends in three buttons of rising weight, outlined "Get a Demo", outlined "Log In", filled black "Sign Up", and the hero repeats the logic as a filled black "Deploy now" pill beside an outlined "Talk to sales" pill. Steal one filled button per row for the self-serve path and outline everything sales-led, so fill alone marks the default.

Seven customer logos (Meta, Blackbox.ai, DoorDash, OpenAI, SpaceX, The Weather Company, Polymarket) run along the bottom of the 900px fold on the same 24px side margins as the headline, with no "trusted by" label. Steal an unlabeled logo row pinned to the bottom of the first screen and spanning the full content width.

The composition is a single vertical opposition: black left third (hair and title) against red right two-thirds (hand and scissors). The scissors cross the boundary at the exact optical centre, creating the only transition between the two fields.

Exactly two hues plus black and white. The red is a single flat value used at full strength; the black is used both as solid field and as halftone illustration. No gradients, no tints, no secondary colours.

The subject straddles the seam: the figure sits half on the photograph and half on the flat colour field, so the boundary runs through the focal point instead of beside it. The masthead crosses the same seam. Steal this for split-panel heroes — put the subject on the join, not politely inside one side.

A drawn white window grid is laid flat over a photographic landscape, so hard vector line sits directly on continuous tone with no blending at all. Cheap to reproduce in CSS: a repeating-linear-gradient mullion grid over an image, no blend mode, full opacity.

Masthead is all-lowercase light geometric sans, reversed to white, and the date stacks under it at two sizes ragged-left on a shared left edge. A single line of micro-type sits alone in the top-right corner as counterweight to the photographic mass — the smallest element placed furthest from the heaviest.

One glyph is blown up to roughly 8× the alphabet's reading size and filled with a coarse grain, sitting immediately beside the same letterforms set plain. The identical shape appears twice — once as information, once as image. Steal the pairing, not the grain: a display-scale letterform with texture next to the same face at body scale, clean.

Composition is anchored in the upper two-thirds and the bottom third is left completely empty — not balanced, just abandoned. Caption text is tiny and bold, giving a display-to-caption ratio near 20:1 with nothing in between. Two type sizes, one enormous void.