Wprowadzenie

O Kiddosy

Kiddosy to produkt, który współtworzę. Ma dwie strony: rodzice wyszukują zajęcia dla dzieci i je rezerwują, a organizatorzy zarządzają swoją pracą, od panelu po kalendarz grup. Odpowiadam za operacje, produkt, design i ogólny kierunek.

Design system zbudowałem od zera. Te strony go dokumentują: podstawy, najważniejsze komponenty ze wszystkimi wariantami i stanami oraz proces AI-native, który trzyma go w spójności. Wszystkie wartości są odczytane z kodu Kiddosy (październik 2026). Zobacz case study Kiddosy

• 45+komponentów w pakiecie
• 16rodzin komponentów
• 8par kolorów kategorii
• 44 pxminimalny cel dotyku

Zasady

• Jedno źródło prawdy

  Każda surowa wartość żyje w jednym pliku tokenów. Komponenty czytają role, więc zmiana w jednym miejscu zmienia cały produkt.

• Istnieją tylko tokeny systemu

  Domyślna paleta, cienie i fonty Tailwinda są wyłączone. Wartość spoza systemu nie ma jak się prześlizgnąć.

• Każdy stan jest zaprojektowany

  Każdy komponent dostaje stany z katalogu: hover, fokus, wyłączony, błąd, ładowanie, pusty.

• Dostępny domyślnie

  Cele dotyku co najmniej 44 px, widoczny pierścień fokusu, kontrast sprawdzany skanerem, nie na oko.

• Komponenty prezentacyjne

  Teksty przychodzą z tłumaczeń aplikacji, a linki wstrzykuje aplikacja, więc ten sam komponent działa po polsku i po angielsku i z każdym routerem.

• Tożsamość kategorii

  Każda kategoria zajęć ma własną parę kolorów i używa jej każda kontrolka, która kategorię wybiera.

Struktura

System powstaje w jednej kolejności: tokeny, potem atomy, molekuły, organizmy i layouty. Komponent trafia tam, gdzie należy złożonością, a nie tam, gdzie powstał, a rodziny trzymają się razem w katalogu.

1. 01
   Podstawy

   Kolory, typografia, odstępy, promienie, cienie, ruch

2. 02
   Atomy

   Przycisk, checkbox, chip, plakietka, awatar

3. 03
   Molekuły

   Pola formularza, wyszukiwarka, kalendarz, pola telefonu i kodu

4. 04
   Organizmy

   Navbar, sidebar, dolna nawigacja, panel oferty, filtry

5. 05
   Layouty

   Karta kroku, hero potwierdzenia, powitanie panelu, stopka

Jak czytać tę dokumentację

• Podglądy są na żywo: odtworzone tu w HTML i CSS z tokenów Kiddosy, więc reagują na hover i klawiaturę.
• Zakładka Anatomia pokazuje, z czego składa się komponent; sekcja Stany wymusza hover i fokus, żeby było je widać bez myszy.
• Tabele API opisują prawdziwe propsy słowami. Kodu źródłowego celowo nie publikuję.