LOGOS

Header logo

settings.logo

Footer logo

settings.footer_logo

Region selector logo

settings.region_selector_logo

Favicon

settings.favicon · 32 × 32px

FONTS

Heading

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Heading · var(--font-heading)

Body

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Body / Sans · var(--font-sans)

TYPE STYLES

Heading 00

type-heading-0

—

Heading 01

type-heading-1

—

Heading 02

type-heading-2

—

Heading 03

type-heading-3

—

Heading 04

type-heading-4

—

Heading 05

type-heading-5

—

Heading 06

type-heading-4

—

Heading 07

type-heading-7

—

Heading 08

type-heading-4

—

Heading 09

type-heading-9

—

Heading 10

type-heading-10

—

Subhead 01

type-subheading-1

—

Subhead 02

type-subheading-2

—

Subhead 03

type-subheading-3

—

Subhead 04

type-subheading-4

—

Subhead 05

type-subheading-5

—

Subhead 06

type-subheading-6

—

Subhead 07

type-subheading-7

—

Subhead 08

type-subheading-8

—

HR

Text 1: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

type-text-1

—

Text 2: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

type-text-2

—

Text 3: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

type-text-3

—

Text 4: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

type-text-4

—

Text 5: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

type-text-5

—

Text 6: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

type-text-6

—

COLORS

Primary

Brand color — main CTAs, active links, focus rings, key highlights.

Primary 1 —

Primary 1 — BG Hover —

Greys

Neutrals for text and surfaces. Grey 90 for headings, Grey 60 for body, Grey 40 for muted/secondary text. Grey 05 / 10 / 20 for backgrounds and dividers.

Grey 05 —

Grey 10 —

Grey 20 —

Grey 40 —

Grey 60 —

Grey 80 —

Grey 90 —

Black / White

Foundational — high-contrast text, dark sections, and the page background.

Black —

White —

Status Success

Confirmations and positive states — order placed, form saved, item in stock.

Success 1 —

Success 2 —

Success 3 —

Success 4 —

Success 5 —

Success 6 —

Status Warning

Cautions and soft alerts — low stock, shipping delays, non-blocking validation.

Warning 1 —

Warning 2 —

Warning 3 —

Warning 4 —

Warning 5 —

Warning 6 —

Status Error

Failures and destructive actions — form errors, declined payment, removal confirmations.

Error 1 —

Error 2 —

Error 3 —

Error 4 —

Error 5 —

Error 6 —

BUTTONS

Primary

Primary Primary SM

Secondary

Secondary Secondary SM

Outline

Outline Outline SM

Outline White

Outline Secondary Outline Secondary SM

White

White White SM

Link

Link Link Icon

Link White

Link Link Icon

ANIMATED ICONS

Close Icons

Hamburger Icon

Play Icon

Plus Icon

STATIC ICONS

Header Icons

2

Social Icons

FORM ELEMENTS

Input Text

Text Input Label

Text Input Disabled Label

Input Email

Email Input Label

Email Input Disabled Label

Input Password

Password Input Label

Password Input Disabled Label

Input Tel

Tel Input Label

Tel Input Disabled Label

Select

Select Label

Select Disabled Label

Search

Input Checkbox

Checkbox Input

Checkbox Input Disabled

Input radio

Radio Input

Radio Input Disabled

Text Area

Textarea Label

Textarea Disabled Label

TABLE ELEMENTS

