Styleguide
Our style guide ensures consistency, clarity, and accessibility across our website. From typography to color schemes, we define the elements that shape a seamless user experience. Follow these guidelines to maintain a cohesive and inclusive design.
Container
The container defines the layout structure of our website. It follows a 12-column grid system with a maximum width of 1440px.
Color schemes
Color schemes are managed in the Shopify admin and define the site's colors.
Color-scheme-1
--color-foreground: rgb(43,43,43);
--color-foreground-light: rgb(145,145,145);
--color-background: rgb(255,255,255);
--color-shadow: rgb(0,0,0);
--color-button: rgb(177,106,58);
--color-button-hover: rgb(18,18,18);
--color-button-text: rgb(255,255,255);
--color-secondary-button: rgb(255,255,255);
--color-secondary-button-text: rgb(0,0,0);
--color-link: rgb(0,0,0);
--color-border: rgb(221,221,221);
Color-scheme-2
--color-foreground: rgb(43,43,43);
--color-foreground-light: rgb(145,145,145);
--color-background: rgb(246,246,246);
--color-shadow: rgb(0,0,0);
--color-button: rgb(177,106,58);
--color-button-hover: rgb(18,18,18);
--color-button-text: rgb(255,255,255);
--color-secondary-button: rgb(246,246,246);
--color-secondary-button-text: rgb(43,43,43);
--color-link: rgb(43,43,43);
--color-border: rgb(221,221,221);
Color-scheme-3
--color-foreground: rgb(255,255,255);
--color-foreground-light: rgb(145,145,145);
--color-background: rgb(36,40,51);
--color-shadow: rgb(18,18,18);
--color-button: rgb(177,106,58);
--color-button-hover: rgb(18,18,18);
--color-button-text: rgb(255,255,255);
--color-secondary-button: rgb(36,40,51);
--color-secondary-button-text: rgb(217,217,217);
--color-link: rgb(217,217,217);
--color-border: rgb(221,221,221);
Color-scheme-4
--color-foreground: rgb(18,18,18);
--color-foreground-light: rgb(145,145,145);
--color-background: rgb(231,209,194);
--color-shadow: rgb(18,18,18);
--color-button: rgb(177,106,58);
--color-button-hover: rgb(18,18,18);
--color-button-text: rgb(255,255,255);
--color-secondary-button: rgb(231,209,194);
--color-secondary-button-text: rgb(255,255,255);
--color-link: rgb(255,255,255);
--color-border: rgb(221,221,221);
Color-scheme-5
--color-foreground: rgb(255,255,255);
--color-foreground-light: rgb(145,145,145);
--color-background: rgb(177,106,58);
--color-shadow: rgb(18,18,18);
--color-button: rgb(221,221,221);
--color-button-hover: rgb(18,18,18);
--color-button-text: rgb(255,255,255);
--color-secondary-button: rgb(177,106,58);
--color-secondary-button-text: rgb(255,255,255);
--color-link: rgb(255,255,255);
--color-border: rgb(221,221,221);
Typography
Typography is structured using a predefined set of font families, sizes, and weights.
Font Families
Font Body - How vexingly quick daft zebras jump!
Font Heading - How vexingly quick daft zebras jump!
Font Accent - How vexingly quick daft zebras jump!
Headings
H0 - How vexingly quick daft zebras jump!H1 - How vexingly quick daft zebras jump!
H2 - How vexingly quick daft zebras jump!
H3 - How vexingly quick daft zebras jump!
H4 - How vexingly quick daft zebras jump!
H5 - How vexingly quick daft zebras jump!
H6 - How vexingly quick daft zebras jump!
Body
P - How vexingly quick daft zebras jump!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lists
- UL - How vexingly quick daft zebras jump!
- UL - How vexingly quick daft zebras jump!
- UL - How vexingly quick daft zebras jump!
- OL - How vexingly quick daft zebras jump!
- OL - How vexingly quick daft zebras jump!
- OL - How vexingly quick daft zebras jump!
Blockquote
BLOCKQUOTE - How vexingly quick daft zebras jump!
Subtext
.subtext - How vexingly quick daft zebras jump!
.subtext--light - How vexingly quick daft zebras jump!
Links
Links are used to navigate between pages, without drawing too much attention to the element.
Buttons
Buttons are used to trigger actions and should stand out while maintaining a clear visual hierarchy.
Form
The base form styling used in contact forms throughout the shop.
