Interactive brand rules explorer

Every visual rule, in one place

Browse the 77+ named rules behind every colour, spacing value, font, button, and animation on the site. These are the settings that keep the brand consistent automatically.

The master settings, all in one place

Each rule is a named value — "brand colour", "button height", "spacing between cards". Every part of the site that uses that value reads from the rule. Change the rule, every instance updates.

Change a named rule once → every page that uses it updates.

No hunting through pages for every colour or font — it's all defined here.

Brand updates — new colours, fonts, sizes — become fast, controlled changes.

@color-black

#000000

Primary black — buttons, text

@color-white

#ffffff

Background, contrast text

@color-brand-primary

#e34f33

Art Lounge brand orange-red

@color-brand-secondary

#1a1a1a

Dark accent for headers

@color-success

#22c55e

Success states, in-stock badges

@color-warning

#f59e0b

Warnings, low stock alerts

@color-error

#ef4444

Errors, out-of-stock

@color-gray-100

#f5f5f5

Light backgrounds

@color-gray-200

#e5e5e5

Borders, dividers

@color-gray-400

#a3a3a3

Muted text, placeholders

@color-gray-600

#525252

Secondary text

@color-gray-800

#262626

Primary text

@minicart-progress-bg

#e5e5e5

Progress bar track

@minicart-progress-fill

#22c55e

Progress bar fill

@minicart-savings-bg

rgba(34,197,94,0.1)

Savings badge background

Why this matters for business

Brand changes become fast

Changing the primary colour updates every button, link, and accent in one edit. No hunting through hundreds of files for individual colour codes.

No missed spots

Because everything refers to the same named rules, no page can accidentally use the old colour or wrong font. Consistency is enforced, not hoped for.

Future work is cheaper

Any new page, feature, or campaign starts from the same shared rules — so building something new that looks right takes a fraction of the time it used to.