Opening the vault…
Opening the vault…
Style sheet · 12 references
Objective grids, Akzidenz/Helvetica descendants, red-black-white restraint. Hierarchy carried entirely by scale, weight, and placement — never decoration.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Swiss / International — style sheet
> Objective grids, Akzidenz/Helvetica descendants, red-black-white restraint. Hierarchy carried entirely by scale, weight, and placement — never decoration.
Derived from 12 curated reference(s) in the `swiss` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.
## Type
- Akzidenz-Grotesk — 1/12
- Cal Sans — 1/12
- Euclid Flex — 1/12
- Geist — 1/12
- geometric sans, lowercase — 1/12
- GT America — 1/12
- Inter — 1/12
- NotionInter — 1/12
- SangBleu — 1/12
- Suisse — 1/12
## Color
- `#141414` dark neutral — 8/12
- `#ffffff` light neutral — 7/12
- `#ece8df` light neutral — 4/12
- `#242424` dark neutral — 2/12
- `#e8442a` chromatic — 2/12
- `#000000` dark neutral — 1/12
- `#0a0f1b` dark neutral — 1/12
- `#444444` mid neutral — 1/12
- `#585756` mid neutral — 1/12
- `#5750eb` chromatic — 1/12
Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#141414` / `#ffffff` — 18.4:1
- `#141414` / `#ece8df` — 15.1:1
- `#141414` / `#e8442a` — 4.6:1
- `#242424` / `#ffffff` — 15.5:1
## Moves
### grid/layout
- Müller-Brockmann concert posters: type set on a strict grid, then ONE element breaks it diagonally. The violation only works because the grid is absolute. — 9-museum-f-r-gestaltung-poster-archive
- Baseline-locked two-column layout where every image top-aligns to a text cap-height. Invisible rigor you feel, not see. — 7-gt-america-specimen
- [model draft] The hero splits into two columns: the two-line headline and CTA pair on the left, and a three-line plain description ("Start your project with a Postgres database. Add Authentication, Data APIs, Edge Functions...") on the right, top-aligned to the headline. Steal the description moved into a right column, which keeps the left column to claim and buttons. — 85-supabase-homepage-hero
- [model draft] The four plans are grouped into two panels with their own headlines: a white bordered panel "Essentials for staying organized." holding Free and Plus, and a pale blue panel "The AI workspace for work that matters." with an illustration, holding Business and Enterprise. Steal plans grouped in pairs under a sentence naming who each pair is for, so comparison happens within a group before across it. — 82-notion-pricing
- [model draft] The hero is three columns on one band: a two-line headline with the CTA pair at the left edge, a solid black triangle at the center, and three short stacked lines ("For coding agents / To ship apps and agents / Automated by agents") at the right. Steal a three-part hero where the brand mark is the center image and the supporting copy becomes a right-hand list instead of a paragraph under the headline. — 76-vercel-homepage-hero
- [model 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. — 76-vercel-homepage-hero
- [model draft] 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. — 73-civilisovan-ena
- [model draft] 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. — 28-die-neue-linie-cover-september-1929
- [model draft] 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. — 27-herbert-bayer-universal-alphabet-proof-sheet
### component pattern
- [model draft] The hero image is the product: a "Create your account" form with "Continue with Google" tagged "Last used", "Continue with GitHub", an "or" divider, and an email field caught mid-typing ("chris.walker@exam") under a cursor, with faded sign-in panels on either side. Steal the embeddable component as the hero shot, frozen mid-interaction, for a product whose output is UI. — 86-clerk-homepage-hero
- [model 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. — 86-clerk-homepage-hero
- [model 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. — 85-supabase-homepage-hero
- [model 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. — 84-plausible-analytics-homepage-hero
- [model 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. — 84-plausible-analytics-homepage-hero
- [model 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. — 83-cal-com-pricing
- [model 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. — 82-notion-pricing
- [model 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. — 76-vercel-homepage-hero
### color
- Pure #000 on pure #FFF with a single fire-red. No grays anywhere; the absence of mid-tones is the brand. — 8-swiss-typefaces
- [model 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. — 85-supabase-homepage-hero
- [model draft] The headline is two-tone: "Easy to use and privacy-friendly" in near-black and "Google Analytics alternative" in the indigo #584df6, so the category the product replaces is the colored half. Steal a headline that sets the competitor-category phrase in the accent color, making the positioning readable from color alone. — 84-plausible-analytics-homepage-hero
- [model draft] The recommended plan is the Organizations card inverted to a #242424 fill with white text and a white "Try for free" button, while the other three cards are white with dark buttons. Steal the inverted card as the recommendation signal; it needs no badge. — 83-cal-com-pricing
- [model 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. — 82-notion-pricing
- [model draft] 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. — 73-civilisovan-ena
- [model draft] Exactly one saturated colour — a vermillion field holding the right ~28% as a full-bleed column — against an otherwise fully greyscale photograph. One hue, one large flat area, zero elsewhere. The discipline is what makes the orange read as loud; a second colour anywhere would halve it. — 28-die-neue-linie-cover-september-1929
### typography
- Specimen shows the same sentence across 6 widths × 7 weights in a matrix — the family as a system, not a menu. — 7-gt-america-specimen
- [model 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. — 83-cal-com-pricing
- [model draft] The title is split across the vertical black/red boundary: CIVILIS (white on black) and OVANÁ ŽENA (white on red) use the same bold grotesque, but the second half is letter-spaced more widely so the two halves read as equal tone despite the different backgrounds. — 73-civilisovan-ena
- [model draft] 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. — 28-die-neue-linie-cover-september-1929
- [model draft] **Delete the capitals entirely.** The whole alphabet is single-case — there is no uppercase to fall back on, so hierarchy has to be carried by size, weight and position alone. Try it as a hard constraint: `text-transform: lowercase` on every heading, then make the page work anyway. What survives is real hierarchy rather than shouting. — 27-herbert-bayer-universal-alphabet-proof-sheet
### texture/material
- [model draft] 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. — 28-die-neue-linie-cover-september-1929
- [model draft] 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. — 27-herbert-bayer-universal-alphabet-proof-sheet
### copywriting
- [model 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. — 86-clerk-homepage-hero
### motion/interaction
- Hover on a typeface name swaps the entire viewport background to that face's specimen — navigation IS the demo. — 8-swiss-typefaces
## References
- 9-museum-f-r-gestaltung-poster-archive — Museum für Gestaltung poster archive (exemplar)
- 86-clerk-homepage-hero — Clerk — homepage hero
- 85-supabase-homepage-hero — Supabase — homepage hero
- 84-plausible-analytics-homepage-hero — Plausible Analytics — homepage hero
- 83-cal-com-pricing — Cal.com — pricing
- 82-notion-pricing — Notion — pricing
- 76-vercel-homepage-hero — Vercel — homepage hero
- 73-civilisovan-ena — Civilisovaná žena
- 28-die-neue-linie-cover-september-1929 — die neue linie — cover, September 1929
- 27-herbert-bayer-universal-alphabet-proof-sheet — Herbert Bayer — Universal alphabet, proof sheet
- 7-gt-america-specimen — GT America specimen
- 8-swiss-typefaces — Swiss TypefacesMüller-Brockmann concert posters: type set on a strict grid, then ONE element breaks it diagonally. The violation only works because the grid is absolute.
Baseline-locked two-column layout where every image top-aligns to a text cap-height. Invisible rigor you feel, not see.
The hero splits into two columns: the two-line headline and CTA pair on the left, and a three-line plain description ("Start your project with a Postgres database. Add Authentication, Data APIs, Edge Functions...") on the right, top-aligned to the headline. Steal the description moved into a right column, which keeps the left column to claim and buttons.
Supabase — homepage hero · model draft
The four plans are grouped into two panels with their own headlines: a white bordered panel "Essentials for staying organized." holding Free and Plus, and a pale blue panel "The AI workspace for work that matters." with an illustration, holding Business and Enterprise. Steal plans grouped in pairs under a sentence naming who each pair is for, so comparison happens within a group before across it.
Notion — pricing · model draft
The hero is three columns on one band: a two-line headline with the CTA pair at the left edge, a solid black triangle at the center, and three short stacked lines ("For coding agents / To ship apps and agents / Automated by agents") at the right. Steal a three-part hero where the brand mark is the center image and the supporting copy becomes a right-hand list instead of a paragraph under the headline.
Vercel — homepage hero · model 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.
Vercel — homepage hero · model draft
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.
Civilisovaná žena · model draft
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.
die neue linie — cover, September 1929 · model draft
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.
Herbert Bayer — Universal alphabet, proof sheet · model draft
The hero image is the product: a "Create your account" form with "Continue with Google" tagged "Last used", "Continue with GitHub", an "or" divider, and an email field caught mid-typing ("chris.walker@exam") under a cursor, with faded sign-in panels on either side. Steal the embeddable component as the hero shot, frozen mid-interaction, for a product whose output is UI.
Clerk — homepage hero · model 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.
Clerk — homepage hero · model 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.
Supabase — homepage hero · model 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.
Plausible Analytics — homepage hero · model 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.
Plausible Analytics — homepage hero · model 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.
Cal.com — pricing · model 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.
Notion — pricing · model 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.
Vercel — homepage hero · model draft
Pure #000 on pure #FFF with a single fire-red. No grays anywhere; the absence of mid-tones is the brand.
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.
Supabase — homepage hero · model draft
The headline is two-tone: "Easy to use and privacy-friendly" in near-black and "Google Analytics alternative" in the indigo #584df6, so the category the product replaces is the colored half. Steal a headline that sets the competitor-category phrase in the accent color, making the positioning readable from color alone.
Plausible Analytics — homepage hero · model draft
The recommended plan is the Organizations card inverted to a #242424 fill with white text and a white "Try for free" button, while the other three cards are white with dark buttons. Steal the inverted card as the recommendation signal; it needs no badge.
Cal.com — pricing · model 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.
Notion — pricing · model draft
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.
Civilisovaná žena · model draft
Exactly one saturated colour — a vermillion field holding the right ~28% as a full-bleed column — against an otherwise fully greyscale photograph. One hue, one large flat area, zero elsewhere. The discipline is what makes the orange read as loud; a second colour anywhere would halve it.
die neue linie — cover, September 1929 · model draft
Specimen shows the same sentence across 6 widths × 7 weights in a matrix — the family as a system, not a menu.
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.
Cal.com — pricing · model draft
The title is split across the vertical black/red boundary: CIVILIS (white on black) and OVANÁ ŽENA (white on red) use the same bold grotesque, but the second half is letter-spaced more widely so the two halves read as equal tone despite the different backgrounds.
Civilisovaná žena · model draft
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.
die neue linie — cover, September 1929 · model draft
**Delete the capitals entirely.** The whole alphabet is single-case — there is no uppercase to fall back on, so hierarchy has to be carried by size, weight and position alone. Try it as a hard constraint: `text-transform: lowercase` on every heading, then make the page work anyway. What survives is real hierarchy rather than shouting.
Herbert Bayer — Universal alphabet, proof sheet · model draft
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.
die neue linie — cover, September 1929 · model draft
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.
Herbert Bayer — Universal alphabet, proof sheet · model 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.
Clerk — homepage hero · model draft
Hover on a typeface name swaps the entire viewport background to that face's specimen — navigation IS the demo.