Design System

Colors

settings.*

Brand

Primary settings.primary_color #4F6CFA

Secondary settings.secondary_color #f73859

Primary button bg settings.primary_button_background #111111

Primary button text settings.primary_button_text_color #ffffff

Secondary button bg settings.secondary_button_background #4F6CFA

Secondary button text settings.secondary_button_text_color #ffffff

Surface

Background settings.background #FFFFFF

Text settings.text_color #111111

Dialog bg settings.dialog_background #ffffff

Header bg settings.header_background #ffffff

Header text settings.header_text_color #111111

Footer bg settings.footer_background #111111

Footer text settings.footer_text_color #ffffff

Status

Success settings.success_color #16a34a

Warning settings.warning_color #e37e16

Error settings.error_color #aa2826

Product

On sale accent settings.product_on_sale_accent #f73859

Sold out badge settings.product_sold_out_badge_background #bebdb9

Primary badge settings.product_primary_badge_background #4f6cfa

Rating star settings.product_rating_color #ffb74a

Product card bg settings.product_card_background #fffffe

Product card text settings.product_card_text_color #111111

Typography

--text-*

Fonts

Aa Heading

Heading font settings.heading_font "Bebas Neue" Weight 400 / normal

Aa Body

Body font settings.text_font Jost Weight 400 / normal

Headings

H0 — Display heading

.h0 · --text-h0

H1 — The quick brown fox

.h1 · --text-h1

H2 — The quick brown fox

.h2 · --text-h2

H3 — The quick brown fox

.h3 · --text-h3

H4 — The quick brown fox

.h4 · --text-h4

H5 — The quick brown fox

.h5 · --text-h5

H6 — The quick brown fox

.h6 · --text-h6

Body sizes

Large — The quick brown fox jumps over the lazy dog.

--text-lg · .text-lg

Base — The quick brown fox jumps over the lazy dog.

--text-base · default

Small — The quick brown fox jumps over the lazy dog.

--text-sm · .text-sm

Extra small — The quick brown fox jumps over the lazy dog.

--text-xs · .text-xs

Utilities

Bold text · .bold

Subdued text · .text-subdued

Accent text · .text-accent

Success · Warning · Error · On sale

Faded link · .link-faded

Reversed link (hover me) · .reversed-link

Line clamp at 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Prose (rich text)

This is a prose container

Used for editor-controlled content (page descriptions, blog posts). Adds spacing and styles to headings, lists, links, blockquotes, and inline code automatically.

List item one
List item two

This is a blockquote inside .prose.

Spacing

--spacing-*

--spacing-0-5 2px

--spacing-1 4px

--spacing-1-5 6px

--spacing-2 8px

--spacing-2-5 10px

--spacing-3 12px

--spacing-3-5 14px

--spacing-4 16px

--spacing-4-5 18px

--spacing-5 20px

--spacing-5-5 22px

--spacing-6 24px

--spacing-6-5 26px

--spacing-7 28px

--spacing-7-5 30px

--spacing-8 32px

--spacing-9 36px

--spacing-10 40px

--spacing-11 44px

--spacing-12 48px

--spacing-14 56px

--spacing-16 64px

--spacing-18 72px

--spacing-20 80px

--spacing-24 96px

--spacing-28 112px

--spacing-32 128px

--spacing-36 144px

--spacing-40 160px

--spacing-48 192px

--spacing-56 224px

--spacing-64 256px

--spacing-72 288px

--spacing-80 320px

--spacing-96 384px

Border radius

--rounded-*

xs --rounded-xs

sm --rounded-sm

rounded --rounded

lg --rounded-lg

full --rounded-full

button --rounded-button

input --rounded-input

Shadows

--shadow-*

--shadow-sm

--shadow

--shadow-md

--shadow-block

Buttons

.button

Variants

.button · .button--secondary · .button--outline · .button--subdued · [disabled]

Sizes

.button--xs MX · .button--sm · default · .button--lg · .button--xl

Custom variants MaxEsport

.button--light For dark backgrounds. Transparent w/ --text-color/.2

.button--dark For light backgrounds. Transparent w/ --text-color/.1

.button--blurred backdrop-filter: blur(8px). Use over images / gradients.

Button group

