Design system luckymind.pl

FAZA 1 — komponenty odbudowane ze snapshotu stagingu (10.07.2026). Typografia: New Spirit (oryginał, self-hosted; porównanie: /fonty/).

Przycisk LG (hero)

Kolory

limonka (accent) --c-accent #86D300
granat (navy) --c-navy #1E355B
tekst --c-text #353A2C
krem (tło) --c-bg-cream #F8FFED
błękit (tło alt) --c-bg-blue #F4F8FF

Typografia

Nagłówek H1 — 36→56 px, zażółć gęślą jaźń

Nagłówek H2 — 28→44 px, zażółć gęślą jaźń

Nagłówek H3 — 20 px, zażółć gęślą jaźń

Lead 18 px — wyróżniony akapit wprowadzający pod nagłówkiem sekcji.

Tekst podstawowy 15 px — New Spirit 400, interlinia 1.6 (computed ze stagingu). Zażółć gęślą jaźń — pełen zestaw polskich znaków: ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ.

Przyciski

Dowiedz się więcej (SM) Primary MD Poznaj naszą ofertę (LG) Platforma edukacyjna (outline) Dark MD

Hover: limonka → granat + biały tekst (wzorzec ze stagingu).

Karty (na tle błękitnym)

Karta biała

Radius 16, padding 32, cień. Podstawowa karta na kolorowych tłach — wzorzec „karty ×6" ze stagingu.

Druga karta

Siatka 3-kolumnowa składa się do 1 kolumny na mobile.

Trzecia karta

Ostatni akapit bez dolnego marginesu — pilnuje tego komponent.

Karty kolorowe (na białym tle)

Karta kremowa

Bez cienia — tło #F8FFED.

Karta błękitna

Bez cienia — tło #F4F8FF.

Karta biała z cieniem

Na białym tle odróżnia ją cień.

FAQ / akordeon

Czy dostanę nagranie po konferencji?

Przykładowa odpowiedź akordeonu — komponent FAQ z natywnym details/summary, zero JavaScriptu.

Jak działa ten akordeon?

Klik w pytanie otwiera odpowiedź; ikona plusa obraca się w krzyżyk zgodnie ze wzorcem nested-accordion ze stagingu.

Czy mogę mieć kilka otwartych naraz?

Tak — każdy element jest niezależny.

Sekcja granatowa

Tekst i nagłówki przechodzą na biel, linki na limonkę.

Przykładowy link w treści oraz przycisk ghost:

Ghost na granacie Primary na granacie