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 ערכות צבעים

הגדרות ערכת העיצוב	הגדרה	מה הוא מגדיר
Design style	Style	Rio (כמו ברירת המחדל)
Typography	Heading font	Jost Regular (כמו ברירת המחדל)
Typography	Body font	Jost Light (כמו ברירת המחדל)
Buttons and inputs	Input corner radius	16 px
Layout	Page width	1440 px (כמו ברירת המחדל)
Layout	Page margin on desktop	56 px (כמו ברירת המחדל)
Blog	Tag	Care
Blog	Tag	Fit
Blog	Tag	Style
Blog	Tag	Atelier
Layout	Page margin on mobile	20 px (כמו ברירת המחדל)
Layout	Full width, padded margin	20 px (כמו ברירת המחדל)
Layout	Text direction	Automatic (follows language) (כמו ברירת המחדל)
Colors	Default color scheme	ערכה 1 (כמו ברירת המחדל)
Motion	Animation	Full (כמו ברירת המחדל)
Motion	Reveal style	Rise (כמו ברירת המחדל)
Motion	Reveal duration	900 ms
Motion	Reveal distance	40 px
Motion	Stagger	90 ms (כמו ברירת המחדל)
Motion	Easing	Silk
Custom code	Additional CSS	—
Typography	Heading case	Uppercase (כמו ברירת המחדל)
Typography	Heading size	100 % (כמו ברירת המחדל)
Typography	Heading line height	100 % (כמו ברירת המחדל)
Typography	Heading letter spacing	-1 % (כמו ברירת המחדל)
Typography	Body text size	17 px (כמו ברירת המחדל)
Typography	Body line height	160 % (כמו ברירת המחדל)
Typography	Label letter spacing	10 % (כמו ברירת המחדל)
Buttons and inputs	Button shape	Pill (כמו ברירת המחדל)
Layout	Card corner radius	24 px (כמו ברירת המחדל)
Layout	Sheet corner radius	40 px (כמו ברירת המחדל)
Layout	Slide the page over the hero	פעיל (כמו ברירת המחדל)
Layout	Reveal the footer under the page	פעיל (כמו ברירת המחדל)
Motion	Reveal blur	0 px (כמו ברירת המחדל)
Cart	Free shipping threshold	3000

Sapir — 30 · 8 ערכות צבעים

הגדרות ערכת העיצוב	הגדרה	מה הוא מגדיר
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 (כמו ברירת המחדל)
Layout	Page margin on desktop	56 px (כמו ברירת המחדל)
Layout	Page margin on mobile	20 px (כמו ברירת המחדל)
Layout	Full width, padded margin	20 px (כמו ברירת המחדל)
Layout	Text direction	Automatic (follows language) (כמו ברירת המחדל)
Colors	Default color scheme	ערכה 1 (כמו ברירת המחדל)
Motion	Animation	Full (כמו ברירת המחדל)
Motion	Reveal style	Zoom
Motion	Reveal duration	760 ms
Motion	Reveal distance	18 px (כמו ברירת המחדל)
Motion	Stagger	130 ms
Motion	Easing	Gentle
Custom code	Additional CSS	—
Typography	Heading case	As typed
Typography	Heading size	100 % (כמו ברירת המחדל)
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	כבוי
Layout	Reveal the footer under the page	כבוי
Buttons and inputs	Button shape	Square
Layout	Card corner radius	2 px
Layout	Sheet corner radius	0 px
Motion	Reveal blur	0 px (כמו ברירת המחדל)

Ori — 30 · 8 ערכות צבעים

הגדרות ערכת העיצוב	הגדרה	מה הוא מגדיר
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 (כמו ברירת המחדל)
Layout	Page margin on desktop	56 px (כמו ברירת המחדל)
Layout	Page margin on mobile	20 px (כמו ברירת המחדל)
Layout	Full width, padded margin	20 px (כמו ברירת המחדל)
Layout	Text direction	Automatic (follows language) (כמו ברירת המחדל)
Colors	Default color scheme	ערכה 1 (כמו ברירת המחדל)
Motion	Animation	Full (כמו ברירת המחדל)
Motion	Reveal style	Rise (כמו ברירת המחדל)
Motion	Reveal duration	620 ms
Motion	Reveal distance	14 px
Motion	Stagger	90 ms (כמו ברירת המחדל)
Motion	Easing	Soft
Custom code	Additional CSS	—
Typography	Heading case	As typed
Typography	Heading size	100 % (כמו ברירת המחדל)
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	כבוי
Layout	Reveal the footer under the page	כבוי
Buttons and inputs	Button shape	Rounded
Layout	Card corner radius	14 px
Layout	Sheet corner radius	24 px
Motion	Reveal blur	0 px (כמו ברירת המחדל)

Eden — 30 · 8 ערכות צבעים

הגדרות ערכת העיצוב	הגדרה	מה הוא מגדיר
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 (כמו ברירת המחדל)
Layout	Page margin on desktop	56 px (כמו ברירת המחדל)
Layout	Page margin on mobile	20 px (כמו ברירת המחדל)
Layout	Full width, padded margin	20 px (כמו ברירת המחדל)
Layout	Text direction	Automatic (follows language) (כמו ברירת המחדל)
Colors	Default color scheme	ערכה 1 (כמו ברירת המחדל)
Motion	Animation	Full (כמו ברירת המחדל)
Motion	Reveal style	Rise (כמו ברירת המחדל)
Motion	Reveal duration	520 ms (כמו ברירת המחדל)
Motion	Reveal distance	18 px (כמו ברירת המחדל)
Motion	Stagger	110 ms
Motion	Easing	Smooth (כמו ברירת המחדל)
Custom code	Additional CSS	—
Typography	Heading case	As typed
Typography	Heading size	100 % (כמו ברירת המחדל)
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	כבוי
Layout	Reveal the footer under the page	כבוי
Buttons and inputs	Button shape	Square
Layout	Card corner radius	4 px
Layout	Sheet corner radius	8 px
Motion	Reveal blur	0 px (כמו ברירת המחדל)