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.
Hollow
Hollow is a wellness sanctuary rendered in soft, sun-warmed neutrals — a palette of moon dust, lotus milk, and warm sand that feels like late afternoon light through linen curtains. The brand pairs a delicate condensed serif (Libre Caslon) with a humanist sans (Instrument Sans) to balance contemplative ritual with modern clarity. Italic flourishes inside headlines and a single luminous solar-core green accent give the system a quiet but unmistakable signature. The layout breathes: oversized section padding, pill-shaped capsules, soft polaroid cards rotated at gentle angles, and looping ambient video treated with low-opacity color burn. Nothing shouts; everything invites. This is a design language built for slow scrolling, deep exhales, and the feeling of being unhurried.
Sections from Hollow
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Video Card Grid Section
View section
Fixed Navigation with Mobile Menu
View section
Footer with Newsletter and Images
View section
Yoga Gallery Marquee Section
View section
Testimonial Slider with Background Video
View section
Video Background Hero Section
View section
Full Screen Video Hero Section
View section
Studio Polaroid Image Gallery
View section
Three Column Feature Section Icons
View section
Class Gallery with Filtering and Two-Column Grid
View section
Two Column Hero With Animation
View section
Events Grid with Sidebar
View section
Colors
Canvas
Moon Dust
#d7cbbf
Primary canvas. The default page background — a warm dusty taupe that sets the meditative mood throughout.
Warm Sand
#e9e1d9
Secondary surface. Powers navbar capsules, polaroid cards, feature cards, and softer lifts above the canvas.
Lotus Milk
#f3eee9
Lifted surface & light text. Used for input fills, light text on dark surfaces, and the brightest neutral lift.
White Flower
#faf8f5
Brightest off-white. Reserved for highlight surfaces and the cleanest neutral moments.
Ink
Cacao Root
#594a3c
Primary ink & dark surface. Body copy, headlines, and the deep footer background.
Solar Ember
#7b6a58
Softer secondary ink. Used for subdued metadata and warm muted text moments.
Accent
Solar Core
#e6f6ba
Signature accent. The luminous lime-green pill that powers primary buttons, news labels, and the wave logomark.
Solar Shadow
#8a9570
Accent hover. The deeper sage-olive that buttons and nav pills shift into on interaction.
Advanced Honey
#fff2d9
Class-level tag. Warm cream wash signaling advanced practice content.
Beginner Bloom
#f1f8e8
Class-level tag. Soft green wash signaling beginner-friendly content.
State — utility only
Ember Warning
#c9372d
Error & validation. Reserved exclusively for form errors and destructive states.
Typography
The quick brown fox jumps
Display & editorial headlines (h0–h4). The condensed serif with italic emphasis carries the meditative, editorial voice.
The quick brown fox jumps
Body, UI, labels, and smaller subheads (h5–h6). A humanist variable sans for clarity and warmth.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
160pxCard padding
24pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--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
160px--spacing-200
200pxBorder radius
full9999pxlarge16pxsharp0pxsmall8pxnavbar20pxbuttons24pxSurfaces
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 1Moon Dust
Level 2Warm Sand
Level 3Lotus Milk
Level 4White Flower
Level 5Cacao Root
Do's and don'ts
- Set Moon Dust (#d7cbbf) as the default page canvas — it is the brand's resting tone.
- Pair the condensed Libre Caslon serif on h0–h4 with italicized phrases (e.g. 'your body.') for editorial emphasis.
- Use the Solar Core green pill sparingly — only for primary CTAs, the news/category label, and the signature wave logomark.
- Wrap all primary buttons and the navbar in 24px radius pill capsules with 12px × 20px padding for a consistent soft-pebble feel.
- Lift cards on Warm Sand surfaces with the polaroid shadow (-24px 4px 40px) and rotate ±8° to evoke hand-placed photographs.
- Reserve 160–200px of vertical section padding to honor the spacious, meditative pacing.
- Treat ambient hero videos with mix-blend-mode color-burn at 0.2 opacity to harmonize footage with the warm palette.
- Don't introduce saturated brand colors outside the sage/lime accent family — the warmth depends on tonal restraint.
- Don't set body copy in pure black; always use Cacao Root (#594a3c) or its translucent variants for text.
- Don't use bold weights on Libre Caslon headlines — Light (300) is the brand voice; bold breaks the calm.
- Don't apply the medium radius (0px) to surfaces meant to feel soft — choose 8px small or 16px large instead.
- Don't crowd sections with tight padding; below 80px vertical the brand loses its breath.
- Don't use the Solar Core green for body text or large surfaces — it functions only as accent and label.
- Don't mix fonts other than Libre Caslon Condensed and Instrument Sans; consistency is the discipline of this system.
Example prompts
Hero section
Class card row
Testimonial slider
Polaroid gallery
# 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