Steal this vault

Steal · component patternmodel draft

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.

Steal · copywritingmodel draft

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.

Steal · colormodel draft

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.

Steal · component patternmodel draft

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.

Steal · component patternmodel draft

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.

Steal · component patternmodel draft

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.

Steal · component patternmodel draft

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.

Steal · typographymodel draft

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.

Steal · component patternmodel draft

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.

Steal · colormodel draft

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.

Steal · component patternmodel draft

There is no global monthly/yearly switch: a "Billed yearly" toggle appears only in the Basic and Business columns, while the same row reads "Free for everyone" under Free and "Annual billing only" under Enterprise. Steal the per-plan billing row, which places a toggle only where it changes a price and uses the slot to state terms everywhere else.

Steal · colormodel draft

The recommended plan has no badge: Business is the only column with a light-filled "Get started" (plus a dark "Contact sales"), while every other button is a dark pill on the #08090b ground. Steal one inverted button as the plan recommendation instead of a "Most popular" ribbon.

Steal · grid/layoutmodel draft

Text fills only the top 40% of the frame (headline, two-line subhead, form) over a full-bleed photograph of a desk and office chair on a grassy ridge above a misty valley, with the laptop on the same vertical center line as the headline. Steal a full-bleed scene whose subject sits on the axis of the centered text, leaving the lower half to the image.

Steal · copywritingmodel draft

The subhead's word "banking" carries a superscript footnote marker, and a dark rounded bar docked at the bottom of the fold states "Mercury is a fintech company, not an FDIC-insured bank" in small bold type. Steal a footnoted claim with its disclaimer in a bar at the bottom of the first screen, so the required text is visible without crowding the headline.

Steal · component patternmodel draft

Signup sits in a card beside the headline: "Set up [logo] for free", three checkmarked lines ("97% of users pay us $0", "No credit card required", "Setup wizard installs PostHog for you"), then an orange "Get started" and an outlined "Install with AI", both with a thick bottom edge like a pressed key. Steal a hero signup card that answers the price objection as a checklist directly above the buttons.

Steal · typographymodel draft

Copy is marked up like a read document: "context layer" in the headline sits on a pale blue highlight, "analytics, errors, replays, and business data" carries a yellow highlighter swipe, and "agents" is underlined. Steal highlighter marks on the two or three phrases a skimmer must catch, applied inside the sentence instead of pulling them out into bullets.

Steal · component patternmodel draft

The hero stacks four left-aligned items: a pill link "Join us at Resend Forward >" with a thin multicolor border, the two-line headline, a two-line subhead, then "Get started" as a bordered dark button beside "Documentation" as bare text with no box. Steal the CTA pair whose secondary is plain text, so the docs link is offered without competing as a second button.

Steal · texture/materialmodel draft

The right half holds a single 3D cube of near-black facets in mixed finishes (matte, perforated, speckled), lit from above, with one pale light band sweeping diagonally across the lower third of the black ground. Steal one monochrome rendered object as the hero image, giving depth without adding a color.

Steal · component patternmodel draft

Both download buttons carry the Windows logo, the hero one reads "Download for Windows", and under it two lines of small monospace text give "Windows 10+ (x64 or ARM64)" and "Install via WinGet". Steal a platform-named download button with the system requirement and the package-manager alternative set in mono directly beneath it.

Steal · grid/layoutmodel draft

The nav is a rounded, hairline-bordered capsule inset about 118px from each edge of the 1440px viewport, holding nine text links between the logo and a white "Download" button, with "Log in" as plain text. Steal a contained nav bar narrower than the viewport, which keeps a long link list reading as one object over a full-bleed background.

Steal · component patternmodel draft

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.

Steal · grid/layoutmodel draft

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.

Steal · component patternmodel draft

Each card's art is a working-looking UI at small scale: a terminal reading "Pay Roastery $5.46" over an itemized receipt, a checkout with Link and Apple Pay above five payment methods, and a "Pro Plan" usage meter over a 30-day bar chart of 2,010,569,010 tokens. Steal feature cards illustrated with mockups carrying plausible line items and totals instead of icons.

Steal · colormodel draft

An orange-to-violet gradient bleeds behind the mockups while the mockups stay white with near-black text; the one solid saturated control is the indigo expand button on the first card. Steal gradient as a backdrop layer behind white UI, and keep the solid accent for the single control in focus.

Steal · typographyNotes by Will

Type never exceeds 24px outside the hero — authority through smallness against vast space.

Steal · copywritingNotes by Will

'A discovery engine for creatives' — category invention instead of comparison. No feature list above the fold.

Steal · texture/materialNotes by Will

Matte anodized dark aluminum surface ground (#171615) paired with a high-voltage safety orange indicator (#f35b25).

Steal · motion/interactionNotes by Will

Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.

Steal · grid/layoutNotes by Will

Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode.

Steal · texture/materialNotes by Will

Subtle noise grain over every gradient stops the banding AND adds materiality at 2% opacity.

Steal · copywritingNotes by Will

Six words on the entire first viewport. Institutional confidence = information withheld.

Steal · motion/interactionNotes by Will

Speaker cards squash-and-stretch on hover with spring physics (mass 1, tension 280) — cartoon rules applied to UI.

Steal · component patternNotes by Will

Ghost mascot reacts to scroll position and form errors — mascot as system feedback, not decoration.