flowmanceRitual Design System
Ritual is a calm spa, wellness and skincare storefront. It feels like a boutique day-spa brochure: a blush seashell page, a contrasty high-waisted serif (Boska) in rose red and deep slate, small uppercase sans labels (General Sans), thin rose outline pills and warm, close-cropped skin and product photography. Everything is centred, slow and quiet. The only loud moment is one full-width rose band carrying an italic quote.
Four signatures make it recognisable:
- The rose serif hero with a giant ampersand. The essence / of health / & vitality in / one place. is set in Boska 100px at line height 0.9 in rose #C75E60, stepped in a staggered, centred block, with a lighter 140px weight-300 & hanging off the left edge. It overlaps an organic blob-shaped portrait wrapped in a thin offset outline ring.
- Rose outline pills. Nearly every call to action is a transparent pill with a 1px #C75E60 border and uppercase rose text (BOOK NOW, MORE ABOUT RITUAL, EXPLORE PRODUCTS, LEARN MORE). The filled rose pill is kept for the form submit.
- Italic serif names. Treatment names (Message, Body Wrap) and the quote are Boska *italic* in rose, beside plain upright body copy. Italic is the template's emphasis device.
- Half-and-half treatment rows. Full-bleed rows split 50/50 into a square-cut photo and a white panel with a centred italic title, a two-line description and an outline pill. The sides alternate down the page.
Ritual is a light-only design.
Colors
Surfaces
#EADFDCPage background (--seashell), also the footer and cart panel; the nav has no fill and shows it through
#FFFFFFTreatment panels and product image tiles
#EADFDCInputs are transparent on the canvas
#333333Input text and placeholder
#3F4242 · 52%Input text and placeholder
Ink
#EADFDCText on primary
#FFFFFFText on primary-hover
#3F4242Section intros, nav links, product names, prices (--dark-slate-grey)
#3F4242Body text
#B8B6B4Small FEATURED TREATMENTS labels on white panels (--silver)
#EADFDCQuote text and outline pill on the rose band
#EADFDC · 40%1px border of the outline pill on the rose band
#FFFFFFText on secondary
#FFFFFFAction
#C75E60The filled pill (.button, form submit Make a reservation)
#D87E80Filled pill on hover
#C75E60Hero headline, italic treatment names, outline pill text and borders, the quote band, the logo (--indian-red)
#574D4EBlog category tags (--dim-grey)
Lines & effects
#B8B6B41px rule under the nav, input borders, cart dividers
#C75E601px borders of outline pills and the round cart button
Typography
Boska · display-hero
The quick brown fox jumpsHero h1 in accent. 100px · 500 · 0.9
Boska · headline-lg
The quick brown fox jumps.title-2 section titles (2 uses). 46px · 400 · 1.2
Boska · title-lg
The quick brown fox jumpsProduct names (Massage Oil, Skincare). 27px · 500 · 1.33
Boska · body-lg
The quick brown fox jumpsParagraphs (p), value statements, treatment descriptions. 20px · 500 · 1.3
Boska · caption
The quick brown fox jumpsThe scroll hint under the hero. 17px · 500 · 1.18
General Sans · label-lg
The quick brown fox jumpsFilled pill label. 16px · 500 · 1.2
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 1100px max, centred (.container, also the navbar width) |
| Section rhythm | .section is 100px top and bottom with 5% side padding (72px at 1440px); 50px top and bottom from ≤767 |
| Breakpoints | 991px, 767px and 479px, plus a 1920px+ step (container 1500px) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 30px | |
lg | 50px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section | 100px | |
nav-height | 101px | |
hero-top | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Page-load reveal | opacity 0 → 1 and move to 0px over 1000ms, outQuart |
| Mouse parallax | Elements drift x/y ±5px (one at ±10px) over 500ms on mouse move; matches the hero image and blob ring |
| Scroll reveal | Scroll-into-view triggers; content moves in from y 100px or −200px over 500ms and fades in |
| Nav link hover | Opacity to 0.7 over 0.5s |
| Outline pill | transition: 0.5s |
| Filled pill hover | Background #C75E60 → #D87E80, text → #FFFFFF, 0.3s |
| Footer link hover | Colour → #C75E60, 0.2s |
| Underline / border grow | Size changes at 300–400ms ease / outCubic, borders at 200–300ms |
Do’s and don’ts
- Set headlines and paragraphs in Boska and every control or label in uppercase General Sans.
- Keep the page on canvas #EADFDC with slate ink #3F4242 text and rose accent #C75E60 for emphasis.
- Use the rose outline pill (1px #C75E60, 30px radius, 42px tall) as the default call to action.
- Use Boska italic in rose for names and quotes.
- Centre section intros as an eyebrow, a headline-md statement and one pill.
- Place white surface-1 panels and tiles flat on the canvas, with square corners and no shadow.
- Add shadows, gradients or a second accent colour.
- Use the filled rose pill (#EADFDC on #C75E60, about 3.1:1) for small text; keep its label at 16px uppercase medium and use it for one action per screen.
- Set body copy in rose: #C75E60 on #EADFDC is about 3.1:1, so keep rose for 19px+ headlines, italic names, pill labels and the footer-link hover state.
- Use ink-faint #B8B6B4 for anything but the small decorative FEATURED TREATMENTS meta label; it is about 2:1 on white and fails for reading text.
- Round photos or panels; only buttons, tags and the cart button are rounded, and images get blob masks or nothing.
- Use letter spacing on the serif, or set long text in General Sans.
- Animate faster than 200ms or with bounce; motion here is slow fades and small drifts.
Example prompt
Any page in the Ritual style
More design systems like this
Health design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Ritual design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/ritual.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows