89 lines
3.6 KiB
Markdown
89 lines
3.6 KiB
Markdown
# 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.
|