02 — Design System

Pełna definicja systemu projektowego. Zaimplementuj jako tokeny w tailwind.config.ts i CSS variables w globals.css. Wszystkie komponenty korzystają z tokenów, nie z wartości „na sztywno".

Paleta kolorów

Token	Hex	Zastosowanie
`primary` (granat)	`#0F2A47`	nagłówki, header, footer, tekst akcentowany
`primary-light`	`#1B3D63`	hover na elementach primary
`accent` (cyjan)	`#2BA8E0`	akcenty „chłodu", linki, ikony, podkreślenia
`accent-light`	`#E3F4FC`	tła sekcji związanych z klimatyzacją
`cta` (pomarańcz)	`#F39320`	przyciski akcji, wyróżnienia konwersji
`cta-hover`	`#D97D0D`	hover przycisków CTA
`bg`	`#FFFFFF`	główne tło
`bg-muted`	`#F5F7FA`	tła naprzemiennych sekcji
`text`	`#1A2230`	tekst podstawowy
`text-muted`	`#5A6678`	tekst drugorzędny, opisy
`border`	`#E2E8F0`	obramowania kart, separatory
`success`	`#16A34A`	potwierdzenia, „dostępne"

Tryb: na start jasny. Przygotuj zmienne tak, by dark mode dało się dodać później bez przepisywania.

Typografia

Font: Inter lub Poppins przez next/font/google (subset latin + latin-ext dla polskich znaków).
Skala (desktop / mobile):
- H1: 48–56px / 32–36px, bold, line-height 1.1
- H2: 36–40px / 28px, bold
- H3: 24–28px / 20px, semibold
- Body: 16–18px / 16px, regular, line-height 1.6
- Small: 14px
Nagłówki w kolorze primary. Tekst w text. Opisy w text-muted.
Maksymalna szerokość bloku tekstu: ~70 znaków (czytelność).

Spacing i layout

Kontener: max-width 1280px, padding boczny 16px (mobile) / 24–32px (desktop), wyśrodkowany.
Odstępy między sekcjami: 80–120px desktop / 48–64px mobile. Dużo powietrza.
Siatka kart: grid responsywny (1 kol. mobile → 2 → 3/4 desktop), gap 24px.
Sekcje naprzemiennie bg i bg-muted dla rytmu wizualnego.

Komponenty UI (na bazie shadcn/ui, dostosowane do tokenów)

Button — warianty: cta (pomarańcz, główny), primary (granat), outline, ghost. Zaokrąglenie rounded-lg, padding wygodny, wyraźny hover i focus ring.
Card — rounded-xl, border, subtelny cień (shadow-sm → shadow-md na hover dla klikalnych).
Accordion — do FAQ. Płynne rozwijanie, ikona +/− lub chevron.
Input / Textarea / Select — spójne obramowania, focus w kolorze accent, czytelne labelki.
Badge / Tag — do kategorii (realizacje, blog) i wyróżnień produktów.
Tabs — do zakładek na karcie produktu.

Wspólne komponenty własne (`components/common/`)

SectionHeading — eyebrow (mały tekst nad), H2, opcjonalny podtytuł. Wyśrodkowany lub do lewej.
CTAButton — przycisk z ikoną, wariant cta, używany w hero i banerach.
StatCounter — duża liczba + podpis (np. „3500 realizacji").
IconCard — ikona + tytuł + opis + opcjonalny link. Baza dla siatek usług.
StepItem — numer + tytuł + opis. Baza dla procesów krok-po-kroku.
Placeholder — szary blok z ikoną i opisem zamiast docelowego zdjęcia.

Stany i interakcje

Hover: subtelne podniesienie cienia / zmiana koloru, transition 150–200ms.
Focus: widoczny ring w kolorze accent (dostępność).
Loading: skeleton dla list (sklep, blog).
Puste stany: czytelny komunikat + CTA (np. pusty koszyk).

Zasada nadrzędna

Design ma wyglądać jak zaprojektowany przez człowieka: spójny, czysty, z oddechem. Unikaj efektu „szablonu AI": przeładowania gradientami, zbyt wielu kolorów, ciasnych sekcji, losowych cieni. Mniej, ale konsekwentnie.

3.6 KiB Raw Blame History Unescape Escape