Ondelle / Design System / v1.0 — Figma-ready style sheet

Ondelle Design System

OndelleMaison de Soin
01 — Foundations / Color

Color

Warm limestone surfaces instead of pure white, olive ink for text and primary actions, clay as a sparing accent. Chips show the best WCAG contrast against ink or stone-50.

Stone

Surfaces & backgrounds
Aa13.5 · AAA
Stone 50--stone-50#F7F2EB
Aa12.4 · AAA
Stone 100--stone-100#F0E8DD
Aa10.9 · AAA
Stone 200--stone-200#E5DACB
Aa8.7 · AAA
Stone 300--stone-300#D2C3AE
Aa6.1 · AA
Stone 400--stone-400#B4A28A

Sage

Calm, success, secondary
Aa11.9 · AAA
Sage 100--sage-100#E3E6D8
Aa8.3 · AAA
Sage 300--sage-300#BCC4A9
Aa4.9 · AA
Sage 500--sage-500#8D9878
Aa5.2 · AA
Sage 700--sage-700#5D6A4D

Clay

Warmth, accent, highlights
Aa11.7 · AAA
Clay 100--clay-100#F2DFD2
Aa7.3 · AAA
Clay 300--clay-300#DDAA8C
Aa3.8 · Large text & icons only
Clay 500--clay-500#B76E4B
Aa6.0 · AA
Clay 700--clay-700#8B4B30

Olive

Ink, primary actions
Aa7.5 · AAA
Olive 700--olive-700#4A5139
Aa10.3 · AAA
Olive 800--olive-800#363C29
Aa13.5 · AAA
Olive 900--olive-900#24281C
Text on bgInk 900 on Stone 5013.5:1 · AAA
Secondary textInk-2 on Stone 507.0:1 · AA+
Accent textClay 700 on Stone 506.0:1 · AA
On darkStone 50 on Olive 90013.5:1 · AAA
02 — Foundations / Typography

Typography

Cormorant Garamond brings an editorial, couture voice to headings (used ≥ 20px only). Manrope keeps UI text calm and highly legible. Italic serif is the brand’s signature accent.

Display · Google FontsAa GgCormorant Garamond400 · 500 · 600 · Italic
Interface · Google FontsAa GgManrope400 · 500 · 600 · 700
DisplayCormorant Garamond Medium44 / 45 · −1%
Rituals of slow beauty
Heading 1Cormorant Garamond Medium34 / 37
Choose your therapist
Heading 2Cormorant Garamond Medium26 / 30
Featured rituals
Heading 3Cormorant Garamond SemiBold21 / 25
Warm Stone Ritual
TitleManrope SemiBold16 / 22
Mara Lindqvist
BodyManrope Regular15 / 23
Heated basalt stones and slow, flowing strokes melt deep tension.
SmallManrope Medium13 / 19
Fri 13 Nov · 14:30 · 90 min
LabelManrope Bold · caps · +14%11 / 13
Your next ritual
03 — Foundations / Space, radius, elevation

Space, radius & depth

4-pt grid. Screen gutters 24, card padding 16–20, section rhythm 24–32 in app and 120 on web. Every tap target ≥ 44 × 44.

s-14px
s-28px
s-312px
s-416px
s-520px
s-624px
s-832px
s-1040px
s-1248px
s-1664px
s-2080px
s-2496px
xs · 6px
sm · 10px
md · 16px
lg · 24px
xl · 32px
pill · 999px
e-1
e-2
e-3
04 — Components / Buttons, inputs, chips

Components

Pill buttons 52px (44px minimum). One primary action per screen in Olive 900; clay is reserved for membership and promotions.

PrimaryBook a ritual
SecondaryExplore the menu
AccentJoin The Circle
Light (on image)
Reserve a pass
FocusContinue
DisabledContinue
Small / Ghost
BookSkip
Icon button 44
Search rituals
claire@ondelle.com
Visa ending 4242
claire@mail
Enter a full email address
All Massage Facial BathSignatureNewConfirmed
Warm Stone Ritual
90 min$185
M
Mara LindqvistLead therapist · 9 yrs 4.98 Fri 13
J
Jonah ReyesDeep tissue · Sports 4.92 Thu 12
Your next ritualWarm Stone RitualFri 13 · 14:30 · with Mara L.Directions
05 — Iconography

Icons

Lucide, 1.6 px stroke, 20 / 22 / 24 px. Rounded caps echo the soft serif. Icons always pair with a label or an accessible name.

house
sparkles
calendar
heart
user
bell
search
clock
map-pin
star
check
arrow-right
arrow-left
chevron-right
x
menu
leaf
flame
droplets
waves
hand
flower-2
gift
gem
wallet
credit-card
shield-check
calendar-check
share-2
settings
sliders-horizontal
phone
06 — Imagery

Imagery

Medium-format still lifes in soft window light: limewash, travertine, linen, basalt, olive. No faces, no logos — ritual details and hands tell the story.

Art directionSoft window light, earth tones, tactile materials.Generated as one cohesive series (3 variants per key frame, best picked). Grade: warm highlights, olive shadows, fine grain.