SpoFI 2.0 visual system
Changed dads change everything.
Complete native GenerateBlocks V2 coverage for the SpoFI design system: color, typography, spacing, sections, buttons, cards, chips, donor/public patterns, staff operations, attendance, student dashboard, and forms.
Foundations
Every color and design token in one place.
These are not decoration. Each color has an operational job: public trust, donor action, status clarity, court/referral sensitivity, and staff decision speed.
Ink
Muted Ink
Surface
Surface Warm
Engage Teal
Deep Teal
Energy Orange
Surface Raised
White
Border Soft
Legacy Gold
Success
Success Background
Warning
Warning Background
Danger
Danger Background
Info
Info Background
Purple
Purple Background
Specimen
Body typography
system-ui, sans-serif / 17px / 1.65 — Default readable baseline for fathers, donors, and staff.
Specimen
H1 typography
800 / 1.05 — Large impact language with tight line-height.
Specimen
Container width
1180px — Public page and component reference max width.
Specimen
Content layout
Separate containers / no sidebar — GeneratePress frame stays clean and spacious.
Specimen
Primary link
#0d7c7c Engage Teal — Primary action and navigation hover.
Specimen
Form button
#d86422 → #083f46 — Giving/register action with dark hover.
Specimen
Mobile breakpoint
768px — Stack grids and simplify navigation below tablet.
Specimen
Active GP modules
Blog, Copyright, Menu Plus, Spacing — Imported settings currently enabled.
Component matrix
Reusable components and variations come first.
This is the visual source of truth: every component family must be visible, named, and mapped to editor-selectable global style classes.
Section surfaces
spofi-section–white
Section / White
Default editorial surface
spofi-section–warm
Section / Warm
Stories, giving, family warmth
spofi-section–teal-dark
Section / Teal dark
Hero, footer, major public bands
spofi-section–app
Section / App
Staff and student dashboard surface
spofi-section–warning
Section / Alert soft
Warnings and review states
spofi-section–info
Section / Info soft
Guidance, waitlist, neutral help
Typography specimens
Eyebrow / label: fatherhood, family, future
Hero: Changed dads change everything.
Section: Serve more fathers without adding chaos.
Card: 24/7 Dad Basic
Lead paragraph: This lead style gives emotional and practical context before asking a father, donor, or staff member to act.
Body copy: Clear, direct, mobile-readable, and respectful. No stigma language. No institutional fog.
“I’m more present and patient. I slow down before reacting so my kids feel safe with me.”
Button matrix
Card matrix
Specimen
Standard card
Flexible editorial card with clean surface and readable spacing.
Specimen
Raised card
Featured public content and donor-facing panels.
Specimen
Program card
For class cards, program pathways, prerequisites, schedule, and CTA.
Specimen
Story card
Warm father transformation quote and attribution.
Specimen
Metric card
Impact number with label and context.
Specimen
Alert card
Operational attention without panic.
Specimen
Dashboard card
Staff and father dashboard panels.
Specimen
Court/referral card
Sensitive cues without public exposure.
Status chip matrix
Public / Legacy prototype
Warm public pages that still feel disciplined.
This shows how class discovery, impact storytelling, and giving CTAs work together without feeling generic or chaotic.
Program discovery
Find the class that fits your next step as a dad.
Clear schedules, plain-language expectations, no shame, and mobile-first registration.
895
93%
24
4.9
24/7 Dad Basic
Foundational fatherhood, communication, discipline, co-parenting, and emotional self-control.
24/7 Dad Advanced
Deeper growth for graduates ready to examine patterns, stress, relationships, and repair.
Anger Free Dad
Techniques for identifying triggers, managing anger, and leading with calm.
Donor / campaign prototype
Giving pages need impact, warmth, and momentum.
This covers donor cards, giving levels, progress bars, recurring gift prompts, match urgency, and testimonial proof.
Campaign specimen
Honor a father. Build a legacy.
A gift today helps create class space, meals, materials, facilitator support, and a pathway for dads to grow.
$46/mo
Malachi 4:6 Coffee Club
Monthly entry point with story follow-up.
$115/mo
Presence Partner
Campaign-themed recurring gift.
$500
Class Night Hero
Funds a class night experience.
$3,650
Sponsor a Dad
One full annual training investment.
Ops / staff cockpit
Class operations health should be calm and decisive.
Wide operational panels test dashboard cards, filter bars, tables, progress, row attention states, and status language.
Facilitator / attendance prototype
Attendance needs to be fast, obvious, and safe.
This specimen emphasizes large touch targets, present/absent clarity, current session context, exception notes, and safe button hierarchy.
Attendance: Session 4
Marcus J.
PresentReady for session 4
Daniel R.
AbsentCalled ahead; needs make-up option.
Omar K.
PresentCourt/referral documentation sensitive.
Reggie S.
Follow-upInstructor check-in after class.
Father / student dashboard
Simple, dignified, next-step focused.
A father should immediately know: what class am I in, what have I completed, what is next, and who can help?
24/7 Dad Basic AM
Tuesdays and Thursdays · 6:00–8:00 PM · The Hive
Next step
Ask your facilitator about a make-up option for Session 3. Your attendance record updates after staff approval.
“Even 15 focused minutes with each child has made a huge difference in our relationship.”
Forms / inputs
Form states need trust and mobile clarity.
WS Forms and GB form surfaces should share the same labels, spacing, help text, error language, and action hierarchy.
Registration form specimen
Full name
Mobile phone
Focused state: Engage Teal border.
Class interest
Anything we should know?
Ops filter form specimen
Search roster
Registration status
Validation example
Error state: plain language, visible border, no blame.
GenerateBlocks Global Styles proof
The style picker is the product surface.
Global Styles should be created and applied from selected blocks or the GenerateBlocks panel, then selected from the block Global Style dropdown. The page below names every class staff should see or inherit.
Sections
Containers
Text
Headings
Buttons
Cards
Status chips
Ops UI
GeneratePress compatibility
Recommended Global Style loading order
Base tokens → section/container → text/headings → grids → buttons → cards → chips → forms → ops/dashboard variants. Do not publish override utilities before base component styles.
Implementation checklist
What this page now proves.
This final section keeps the repo, editor, and visual system aligned before the next PR.
Specimen
No Custom HTML blocks
Use real GenerateBlocks V2 markup only.
Specimen
Every color used
All 21 GP/SpoFI colors appear in swatches and component examples.
Specimen
All major components visible
Sections, typography, buttons, cards, chips, forms, donor, public, ops, attendance, and student dashboard.
Specimen
Audit markers preserved
gbp-section, gbp-section__inner, spofi-ops-shell, spofi-attendance-grid, spofi-story-quote, spofi-progress.
Specimen
Footer handled separately
Imported Charity footer is a GP Element adoption/retheme issue, not page body content.
Specimen
Editor proof named
Global Style picker classes are explicitly listed and grouped.