Typography

Heading, body, and utility text styles defined in branding.css

h1 var(--text-h1) · weight 700 · line-height 1 · letter-spacing -0.06em

The quick brown fox jumps over the lazy dog

h2 var(--text-h2) · weight 700 · line-height 1 · letter-spacing -0.06em

The quick brown fox jumps over the lazy dog

h3 var(--text-h3) · weight 700 · line-height 1 · letter-spacing -0.06em

The quick brown fox jumps over the lazy dog

h4 var(--text-h4) · weight 700 · line-height 1 · letter-spacing -0.04em

The quick brown fox jumps over the lazy dog

h5 var(--text-h5) · weight 700 · line-height 1 · letter-spacing -0.04em

The quick brown fox jumps over the lazy dog

h6 var(--text-h6) · weight 700 · line-height 1 · letter-spacing -0.04em

The quick brown fox jumps over the lazy dog

paragraph var(--text-paragraph) · weight 400 · line-height 1.4 · letter-spacing 0em

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly.

subheading var(--text-subheading) · weight 300 · line-height 1 · letter-spacing 0.15em · uppercase

The quick brown fox jumps over the lazy dog

accent font-family: var(--font-accent)

The quick brown fox jumps over the lazy dog

Icons

SVG icons rendered via {% render 'icon', icon: 'name' %} inside .svg-wrapper

central / navigation --icon-size-sm · --icon-stroke-width · currentColor
.svg-wrapper
snippets/icon.liquid
central-search
central-cart
central-globe
central-account
central-heart
central-hamburger
central-close
ui / interface --icon-size-sm · --icon-stroke-width · currentColor
caret
double-sided-caret
arrow
next
previous
cart
heart
eye
play
share
lock
error
checkmark
check_box
clipboard
question_mark
chat_bubble
product / commerce --icon-size-sm · currentColor · filled paths
price_tag
truck
box
plane
return
ruler
shirt
shoe
pants
silhouette
stopwatch
map_pin
recycle
serving_dish
star
full-star
half-star
ingredients / dietary --icon-size-sm · currentColor · filled paths
apple
banana
bottle
carrot
dairy
dairy_free
gluten_free
leaf
leather
lipstick
lightning_bolt
nut_free
paw_print
pepper
perfume
plant
fire
snowflake
iron
dryer
washing
social --icon-size-sm · currentColor · brand icons
instagram
facebook
x
twitter
tiktok
youtube
pinterest
linkedin
bluesky
threads
whatsapp
snapchat
spotify
discord
tumblr
vimeo
mastodon
reddit
telegram
twitch
email
apc (custom) --icon-size-sm · currentColor · custom APA icons
apc-account
apc-cart
3d-model

Buttons

Primary, secondary, and link button styles across all sizes

Primary
Small Medium Large
Secondary
Small Medium Large
Link
Small Medium Large
Disabled

Form Fields

Text inputs, textareas, checkboxes, and toggles with states

text-input --color-input-* · --button-m · --button-m--border-radius · --button-m--padding-inline
.field__input
assets/base.css blocks/contact-form.liquid blocks/email-signup.liquid snippets/cart-discount.liquid blocks/_search-input.liquid snippets/price-filter.liquid
default
error
Please enter a valid email
disabled
textarea --color-border · --color-background · --button-m--border-radius · --spacing-s
.contact-form-block
blocks/contact-form.liquid snippets/cart-note.liquid
checkbox --checkbox-size · --color-input-* · icon-checkmark.svg
.checkbox
assets/base.css snippets/checkbox.liquid snippets/list-filter.liquid
default
checked
disabled
toggle --color-border · --color-text · --animation-speed
.toggle
snippets/toggle.liquid snippets/list-filter.liquid blocks/filters.liquid
off
on
disabled

Product Card

Card layout with typography, swatches, and color scheme inheritance

product-card gap · color scheme · padding
.product-card
blocks/_product-card.liquid blocks/_product-card-media.liquid blocks/_product-badges.liquid snippets/variant-swatches.liquid
  • Sale
  • New

Brand Name

Product Title

CHF 39.00 CHF 49.00

Product Information

Variant pickers, buy buttons, availability, and accordion — as seen on the PDP

