Lullwater design system
From the Lullwater template.
Included with Everything
Colour
Type
- Gilda Displaydisplay · 400 · SIL OFL 1.1
- Albert Sansbody · 400, 500, 600 · SIL OFL 1.1
- Display88 / 53px · 400Three to begin with
- H254 / 33px · 400Warm oil. Slow hands. No clock.
- H326 / 20px · 400Hot, cold, then still
- Lead25 / 20px · 400Lullwater is a day spa and beauty studio: massage, facials, bathing rituals and nails, booked in a minute, with gift cards that arrive the same day.
- Body20 / 17px · 400Cold-pressed oils warmed to skin temperature, unscented unless you ask.
- Small13 / 13px · 600An amount, a treatment or a whole day, in one of three designs.
- Eyebrow16 / 16px · 500LULLWATER
Components
LullwaterLULLWATERPackagesMembershipsThe spaTreatments
Book
Book a treatment
18:30
Treatments
LULLWATER
Hot, cold, then still
Cold-pressed oils warmed to skin temperature, unscented unless you ask.
Stay for the afternoon
An amount, a treatment or a whole day, in one of three designs.
Shape and motion
- sm · 10px
- md · 20px
- lg · 34px
- pill · 9999px
- shadow sm
- out ·
cubic-bezier(.22, .68, .12, 1) - in-out ·
cubic-bezier(.65, 0, .25, 1) - fast · 220ms
- base · 550ms
- slow · 1200ms
Exports
- DESIGN.md
DESIGN.md23 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json30 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json18 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("lullwater") with the MCP server.
- Source
- Lullwater template
- Palette
- Sanzo Wada 174: Corinthian Pink, Grayish Lavender - B, Taupe Brown
- Fonts
- Gilda Display (SIL OFL 1.1), Albert Sans (SIL OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 15.83:1 · muted 9.28:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens