Choosing a preset

Rio has four presets over the same code. Each one is its own color schemes, type, radius and spacing, motion and home page:

Preset	Made for
Rio	Clothing and fashion
Sapir	Jewelry and accessories
Ori	Beauty and skincare
Eden	Home and lifestyle

Written in stage 2: a screenshot of each preset and how to switch.

What each preset sets

Every Theme setting a preset changes, generated from the theme.

Rio — 35 · 8 color schemes

Theme settings	Setting	What it sets
Design style	Style	Rio (same as the default)
Typography	Heading font	Jost Regular (same as the default)
Typography	Body font	Jost Light (same as the default)
Buttons and inputs	Input corner radius	16 px
Layout	Page width	1440 px (same as the default)
Layout	Page margin on desktop	56 px (same as the default)
Blog	Tag	Care
Blog	Tag	Fit
Blog	Tag	Style
Blog	Tag	Atelier
Layout	Page margin on mobile	20 px (same as the default)
Layout	Full width, padded margin	20 px (same as the default)
Layout	Text direction	Automatic (follows language) (same as the default)
Colors	Default color scheme	Scheme 1 (same as the default)
Motion	Animation	Full (same as the default)
Motion	Reveal style	Rise (same as the default)
Motion	Reveal duration	900 ms
Motion	Reveal distance	40 px
Motion	Stagger	90 ms (same as the default)
Motion	Easing	Silk
Custom code	Additional CSS	—
Typography	Heading case	Uppercase (same as the default)
Typography	Heading size	100 % (same as the default)
Typography	Heading line height	100 % (same as the default)
Typography	Heading letter spacing	-1 % (same as the default)
Typography	Body text size	17 px (same as the default)
Typography	Body line height	160 % (same as the default)
Typography	Label letter spacing	10 % (same as the default)
Buttons and inputs	Button shape	Pill (same as the default)
Layout	Card corner radius	24 px (same as the default)
Layout	Sheet corner radius	40 px (same as the default)
Layout	Slide the page over the hero	On (same as the default)
Layout	Reveal the footer under the page	On (same as the default)
Motion	Reveal blur	0 px (same as the default)
Cart	Free shipping threshold	3000

Sapir — 30 · 8 color schemes

Theme settings	Setting	What it sets
Design style	Style	Sapir
Typography	Heading font	Ovo Regular
Typography	Body font	Outfit Light
Buttons and inputs	Input corner radius	2 px
Layout	Page width	1440 px (same as the default)
Layout	Page margin on desktop	56 px (same as the default)
Layout	Page margin on mobile	20 px (same as the default)
Layout	Full width, padded margin	20 px (same as the default)
Layout	Text direction	Automatic (follows language) (same as the default)
Colors	Default color scheme	Scheme 1 (same as the default)
Motion	Animation	Full (same as the default)
Motion	Reveal style	Zoom
Motion	Reveal duration	760 ms
Motion	Reveal distance	18 px (same as the default)
Motion	Stagger	130 ms
Motion	Easing	Gentle
Custom code	Additional CSS	—
Typography	Heading case	As typed
Typography	Heading size	100 % (same as the default)
Typography	Heading line height	120 %
Typography	Heading letter spacing	0 %
Typography	Body text size	16 px
Typography	Body line height	150 %
Typography	Label letter spacing	6 %
Layout	Slide the page over the hero	Off
Layout	Reveal the footer under the page	Off
Buttons and inputs	Button shape	Square
Layout	Card corner radius	2 px
Layout	Sheet corner radius	0 px
Motion	Reveal blur	0 px (same as the default)

Ori — 30 · 8 color schemes

Theme settings	Setting	What it sets
Design style	Style	Ori
Typography	Heading font	Petrona Light
Typography	Body font	Karla Regular
Buttons and inputs	Input corner radius	14 px
Layout	Page width	1440 px (same as the default)
Layout	Page margin on desktop	56 px (same as the default)
Layout	Page margin on mobile	20 px (same as the default)
Layout	Full width, padded margin	20 px (same as the default)
Layout	Text direction	Automatic (follows language) (same as the default)
Colors	Default color scheme	Scheme 1 (same as the default)
Motion	Animation	Full (same as the default)
Motion	Reveal style	Rise (same as the default)
Motion	Reveal duration	620 ms
Motion	Reveal distance	14 px
Motion	Stagger	90 ms (same as the default)
Motion	Easing	Soft
Custom code	Additional CSS	—
Typography	Heading case	As typed
Typography	Heading size	100 % (same as the default)
Typography	Heading line height	120 %
Typography	Heading letter spacing	0 %
Typography	Body text size	16 px
Typography	Body line height	150 %
Typography	Label letter spacing	6 %
Layout	Slide the page over the hero	Off
Layout	Reveal the footer under the page	Off
Buttons and inputs	Button shape	Rounded
Layout	Card corner radius	14 px
Layout	Sheet corner radius	24 px
Motion	Reveal blur	0 px (same as the default)

Eden — 30 · 8 color schemes

Theme settings	Setting	What it sets
Design style	Style	Eden
Typography	Heading font	Libre Baskerville Regular
Typography	Body font	Lato Regular
Buttons and inputs	Input corner radius	3 px
Layout	Page width	1440 px (same as the default)
Layout	Page margin on desktop	56 px (same as the default)
Layout	Page margin on mobile	20 px (same as the default)
Layout	Full width, padded margin	20 px (same as the default)
Layout	Text direction	Automatic (follows language) (same as the default)
Colors	Default color scheme	Scheme 1 (same as the default)
Motion	Animation	Full (same as the default)
Motion	Reveal style	Rise (same as the default)
Motion	Reveal duration	520 ms (same as the default)
Motion	Reveal distance	18 px (same as the default)
Motion	Stagger	110 ms
Motion	Easing	Smooth (same as the default)
Custom code	Additional CSS	—
Typography	Heading case	As typed
Typography	Heading size	100 % (same as the default)
Typography	Heading line height	120 %
Typography	Heading letter spacing	0 %
Typography	Body text size	16 px
Typography	Body line height	150 %
Typography	Label letter spacing	6 %
Layout	Slide the page over the hero	Off
Layout	Reveal the footer under the page	Off
Buttons and inputs	Button shape	Square
Layout	Card corner radius	4 px
Layout	Sheet corner radius	8 px
Motion	Reveal blur	0 px (same as the default)