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 1856px.

1
2
3
4
5
6
7
8
9
10
11
12

Icons

The following icons are added to the theme, and some overwrite existing icons (*).

Default icons

  • Account *
  • Arrow Right *
  • Basket
  • Cart *
  • Checkmark *
  • Chevron Right *
  • Chevron Down *
  • Chevron Left *
  • Close *
  • Filter *
  • Magic
  • Menu *
  • Minus *
  • Plus *
  • Search *
  • Star Empty
  • Star Half
  • Star Filled
  • Thumbs down
  • Thumbs up

Payment methods

  • Apple Pay
  • iDeal
  • Klarna
  • MasterCard
  • PayPal
  • Visa

Social Media

  • Facebook
  • Instagram
  • Pinterest

Color schemes

Color schemes are managed in the Shopify admin and define the site's colors.

Color-scheme-1
--color-background: #ffffff
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #d9d9d9
--color-shadow: #000000
--color-film: #ededed
--color-focus: #33acff
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #40c3c3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #dcf6da
--color-selected-variant-border: #22c04a
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #2add70
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-2
--color-background: #ffd940
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-3
--color-background: #ffbd40
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-4
--color-background: #ff8026
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-5
--color-background: #ff4d33
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-6
--color-background: #f266bf
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-7
--color-background: #c85d85
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-8
--color-background: #cc1400
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-9
--color-background: #6d1414
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #ffffff
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #ffffff
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-10
--color-background: #830065
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-11
--color-background: #6c1d45
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-12
--color-background: #685bc7
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-13
--color-background: #001e62
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-14
--color-background: #40c3c3
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-15
--color-background: #00677f
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-16
--color-background: #41887e
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-17
--color-background: #d9ffff
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-18
--color-background: #c0f2ea
--color-foreground: #000000
--color-foreground-heading: #000000
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Color-scheme-19
--color-background: #737373
--color-foreground: #ffffff
--color-foreground-heading: #ffffff
--color-caption: #737373
--color-primary: #737373
--color-primary-hover: #000000
--color-border: #b7b7b7
--color-shadow: #000000
--color-film: #ededed
--color-focus: #ff4d33
--color-primary-button-text: #ffffff
--color-primary-button-background: #000000
--color-primary-button-border: #000000
--color-primary-button-hover-text: #000000
--color-primary-button-hover-background: #f3f3f3
--color-primary-button-hover-border: #f3f3f3
--color-secondary-button-text: #000000
--color-secondary-button-background: rgba(0,0,0,0)
--color-secondary-button-border: #000000
--color-secondary-button-hover-text: #000000
--color-secondary-button-hover-background: #f3f3f3
--color-secondary-button-hover-border: #f3f3f3
--color-input-background: #ffffff
--color-input-text: #000000
--color-input-border: #000000
--color-input-hover-background: #ffffff
--color-variant-background: #ffffff
--color-variant-border: #000000
--color-variant-text: #000000
--color-variant-hover-background: #f3f3f3
--color-variant-hover-text: #000000
--color-variant-hover-border: #f3f3f3
--color-selected-variant-background: #ff4d33
--color-selected-variant-border: #ff4d33
--color-selected-variant-text: #ffffff
--color-selected-variant-hover-background: #ff4d33
--color-selected-variant-hover-text: #ffffff
--color-selected-variant-hover-border: #000000
--input-disabled-background-color: rgb(from var(--color-foreground) r g b / 10%)
--input-disabled-border-color: rgb(from var(--color-foreground) r g b / 5%)
--input-disabled-text-color: rgb(from var(--color-foreground) r g b / 50%)
--color-foreground-muted: rgb(from var(--color-foreground) r g b / 60%)

Typography

Typography is structured using a predefined set of font families, sizes, and weights.

Font Families

Helvetica Neue - How vexingly quick daft zebras jump!

Headings

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!
  1. OL - How vexingly quick daft zebras jump!
  2. OL - How vexingly quick daft zebras jump!
  3. OL - How vexingly quick daft zebras jump!

Links

Links are used to navigate between pages, without drawing too much attention to the element.

Inline text link

Text link label

Buttons

Buttons are used to trigger actions and should stand out while maintaining a clear visual hierarchy.

Default

Button label Button label Button label Button label

Small

Button label Button label Button label Button label

Form

The base form styling used in contact forms throughout the shop.