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.
1. Color tokens
Brand palette
If a swatch reads as default Tailwind blue (#2563eb) the archetype was never customized — see theme.css.
--color-surfacepage bg
--color-surface-altalt bg / cards
--color-textbody copy
--color-headingheadings
--color-text-mutedmetadata / captions
--color-text-softstrong dark text
--color-accentCTA / link / accent
--color-accent-inktext on accent
--color-accent-hoverCTA hover
--color-borderdividers / hairlines
--color-successsuccess
--color-warningwarning
--color-dangerdanger
Component slots
--spk-nav-bgnav background
--spk-nav-textnav text
--spk-nav-cta-bgnav CTA background
--spk-nav-cta-textnav CTA text
--spk-footer-bgfooter background
--spk-footer-textfooter text
--spk-footer-mutedfooter secondary text
--spk-footer-brand-namefooter brand name
2. Typography
Display + body roles
h1 — display
The five archetypes catch most brands.
h2 — section heading
Sober, on-brand, AA-passing by default.
h3 — subhead
For grouped content within a section.
.eyebrow
Sparkles studio
body — paragraph
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).
.spk-container — capped width container with fluid horizontal gutter.
Card 1 .spk-card-pad
Card 2 .spk-card-pad
Card 3 .spk-card-pad
Card 4 .spk-card-pad
.pill.spk-clusteritems wrap horizontally
8. Section components
Pre-composed patterns (v3.40.0+)
Drop-in section components from <x-sparkles::sections.*>. Each composes layout primitives + typography + brand tokens; sites pass slot content.
<x-sparkles::sections.philosophy-bullets>
Studio philosophy
What this archetype is for.
A grounded baseline so a fresh site renders coherently before the operator overrides any tokens.
AA-safe color pairings out of the box
Display + body fonts pre-paired (no free-Google-fonts paralysis)
Spacing rhythm that doesn't feel cramped
Section components compose without custom CSS
<x-sparkles::sections.faq-accordion>
Why archetypes instead of one base theme?
Because a real-estate site and a fine-art gallery need different rhythms, fonts, and accent treatments. Forcing one theme means every site iterates against the same defaults.
Can I override individual archetype values?
Yes — that's the whole point. Override 3-7 brand vars in theme.css; everything else inherits from the archetype.