Opening the vault…
Opening the vault…
Style sheet · 7 references
Near-black fields, hairline gradients, one metallic or electric accent, understated serif. Whispers expensive; the restraint is the flex.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Dark Premium — style sheet > Near-black fields, hairline gradients, one metallic or electric accent, understated serif. Whispers expensive; the restraint is the flex. Derived from 7 curated reference(s) in the `dark-premium` 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 - Inter — 2/7 - Berkeley Mono — 1/7 - Domaine — 1/7 - GT Walsheim — 1/7 - Inter Display — 1/7 - Inter Variable — 1/7 - JetBrains Mono — 1/7 - Söhne — 1/7 - Tiempos Headline — 1/7 ## Color - `#08090a` dark neutral — 7/7 - `#f7f8f8` light neutral — 6/7 - `#e5e5e5` light neutral — 3/7 - `#1c1c22` dark neutral — 2/7 - `#5e6ad2` chromatic — 2/7 - `#000f26` dark neutral — 1/7 - `#26283b` dark neutral — 1/7 - `#d92336` chromatic — 1/7 - `#1793d7` chromatic — 1/7 - `#ff6363` chromatic — 1/7 Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1): - `#08090a` / `#f7f8f8` — 18.7:1 - `#08090a` / `#e5e5e5` — 15.8:1 - `#1c1c22` / `#f7f8f8` — 15.9:1 - `#08090a` / `#ff6363` — 6.8:1 ## Moves ### component pattern - Pricing table where the free tier is visually equal to paid — confidence signaling that converts better than dark-patterning. — 17-raycast - [model draft] The product shot shows the agent before the result exists: an empty canvas labeled "Desktop 1200" outlined in glowing blue, and a side panel with the prompt "Create a sleek black homepage for an AI well-being research lab called Bloom.", a step "Created a design plan 6s", "Thought 4s" and "Building navigation...". Steal a hero shot captured mid-process, with the step log and timings visible. — 87-framer-homepage-hero - [model 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. — 81-linear-pricing - [model 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. — 78-resend-homepage-hero - [model 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. — 77-raycast-homepage-hero ### grid/layout - Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode. — 16-linear - [model draft] The CTA pair, a white "Get started for free" and a dark grey "Download app" with a download arrow, sits left-aligned under the headline while "New: Skills →" sits at the right end of the same row. Steal a CTA row that carries the release link at its far end, so one line serves both conversion and news. — 87-framer-homepage-hero - [model draft] Four plans (Free, Basic, Business, Enterprise) are columns divided by vertical hairlines with no card fills, each repeating the same rows: name, price, rule, billing line, rule, feature list. The buttons share one baseline at the bottom although the lists run 5, 5, 9 and 9 items. Steal a pricing table built from rules and aligned rows instead of four boxed cards, with buttons aligned across columns regardless of list length. — 81-linear-pricing - [model 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. — 77-raycast-homepage-hero ### color - Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint. — 16-linear - [model draft] The page is black and white except for the canvas outline in the product frame (#1793d7), the only saturated color on the first screen. Steal a monochrome page whose one color lives inside the product shot. — 87-framer-homepage-hero - [model 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. — 81-linear-pricing ### texture/material - Subtle noise grain over every gradient stops the banding AND adds materiality at 2% opacity. — 17-raycast - [model 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. — 78-resend-homepage-hero - [model draft] The background is a set of parallel 45-degree light streaks, red at the core and fading through blue-black into the #07080a ground, with visible grain along their soft edges; the white centered headline sits directly on the brightest band. Steal one diagonal, grainy light field as the hero image for a product without a screenshot to lead with. — 77-raycast-homepage-hero ### typography - Tiempos Headline / Söhne pairing: old-money serif for claims, neutral grotesque for evidence. Finance gravitas without cliché. — 18-endex - [model draft] The headline "Email for developers" is a high-contrast serif at roughly 96px with a white-to-grey gradient fill, while the subhead, buttons and nav are a plain sans at about 17px. Steal a serif display line on a developer-tool page, one face for the claim and a neutral sans for everything else. — 78-resend-homepage-hero ### motion/interaction - Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch. — 16-linear ### copywriting - Six words on the entire first viewport. Institutional confidence = information withheld. — 18-endex ## References - 16-linear — Linear (exemplar) - 87-framer-homepage-hero — Framer — homepage hero - 81-linear-pricing — Linear — pricing - 78-resend-homepage-hero — Resend — homepage hero - 77-raycast-homepage-hero — Raycast — homepage hero - 17-raycast — Raycast - 18-endex — Endex
Pricing table where the free tier is visually equal to paid — confidence signaling that converts better than dark-patterning.
The product shot shows the agent before the result exists: an empty canvas labeled "Desktop 1200" outlined in glowing blue, and a side panel with the prompt "Create a sleek black homepage for an AI well-being research lab called Bloom.", a step "Created a design plan 6s", "Thought 4s" and "Building navigation...". Steal a hero shot captured mid-process, with the step log and timings visible.
Framer — homepage hero · model 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.
Linear — pricing · model 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.
Resend — homepage hero · model 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.
Raycast — homepage hero · model draft
Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode.
The CTA pair, a white "Get started for free" and a dark grey "Download app" with a download arrow, sits left-aligned under the headline while "New: Skills →" sits at the right end of the same row. Steal a CTA row that carries the release link at its far end, so one line serves both conversion and news.
Framer — homepage hero · model draft
Four plans (Free, Basic, Business, Enterprise) are columns divided by vertical hairlines with no card fills, each repeating the same rows: name, price, rule, billing line, rule, feature list. The buttons share one baseline at the bottom although the lists run 5, 5, 9 and 9 items. Steal a pricing table built from rules and aligned rows instead of four boxed cards, with buttons aligned across columns regardless of list length.
Linear — pricing · model 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.
Raycast — homepage hero · model draft
Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint.
The page is black and white except for the canvas outline in the product frame (#1793d7), the only saturated color on the first screen. Steal a monochrome page whose one color lives inside the product shot.
Framer — homepage hero · model 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.
Linear — pricing · model draft
Subtle noise grain over every gradient stops the banding AND adds materiality at 2% opacity.
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.
Resend — homepage hero · model draft
The background is a set of parallel 45-degree light streaks, red at the core and fading through blue-black into the #07080a ground, with visible grain along their soft edges; the white centered headline sits directly on the brightest band. Steal one diagonal, grainy light field as the hero image for a product without a screenshot to lead with.
Raycast — homepage hero · model draft
Tiempos Headline / Söhne pairing: old-money serif for claims, neutral grotesque for evidence. Finance gravitas without cliché.
The headline "Email for developers" is a high-contrast serif at roughly 96px with a white-to-grey gradient fill, while the subhead, buttons and nav are a plain sans at about 17px. Steal a serif display line on a developer-tool page, one face for the claim and a neutral sans for everything else.
Resend — homepage hero · model draft
Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.
Six words on the entire first viewport. Institutional confidence = information withheld.