Design system
Airfresh24 style guide
The tokens and components every screen of the new store is built from. Palette derived from the Elix brand mark; the three dots are the scent pyramid — top, heart and base notes.
Color
#FBFAF8Page background
#FFFFFFCards, drawers, inputs
#221A1CPrimary text
#6E6366Secondary text
#EBE6E2Hairlines, borders
#F7EEEFTinted washes
#811328Brand accent (Elix logo)
#5C0C1CAccent hover state
#FFC20DFlower accent — micro-doses
#F04D22Flower accent — micro-doses
#1E7A4EPositive states
#C0301CErrors, destructive
Typography
Display: Bricolage Grotesque Variable. Body & UI: Instrument Sans Variable. Both self-hosted, subset latin + latin-ext, font-display: swap.
--text-display
Zażółć gęślą jaźń — pchnąć w tę łódź jeża lub ośm skrzyń fig.
--text-h1
Zażółć gęślą jaźń — pchnąć w tę łódź jeża lub ośm skrzyń fig.
--text-h2
Zażółć gęślą jaźń — pchnąć w tę łódź jeża lub ośm skrzyń fig.
--text-h3
Zażółć gęślą jaźń — pchnąć w tę łódź jeża lub ośm skrzyń fig.
--text-h4
Zażółć gęślą jaźń — pchnąć w tę łódź jeża lub ośm skrzyń fig.
--text-body
The five boxing wizards jump quickly over the lazy dog. Zażółć gęślą jaźń — pchnąć w tę łódź jeża lub ośm skrzyń fig.
--text-caption
Eyebrow / caption — uppercase, tracked
Spacing
4 px base scale (Tailwind); section rhythm via --space-section (fluid 64–112 px).
4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px
96 px
Buttons
Form fields
We only use this for order updates.
Enter a valid postal code, e.g. 54-530.
Badges
Product card (T07 contract)
Motion
Scroll reveals: 550 ms ease-out fade-and-rise, 90 ms stagger. Hover cross-fades on product imagery. Everything obeys prefers-reduced-motion.
01
First in
02
90 ms later
03
180 ms later