.button-group

Circle buttons

.circle-button · .circle-button--lg · .circle-button--fill

Form fields

.input · .select · .textarea

Default input .input

Focus state (click) .input:focus

Disabled .input[disabled]

Textarea .textarea

Select

.select

Floating label

Email address

.input.is-floating + .floating-label

Checkboxes & radios

Checked option Unchecked option Radio one Radio two

Badges

.badge

Styles

Default.badge

Primary.badge--primary

Current.badge--current

Large.badge--lg

Sizes

XS.badge--xsMX

Default.badge

Large.badge--lg

Product badges

En rupture

.badge--sold-out

- 20%

.badge--on-sale

New

.badge--new

Free

.badge--free-shipping

Limited

.badge--limited-edition

Exclu Max .badge--exclu-max

Choice .badge--choice

Bestseller .badge--bestsellers

Custom badge .badge--custom

Soldes .badge--sale

Cards & surface

.shadow-block · .rounded · .border

Border + rounded

.rounded.border

Shadow block

.rounded.shadow-block

Secondary background

.bg-secondary.rounded

Large radius

.rounded-lg.shadow

Product, brand & content cards

snippets/*-card.liquid

Product card

Snippet: {% render 'product-card', product: product %} — outline 1px, optional badges, rating, price, swatches.

-20%

Brand name Product title example

€49,99€59,99

New

Brand name Product title example

€49,99

Exclu

Brand name Product title example

€49,99

Brand card MaxEsport

Snippet: {% render 'brand-card', vendor: 'logitech' %} — banner 4:1, logo overlay, name, categories, specs (typology/country/slogan), CTA.

42 products

Brand name

Gaming gear

France

Built for victory.

Horizontal product card

Snippet: {% render 'horizontal-product', product: product %} — used in cart drawer, search suggestions, complementary products.

Brand name Compact product title €49,99

Blog post card

Snippet: {% render 'blog-post-card', article: article %} — image, date, title, excerpt.

Mar 30, 2026 Author

Sample blog post title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

Reassurance / feature card

Free shipping Over €100

2 year warranty All products

30 days return No questions asked

Support Mon-Fri 9-6

Tables

.prose table

Setting	Type	Value
Heading font	Font	"Bebas Neue"
Body font	Font	Jost
Page width	Number	1600px
Section spacing	Select	small
Block radius	Range	24px
Button radius	Range	6px

Alerts / status

--success · --warning · --error

Action completed successfully.

This is a warning message.

An error has occurred.

Rating

.rating · --star-color

.rating-star · Color: var(--star-color)

Collection UI MaxEsport

Custom collection page elements

Display mode toggle (grid / list)

.display-mode-button · .display-mode-button.active

Layered nav

.layered-nav .button--light · sticky filter bar at top of collection.

Removable facets

.removable-facet

Pagination

← 1 2 3 4 … 12 →

.pagination__page--active

Icons

{% render 'icon' with '...' %}

UI

error

warning

success

dot

quote

drag-handle

chevron-bottom

chevron-left

chevron-right

chevron-left-small

chevron-right-small

chevron-bottom-small

plus

minus

close

delete

hamburger

account

love

search

cart

rating-star

play-button

play-video

play-model

image-zoom

email

share

filter

discount

blog-author

blog-comment

blog-date

loader

Pictograms

picto-at-sign

picto-award-gift

picto-beer

picto-bluetooth

picto-box

picto-building

picto-burger

picto-camera

picto-chat

picto-coffee

picto-comment

picto-coupon

picto-credit-card

picto-customer-support

picto-document

picto-earth

picto-envelope

picto-file

picto-gift

picto-happy

picto-jewelry

picto-leaf

picto-like

picto-lock

picto-love

picto-mailbox

picto-mask

picto-mobile-phone

picto-money

picto-music

picto-operator

picto-percent

picto-phone

picto-pin

picto-plane

picto-printer

picto-question

picto-recycle

picto-return

picto-return-arrow

picto-secure-profile

picto-send

picto-shield

picto-smart-watch

picto-star

picto-stop

picto-target

picto-timer

picto-tree

picto-truck

picto-validation

picto-wifi

Social

discord

facebook

instagram

twitter

threads

snapchat

tiktok

tumblr

vimeo

wechat

youtube

line

fancy

Layout utilities

.v-stack · .h-stack · .gap-* · .bleed

v-stack (vertical stack)

Item 1

Item 2

Item 3

.v-stack.gap-3

h-stack (horizontal stack)

Item 1

Item 2

Item 3

.h-stack.gap-3.wrap.align-center

Gap scale

.gap-1

.gap-2

.gap-3

.gap-4

.gap-5

.gap-6

.gap-8

.gap-10

Container widths

Page width · 1600px Container gutter (mobile) · var(--spacing-5) = 20px Container gutter (≥1000px) · var(--spacing-12) = 48px Grid gutter (mobile) · var(--spacing-5) = 20px Grid gutter (≥700px) · var(--spacing-6) = 24px

Custom tokens MaxEsport

assets/maxesport.css

XXS — Extra extra small text used for compact badges and metadata.

--text-xxs = 0.5rem (8px)

Italic headings (theme override)

.heading, .h0…h6 { --heading-font-style: italic }

Custom typography MaxEsport

Custom text effects

Plain price label €49,99

.price-list — color: primary

Primary colored text

.text-primary-color

White bg label

.bg-white

Styled heading

.styled-font — skewed bg accent behind text

Custom utilities & boxes MaxEsport

Reusable patterns

.max-box

Generic box with hover state. Border + bg appear on hover.

Hover me

Border turns primary, background subtly fills.

Active state

Simulated hover state.

.max-box.border

.one-line-description

Pro gaming mouse with 25,600 DPI sensor and 100h battery life — engineered for esports.

.one-line-description — left border accent (primary)

Accent blockquote

A great quote or pull-out content goes here, with a left primary border accent.

.blockquote.blockquote--accent — quote mark + left primary border

Accent bar only

A paragraph with the left primary border accent, without the quote mark.

.blockquote--accent

Backdrop blur info box

Extra information

.product-gallery__additional_info_wrapper · white 75% bg with left primary border, used over photos.

Footer about-us box

About MaxEsport

Radial gradient background, used in the footer.

.footer__block--about-us

Animations & effects MaxEsport

@keyframes from maxesport.css

Add-to-cart gradient @keyframes anime · 6s loop Applied to .product-info__buy-buttons .button

In stock

Radar pulse (in-stock) @keyframes pulse-green · 2s loop Applied to .text-success #radar

Exclu Max

Exclu Max glow box-shadow + 1px primary border Applied to .badge--exclu-max

Limited edition

Limited edition — rotating multicolor neon border conic-gradient + @property --badge-angle · badge-neon-rotate Black bg, white text; rainbow rim rotating around .badge--limited-edition

Choice

Choice — rotating blue neon border conic-gradient + @property --badge-angle · badge-neon-rotate Black bg, white text; blue/white rim rotating around .badge--choice

Bestseller

Bestseller — rotating violet/magenta neon border conic-gradient + @property --badge-angle · badge-neon-rotate · badge-bestsellers-neon Black bg, white text; violet/magenta rim rotating around .badge--bestsellers + pulsing purple halo

-20%

On sale — rotating red/gold neon border conic-gradient + @property --badge-angle · badge-neon-rotate · badge-on-sale-neon Black bg, white text; red/gold rim rotating around .badge--on-sale + pulsing red halo

New

New — rotating cyan/mint neon border conic-gradient + @property --badge-angle · badge-neon-rotate · badge-new-neon Black bg, white text; cyan/mint rim rotating around .badge--new + fresh pulsing halo

Free shipping

Free shipping — static green neon + soft pulse linear-gradient rim · badge-free-shipping-neon Black bg, white text; static green rim on .badge--free-shipping + soft pulsing halo

Sold out

Sold out — muted hatched repeating-linear-gradient · no animation Anthracite bg, grey text, diagonal hatching on .badge--sold-out

Custom badge

Custom — static brand neon blue/violet gradient rim · static Black bg, white text; static blue/violet rim on .badge--custom (metafield custom.badges)

● Live now

Blink @keyframes blinking · 1.5s loop Used in footer slogan

3

Cart jiggle @keyframes jiggle · 5s loop Applied to cart-count.count-bubble