Distribution Club · prototype v2
Twelve design directions
Each one is a full token set applied to the same shadcn components, so picking one is a copy into globals.css. All are flat: hairline borders, no drop shadows, translucent surfaces for anything that floats. Three carry a live shader gradient, three have none.
- 01QuietupdatedScandinavian, black ink on whiteflat · light
- 02BoneWarm editorial, serif displayflat · light
- 03PrismupdatedFlat white with one shader gradientgradient · light
- 04GraphiteDark, hairlines, warm gradient glowgradient · dark
- 05StudioupdatedGrey canvas, white surfaces, one bluegradient · light
- 06SageTinted neutrals, soft serif, botanical gradientgradient · light
- 07SlatenewQuiet's type on Studio's structure, monochromegradient · light
- 08HalonewPrism's type and gradient with Studio's bluegradient · light
- 09LinennewBone's palette with Plex Sans and a warm gradientgradient · light
- 10LedgernewLinen with chip-style buttons and outlinesgradient · light
- 11PressnewStudio with caps buttons at a small radiusgradient · light
- 12BeamnewQuiet's Geist, Prism's gradient, caps buttonsgradient · light
Quiet
updatedScandinavian, black ink on white
The most restrained option. No colour except for meaning. Hierarchy comes from four rungs of alpha black, hairline borders and spacing. Chips and overlines now in thin caps.
- Radius 6px
- Borders are alpha black, never grey hex
- No gradients anywhere
- Overlines and chips in thin caps
Geist
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Bone
Warm editorial, serif display
Warm off-white canvas, charcoal text and one serif for headlines. Kept as the palette reference; the serif is replaced in Linen below.
- Radius 8px
- Cards are white on bone, 1px line
- Pastel tags carry status
- See 09 Linen for the same palette with a sans
Instrument Serif / Geist
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Prism
updatedFlat white with one shader gradient
Everything is flat and black-on-white except a single live gradient in the hero and behind translucent layers. Progress bars are now solid, and glass panels carry a visible outline.
- Radius 12px
- Gradient is live WebGL, slow drift
- Glass has a 1px outline
- Primary button stays black
Manrope
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero background and behind glass layers only. Never on components.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Graphite
Dark, hairlines, warm gradient glow
Near-black canvas with white-alpha hairlines and a warm gradient. Kept for reference only.
- Radius 10px
- Hover fills at 9%, pressed at 14%
- Focus ring 2px minimum
Schibsted Grotesk
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero only, mixed down with black.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Studio
updatedGrey canvas, white surfaces, one blue
A tool-like system. Cool grey canvas makes white cards read as surfaces without shadows. One saturated blue. Now: pill radius on every button, roomier chips, a thicker progress bar and dividers that run edge to edge.
- Radius 14px, pill buttons everywhere
- Thin caps for overlines, chips and small buttons
- Progress bar 10px
- Full-width dividers
IBM Plex Sans
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Only inside orbs, avatars and the empty-state illustration. Never as a background.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Sage
Tinted neutrals, soft serif, botanical gradient
A cool green tint through the whole neutral ramp and a soft serif. Kept for reference only.
- Radius 4px, crisp
- Serif display with optical sizing
Fraunces / DM Sans
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero only, at low contrast.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Slate
newQuiet's type on Studio's structure, monochrome
Geist typography from Quiet, the grey canvas, white surfaces, pill buttons and structure from Studio, but black where Studio is blue. A silver gradient lives only in orbs and avatars.
- Radius 12px, pill buttons
- Caps labels, weight 400
- No chroma at all
- Progress bar 10px, full-width dividers
Geist
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Monochrome. Only inside orbs and avatars.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Halo
newPrism's type and gradient with Studio's blue
Manrope and the azure-violet-mint gradient from Prism, Studio's blue as the single component colour, glass panels with a proper outline. Gradient only in the hero.
- Radius 12px
- Blue primary, black text
- Glass with 1px outline
- Solid progress, no gradient on components
Manrope
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero and behind glass only. Components stay flat blue and black.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Linen
newBone's palette with Plex Sans and a warm gradient
The bone, charcoal and warm-line palette you liked, set in IBM Plex Sans instead of the serif. A pale peach-lilac gradient sits in the hero only, mixed down into bone.
- Radius 8px
- Bone canvas, white cards, warm 1px line
- Caps labels, weight 400
- Charcoal primary
IBM Plex Sans
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero only, at 85% over bone. Reads as warmth, not colour.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Ledger
newLinen with chip-style buttons and outlines
Linen's bone palette and Plex Sans, with every button set like its chips: thin tracked caps at 11px, on a 6px radius instead of a pill. Ghost actions become outlines. Caps tracking widened to 0.14em, headings loosened to -0.01em.
- Buttons: caps, 11px, 0.14em, radius 6px
- Outline instead of ghost
- Three text styles only: body 400, display 500, caps 400
- Headings at -0.01em
IBM Plex Sans
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero only, at 85% over bone.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Press
newStudio with caps buttons at a small radius
Studio's grey canvas, white surfaces and blue, but buttons drop the pill for a 6px radius and take the chip typography. Outlines replace ghosts. Chips stay pills so the two read as different things.
- Buttons: caps, 11px, 0.12em, radius 6px
- Chips remain pills
- Outline instead of ghost
- Full-width dividers, 10px progress
IBM Plex Sans
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Only inside orbs and avatars.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.
Beam
newQuiet's Geist, Prism's gradient, caps buttons
White canvas and black ink from Quiet, Geist throughout at a steady weight, Prism's gradient behind glass in the hero. Buttons and chips share the thin caps treatment, buttons at 6px, chips as pills. Outlines for tertiary actions.
- Buttons: caps, 11px, 0.12em, radius 6px
- Geist only, weights 400 and 500
- Outline instead of ghost
- Black primary, gradient stays in the hero
Geist
Pay for views that
actually happened.
Creators post about your product. You pay per thousand views, after a 48 hour check, at a rate you set. Nothing up front, nothing for posts that go nowhere.
Hero and behind glass only.
Buttons, input, switch, chips, tabs, card, list, popover.
Live posts keep counting. No new gigs go out until you resume.