/dev/design-v3

Design system v3

Zero obrysów, zero cieni. Powierzchnie rozdziela ton tła, odstęp i typografia. Limonka jest jedynym akcentem i zawsze występuje jako wypełnienie.

Zobacz prymitywy Biblioteka ruchu

Katalog w liczbach

Moduł LicznikStatystyk - odlicza od zera przy wejściu w viewport. Przy reduced-motion pełna wartość zostaje w HTML.

38
Kart narzędzi w rdzeniu
142
Skilli po polsku
7 dni
Rytm weryfikacji cen

Karta

Trzy karty z katalogu

Kontener SiatkaReveal - kafle wjeżdżają staggerem raz, przy wejściu w viewport. Bez JS i przy reduced-motion siatka jest od razu ułożona.

16:9 · 1200x675

ChatGPT

Uniwersalny chatbot AI od OpenAI do tekstu, kodu i researchu.

freemium chatboty-modele
16:9 · 1200x675

Claude Code

Agentowy asystent kodowania Anthropic uruchamiany w terminalu.

freemium agenci-kodowanie
16:9 · 1200x675

Claude

Chatbot AI od Anthropic do pisania, kodowania i agentowej pracy.

freemium chatboty-modele

Typografia

Skala: 15 / 17 / 22 / 32 / 48 / 64

64 px - .p-h1

Katalog narzędzi AI

48 px - .p-h2

Co sprawdzamy w każdym narzędziu

32 px - .p-h3

Cena, limity, model rozliczeń

22 px - .p-lead

Lead sekcji: jedno zdanie, które mówi po co tu jesteś.

17 px - .p-tekst

Tekst ciągły. Długość wiersza ograniczona do 68 znaków, żeby oko wracało do początku bez wysiłku.

15 px - .p-drobne

Drobny tekst pomocniczy, metryki, przypisy.

Mono i znacznik

Liczby i daty idą JetBrains Mono: 2026-09-03 · 30 kart · 199 zł. Wyróżnienie w tekście robi znacznik limonkowy, nie kolor liter.

Akcje

Przyciski i chipy

Domyślny Akcent Cichy Mały Duży
FREE FREEMIUM PAID Wybrany filtr

Przejdź Tabem przez powyższe - fokus rysuje się outlinem 2 px z odstępem 2 px. To jedyny obrys dozwolony w systemie.

Formularz

Pole bez obrysu

Tło tonem, fokus outlinem. Zero ramki.
Ten sam prymityw w wariancie wyszukiwania.

Media

Miejsce na zdjęcie i logo

Etykieta z wymiarem pokazuje się tylko wtedy, gdy w slocie nie ma jeszcze obrazka.

16:9 · 1200x675 3:2 · 1200x800 1:1 · 800x800
32 96 96 ciemny

Responsywność

390 px obok pełnej szerokości

Siatki idą przez auto-fit + minmax(min(Xpx, 100%), 1fr), więc liczba kolumn wynika z szerokości RODZICA, nie okna. Ta sama klasa .p-grid-3 daje trzy kolumny na pełnej szerokości i jedną w pudełku 390 px - bez przewijania w poziomie.

width: 390px

Nagłówek

Ten sam markup, wąski rodzic.

16:9

ChatGPT

freemium
16:9

Claude Code

freemium
16:9

Claude

freemium
Akcja

pelna szerokosc

Nagłówek

Ten sam markup, szeroki rodzic.

16:9

ChatGPT

freemium
16:9

Claude Code

freemium
16:9

Claude

freemium
Akcja

Tabela danych

Jedyny wyjątek od zasady zero linii

Narzędzie Kategoria Model Od
ChatGPT chatboty-modele freemium 0 USD
Claude Code agenci-kodowanie freemium 0 USD
Claude chatboty-modele freemium 0 USD
Codex agenci-kodowanie freemium 0 USD
Cursor agenci-kodowanie freemium 0 USD

Linia wiersza ma kolor tonu tła, nie szarego obrysu - rozdziela dane, a nie rysuje ramki.