Logo
The palette, angular burst, comic outlines, and rounded letter energy come from `assets/bible-blast-logo.webp` and `assets/bible-blast-logo.png`.
Source Evidence
Grounded in the supplied logo and website copy.
Copy
Homepage and About copy establish the dual audience, weekly program rhythm, proof points, CTAs, and trust language.
Archive
The old system is preserved at `archive/2026-04-30-legacy-design-system/` and is intentionally not the visual source for this rebuild.
Voice Rules
Fast, faithful, and practical.
Copy should make the program feel simple to start and hard to forget. It should speak to the adult's responsibility without making the experience heavy for kids.
- Use clear CTAs: Get Your Free Sample, Watch Bible Blast in Action, Become a Member Today.
- Use proof early: 7+ years, ages 4 through 12th grade, works for 1 child or 300.
- Use concrete rhythm: read, quiz, reward, repeat.
- Avoid decorative emoji, vague hype, or kid-speak that weakens church-director trust.
Colors
Logo-derived primary palette with warm readability.
Success
Progress, completion, positive parent feedback.
Warning
Important notes, limited-time reminders, setup cautions.
Error
Form errors and destructive warnings with text labels.
Gradients
Use gradients only where they earn attention.
Hero
Warm sunburst energy for first-viewport impact.
CTA Band
Use two dark blues behind short high-contrast actions.
Panel
Use white surfaces by default for dense copy and forms.
Cards
Keep curriculum and audience tiles white by default.
Forbidden: body copy directly on saturated red/gold gradients, unrelated decorative blobs, and gradients used on routine panels or every card in a section.
Typography
Rounded display type, readable adult-facing body.
Display / Baloo 2
Build a generation of kids with God's Word written on their hearts.
Body / Nunito Sans
Bible Blast makes kids actually want to learn scripture: simple enough for a busy family, powerful enough for a church of 300.
| Style | Token | Use |
|---|---|---|
| Display | --at-font-size-5xl | Hero headlines only. |
| Section H2 | --at-font-size-4xl | Main section promises. |
| Body | --at-font-size-md | Readable parent/director copy. |
Spacing
Predictable 4px rhythm with generous section breathing room.
481216243248648096
Use tight spacing inside badges and controls, 24px to 32px inside cards, and 64px to 96px for page section separation.
Radii
Friendly corners without turning the whole UI into bubbles.
Small
Inputs, small tags.
Medium
Default UI cards.
Large
Feature panels.
Pill
CTAs and badges.
Shadows
Use real elevation for structure and comic shadow for emphasis.
Soft
Default card elevation.
Raised
Feature or modal surfaces.
Comic
Primary CTA, step number, or high-energy callout.
Motion
Quick, tactile, and easy to disable.
Fast
--at-motion-fast for hover and press states.
Base
--at-motion-base for reveals and state feedback.
Reduced Motion
The CSS includes `prefers-reduced-motion` handling for transitions and scroll behavior.
Imagery
Lead with the real logo and curriculum moments.
Until a photo library exists, use the logo, burst pattern, and structured UI illustrations sparingly. Future photos should show real homes, church rooms, kids with adults, curriculum materials, and rewards in action.
Iconography
Heavy, simple icons inside readable badges.
Icon set is inferred. Use labels near icons so meaning is not color-only or shape-only.
Components
Core primitives and repeatable website sections.
Buttons
Fields
Program Card
Ages 4-12Bible Blast
Fun, fast-paced scripture learning with rewards kids look forward to every week.
Step Card
1
Get the curriculum
Everything needed is included, with nothing extra to create.
Applied UI
Composed examples for future website work.
Every age covered.
No Bible curriculum accomplishes more in imparting Bible knowledge, from age four through high school.
Bible BlastBible Biz
Getting started takes three steps.
1
Get the curriculum.
2
Run your first Blast.
3
Watch it stick.
Accessibility
High-energy does not override clarity.
- Use deep blue or deep red text on cream surfaces for long-form copy.
- Every action has visible focus, hover, active, disabled, and text label states.
- Semantic panels use labels and copy, not color alone.
- Motion is short and disabled by `prefers-reduced-motion`.
- Minimum target height is approximately 44px for major controls.
Implementation Notes
Use tokens first, components second.
Tokens
Use `colors_and_type.css` and the `--at-*` namespace in prototypes and downstream handoffs.
Previews
Focused preview cards live in `preview/` and all import the shared CSS.
Website UI Kit
Reusable website examples live in `ui_kits/website/` with primitives and section components.
Known Gaps
Confirmed source limits.
- Fonts are inferred substitutions and need official approval.
- Iconography is inferred; no official icon set was supplied.
- No product photography, curriculum screenshots, or video thumbnails were supplied.
- Applied examples are UI system examples, not final website page designs.