Opening the vault…
Opening the vault…
Style sheet · 4 references
Enormous negative space, one focal point, slow confident type. The page breathes; nothing competes. Feels like a film title sequence, not a website.
The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.
# Vast-Quiet Cinematic — style sheet > Enormous negative space, one focal point, slow confident type. The page breathes; nothing competes. Feels like a film title sequence, not a website. Derived from 4 curated reference(s) in the `vast-quiet` 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 - ABC Diatype — 1/4 - Arcadia Display — 1/4 - PP Neue Montreal — 1/4 - Söhne — 1/4 - Söhne Mono — 1/4 - Suisse Int'l Mono — 1/4 - Times New Roman — 1/4 ## Color - `#e8ecee` light neutral — 4/4 - `#0b0d10` dark neutral — 3/4 - `#1d1d29` dark neutral — 2/4 - `#1c2b33` dark neutral — 2/4 - `#26221c` dark neutral — 1/4 - `#5366ea` chromatic — 1/4 - `#8b8bf4` chromatic — 1/4 - `#c9a96a` chromatic — 1/4 - `#7fd4c1` chromatic — 1/4 - `#fcfcfa` light neutral — 1/4 Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1): - `#0b0d10` / `#e8ecee` — 16.4:1 - `#1d1d29` / `#e8ecee` — 14:1 - `#1c2b33` / `#e8ecee` — 12.2:1 - `#26221c` / `#e8ecee` — 13.3:1 ## Moves ### grid/layout - Product floats in a sea of black with 60%+ vertical whitespace; specs appear one per viewport. Scarcity of information per screen = perceived value. — 2-opal-camera - [model 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. — 80-mercury-homepage-hero ### copywriting - 'A discovery engine for creatives' — category invention instead of comparison. No feature list above the fold. — 3-cosmos-landing - [model 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. — 80-mercury-homepage-hero ### typography - Type never exceeds 24px outside the hero — authority through smallness against vast space. — 2-opal-camera - Sans for UI, Times for the manifesto line — the serif interruption marks 'this part is belief, not feature'. — 3-cosmos-landing ### motion/interaction - Camera dolly through 3D ice responds to scroll velocity, not position — fast scrolls feel like skidding. Inertia as a material property. — 1-igloo-inc ### color - Entire palette is one hue family (glacial teal) plus near-black; the single mint accent reads as luminous because nothing else is saturated. — 1-igloo-inc ### component pattern - [model draft] The hero form is an email field and the indigo "Open account" button fused into one translucent pill, with a separate outlined "Launch demo" pill beside it; the nav repeats "Open account" in the same indigo. Steal the email-plus-submit capsule in the hero, which starts signup on the first screen, with the demo given its own outlined pill. — 80-mercury-homepage-hero ## References - 1-igloo-inc — Igloo Inc (exemplar) - 80-mercury-homepage-hero — Mercury — homepage hero - 2-opal-camera — Opal Camera - 3-cosmos-landing — Cosmos — landing
Product floats in a sea of black with 60%+ vertical whitespace; specs appear one per viewport. Scarcity of information per screen = perceived value.
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.
Mercury — homepage hero · model draft
'A discovery engine for creatives' — category invention instead of comparison. No feature list above the fold.
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.
Mercury — homepage hero · model draft
Type never exceeds 24px outside the hero — authority through smallness against vast space.
Sans for UI, Times for the manifesto line — the serif interruption marks 'this part is belief, not feature'.
Camera dolly through 3D ice responds to scroll velocity, not position — fast scrolls feel like skidding. Inertia as a material property.
Entire palette is one hue family (glacial teal) plus near-black; the single mint accent reads as luminous because nothing else is saturated.
The hero form is an email field and the indigo "Open account" button fused into one translucent pill, with a separate outlined "Launch demo" pill beside it; the nav repeats "Open account" in the same indigo. Steal the email-plus-submit capsule in the hero, which starts signup on the first screen, with the demo given its own outlined pill.
Mercury — homepage hero · model draft