Styleguide

Design Tokens

Colors

Text Colors

text-primary

text-secondary

text-faint

text-disabled

text-inverse

text-accent-1

text-critical

text-success

text-warning

text-info

link-default

text-link-default

text-link-hover

text-sale

Background Colors

background-default

background-light

background-dark

background-inverse

background-accent-1

background-critical

background-success

background-warning

background-info

background-sale

Border Colors

border-divider-primary

border-divider-accent-1

border-divider-inverse

border-focus

border-input-default

border-input-selected

border-input-critical

border-input-success

border-input-warning

border-input-info

border-sale

Icon Colors

text-icon-primary

text-icon-secondary

text-icon-disabled

text-icon-inverse

text-icon-accent-1

text-icon-critical

text-icon-success

text-icon-warning

text-icon-info

text-icon-sale

Typography

Headlines

heading-1

heading-2

heading-3

heading-4

heading-5

heading-6

Body Text

body-core

body-coreemphasis

body-large

body-largeemphasis

body-xlarge

body-xlargeemphasis

Links

link-core link-core-emphasis button-core button-core-emphasis button-large-emphasis

Icon Library

plus

minus

account

account-circle

wishlist

cart

hamburger

warning-circle

chevron-up

chevron-down

chevron-left

chevron-right

arrow-left

arrow-right

arrow-up

arrow-down

check

check-circle

x-circle

facebook

instagram

tiktok

snapchat

warning

info

star

loader

heart

truck

map

bell

link-simple

download-simple

upload-simple

paperplane

share-network

shopping-cart

house

bell-ring

funnel

sliders

arrows-clockwise

bookmark

bookmarks

book

storefront

navigation-arrow

globe

globe-east

pause

play

stop

speaker-low

speaker-high

speaker-x

gift

money

handshake

coins

clock

shield-check

t-shirt

package

trophy

currency-circle-dollar

tag

chats

chat

phone

device-mobile

envelope-open

envelope-simple

chat-centered-dots

pencil-simple

magnifying-glass-plus

squares-four

trash

calendar

file

stack

lock

lock-open

camera

ruler

addressbook

magnifying-glass-minus

wallet

flag

leaf

thumbs-down

thumbs-up

dots

clipboard

copy

image

eye

eye-slash

arrow-circle-left

arrow-circle-right

Form Components

Button

Link

Text Input

Text Area

Message

Message must be at least 10 characters

Checkboxes

Custom Checkbox 1 Custom Checkbox 2 (checked)

Radio Buttons

Option 1 Option 2 (checked)

Toggle Switch - Need a snippet

Native Select - Need a snippet

Core Select

Search Input

Clear

Optional message

Calendar - Needs a snippet

TODO: for testing - add toggle for disable and submit for error here

Liquid Components

Pagination

Classic Pagination

You've viewed 6 of 616 products

Load More Pagination

You've viewed 6 of 616 products

Applied Filters - Needs a snippet

Blue Medium $50-$100

applied-filters snippet not working think it needs url params?

View 0 more

Accordion

Question goes here

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!

Question goes here

Loader

Swatches - Needs a snippet

Badges

New New New 0 0

Quantity Selector

Product Card

Article Card - Need a snippet

Core Video - Shopify Video source

Core Video - External Video source

Tooltip - Needs a snippet

Breadcrumbs - Needs a snippet

Tabs - Needs a snippet

Stars - Needs a snippet (tbh powered by app not needed in theme)

Table - Needs a snippet (might not needed as a snippet)

Pricing - have snippet not added

Global Components

Global Dialog

Type	Example
`Slideout Left`
`Slideout Right`
`Modal Dialog`
`Static Dialog`	Static dialog Trigger can pair with a standalone dialog for self-contained UI like filters, quick add, or mini cart — where the dialog manages its own content and logic independently

Notification bar - Needs a snippet

Information toast

Success toast

Warning toast

Error toast

Toaster - Needs a snippet

Info

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Success

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Warning

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Error

Augue pellentesque est diam aliquet. Odio et amet aliquam.

inline: false

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo totam odio nisi tempore, magni neque eum nam repellendus aspernatur eveniet sequi asperiores laborum pariatur, eligendi aliquam commodi quam deserunt velit? Dicta, rem? Perspiciatis hic aliquam officiis, quo maiores magnam repellat quibusdam numquam. Accusamus, dolore earum. Fugiat earum beatae impedit, non optio vero minima ab molestias! Quae, dolorum aliquam tempora amet fuga, doloribus mollitia ipsa unde cumque nesciunt, soluta quas? Cumque animi dolores, fuga, dolor rem eaque sapiente, quibusdam impedit nostrum aperiam molestiae odit ea non? Deleniti, autem? Reiciendis nobis dolore distinctio sed culpa, cumque provident eos. Officiis, dolorum ex. Debitis fugiat labore expedita. Vero dolore ullam quis, sequi quos quam suscipit dolorem eos vel laborum magni officiis magnam labore nisi ratione quas perspiciatis blanditiis earum dicta, nulla odio dignissimos ipsam! Maiores sint quos earum labore fugit numquam quidem ad, a necessitatibus in repellat non, saepe, corporis vitae cumque eum optio blanditiis maxime commodi possimus amet dolor. Earum quaerat rerum doloremque fugiat molestias porro esse hic minima temporibus laborum harum dignissimos, explicabo provident deleniti numquam repellendus cupiditate maiores, eos facilis. Aspernatur cupiditate dignissimos est, illo vero impedit saepe aperiam aliquid sapiente officia reprehenderit veniam expedita dolore, et tempora molestiae eos? Illo?

inline: true