Heading 0	Heading 1	Heading 2	Heading 3	Heading 4	Heading 5
Row 0 / Column 0	Row 0 / Column 1	Row 0 / Column 2	Row 0 / Column 3	Row 0 / Column 4	Row 0 / Column 5
Row 1 / Column 0	Row 1 / Column 1	Row 1 / Column 2	Row 1 / Column 3	Row 1 / Column 4	Row 1 / Column 5
Row 2 / Column 0	Row 2 / Column 1	Row 2 / Column 2	Row 2 / Column 3	Row 2 / Column 4	Row 2 / Column 5
Row 3 / Column 0	Row 3 / Column 1	Row 3 / Column 2	Row 3 / Column 3	Row 3 / Column 4	Row 3 / Column 5
Row 4 / Column 0	Row 4 / Column 1	Row 4 / Column 2	Row 4 / Column 3	Row 4 / Column 4	Row 4 / Column 5
Row 5 / Column 0	Row 5 / Column 1	Row 5 / Column 2	Row 5 / Column 3	Row 5 / Column 4	Row 5 / Column 5

CONTAINER

Breakout

Breakout right

Breakout left

GRID

12 Columns

Inset Columns

Inset

Inset Medium

Inset Tight

GRID

24 Columns

Inset Columns

Inset

Inset Medium

Inset Tight

SECTION MARGINS

Top

Gap mt-4 md:mt-6 16px → 24px

XXS section-margin--t-xxs 32px → 80px

XS section-margin--t-xs 40px → 80px

SM section-margin--t-sm 60px → 100px

MD section-margin--t-md 80px → 120px

LG section-margin--t-lg 100px → 140px

XL section-margin--t-xl 120px → 160px

Bottom

Gap mb-4 md:mb-6 16px → 24px

XXS section-margin--b-xxs 32px → 40px

XS section-margin--b-xs 40px → 80px

SM section-margin--b-sm 60px → 100px

MD section-margin--b-md 80px → 120px

LG section-margin--b-lg 100px → 140px

XL section-margin--b-xl 120px → 160px

IMAGES

Product Card

Collections · Featured Collection section — aspect set via theme settings

Square (default) 1:1 1600 × 1600px

Landscape 5:4 1600 × 1280px

Product Gallery

Product Gallery section · Product Page — aspect set per section

Portrait 3:4 1800 × 2400px

Square 1:1 1800 × 1800px

Hero & Full Bleed

Hero Deluxe · Hero Basic · Hero Slider · Full Bleed Image · Collection Banner

Mobile image 2:3 1656 × 2484px

Desktop image 16:9 3840 × 2160px

Feature Card Grid

Feature Card Grid section

Mobile image 4:5 1600 × 2000px

Desktop image (1–2 cards) 3:2 2400 × 1600px

Fifty-Fifty Carousel

Fifty-Fifty Carousel section

Image 6:5 3200 × 2667px

Slider & Ride Gallery

Slider section · Ride Gallery section

Mobile image 4:5 1600 × 2000px

Desktop image 16:9 3840 × 2160px

Bike Cards

Bike Cards section

Image 5:4 1600 × 1280px

Promo Cards section

Image ~1:1 (729:790) 1440 × 1560px

Mini Collage & Review Collage

Mini Collage section · Review Collage section

Image 4:3 2880 × 2160px

Blog Post

Blog Post section (banner) · Featured Articles section (article card)

Banner — mobile 2:1 1600 × 800px

Banner — desktop 16:9 3840 × 2160px

Article card 1:1 1600 × 1600px

BACKGROUND VIDEOS

Aspect Ratios

Desktop 16:9 (aspect-video) 1920 × 1080px

Mobile 2:3 container 1080 × 1920px Breakpoint: ≤ 820px

Best Practices

Format MP4 (H.264 codec) — required by Shopify

File Size 5–15MB ideal; 30MB absolute maximum

Length 8–20 seconds; edit for seamless looping (match first and last frame)

Frame Rate 24–30fps

Audio Remove audio track entirely — background videos are always muted

Bitrate Desktop: 2–5 Mbps / Mobile: 1–2 Mbps

Style Guide

LOGOS

FONTS

TYPE STYLES

COLORS

BUTTONS

ANIMATED ICONS

STATIC ICONS

FORM ELEMENTS

TABLE ELEMENTS

CONTAINER

GRID

GRID

SECTION MARGINS

IMAGES

BACKGROUND VIDEOS