Kolorystyka, typografia, ikony i wygląd komponentów

Kolorystyka, typografia, ikony i wygląd komponentów

Spójny interfejs zaczyna się od konsekwentnych decyzji projektowych: jakie kolory używamy, jaką typografię, jak wyglądają przyciski, karty, inputy i ikony. To właśnie te elementy składają się na „język wizualny” strony.

W tej lekcji zbudujemy zestaw podstawowych stylów UI, który można używać we wszystkich komponentach – bez frameworków, ale w sposób przemyślany i zorganizowany.

1. Kolorystyka – zmienne CSS jako baza

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

Zalecana struktura to 1–2 kolory główne (primary, accent) + neutralne (tekst, tło) + pomocnicze (np. błędy, success).

2. Typografia – hierarchia i czytelność

body {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1rem;
  color: var(--color-text);
}

Warto też dodać skalę fontów z użyciem zmiennych:

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

3. Ikony – stylizowanie i spójność

.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  color: var(--color-primary);
}

.icon svg {
  fill: currentColor;
}

4. Komponenty – bazowe style UI

Przycisk:

.button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: var(--color-primary);
  color: white;
  border-radius: 0.5rem;
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--color-primary-hover);
}

Karta (card):

.card {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

Pola formularza:

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  font-size: var(--font-size-md);
}

Dobre praktyki

• Stosuj zmienne CSS wszędzie, gdzie tylko to możliwe
• Utrzymuj ograniczoną liczbę kolorów – 5–7 to maksimum
• Typografia powinna być hierarchiczna i czytelna – nie więcej niż 3 wielkości nagłówków
• Używaj klas typu .button, .card, .input jako komponentowych – bez zagnieżdżania z div > button

Ćwiczenie

Stwórz stronę z komponentem „sekcja hero” z tytułem, podtytułem i przyciskiem. Zastosuj:

• zmienne CSS do kolorów i typografii,
• przycisk zgodny z klasą .button,
• spójną paletę i odstępy,
• ikonkę (np. SVG) jako część treści.

Wniosek

Spójny styl wizualny zaczyna się od małych decyzji: kolor, krój pisma, kształt komponentu. Gdy podejmiesz je świadomie i wdrożysz jako zmienne i klasy bazowe – cały projekt zyskuje jakość i powtarzalność. W kolejnych lekcjach zbudujemy z tego kompletny design system bez frameworków.