System projektowy
Przewodnik stylu Airfresh24
Tokeny i komponenty, z których zbudowany jest każdy ekran nowego sklepu. Paleta wywiedziona ze znaku marki Elix; trzy kropki to piramida zapachowa — nuty głowy, serca i bazy.
Kolor
#FBFAF8Tło strony
#FFFFFFKarty, panele, pola formularzy
#221A1CTekst podstawowy
#6E6366Tekst pomocniczy
#EBE6E2Linie i obramowania
#F7EEEFDelikatne tła
#811328Akcent marki (logo Elix)
#5C0C1CAkcent — stan hover
#FFC20DAkcent z kwiatu logo — mikrodawki
#F04D22Akcent z kwiatu logo — mikrodawki
#1E7A4EStany pozytywne
#C0301CBłędy, akcje destrukcyjne
Typografia
Nagłówki: Bricolage Grotesque Variable. Tekst i UI: Instrument Sans Variable. Obie rodziny hostowane lokalnie, podzbiór 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
Nadtytuł / podpis — wersaliki, rozstrzelone
Odstępy
Skala co 4 px (Tailwind); rytm sekcji przez --space-section (płynnie 64–112 px).
4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px
96 px
Przyciski
Pola formularzy
Używamy go wyłącznie do informacji o zamówieniu.
Podaj poprawny kod pocztowy, np. 54-530.
Odznaki
Karta produktu (kontrakt T07)
Animacje
Odsłanianie przy przewijaniu: 550 ms ease-out, uniesienie i pojawienie, kaskada co 90 ms. Przenikanie zdjęć produktów po najechaniu. Wszystko respektuje prefers-reduced-motion.
01
Pierwszy
02
90 ms później
03
180 ms później