Komponenty w jednym języku
Zablokowany design-system Czapa Studio — ten sam język od walidacji, przez generację całego produktu, po Twój sklep. Każda próbka renderuje się z tych samych klas, których używa cała platforma. Premium, spójnie, bez wyjątków.
Kolor, powierzchnie i semantyka
Jeden akcent cobalt, dwie barwy werdyktu (GO zielony, NO-GO amber) i neutralna gradacja powierzchni. Kolor jest racjonowany — nigdy dekoracyjny.
Skala w jednym kroju Satoshi
Od .t-display po .t-body-lg — wspólny rytm, ujemny tracking i wyważone wagi. Bez drugiego kroju; etykiety korzystają z .mono-label na tych samych literach.
Warianty i rozmiary
Jeden primary na sekcję. Sheen rezerwujemy dla .btn-primary; secondary i ghost niosą akcje wtórne. Trzy rozmiary trzymają rytm 8px i cel dotykowy ≥44px.
Pills GO / NO-GO
Sygnatura produktu. Pigułki niosą werdykt i pewność: GO = zielony, NO-GO = amber, NEUTRAL = wstrzymanie. Wariant .lg-pill dodaje warstwę liquid glass.
Bento, hover i spotlight
Siatka .bento układa karty .col-2/.col-4. Hover unosi i podświetla ring akcentu; .spotlight dodaje śledzącą kursor poświatę — znak rozpoznawczy Linear.
Sygnał popytu
Agregujemy zapytania, dyskusje i reklamy w jeden wskaźnik gotowości rynku.
Bramka GO/NO-GO
Jednoznaczny werdykt z progiem pewności — bez domysłów i bez „może”.
Cały produkt i sklep
Po GO generujemy kompletny produkt i wystawiamy go w Twoim sklepie z płatnościami Stripe.
Rytm i powietrze
Spacing 8px, hairline’y i pojedynczy akcent budują spokój. Mniej dekoracji, więcej hierarchii.
Tylko na warstwach pływających
Glass żyje wyłącznie na unoszących się warstwach — nigdy jako tło sekcji. .lg-card łączy refrakcję, specular rim i miękki cień. Maksymalnie kilka warstw na ekran.
Pola, focus i walidacja
Spójne .field / .input / .textarea z widocznym ringiem focus (3px akcentu), stanem .invalid i .hint. Cel dotykowy 42px, kontrast AA, etykiety zawsze obecne.
- Domyślny — surface-2 + hairline.
- Focus — obwódka akcentu + ring 3px (kliknij pole).
- Błąd — .invalid + .hint.error w jednym ruchu.
- Switch — sprężysty thumb na sterowaniu .switch.
Tabela i pasmo KPI
table.data daje monospaced nagłówki, hover wierszy i kolumny num z tabular-nums. Pasmo .metrics zbiera kluczowe liczby w hairline’owej siatce.
| Kanał | Sygnał | Trend | Pewność | Werdykt |
|---|---|---|---|---|
| Wyszukiwania | 1 240 | +18% | 0.82 | GO |
| Społeczności | 860 | +9% | 0.74 | GO |
| Reklamy | 410 | −3% | 0.51 | NEUTRAL |
| Marketplace | 180 | −12% | 0.34 | NO-GO |
Rozwijane sekcje
Wzorzec .accordion / .acc-item z animowanym chevronem i płynnym grid-template-rows. Dostępny: pełny <button>, aria-expanded i jeden otwarty panel naraz.
Platformą, która prowadzi pomysł przez cały łańcuch: walidacja popytu bramką GO / NO-GO, po GO generacja kompletnego produktu cyfrowego i sprzedaż w Twoim sklepie z płatnościami Stripe. Nie kolejny AI builder.
Builder generuje produkt zawsze i zostawia cię ze sprzedażą. My najpierw mówimy, czy w ogóle warto — NO-GO oszczędza tygodnie pracy i budżet. Po GO tworzymy cały produkt i dajemy Ci sklep, w którym go sprzedasz.
Plan Free na start, dalej Start 29,99 zł, Pro 79,99 zł i Studio 149,99 zł miesięcznie. Rozliczenie roczne to dodatkowe -20%.
Ta strona to żywa galeria zablokowanego systemu „czapa”. Każda próbka korzysta z tych samych klas, których używa cała witryna — to gwarantuje spójność premium.
Ten sam język aż po sprzedaż
Storefront sklepu korzysta z tych samych tokenów, kart i przycisków co reszta systemu „czapa” — cztery szablony to warianty oprawy, nie osobne style. Spójność premium trzyma się od walidacji aż po checkout.
Jeden system. Każdy ekran spójny.
Tak wygląda Czapa Studio w środku. Sprawdź, jak te komponenty łączą się w drogę od walidacji, przez cały produkt, po sklep ze sprzedażą.