Styles – Acorn Furniture

Typography | Desktop

Name	Size	Height	Spacing	Font	Sample
H1	60px	73px	-1%	Acorn Light	Lorem ipsum
H2	52px	68px	-1%	Acorn Light	Lorem ipsum
H3	42px	51px	0%	Acorn Regular	Lorem ipsum
H4	32px	43px	0%	Acorn Regular	Lorem ipsum
H5	23px	32px	0%	Acorn Regular	Lorem ipsum
H6	20px	30px	0%	Acorn Regular	Lorem ipsum
Paragraph Large	18px	26px	0%	Acorn Regular	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum dolor sit amet.
Paragraph	16px	23px	0%	Acorn Regular	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum dolor sit amet, consectetur adipiscing.
Paragraph Small	14px	Auto	0%	Acorn Regular	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum dolor sit amet, consectetur adipiscing.
Caption	15px	auto	0%	Acorn Regular	Lorem ipsum
Inline Link	16px	23px	0%	Acorn Regular	Lorem ipsum

Typography | Mobile

Name	Size	Height	Spacing	Font	Sample
H1	42px	50px	-1%	Acorn Light	Lorem ipsum
H2	33px	41px	-1%	Acorn Light	Lorem ipsum
H3	27px	33px	0%	Acorn Regular	Lorem ipsum
H4	22px	30px	0%	Acorn Regular	Lorem ipsum
H5	19px	25px	0%	Acorn Regular	Lorem ipsum
Paragraph Large	17px	24px	0%	Acorn Regular	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum dolor sit amet.
Paragraph	16px	23px	0%	Acorn Regular	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum dolor sit amet, consectetur adipiscing.
Paragraph Small	14px	18px	0%	Acorn Regular	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum dolor sit amet, consectetur adipiscing.
Caption	14px	18px	0%	Acorn Regular	Lorem ipsum
Inline Link	16px	23px	0%	Acorn Regular	Lorem ipsum

Buttons | Desktop

Type	Default	Hover	Selected / Clicked	Notes
Arrow Button Dark	Explore Our Range	Explore Our Range		Arrow animates on hover
Arrow Button Light	Explore Our Range	Explore Our Range		Arrow animates on hover
Underline Button Dark	Button	Button
Underline Button Light	Button	Button
Underline Button Small	Button	Button
Outline Button Small	Button	Button
Fill Button	Button	Button
Add to Quote	Add to Quote	Add to Quote		Size is responsive with the PDP design
Filter Apply CTA	Apply	Apply		Size is responsive with the filter modal
Filter Apply CTA	Close	Close		Size is responsive with the filter modal
Gallery/Carousel Arrow				Note Dark Grey is inactive and Charcoal is active
Filter Select	Filter		Filter
Variant Select	Variant		Variant
Form Field				Size is responsive with page design / application
Notes Field				Size is responsive with page design / application

Buttons | Mobile

Type	Default	Hover	Selected / Clicked	Notes
Arrow Button Dark	Explore Our Range	Explore Our Range
Arrow Button Light	Explore Our Range	Explore Our Range
Underline Button Dark	Button	Button
Underline Button Light	Button	Button
Underline Button Small	Button	Button
Outline Button Small	Button	Button
Fill Button	Button	Button
Add to Quote	Add to Quote			Size is responsive with the PDP design
Filter Apply CTA	Apply			Size is responsive with the filter modal
Filter Apply CTA	Close			Size is responsive with the filter modal
Gallery/Carousel Arrow				Note Dark Grey is inactive and Charcoal is active
Filter Select	Filter		Filter
Variant Select	Variant		Variant
Form Field				Size is responsive with page design / application
Notes Field				Size is responsive with page design / application

Spacing & Radius

Spacing	Example
Desktop	15px 25px 35px 70px 100px 140px
Mobile	15px 20px 25px 50px 70px 100px

Icon Set

Account	Search	Cart	Cart (items)	Wishlist (Default)	Wishlist (Added)	Made to Order
Timber Regeneration	Sustainability	Stackable	Size Options	Pressure Relieving	Lightweight	Care Friendly