Styleguide

Container

The container defines the layout structure of our website. It follows a 12-column grid system with a maximum width of 1920px (120rem).

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

Icons

Icons are visual symbols used to communicate actions, concepts, and status quickly and consistently across the interface. This section defines the icons available in the project.

  • Account
  • Add to Cart
  • Alert
  • Arrow Right
  • Arrow
  • Available
  • Calendar
  • Caret
  • Cart
  • Checkmark Burst
  • Checkmark
  • Chevron Down
  • Chevron Left
  • Chevron Right (Fat)
  • Chevron Right
  • Close
  • Delete
  • Discount
  • Double Chevron
  • Edit
  • Error
  • External
  • Filter
  • Filters Close
  • Grid Default
  • Grid Dense
  • Grid
  • Heart
  • Hide
  • Info
  • Inventory
  • List
  • Menu
  • Minus
  • One Column Mobile
  • Orders
  • Pause
  • Play
  • Plus
  • Reset
  • Search
  • Service
  • Shopify
  • Show
  • Sun
  • Unavailable
  • User
  • Warning
  • Water

Color palette

Colors are configured under Theme settings › Colors as a single global palette (no per-section color schemes) and rendered as CSS custom properties by snippets/color-palette.liquid.

Base palette

Swatches configured in the theme settings color_palette picker.

#ffffff
#000000
#f2ede9
#f6f2ef
#666666
#002001
#36573b
#6cc24a
#addc91
#ffd900
#de1035
#DDD9D5

Page

--color-background
--color-foreground

Primary button

--color-primary-button-background
--color-primary-button-text
--color-primary-button-border
--color-primary-button-hover-background
--color-primary-button-hover-text
--color-primary-button-hover-border

Secondary button

--color-secondary-button-background
--color-secondary-button-text
--color-secondary-button-border
--color-secondary-button-hover-background
--color-secondary-button-hover-text
--color-secondary-button-hover-border

Tertiary button

--color-tertiary-button-background
--color-tertiary-button-text
--color-tertiary-button-border
--color-tertiary-button-hover-background
--color-tertiary-button-hover-text
--color-tertiary-button-hover-border

Inputs

--color-input-background
--color-input-text
--color-input-border

Variants

--color-variant-background
--color-variant-text
--color-variant-border
--color-variant-hover-background
--color-variant-hover-text
--color-variant-hover-border

Selected variant

--color-selected-variant-background
--color-selected-variant-text
--color-selected-variant-border
--color-selected-variant-hover-background
--color-selected-variant-hover-text
--color-selected-variant-hover-border

Brand colors

Global brand color tokens from snippets/theme-styles-variables.liquid. Reference these with var(--color-brand-*) in component CSS.

--color-brand-dark-forest-green #002001
--color-brand-pine-green #36573B
--color-brand-grass-green #6CC24A
--color-brand-faded-green #ADDC91
--color-brand-call-to-action #FFD900
--color-brand-white #FFFFFF
--color-brand-off-white #F6F2EF
--color-brand-creme #F2EDE9
--color-brand-dark-creme #EDE8E4
--color-brand-smudgy #DDD9D5
--color-brand-gray #666666
--color-brand-positive #049001
--color-brand-negative #DE1035
--color-brand-alert #B13215

Typography

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

Font Families

Hanken Grotesk — How vexingly quick daft zebras jump!

Recoleta — 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!

Type presets

Configured in theme settings. Use var(--font-{name}--size) for preset-matched sizing.

Aa --font-h1--size 56px
Aa --font-h2--size 48px
Aa --font-h3--size 32px
Aa --font-h4--size 24px
Aa --font-h5--size 14px
Aa --font-h6--size 12px
Aa --font-paragraph--size 16px

Font size scale

Static utility tokens. Use var(--font-size--*) for one-off sizing outside a type preset.

Aa --font-size--6xl 3.5rem / 56px
Aa --font-size--5xl 3rem / 48px
Aa --font-size--4xl 2.5rem / 40px
Aa --font-size--3xl 2rem / 32px
Aa --font-size--2xl 1.5rem / 24px
Aa --font-size--xl 1.25rem / 20px
Aa --font-size--lg 1.125rem / 18px
Aa --font-size--md 1rem / 16px
Aa --font-size--sm 0.875rem / 14px
Aa --font-size--xs 0.8125rem / 13px
Aa --font-size--2xs 0.75rem / 12px
Aa --font-size--3xs 0.625rem / 10px

Body

Regular — How vexingly quick daft zebras jump!

Qweeker is a platform built for communities who care about how they spend their time. Whether you're organising local meetups or discovering new experiences, we make it easy to connect, plan, and show up.

SM — How vexingly quick daft zebras jump!

Qweeker is a platform built for communities who care about how they spend their time. Whether you're organising local meetups or discovering new experiences, we make it easy to connect, plan, and show up.

XS — How vexingly quick daft zebras jump!

Qweeker is a platform built for communities who care about how they spend their time. Whether you're organising local meetups or discovering new experiences, we make it easy to connect, plan, and show up.

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!

Buttons

Buttons are used to trigger actions and should stand out while maintaining a clear visual hierarchy. Colors and border-radius are configured in theme settings.

Primary Secondary Tertiary

Search button

The header search action deviates from the standard buttons. It is an icon-only button using the brand grass green background with a dark forest green icon, and lightens to faded green on hover. The header account action shares this treatment; the cart action uses the same icon-button style with its own colors (documented below).

Cart button

The header cart action uses the same icon-button style as the search action, but with the brand pine green background and a white icon. On hover it lightens to a lighter shade of pine green.

Add to cart button

The add to cart button is a primary button with a leading cart icon next to the label. On a successful add it briefly swaps the label for an animated checkmark burst. It is shown here in its default state.

Form

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