Auto-generated by sparkles/laravel-core v3.40.0+. Every brand token, typography role,
button variant, and layout primitive in this site's active archetype. Use as a pre-launch
checklist and as ground truth for design-integrity scanners. Gated by
sparkles-core.style_guide.gate. No-index by default.
If a swatch reads as default Tailwind blue (#2563eb) the archetype was never customized — see theme.css.
Body copy uses the brand body font at var(--spk-body-line-height). The body color is var(--color-text); muted secondary copy reads as var(--color-text-muted).
Drop-in section components from <x-sparkles::sections.*>. Each composes layout primitives + typography + brand tokens; sites pass slot content.
A grounded baseline so a fresh site renders coherently before the operator overrides any tokens.
React surfaces import from vendor/sparkles/laravel-core/resources/js/components. The cards below mirror the exported primitives that rely on shared .spk-* classes in this stylesheet.
Button / ShareLink
Modal / Drawer
ConfirmProvider / useConfirm
ToastProvider / usePromiseToast
Tooltip / Popover / Menu
Combobox / MultiSelect
Date + time pickers
DataTable / CommandPalette
FileDropzone
ParagraphDiff
ErrorBoundary
ClassNameSafelist
Every section registered via @ sparkles:section docblock. Grouped by category; click a name to copy the Blade tag.
<x-sparkles::sections.hero-centered>
Centered hero — eyebrow + headline + sub + dual CTA, no image.
props: eyebrow, heading, subheading, ctaLabel, ctaHref, secondaryCtaLabel, secondaryCtaHref, tone, padding
<x-sparkles::sections.hero-image>
Full-bleed hero with image overlay + CTA.
props: image, imageAlt, eyebrow, heading, subheading, ctaLabel, ctaHref, overlay, minHeight, align
<x-sparkles::sections.hero-split>
Two-column hero — copy left, image right (or reversed via imageSide).
props: eyebrow, heading, subheading, image, imageAlt, imageSide, ctaLabel, ctaHref, secondaryCtaLabel, secondaryCtaHref, tone, padding
<x-sparkles::sections.hero-stat-strip>
Hero with a horizontal stat strip below the headline (3-4 stats).
props: eyebrow, heading, subheading, stats, ctaLabel, ctaHref, tone, padding
<x-sparkles::sections.hero-video>
Full-bleed hero with background video + content overlay. Token-aware poster fallback.
props: videoSrc, posterSrc, posterAlt, eyebrow, heading, subheading, ctaLabel, ctaHref, overlay, tone, padding
<x-sparkles::sections.benefit-list>
Two-column checkmark list of benefits / inclusions.
props: eyebrow, heading, lede, items, tone, padding
<x-sparkles::sections.feature-alternating>
Alternating left/right image+copy blocks for storytelling.
props: eyebrow, heading, lede, items, tone, padding
<x-sparkles::sections.feature-grid-2col>
Two-column feature grid (paired highlights).
props: eyebrow, heading, lede, items, tone, padding, align
<x-sparkles::sections.feature-grid-3col>
Three-column icon + heading + body grid for feature/value sections.
props: eyebrow, heading, lede, items, tone, padding, align
<x-sparkles::sections.feature-grid-4col>
Four-column feature grid (compact value props).
props: eyebrow, heading, lede, items, tone, padding, align
<x-sparkles::sections.feature-icon-row>
Horizontal row of icon + heading + body (3-6 columns).
props: eyebrow, heading, lede, items, tone, padding, align, variant, surface
<x-sparkles::sections.philosophy-bullets>
Eyebrow + heading + lede + bulleted list + optional CTA.
props: eyebrow, heading, lede, bullets, ctaLabel, ctaHref, tone, padding, align
<x-sparkles::sections.case-study-tile-row>
Row of case-study tiles — image + client + headline + outcome.
props: eyebrow, heading, items, tone, padding
<x-sparkles::sections.logo-bar>
Horizontal row of client/partner logos (~5-8). Grayscale by default; full color on hover.
props: eyebrow, logos, tone, padding, grayscale
<x-sparkles::sections.stats-grid>
Headline + 3-4 large stat callouts (revenue, customers, etc.).
props: eyebrow, heading, lede, stats, tone, padding
<x-sparkles::sections.testimonial-grid>
3-up grid of testimonial cards.
props: eyebrow, heading, testimonials, tone, padding
<x-sparkles::sections.testimonial-single>
Single large pull-quote with attribution.
props: quote, name, role, avatar, logo, tone, padding
<x-sparkles::sections.testimonials-carousel>
CSS scroll-snap testimonial carousel, no Alpine.
props: eyebrow, heading, testimonials, tone, padding
<x-sparkles::sections.booking-callout>
Callout card linking to an external scheduling tool (Calendly, SavvyCal, etc.).
props: eyebrow, heading, lede, ctaLabel, ctaHref, helperText, tone, padding
<x-sparkles::sections.contact-form-inline>
Inline contact form, honeypot + session-flash success.
props: eyebrow, heading, lede, placement, action, tone, padding, phoneField, csrfTokenUrl, cspNonce
<x-sparkles::sections.contact-with-map>
Side-by-side contact form + LocalBusiness info card (address/hours/phone).
props: eyebrow, heading, lede, formRecipe, address, phone, email, hours, mapEmbed, tone, padding
<x-sparkles::sections.cta-banner>
Full-bleed end-of-page CTA banner.
props: eyebrow, heading, lede, ctaLabel, ctaHref, tone, padding
<x-sparkles::sections.cta-split>
Split layout — headline + lede left, inline form right.
props: eyebrow, heading, lede, formRecipe, ctaLabel, ctaHref, tone, padding
<x-sparkles::sections.newsletter-inline>
Single-field newsletter opt-in (email + submit), inline layout.
props: eyebrow, heading, lede, formRecipe, tone, padding
<x-sparkles::sections.pricing-comparison-table>
Wide comparison table — features (rows) × tiers (columns).
props: eyebrow, heading, tiers, rows, tone, padding
<x-sparkles::sections.pricing-tiers>
2-4 pricing tier cards with feature lists + CTA per tier.
props: eyebrow, heading, lede, tiers, tone, padding
<x-sparkles::sections.comparison-table>
Generic 2-N column comparison (us vs them, before vs after).
props: eyebrow, heading, columns, rows, tone, padding
<x-sparkles::sections.faq-accordion>
Native <details>/<summary> FAQ accordion, no JS.
props: eyebrow, heading, items, tone, padding, firstOpen
<x-sparkles::sections.image-gallery>
Masonry-style image gallery (4-12 images).
props: eyebrow, heading, images, tone, padding
<x-sparkles::sections.media-feature>
Full-bleed image / video with caption + optional CTA. Editorial-feeling.
props: image, imageAlt, video, caption, attribution, ctaLabel, ctaHref, tone, padding
<x-sparkles::sections.metrics-callout>
Inline metrics ribbon — 3-5 small KPI callouts (e.g. uptime, response time).
props: metrics, tone, padding
<x-sparkles::sections.process-steps-horizontal>
Horizontal numbered process steps (3-5 columns).
props: eyebrow, heading, lede, steps, tone, padding, align, surface
<x-sparkles::sections.rich-text>
Long-form prose-styled content block. Accepts safe pre-sanitized HTML.
props: eyebrow, heading, html, tone, padding
<x-sparkles::sections.team-detail>
Single team member feature — large photo, extended bio, credentials.
props: name, role, photo, photoAlt, bio, credentials, social, tone, padding
<x-sparkles::sections.team-grid>
Grid of team member cards — photo + name + role + bio + social.
props: eyebrow, heading, lede, members, tone, padding
<x-sparkles::sections.timeline-vertical>
Vertical timeline / process — chronological list with markers.
props: eyebrow, heading, items, tone, padding