GenC Coffee Club
SG1 with the bones bevel shadow system applied throughout. Every white card surface uses the 5-layer stack.
5-layer stack: hard offset (0 blur) + soft diffuse + outer white edge catch + inset top rim + inset bottom depth. All four levels use the same stack — only the hard offset value changes.
Stack anatomy
Card Title
Almost flat. Barely-there lift — works on dense layouts.
1px 1px 0px rgba(13,15,13,.04),
1px 3px 10px rgba(13,15,13,.05),
-1px -1px 0 rgba(255,255,255,.8),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1.5px 5px rgba(13,15,13,.03)Card Title
Default for GenC light surface. Present but not pushy.
2px 3px 0px rgba(13,15,13,.06),
3px 6px 16px rgba(13,15,13,.07),
-1px -1px 0 rgba(255,255,255,.9),
inset 0 1.5px 0 rgba(255,255,255,1),
inset 0 -2px 6px rgba(13,15,13,.04)Card Title
Hero cards, feature tiles. More pop without going extreme.
3px 4px 0px rgba(13,15,13,.07),
4px 8px 20px rgba(13,15,13,.08),
-1px -1px 0 rgba(255,255,255,.92),
inset 0 1.5px 0 rgba(255,255,255,1),
inset 0 -2.5px 7px rgba(13,15,13,.045)Card Title
Original A5 setting. Now considered too heavy for light bg.
4px 6px 0px rgba(13,15,13,.08),
6px 10px 24px rgba(13,15,13,.09),
-1px -1px 0 rgba(255,255,255,.95),
inset 0 1.5px 0 rgba(255,255,255,1),
inset 0 -3px 8px rgba(13,15,13,.05)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
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
✓ 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
Locked design moves. Reference these keys in conversation — e.g. “apply LIT1 to the new widget”.
Coral → Orange CTA Gradient
All orange action buttons use var(--cta-gradient). Never flat orange on a button. Adds depth + warmth.
background: var(--cta-gradient); border-color: var(--coral); box-shadow: var(--cta-shadow);
Navy Gradient Surfaces
Dark panels use navy gradient, not flat ink. Apply to: card left panels, banners, step 2 onboarding tiles.
background: linear-gradient(135deg, var(--navy), var(--navy-mid));
Midnight Purple — Alternate Dark
Secondary dark surface for widgets, badges, bag variants. Deep purple gradient.
background: linear-gradient(135deg, #1a0a2e, #2d1457); accent: #9b5de5;
MVF — Minimum Viable Font
No label text below 12px. Opacity floors: dark bg → .62 min; light bg → .55 min.
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.
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. Opacity ~0.035.
::before { background-image: url('data:image/svg+xml,...fractalNoise...'); opacity: .035; }