GenC Coffee Club
All tokens, type scales, and components in one place. Reference before building anything new.
Urbanist — Display / Headlines
THE $10 COFFEE BAG.
Become a Founding Member
Your daily coffee funds kids. No fine print.
Bebas Neue — CTAs / Buttons
LOCK YOUR FOUNDER SPOT: $1
BECOME A FOUNDER TODAY
SHIPS MAY 15 · 200 SPOTS ONLY
DM Sans — Body / UI
Every bag sends $10 directly to Bloom Arts Foundation — helping creative kids thrive. No rounding. No percentages. No fine print.
Eyebrow label · 14px · 600 · slate
SECTION TAG · 12PX · 700 · CORAL
Primary CTAs
Nav + Secondary
Pills / Tags
$1 today gets you in. Pick your roast, your grind, and how often you want coffee.
$1 to StartCommitted to kids' creativity — and counting.
Text Input
Email Input
Focused State (coral border)
Navy — primary
Vega Ifsothen
4
Month Streak
20
Fuel Points
0
Free Bags
20 pts · boost a free bag by up to $20
White / clean
Vega Ifsothen
4
Month Streak
20
Fuel Points
0
Free Bags
20 pts · boost a free bag by up to $20
Near-black
Vega Ifsothen
4
Month Streak
20
Fuel Points
0
Free Bags
20 pts · boost a free bag by up to $20
Midnight Purple
Vega Ifsothen
4
Month Streak
20
Fuel Points
0
Free Bags
20 pts · boost a free bag by up to $20
Shareable membership card — 4 surface variants. Screenshot/social share via A5 Profile.
Near-black
Vega Ifsothen
6 more months to free bag
Navy
Vega Ifsothen
6 more months to free bag
White / clean
Vega Ifsothen
6 more months to free bag
Midnight Purple
Vega Ifsothen
6 more months to free bag
Public permalink at /profile/[founderNumber] — shows badge, streak widget, share buttons, and PNG download.
Vega Ifsothen
Founder #7 · Member since March 2026
Status: Pending — build tracked in DevIndex
All standard components rendered on navy. Reference before building any dark panel.
Coffee Club · Navy Surface
$10. Every Bag.
Every Quarter.
Your subscription sends $10 directly to Bloom Arts Foundation — helping creative kids thrive.
124
Founders in
$1,240
Locked
76
Spots Left
Static representations of animated elements. These set the tone for the "live" energy of the product.
Live Indicator
Pulse ring on green dot. Updates in real-time via Supabase Realtime.
Spot Counter Bar
Animates on mount with CSS transition: width 0.6s ease.
Step Indicator
FounderCard step 1 → 2. Active step uses coral/orange fill.
Success Toast
You're Founder #7!
Spot locked. Confirmation on the way.
Post-checkout success state. Slides in from top.
3-step visual narrative. These tiles represent the emotional arc of signup — urgency → commitment → celebration.
Step 1 — Claim
200 spots.
124 gone.
your@email.com
Step 2 — Lock In
Lock it in
for $1.
Choose your roast. Add fuel if you want. Pay $1 to hold your spot until May 15.
Step 3 — Welcome
#7
You're in.
Coffee ships May 15. Badge unlocked. Share your spot.
✓ Confirmed — use these
Cream / Ink
Body text, all sections
Cream / Coral
Headlines, eyebrows
Cream / Orange
CTA buttons on light
Navy / Cream
A3 card, founder cards
Navy / Orange
Card stats + accents
Coral / Cream
CTA gradient start
⚠ Avoid — reads off
Mid-Grey / Orange
Old charcoal — brownish on orange
Mid-Grey / Coral
Old charcoal — too muddy
→ Explore — candidates to promote
Ink / Cream
Solid for dark sections
Ink / Sky
Cool + airy on near-black
Ink / Orange
Now works — ink is true black
Ink / Coral
Now works — no brown cast
Orange / White
High contrast — CTAs
Cream / Navy
Links, secondary heads
Locked design moves. Reference these keys (LIT1, LIT2…) in conversation to shorthand a direction — e.g. “apply LIT1 to the new widget”.
Coral → Orange CTA Gradient
All orange action buttons use var(--cta-gradient): linear-gradient(135deg, coral → orange). Never flat orange on a button. Adds depth + warmth. Apply to: CTAs, active pills, selected states, banner buttons.
background: var(--cta-gradient); border-color: var(--coral); box-shadow: var(--cta-shadow);
Navy Gradient Surfaces
Dark panels use navy gradient, not flat ink. Feels premium and distinct from the near-black widgets. Apply to: card left panels, banners, step 2 onboarding tiles, any "dark feature" section.
background: linear-gradient(135deg, var(--navy), var(--navy-mid));
Midnight Purple — Alternate Dark
Secondary dark surface for widgets, badges, bag variants. Deep purple gradient (not blue-purple). Use when you want drama without going navy. Pairs with #9b5de5 accent.
background: linear-gradient(135deg, #1a0a2e, #2d1457); accent: #9b5de5;
MVF — Minimum Viable Font
No label, lbl, hint, or sub text goes below 12px. Opacity floors: dark bg → .62 min; light bg → .55 min. Stat values min 22px. Name/title text min 14px. No exceptions — readability first.
font-size: min 12px labels, 14px names, 22px stat values. opacity: min .62 dark / .55 light
Double Border on White Surfaces
White cards/badges get an orange ring + dark ink outer ring for edge definition on cream backgrounds. 2px orange then 4.5px ink. Avoids the "floating white box" problem.
box-shadow: 0 0 0 2px var(--orange), 0 0 0 4.5px var(--ink), 0 32px 80px rgba(0,0,0,.12);
Grain Texture on Dark Cards
Dark surface widgets/badges use a subtle SVG noise overlay via ::before pseudo-element. Adds tactile feel without visual noise. Opacity ~0.035–0.04.
::before { background-image: url('data:image/svg+xml,...fractalNoise...'); opacity: .035; }