GenC Coffee Club
All tokens, type scales, and components in one place. Reference before building anything new.
Testing · New deployments
DC17 v2 Teacher Portal (2026-05-16)ACTIVE
Teacher Portal — Classic (quasi-archived)REF
Recruitment Lineage
★ LIVE · Teacher portal
★ LIVE · Teacher portal
Dark · Reference
Dark
Light
Light
Light
Light
Full-page profile
Timeline feed
Grid layout
Blueprint layout
Story drops · full
Story drops · compact
Teacher portal concept
Teacher portal concept
Broadcast UI concept
Engagement concept
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
Post-login member portal shell options. Each shows the same 8 nav items (Home, Badge, Rewards, Subscription, Impact, Team, Notifications, Account) in a different spatial arrangement. Mockups at ~65% scale.
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; }
Named motion tokens and easing curves used across the product. Reference by name in conversation — e.g. “use anim-slam for the number reveal.”
Motion Tokens
Named Animations — Shorthand Reference
anim-float5s ease-in-out infinite
0%,100% translateY(0) rotate(-1.5deg) → 50% translateY(-18px) rotate(1deg)
Bag image on hero + FounderCard left panel
anim-pulse2s ease-in-out infinite
0%,100% scale(1) opacity(1) → 50% scale(1.4) opacity(.5)
Live-indicator dot, bfb-dot, progress ping
anim-slam320ms spring
from scale(1.25) opacity(0) → to scale(1) opacity(1)
Step 2 founder number reveal (#47)
anim-tick22s linear infinite
to translateX(-50%)
Ticker strip horizontal scroll
anim-fade4s ease-in-out infinite
0%,100% opacity(1) → 50% opacity(.35)
Bag image cross-fade on switch
anim-bb-float4.2–5.1s ease-in-out infinite
0%,100% translateY(0) → 50% translateY(-8 to -10px)
Floating stat badges around hero bag
anim-reveal600ms ease
opacity(0) + translateY(20px) → opacity(1) + translateY(0)
Scroll-triggered section entrance
anim-shine2.4s ease infinite
translateX(-100%) → translateX(200%) on ::after pseudo-element
Button shimmer sweep (future CTAs)
Float — anim-float
Coffee bag hero. 5s ease-in-out loop, −1.5° → +1° rotation.
Pulse — anim-pulse
Live-indicator ring. 2s loop, scale 1→1.5, opacity 1→.5.
Slam — anim-slam
Step 2 number reveal. Scale 1.25→1, opacity 0→1, 320ms spring.
Ticker — anim-tick
translateX(-50%) loop. Seamless via doubled content.
Reveal — anim-fade-in
Staggered section entrance. 600ms, 0/80/160ms delays.
Progress — anim-progress
Width 0→62% on mount. 1.2s smooth ease.
Shine — anim-shine
Shimmer sweep via ::after. 2.4s loop, 1.2s initial delay.
Badge Float — anim-bb-float
Floating stat badges. Staggered 4.2–5.1s loops.
Ported from ideas/genc - purple portal/ — the Claude Design package. Lives at styles/teacher-portal.css. Uses only var(--gui-*) tokens — no raw hex. Token injection via buildThemeVars() in the layout.
Live pages
Two variants
Changelog
Initial port — dashboard, story drops list, drop detail, lightbox. Real Supabase data wired throughout.
Lyraengine.ts: +40 --gui-* tokens — fg scale, accent zone variants (6 zones × 8 suffixes), sidebar-bg, gradients, typography display traits, density padding.
Lyratypes.ts: accentD slot, mainBg/sidebarBg overrides, statsBadge/newDrop/newDropBorder highlight zones.
Lyraglobals.css: fade-1..4 animations. layout.tsx: teacher-portal.css import added.
LyraDC17 is the active design language for the teacher portal. Applied via styles/teacher-dc17.css — a visual override layer on top of teacher-dashboard.css. Class names and HTML structure are unchanged; only visual properties are updated. Strategy: overlay files, never inline styles.
DC17 Palette
Warm Dark
Background — #0C0804
Sidebar Dark
Sidebar gradient top
Coral
Primary — var(--coral)
Orange
Accent — var(--orange)
DC17 Typography in Teacher Portal
Ms. Elena Alvarez
Bebas Neue · clamp(30px, 5.5vw, 52px) · Welcome name
42
Total Drops
10
Pending
3mo
Streak
Dashboard
Bebas Neue · clamp(30px, 4vw, 44px) · Page titles
DC17 Component Treatments
Stat Card
12
Total Drops
coral bg tint · Bebas gradient number · hover lifts 2px
Welcome Card
coral gradient bg · glow blob via ::before · dc17-fade-up
Form Input (focused)
School Name
orange label · coral focus ring · dark fill
Activity Feed — Date Header
Bebas Neue · coral 55% · warm rule line
DC17 Rules
Background is #0C0804 (warm dark brown) — not the global --ink (#1A1A1A). Applied to .teacher-shell and .teacher-main.
All stat numbers use Bebas Neue with coral→orange gradient text. Never flat white numbers in the teacher portal.
Hover states lift elements 2px (translateY(-2px)) with a coral box-shadow bloom.
Entry animations: dc17-fade-up — 0.45s cubic-bezier(0.22, 1, 0.36, 1). Stagger children with 60ms delays.
Grain texture: SVG fractalNoise overlay, fixed position, mix-blend-mode: overlay, 4% opacity.
Coral border tints at 10–22% opacity. Never a hard coral border — always translucent.
The overlay file (teacher-dc17.css) never changes class names or HTML structure. Only visual properties.
DC17 Shared Primitives
Six grouped-selector blocks in teacher-dc17.css. Change one primitive → updates every teacher page at once.
Coral Gradient Stat Number
.teacher-stat-number, .teacher-activity-stat-number
Bebas Neue · linear-gradient(135deg, #F15A29 → #F7941D) · -webkit-text-fill-color: transparent
Active Warm Card
.teacher-stat-card, .teacher-activity-stat, .teacher-action-card, .teacher-profile-portrait-preview
background: rgba(241,90,41,0.05) · border: 1px solid rgba(241,90,41,0.12)
Warm Card Hover
.teacher-stat-card:hover, .teacher-activity-stat:hover
border-color: rgba(241,90,41,0.28) · box-shadow: 0 6px 28px rgba(241,90,41,0.10) · translateY(-2px)
Coral Gradient Button
.teacher-cta-btn, .teacher-profile-save-btn
linear-gradient(135deg, #F15A29 → #F7941D) · box-shadow: 0 2px 14px rgba(241,90,41,0.28)
Coral Button Hover
.teacher-cta-btn:hover, .teacher-profile-save-btn:hover:not(:disabled)
box-shadow: 0 4px 22px rgba(241,90,41,0.45) · translateY(-1px)
Muted Uppercase Stat Label
.teacher-stat-label, .drops-stat-label
10px · 800 weight · 0.12em tracking · rgba(255,255,255,0.35)