JAG Style Guide

A living reference of all custom JAG design-system elements added to the theme.

1. Typography

Headings

Sizes switch from mobile to desktop at the 700px breakpoint.

Large Display

.jag-display-lg — Desktop: 40px · Mobile: 28px / 450 / uppercase

Small Display

.jag-display-sm — Desktop: 24px · Mobile: 20px / 450 / uppercase

Heading 1

.jag-h1 — Desktop: 14px · Mobile: 13px / 400 / uppercase

Heading 2

.jag-h2 — Desktop: 12px · Mobile: 13px / 400 / uppercase

Heading 3

.jag-h3 — Desktop: 12px · Mobile: 12px / 400 / uppercase

Heading 4

.jag-h4 — Desktop: 10px · Mobile: 12px / 400 / uppercase

Heading 5

.jag-h5 — Desktop: 10px · Mobile: 10px / 400 / uppercase

Heading 6

.jag-h6 — Desktop: 10px · Mobile: 10px / 400 / uppercase

Paragraph

Small Regular

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-sm — 13px / 400

Small Bold

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-sm-bold — 13px / 450

Small Underline

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-sm-underline — 13px / 400 / underline

Small Strikethrough

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-sm-strike — 13px / 400 / line-through

X-Small Regular

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-xs — 12px / 400

X-Small Bold

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-xs-bold — 12px / 450

X-Small Underline

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-xs-underline — 12px / 400 / underline

X-Small Strikethrough

Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

.jag-body-xs-strike — 12px / 400 / line-through

Button & Badge Text

Medium

.jag-text-button-md — 13px / 400 / uppercase

Small

.jag-text-button-sm — 12px / 400 / uppercase

Badge

.jag-text-badge — 11px / 400 / uppercase

Rich Text

Example of unordered list
Example of unordered list
Example of unordered list

.jag-richtext ul — 12px / 400 / disc

Example of ordered list
Example of ordered list
Example of ordered list

.jag-richtext ol — 12px / 400 / decimal

Text Link

.jag-text-link — 12px / 400 / underline

Single Line Break

Lorem ipsum dolor sit amet consectetur.

.jag-richtext — 12px / 400

Casing

Headings / Subheadings

text-transform: uppercase

Paragraph text uses sentence-case

text-transform: none (sentence-case)

Buttons & Links

text-transform: uppercase

Badges

text-transform: uppercase

2. Colour Palette

Brand

Persian Plum

Bone White

Denim

Black

Secondary

Celeste

Sage

Chocolate

Butter

Azzurro

Bianca

Crema

Biscotti

Dusty Rose

Cocoa

Neutrals

Primary Grey

Secondary Grey

Tertiary Grey

Mid Grey

Light Grey

3. Buttons

Solid — Black

Solid — Accent

Solid — White

Outline — Black

Outline — Accent

Outline — White

Icon Buttons

Text Buttons

Text Link Buttons

Full-width (stretch)

4. Badges

Default Size

Black White Sale New

Small Size

Black White Sale New

With Icons

Wishlist New Arrival Trending

5. Tabs

Small Tabs

This is the Best Sellers tab panel content.

Large Tabs

This is the Details panel. Click the other tabs to switch.

6. Accordions

Basic (single open per group)

Description

Made from 100% organic cotton, this piece features a relaxed fit and classic wash. Designed in Australia for everyday comfort and effortless style.

Size & Fit

Model is 175cm tall and wears size 8. Relaxed fit through the body with a straight leg.

Shipping & Returns

Free standard shipping on orders over $100. Easy returns within 30 days of purchase.

With Icons, Secondary Labels & Meta

Colour(5)

Black, White, Indigo, Stone, Olive

Size(6)

6, 8, 10, 12, 14, 16

DeliveryFree

Free standard shipping Australia-wide. Express shipping available.

Open by Default

Care Instructions

Machine wash cold with similar colours. Do not bleach. Tumble dry low. Warm iron if needed.

7. Tags / Filter Chips

8. Tooltips

Hover to reveal

Black / bottom-right White / bottom-center Accent / bottom-left

Black / top-right White / top-center Accent / top-left

9. Icons

Navigation

arrow-down

arrow-up

arrow-left

arrow-right

arrow-up-right

arrow-drag

arrow-swap-h

arrow-swap-v

menu

close

plus

minus

tick

Search

search

zoom-in

zoom-out

UI

bag

account

wishlist

wishlist-filled

instagram

grid-1

grid-2

grid-4

grid-6

eye

eye-off

Content

image

calendar

email

Commerce

map-pin

geo-location

phone

clock

bin

filter

chat

chat-operator

Social

facebook

tiktok

Ratings

star-full

star-half

star-empty

Loading

loading-wheel-large

loading-wheel-small

loading-spinner

10. Icon + Label

Designed in Australia

Easy 30-day returns

Free shipping over $100

Same-day dispatch

Live chat support

Email us anytime

11. Swatches

12. Breadcrumbs

Light background (black text)

Dark background (white text)

13. Pagination

Pagination requires a Shopify paginate object. Below is a static HTML preview of the pagination styles.

14. Carousel Indicator

Large

Small

15. Size Indicator

Light — True to size (50)

Slim fit True to size Oversized

Light — Slim fit (20)

Slim fit True to size Oversized

Dark — Oversized (80)

Slim fit True to size Oversized

16. Search Input

Light mode

Default

With value (completed)

No search icon

Disabled

Dark mode

Default

With value (completed)

Disabled

17. Checkboxes

Default style

Unchecked(23) Checked(23) Indeterminate(23) Disabled(23) Disabled checked(23)

Colour style

Unchecked(23) Checked(23) Indeterminate(23) Disabled(23)

Icon checkbox

Default(23) Default(23) Default(23)

18. Radio Buttons

Standard radio

Option A Option B Option C Disabled Disabled selected

Flag radio

Uses SVG flag assets (jag-flag-{code}.svg) via the flag parameter.

Australia New Zealand Disabled

19. Input Fields

Default (light)

Label

With helper text

Label

Error & warning states

Email

Username

With trailing icon

Search

With submit button

Email

Textarea

Message

500 characters max

Dark mode

Label

Email

Label

20. Password Input

Light

Password

Dark

Password

21. Select

Default (light)

Dark mode

22. Dropdown (Filterable)

Checkbox dropdown with search

Radio dropdown (no search)

Flag radio dropdown with search

23. File Upload

Light

Label text

Dark

Label text

24. Toggle

Default

Switch label Switch label

Disabled

Switch label Switch label

25. Quantity Selector

Default

26. Size Chips

Light — States

8 10 Low stock 12 Last one 14 16 Notify me 18

Dark — States

8 10 Low stock 12 Last one 14 16 Notify me 18

27. Spacing Scale

--jag-space-2

--jag-space-4

--jag-space-8

--jag-space-12

--jag-space-16

--jag-space-24

--jag-space-32

--jag-space-40

--jag-space-48

--jag-space-64

--jag-space-80

--jag-space-96

--jag-space-128

--jag-space-160