# Bible Blast Design System Skill

Use this skill when designing Bible Blast website pages, wireframe-to-prototype work, previews, or UI components.

## Source of Truth

- Import `design-system/colors_and_type.css`.
- Use `--at-*` tokens only for color, type, spacing, radius, shadows, motion, and layout.
- Use `design-system/design-system.html` as the visual reference.
- Use `design-system/ui_kits/website/` for website section composition.

## Direction

Model the seriousness and rhythm of a modern ministry curriculum site: clear hero, trust-building proof, age/stage pathways, benefits, weekly rhythm, sample request form, and direct closing CTA. Keep Bible Blast visually energetic through red, gold, blue, and purple, but use those colors with restraint.

## Rules

- White sections are the default.
- Primary CTA: red. Secondary CTA and success states: dark blue. Secondary accent: purple. Highlights and progress: gold.
- Keep cards at 8px radius or less.
- Avoid comic/carnival typography, rainbow gradients, decorative blobs, and Awana asset reuse.
- Use parent/church-director credible language with friendly kids-ministry warmth.
- Preserve accessibility basics: visible focus, semantic landmarks, labeled fields, contrast, touch targets, and reduced motion.