Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Sparkles
Sparkles is a warm, approachable cleaning service template built for modern urban home-care brands. Its palette balances a rich navy hero block against creamy off-white pages, punctuated by a soft periwinkle-blue button system and a honeyed yellow star mark — creating an atmosphere of professional trust without clinical coldness. Typographically, the template pairs the compressed, bold geometric display face Decalotype Fix with the rounded, variable-weight Bricolage Grotesque for body copy. Headlines are set in full uppercase at extreme sizes with tight leading, giving sections a confident editorial punch, while body text stays comfortable and readable. Layouts favor generous card-based grids with large rounded corners throughout, and the booking flow leans on a split-panel composition — form on the left, human face on the right — to project warmth and accountability.
Sections from Sparkles
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Navigation Bar with Mega Dropdown
View section
Hero with Video Background
View section
Services Marquee with Slider
View section
Customer Reviews Testimonials Section
View section
FAQ Accordion Section
View section
About Hero with Image Grid
View section
Feature Cards and Footer Sections
View section
Centered Call to Action Section
View section
How It Works Process Steps
View section
Features Grid with Image
View section
About Section with Image
View section
Tabbed Pricing Section
View section
Colors
Canvas
Fresh Lift
#ffffff
Elevated card surface. Pricing cards, form inputs, add-on items, and any component requiring a crisp white lift above parchment.
Warm Parchment
#fdf8f1
Page canvas & navbar fill. The base surface for all light-mode sections, headers, footers, and content backgrounds.
Weathered Linen
#f2ece5
Lifted depth surface. Used for feature cards, footer container, form block backgrounds, and inset review cards.
Ink
Faded Slate
#0d1526a3
Secondary body text & muted labels. Descriptive copy, pricing subtitles, and footer legal link color.
Midnight Navy
#0d1526
Primary ink & dark hero surface. Hero left panel fill, headline text, and button hover states that demand maximum contrast.
Accent
Honeyed Star
#ffc216
Brand logo mark & star accent. The four-point star glyph in the nav logo and any on-brand decorative star motif.
Lavender Orchid
#dcc9f9
Soft accent & about-hero fill. Applied to the about page hero content panel and as a secondary decorative accent tint.
Periwinkle Mist
#b6cbf9
Primary button fill & CTA banner. Default state for all primary pill buttons, active pricing tabs, and the main CTA section background.
Cornflower Depth
#537fdd
Icon accent & dark-blue link tint. Used for inline icon fills and the dark-blue ink token applied to form icons and decorative elements.
State — utility only
Error Rose
#a63f3a
Form error state. Border and message color for invalid or required field validation feedback.
Typography
The quick brown fox jumps
Display headings, section headlines, button labels, and navigation dropdown service titles. Always uppercase and tightly tracked.
The quick brown fox jumps
Body copy, labels, captions, form field text, nav links, and all paragraph content. Set in normal weight for reading comfort.
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1800pxSection gap
80pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160pxBorder radius
tags16pxcards24pxlarge24pxsmall8pxinputs8pxbuttons32pxdefault16pxbuttons-circle24pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Warm Parchment
Level 2Fresh Lift
Level 3Weathered Linen
Level 4Midnight Navy
Do's and don'ts
- Apply the full pill radius (32px) to all primary and secondary CTA buttons to maintain the brand's signature rounded-rectangle shape across every screen size.
- Use Decalotype Fix at 700 weight in full uppercase for all section headings — the compressed, tightly-leaded display type is the primary typographic signature and must not be set in mixed case.
- Pair the dark navy hero panel (#0d1526) with Warm Parchment (#fdf8f1) light text and Periwinkle Mist (#b6cbf9) buttons to preserve the high-contrast two-tone hero composition.
- Use Weathered Linen (#f2ece5) for inset card backgrounds (feature cards, form blocks, review cards) to create the warm, tactile depth layer within the otherwise flat page canvas.
- Maintain the split-panel layout on booking and about pages — content or form on the left, a full-bleed human photography panel on the right — to reinforce trust and approachability.
- Apply the 24px large card radius to all section containers, CTA banners, footer wrappers, and hero panels; this consistent large rounding is what gives the template its friendly, modern feel.
- Keep all label and eyebrow text (section tags, pricing badges) in uppercase with Bricolage Grotesque at 700 weight and positive letter-spacing (0.047rem) to distinguish hierarchy clearly.
- Don't introduce new saturated brand colors — the four-color accent palette (Periwinkle Mist, Cornflower Depth, Honeyed Star, Lavender Orchid) is intentionally restrained; extra hues will break the calm domestic mood.
- Don't use Decalotype Fix at body or caption sizes — below 20px the compressed letterforms become illegible; reserve it for headings and button labels only.
- Don't apply sharp corners (0px radius) to any card, button, or container — the entire aesthetic relies on rounded geometry; square corners feel hostile and off-brand.
- Don't set section headlines in mixed or sentence case — all display headings must be uppercase; lowercasing Decalotype Fix destroys the bold editorial character that defines Sparkles.
- Don't use the Midnight Navy surface for decorative backgrounds other than the hero left panel and feature cards — overusing the dark surface dilutes its dramatic impact.
- Don't stretch page content beyond the large container max-width without consistent 32px horizontal page padding — gutters are essential to the floating-document aesthetic.
- Don't replace the Honeyed Star (#ffc216) logo mark with a different yellow or gold — the specific warm amber tone is the singular brand color accent and must remain consistent in the logotype.
Example prompts
New service page hero
Pricing card variant
Announcement banner
Testimonial block
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide