Style Guide

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body

Caption

Utility

Pullquote

Colors

Darkest

#2B2727

Dark

#717171

Neutral

#B3B2B1

Light

#F6EDE0

Lighter

#FEF6EB

Lightest

#FFFFFF

Brand 01

#AB4824

Focus

#3B52E8

Error

#DA1818

Default - Color Scheme 1

Primary

Foreground

Foreground Secondary

Background

Background Secondary

Background Tertiary

Border

Shadow

Link

Disabled

Focus

Error

Inverse - Color Scheme 2

Primary

Foreground

Foreground Secondary

Background

Background Secondary

Background Tertiary

Border

Shadow

Link

Disabled

Focus

Error

Buttons

Spacing & Radius

Spacing

Margin

.m-2xs
.m-xs
.m-sm
.m-md
.m-lg
.m-xl
.m-2xl
.m-3xl
.mb-2xs
.mb-xs
.mb-sm
.mb-md
.mb-lg
.mb-xl
.mb-2xl
.mb-3xl
.mt-2xs
.mt-xs
.mt-sm
.mt-md
.mt-lg
.mt-xl
.mt-2xl
.mt-3xl
.mv-2xs
.mv-xs
.mv-sm
.mv-md
.mv-lg
.mv-xl
.mv-2xl
.mv-3xl
.mh-2xs
.mh-xs
.mh-sm
.mh-md
.mh-lg
.mh-xl
.mh-2xl
.mh-3xl
.ml-2xs
.ml-xs
.ml-sm
.ml-md
.ml-lg
.ml-xl
.ml-2xl
.ml-3xl
.mr-2xs
.mr-xs
.mr-sm
.mr-md
.mr-lg
.mr-xl
.mr-2xl
.mr-3xl

Padding

.p-2xs
.p-xs
.p-sm
.p-md
.p-lg
.p-xl
.p-2xl
.p-3xl
.pb-2xs
.pb-xs
.pb-sm
.pb-md
.pb-lg
.pb-xl
.pb-2xl
.pb-3xl
.pt-2xs
.pt-xs
.pt-sm
.pt-md
.pt-lg
.pt-xl
.pt-2xl
.pt-3xl
.pv-2xs
.pv-xs
.pv-sm
.pv-md
.pv-lg
.pv-xl
.pv-2xl
.pv-3xl
.ph-2xs
.ph-xs
.ph-sm
.ph-md
.ph-lg
.ph-xl
.ph-2xl
.ph-3xl
.pl-2xs
.pl-xs
.pl-sm
.pl-md
.pl-lg
.pl-xl
.pl-2xl
.pl-3xl
.pr-2xs
.pr-xs
.pr-sm
.pr-md
.pr-lg
.pr-xl
.pr-2xl
.pr-3xl

Icons

account

arrow

arrow-link

arrow-path

chat-bubble

chevron

close

envelope

error

filter

hamburger

info

minus

pause

phone

play

plus

search

Form Elements

Text Input

This is an error message.

Textarea

This is an error message.

Select

This is an error message.

Radio

Checkbox

UI Components

Accordion

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Dropdowns

Tabs

Breadcrumbs

Pagination

Carousel Pagination

Scroll Stack

2026 Sherpa Bomber Jacket

2026 Sherpa Bomber Jacket

2026 Sherpa Bomber Jacket

€108,95
€108,95