variant-picker (swatches) --variant-picker-swatch-* · --color-variant-* · :has(:checked) outline
.variant-picker
snippets/variant-main-picker.liquid snippets/variant-swatches.liquid snippets/list-filter.liquid
Color: White
variant-picker (buttons) --options-border-radius · --color-variant-* · --color-selected-variant-* · equal-width grid
.variant-picker
snippets/variant-main-picker.liquid blocks/variant-picker.liquid
Size: M
variant-picker (dropdown) --color-input-* · --style-border-radius-inputs · select element
.variant-picker
snippets/variant-main-picker.liquid blocks/variant-picker.liquid
variant-picker (thumbnails) --button-variant--border-radius · swatch--thumbnail · --swatch-background
.variant-option__button-label--has-thumbnail
snippets/variant-main-picker.liquid snippets/swatch.liquid
Color: Clear
buy-buttons quantity-selector · add-to-cart · --button-m · --color-input-*
.buy-buttons-block
blocks/buy-buttons.liquid snippets/quantity-selector.liquid snippets/add-to-cart-button.liquid
availability data-stock-status · indicator colors · --font-size-body-s
.availability-block
blocks/product-availability.liquid
in stock In stock
low stock Only 3 left
out of stock Out of stock
accordion details/summary · --color-border · --spacing-s · icon-caret
.accordion-block
blocks/accordion.liquid blocks/_accordion-row.liquid
Description

Premium cotton blend fabric with a relaxed fit. Features a ribbed neckline and reinforced seams for lasting comfort.

Sizing

Model is 5'10" / 178cm wearing size M. Runs true to size, order your usual size.

Materials & care

60% Cotton, 40% Polyester. Machine wash cold, tumble dry low. Do not iron.

Modals & Dialogs

Dialog modals, newsletter popup, configurable popup launcher, and cart notification

back-in-stock-modal dialog-modal · --spacing-m · max-width: 28rem · Klaviyo API
.back-in-stock-modal
snippets/back-in-stock-modal.liquid assets/back-in-stock.js

Get notified

Register to receive a notification when this item comes back in stock.
klaviyo-newsletter-modal dialog-modal · image + content layout · toggle lists · Klaviyo API
.klaviyo-newsletter-modal
snippets/klaviyo-newsletter-modal.liquid assets/klaviyo-newsletter-modal.js

Stay in the loop

Be the first to know

Subscribe for exclusive offers and new arrivals.

By signing up, you agree to our privacy policy.
popup-launcher-modal dialog-modal · size variants · drawer variant · --popup-modal-width
.popup-launcher-modal
blocks/popup-launcher.liquid assets/dialog.js
small

Popup content

This is a small modal for focused content like confirmations or simple messages.

medium

Popup content

This is a medium modal for forms, product details, or richer content.

drawer

Drawer content

Slides in from the right. Used for cart, filters, or detailed product info.

cart-notification popover API · grid layout · --media-width · anchor positioning
.cart-notification
snippets/cart-notification.liquid snippets/cart-notification-content.liquid assets/cart-notification.js

Product Title

White / M CHF 39.00
View cart Continue
sticky-buy-button position: fixed · grid layout · --media-width · IntersectionObserver
.sticky-buy-button
snippets/sticky-buy-button.liquid assets/sticky-buy-button.js
Product Title
CHF 39.00
localization-modal dialog-modal · localization-form · country/language selects · geolocalization
.localization-modal
snippets/localization-modal.liquid snippets/localization-form.liquid blocks/_localization-popup.liquid assets/localization-form.js

Ihr Standort ist auf Schweiz eingestellt

Wenn Sie auf unserer Schweiz-Seite einkaufen

  • Ships to 1 country
  • Prices are in local currency
  • Product assortment may vary
search-modal dialog-modal · predictive-search · ⌘K shortcut · --search-border-radius
.search-modal
snippets/search-modal.liquid snippets/predictive-search.liquid assets/predictive-search.js

Product Grid Filters

Horizontal and vertical facet filtering with sorting, price range, pills, and checkbox inputs

facets--horizontal facets-form · overflow-list · floating-panel · accordion · --facets-form-horizontal-gap
.facets.facets--horizontal
blocks/filters.liquid snippets/list-filter.liquid snippets/price-filter.liquid snippets/sorting.liquid assets/facets.js
Availability
Price
to
The highest price is CHF 895.00
Material
Color
Brand
Size
Category
3 items
Sort
facets--vertical facets-form · accordion open · checkbox · pill · price-range · --facets-panel-height
.facets.facets--vertical
blocks/filters.liquid snippets/list-filter.liquid snippets/price-filter.liquid snippets/facets-actions.liquid assets/facets.js

Filter

Color
Size
Price
–
The highest price is CHF 500.00

Payment & Social Icons

Payment method icons from Shopify and social media link icons

payment-icons payment_type_svg_tag · shop.enabled_payment_types · --payment-icon-size
.payment-icons
blocks/payment-icons.liquid
  • American Express
  • Apple Pay
  • Bancontact
  • Google Pay
  • iDEAL Wero
  • Maestro
  • Mastercard
  • Shop Pay
  • Visa
social-links icon snippet · URL-based platform detection · --icon-size
.social-links-block
blocks/social-links.liquid blocks/_social-link.liquid