Stylowy brief: kolory, typografia, layout

Stylowy brief: kolory, typografia, layout

Zanim otworzysz edytor kodu lub Figma, musisz wiedzieć: co chcesz stworzyć i jaki ma to mieć styl.
Dlatego pierwszym krokiem w projektowaniu strony na poziomie zaawansowanym jest przygotowanie stylowego briefu – czyli zestawu decyzji dotyczących wyglądu i zasad wizualnych całego interfejsu.

To nie jest dokument formalny. To Twoja wewnętrzna ściąga, z której będziesz korzystać, budując komponenty, pisząc CSS i dobierając kolory.
To on sprawia, że Twoja strona ma spójny styl – i wygląda jak profesjonalny produkt, a nie zlepek HTML-a i przycisków.

1. Kolorystyka – wybór palety

Wybierz maksymalnie 5–7 kolorów:

• Primary – kolor główny (np. niebieski, zielony, bordowy)
• Accent – kolor akcentowy do wyróżniania elementów (np. żółty, pomarańczowy)
• Background – tło strony
• Text – kolor podstawowego tekstu
• Muted – kolor drugorzędny (np. opisy, podpisy)

Możesz dobrać kolory samodzielnie (np. na coolors.co lub muzli), albo oprzeć się na barwach marki czy temacie strony.

W CSS zapisz je jako zmienne, np.:

:root {
  --color-primary: #0d6efd;
  --color-accent: #ffc107;
  --color-bg: #f8f9fa;
  --color-text: #212529;
  --color-muted: #6c757d;
}

💡 Wskazówka: Unikaj zbyt intensywnych, nasyconych kolorów jako tła. Stonowane barwy są czytelniejsze.

2. Typografia – styl tekstu i hierarchia

Ustal:

• Jaki font chcesz użyć (np. systemowy, Google Fonts – np. „Inter”, „Roboto”, „Poppins”)
• Wielkości nagłówków – np. h1: 2.25rem, h2: 1.5rem, itd.
• Wielkość tekstu bazowego – zazwyczaj 1rem (czyli 16px)
• Kolory i marginesy dla nagłówków i tekstów

:root {
  --font-base: 1rem;
  --font-lg: 1.5rem;
  --font-xl: 2.25rem;
  --font-sm: 0.875rem;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
}

3. Layout – struktura układu strony

Decyzja o layoucie to nie tylko CSS Grid czy Flex. Najpierw ustal, jakie sekcje będzie miała strona i w jakiej kolejności:

• Header z logo i nawigacją
• Sekcja „hero” z tytułem i przyciskiem CTA
• Sekcja „o nas” z tekstem i obrazkiem
• Blok z ofertą lub usługami
• Stopka z linkami i danymi kontaktowymi

Następnie określ, jaką chcesz mieć siatkę (grid) – np.:

• Układ 1 kolumny z odstępami (dla mobile)
• Układ 2–3 kolumny na desktop (np. grid-template-columns)

To możesz narysować ręcznie, rozpisać w punktach albo przygotować makietę (o tym w kolejnej lekcji).

4. Styl interfejsu (UI)

Jakie będą:

• kształty komponentów – np. zaokrąglone przyciski, karty z cieniem?
• przejścia, mikrozachowania – np. delikatny hover?
• kontrast – jasna czy ciemna wersja?

Warto określić to już teraz, np.:

:root {
  --radius: 0.5rem;
  --shadow: 0 2px 6px rgba(0,0,0,0.05);
}

Efekt końcowy: brief projektowy

Po tej lekcji powinieneś mieć:

• ustaloną paletę kolorów i zapisane zmienne CSS,
• określony font, wielkości nagłówków i tekstów,
• rozpisane sekcje strony i pomysł na układ (layout),
• opis stylu komponentów: kształty, marginesy, styl hovera itp.

Co dalej?

W kolejnej lekcji przygotujesz makietę graficzną i system siatki – możesz użyć Figma, Adobe XD lub kartki papieru. To pozwoli Ci łatwiej przejść od pomysłu do kodu.

Jeśli masz wątpliwości, co wybrać – wróć do tej lekcji. To Twój wizualny punkt odniesienia 💡