Blisko czerni i bieli
Paleta zredukowana do neutralnych szarości. Kolor pojawia się rzadko i celowo – wtedy znaczy.
Wprowadzenie Przegląd
Design System · v1.0
Sweet Lava Design System
Jedno źródło prawdy dla wyglądu i zachowania serwisu. Każda strona Sweet Lava składa się wyłącznie z tokenów i komponentów opisanych tutaj – żeby produkt rósł spójnie, niezależnie od tego, kto i kiedy dokłada nową sekcję.
Kierunek wizualny inspirowany Pentagram: neo-grotesk Inter, paleta blisko czerni i bieli,
mięta jako jedyny akcent, cięte krawędzie i typografia jako główny budulec. Strona narzędziowa
(noindex) – wszystkie próbki renderują się realnymi tokenami z global.css.
Zasady
Mięta jako jedyny akcent
Jeden kolor sygnałowy (jak czerwień u Pentagram). Prowadzi wzrok do działań i akcentów, nie dekoruje.
Hierarchia przez wagę, nie kolor
Lead i body są w tym samym kolorze – różni je waga (500 vs 400). Mniej kolorów, czytelniejsza struktura.
Ostre krawędzie
Karty, przyciski i pola mają promień 0. Zaokrąglone zostają tylko chipsy. Cięta, rzeczowa identyfikacja.
Linie zamiast cieni
Głębię budują cienkie linie 1 px i kontrast tła, nie rozmyte cienie. Płasko, precyzyjnie, drukarsko.
Ruch spokojny i sprawczy
Wejścia ~1,2 s, miękkie krzywe easing, pełne poszanowanie prefers-reduced-motion. Animacja niesie sens.
Fundamenty
Kolory → Paleta blisko czerni i bieli, mięta jako akcent, skale przezroczystości. Gradienty → System pasteli tematów i animowane okładki bloga. Typografia → Inter (neo-grotesk), płynna skala i metryki stopni. Przestrzeń → Skala 4 px, rytm pionowy i marginesy boczne. Układ i siatki → Ramka strony, gutter, kontenery i siatki płynne. Zaokrąglenia → Ostre krawędzie jako zasada, pełne kapsułki dla chipsów. Linie i ramki → Hierarchia przez 1 px linie zamiast cieni. Ruch → Krzywe easing, czasy i zasady wejść/wyjść. Ikony → Lekkie ikony liniowe rysowane inline w SVG.
Komponenty
Przyciski i linki → Primary, akcent, secondary oraz animowane podkreślenie. Karty → Karta treści: meta, tytuł, opis i strefa kliknięcia. Tagi i chipsy → Eyebrow, pille nawigacyjne i znaczniki statusu. Formularze → Pola, etykiety, zgody i stany walidacji. Akordeon / FAQ → Natywny <details> z animacją wysokości. Statystyki → Liczby z animacją bębna (odometr). Wiersz usługi → Wiersz listy z najazdem w negatywie. Okruszki → Ścieżka nawigacyjna z separatorem. Powiązane linki → Klaster pilli do treści powiązanych.