10 — Design System
Why the Store Looks Consistent Everywhere
One set of shared rules keeps every colour, button, spacing value, and card aligned — across every page, without anyone having to remember to check.
401
named brand rules
15
rule categories
40
focused style modules
40+
platform connections
See a change travel through the system
Pick a scenario to see exactly how a single edit in one file flows automatically through every layer of the site — with a live preview of what changes.
@button-tocart-bg: #000000;
@button-tocart-bg: #e34f33;
Can we make the 'Add to Cart' button orange instead of black?
What it looks like
Acrylic Set
₹1,499
Oil Pastels
₹1,499
Layer 01
The rules file
Edit one value in the rules file
One file, one line — the colour swaps from black to orange. Nothing else needs touching.
Layer 02
Global styles
Global styles — not involved
Page-wide reset and typography don't control button colours.
Layer 03
Shared components
3 component files update automatically
The button styles, product card, and cart panel all reference that colour rule. They all update — no edits required.
Layer 04
Individual pages
Every page now shows the right colour
Pages don't store the colour themselves — they use the components, which use the rule. All correct, automatically.
What the 401 rules produce
Each tab renders what those tokens look like in practice — live colours, real type sizes, proportional spacing, and working interactions.
Brand palette — 8 rules
Grey scale — 10 rules
Which parts of the site read from which rules
Pick a token category to see every component that reads from those rules. Change one rule here, those components all update.
Rules defined in _variables.less
_variables.less ← THE ONLY FILE YOU TOUCH
These 3 rules control everything below — change them here and every component that reads them updates automatically.
Components that read from these rules
Add to Cart button
@button-tocart-bg uses @color-black
_buttons.less
Navigation hover state
@nav-link-hover-bg uses @color-black
_navigation.less
Brand accent / links
@link__color maps to @color-primary
_theme.less
Sale badges
Badge background uses @color-primary
_product-card.less
CTA buttons everywhere
Primary button references @color-black
_buttons.less
Change any of the 3 rules above, and all 5 components that read from them update automatically — no hunting, no missed spots.
One change. Every page.
Change the brand colour once and every button, badge, and link updates — across every page. No hunting, no missed spots.
401
named rules, zero hard-coded values
Continue reading
How it's built →
The four-layer file structure, how a single change travels from token to every page, and the named rules behind each of the six shared components.