Art Lounge
Back to Overview

10b — How It's Built

The Structure Behind the System

Four layers, 40 files, and six shared components — how they're organised and how a single change travels from a token file to every page on the site.

4

clear, separate layers

40

focused style files

6

shared component files

9

page-specific files

Watch a change travel through the system

Pick a scenario and click "Trace it →" to watch exactly how a single edit travels from the token file through to every affected page — step by step.

Pick a scenario to trace

_variables.lessThe only file you edit

@button-tocart-bg: #e34f33; // was #000000

1
✏️

Edit 1 token file

2
⚙️

Compiler resolves references

3
🧩

Component files update

4
✅

All page types reflect the change

How the files are organised

40 focused files, each with a single responsibility. Browse the structure to see which file handles which part of the storefront.

app/design/frontend/Starter/ArtLounge/
web/css/source
├_sources.less45 lines
├_theme.less
├_variables.less680 lines
└_mixins.less120 lines
├base/
├_reset.less85 lines
├_typography.less140 lines
├_layout.less95 lines
└_utilities.less180 lines
├components/
├_header.less220 lines
├_navigation.less380 lines
├_footer.less160 lines
├_buttons.less240 lines
├_forms.less280 lines
├_product-card.less320 lines
├_minicart.less450 lines
├_filters.less190 lines
├_pagination.less120 lines
├_modal.less180 lines
├_toast.less140 lines
├_breadcrumb.less85 lines
├_swatches.less160 lines
└_variant-table.less420 lines
└pages/
├_home.less280 lines
├_category.less220 lines
├_brand.less180 lines
├_product.less340 lines
├_cart.less260 lines
├_checkout.less380 lines
├_account.less220 lines
├_search.less140 lines
└_cms.less160 lines

How rules are shared without being repeated

Each of the 40 style files needs access to the shared brand rules. A regular import would copy all 401 rules into every file — printing them 40 times in the final CSS. A reference import gives each file access to the rules without printing them again.

Without reference importrules duplicated ×40
// _product-card.less
@import "_variables.less"; // full copy

// _minicart.less
@import "_variables.less"; // full copy again

// _navigation.less
@import "_variables.less"; // × 40 files

// Result: 401 rules × 40 files
// = 16,040 duplicate declarations
With reference importrules defined once
// _product-card.less
@import (reference) "_variables.less";

// _minicart.less
@import (reference) "_variables.less";

// _navigation.less
@import (reference) "_variables.less";

// Result: 401 rules defined exactly once
// Zero duplication in the output

How the new rules connect to the Magento platform

Magento has its own internal variable names for colours, fonts, and buttons. Rather than replacing them, a bridge file maps Art Lounge's named rules onto Magento's names — so the platform picks up the right brand values automatically, and updating the brand updates everything at once.

Art Lounge tokenMagento variableControls
@color-primary
@link__colorNav links, text links
@color-primary
@button__colorPlatform button labels
@color-black
@color-blackBorders, dark text
@font-family-base
@font-family__baseAll body text
@color-success
@color-successSuccess states, badges
@color-white
@color-whiteButton labels, backgrounds

Change any Art Lounge token and both custom styles and Magento's own components update simultaneously.

Try changing the tokens live

Pick a component and adjust its token values. Each control maps directly to a named rule in _variables.less — change it here and the preview updates instantly, just like it would across the real site.

🛍

Product Card

_product-card.less

One card template used on 5 different page types.

Used on

HomepageCategoryBrandSearchPDP

Live preview

Acrylic Art Set 1

₹1,499

ADD TO CART

Acrylic Art Set 2

₹1,499

ADD TO CART

Tweak token values

Button colour
Name style
Columns

Changing the button colour here is exactly what updating @button-tocart-bg in _variables.less does — it flows to every card on every page instantly.

The six shared components — named rules behind each one

Each component below has its own set of named rules. These are what make it look consistent everywhere it appears — and what make it easy to update in the future.

Brand ConsistencyFaster Future Changes