Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Yoga You
Yoga You is a warm, sunlit wellness brand built on a cream canvas, soft butter accents, and deep ink type. The aesthetic balances elegant Marcellus serif headlines with the grounded clarity of Satoshi sans-serif, creating space that feels both editorial and breathable. The palette is gentle but decisive — an ivory page lifted by a creamier secondary surface, anchored by near-black ink, and punctuated with a single saturated yellow used for primary calls-to-action and small accent labels. Generous radii, pill buttons, and soft photographic crops set a calm, deliberate pace.
Sections from Yoga You
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Three Column Features Grid
View section
Wellness Services Hero Section
View section
Three Column Yoga Gallery
View section
Expertise Areas Tabbed Section
View section
Feature Showcase with Checklist
View section
Recent Classes Carousel
View section
Testimonial Slider Section
View section
Full Width Hero Section
View section
About Section Image Text
View section
Navigation Bar with Dropdown
View section
Sticky Facts Grid Section
View section
Sticky Process Steps
View section
Colors
Canvas
Pure Snow
#ffffff
Crisp tile surface. Pricing cards and form inputs that need to lift above the ivory canvas.
Ivory Canvas
#fffbf0
Primary canvas. Page background and the dominant surface across all sections.
Warm Parchment
#f9f5e8
Lifted secondary surface. Used for tab containers, image-quote tiles, and section variants for gentle depth.
Ink
Tea Stone
#cec8b1
Soft border. Used on cart and checkout block headers to delineate without contrast.
Ember Shade
#282523
Deep gallery surface. Used behind the about gallery and full-bleed dark sections.
Midnight Bark
#22221f
Primary text & ink. Headlines, body copy, dark sections, and outline buttons.
Accent
Honey Glow
#ffe560
Accent hover. Brightened butter tone for primary button hover states.
Butter Bloom
#ffe146
Brand accent. Primary CTA fill, eyebrow titles, and active tab states.
Typography
The quick brown fox jumps
Body & UI face. Carries paragraphs, eyebrow labels, navigation, buttons, and form inputs with grounded neutrality.
The quick brown fox jumps
Display & heading face. Sets the editorial, classical tone for hero titles, section headlines, and testimonial pull quotes.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1396pxSection gap
120pxCard padding
40pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-200
200px--spacing-240
240pxBorder radius
tabs90pxcards24pxcircle9999pxbuttons60pxtab-link80pxblock-header12pxpricing-tile16pxSurfaces
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 1Ivory Canvas
Level 2Warm Parchment
Level 3Pure Snow
Level 4Midnight Bark
Level 5Ember Shade
Do's and don'ts
- Set every page on the Ivory Canvas (#fffbf0) and reserve Warm Parchment (#f9f5e8) for lifted tab containers, image-quote tiles, and alternating sections.
- Pair Marcellus headlines with Satoshi body copy at 18px/130% — never reverse the roles.
- Use Butter Bloom (#ffe146) only for primary CTAs, uppercase eyebrow labels, and active tab states; one accent appearance per viewport ideally.
- Apply 60px radius to all CTAs and 24px radius to large content cards (tabs, hero, image-quote) for the brand's pillowed silhouette.
- Use 120px top/bottom section padding on standard sections and stretch to 200–240px on hero/video sections for editorial breathing room.
- On dark sections, invert to Midnight Bark (#22221f) background with Warm Parchment text and keep the same Butter Bloom accent.
- Render uppercase Satoshi 16px/500 for eyebrow titles in the Butter Bloom hue above hero headlines.
- Don't introduce additional saturated colors — the system is intentionally one-accent on a warm neutral palette.
- Don't use drop shadows on cards or buttons; depth comes from tonal surface stacking, not elevation.
- Don't square off buttons or CTAs — the 60px pill is non-negotiable for primary, ghost, and outline variants.
- Don't set Marcellus below 24px or use it for body paragraphs; it loses its editorial character at small sizes.
- Don't place Butter Bloom on Pure Snow without dark text — accent fills always pair with Midnight Bark labels.
- Don't crowd sections — minimum 64px gap between heading clusters and content grids, 24px between paired CTAs.
- Don't use pure black; ink is always Midnight Bark (#22221f) to keep the warmth of the palette intact.
Example prompts
Landing hero
Pricing section
Tabbed feature block
Testimonial slider
# 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