workbuddy_skills/open-design/design-systems/duolingo/DESIGN-pl.md

System projektowania inspirowany Duolingo

Category: Produktywność i SaaS Platforma do nauki języków. Jaskrawa zieleń sowy, grubaśne cienie, grywalizowana radość.

1. Motyw wizualny i atmosfera

Duolingo to grywalizacja jako język wizualny. Interfejs jest bezwstydnie jaskrawy, z zielenią sowy (#58cc02) jako głównym kolorem marki i grubym cieniem 4px u dołu każdego elementu interaktywnego, który wygląda jak przycisk 3D czekający na naciśnięcie. Strona jest biała (#ffffff) z grubymi obramowaniami 2–3px w ciemnej szarości (#e5e5e5), a cały system przypomina aplikację iOS z 2015 roku odrodzoną z lepszą hierarchią.

Typografia używa Feather Bold (niestandardowy zaokrąglony bezszeryfowy) dla chrome i Mona Sans (lub Inter) dla treści. Rozmiary wyświetlania są duże i pewne siebie — Duolingo nigdy nie szepcze. Nagłówki często noszą zielony podkreślony pociągnięcie lub siedzą na zielonej pigułce, a maskotka Duo (zielona sowa) pojawia się jako aktywna postać ilustracyjna, a nie statyczne logo.

Język kształtów jest przyjazny: promienie 16–20px na kartach, 12px na przyciskach, 9999px na chipach i paskach postępu. Ikonografia jest wypełniona, zaokrąglona i kodowana kolorami według umiejętności — każda powierzchnia lekcji ma natychmiast rozpoznawalną parę kolorów.

Kluczowe cechy:

• Zieleń sowy (#58cc02) jako dominujący kolor marki, używany na ponad 30% powierzchni
• Gruby cień dolny 4px na każdym przycisku (afordancja „dotykowego naciśnięcia")
• Solidne obramowania 2–3px, nigdy cienkie linie
• Feather Bold (zaokrąglony wyświetlacz) + Mona Sans (treść)
• Duży pewny tekst — rozmiary wyświetlania zaczynają się od 48px i rosną
• Maskotka jako postać: sowa Duo pojawia się podczas onboardingu, błędów, serii
• Pomarańcz serii (#ff9600) i różowy klejnot (#ce82ff) jako drugorzędne kolory marki

2. Paleta kolorów i role

Podstawowe

• Zieleń sowy (#58cc02): Główny kolor marki, podstawowe CTA, poprawna odpowiedź.
• Głęboka zieleń sowy (#58a700): Kolor naciśnięcia/cienia dla zielonych przycisków.
• Jasna zieleń sowy (#89e219): Najechanie, delikatne wypełnienia.
• Blada zieleń sowy (#dbf8c5): Delikatna powierzchnia, baner sukcesu.

Drugorzędne akcenty

• Pomarańcz serii (#ff9600): Licznik serii, ikona ognia, energia premium.
• Głęboka pomarańcz serii (#cc7a00): Naciśnięta pomarańcz.
• Różowy klejnot (#ce82ff): Waluta klejnotów, Super Duolingo.
• Niebieski węgorz (#1cb0f6): Przycisk podpowiedzi, link informacyjny.
• Czerwień kardynała (#ff4b4b): Błędna odpowiedź, utrata życia.
• Żółty pszczoły (#ffc800): Odznaka pro, osiągnięcie.

Powierzchnia

• Śnieg (#ffffff): Główne tło.
• Węgorz (#f7f7f7): Przerwa sekcji, drugorzędna powierzchnia.
• Łabędź (#e5e5e5): Wyłączone tło, blok wbudowany.
• Wilk (#777777): Ciemny separator, drugorzędny tekst.

Tusz i tekst

• Czarny węgorz (#3c3c3c): Główny tekst.
• Wilk (#777777): Drugorzędny tekst, podpisy.
• Zając (#afafaf): Wyłączony, symbol zastępczy.

Obramowanie

• Łabędź (#e5e5e5): Standardowe obramowanie 2px.
• Zając (#afafaf): Podkreślone obramowanie po najechaniu.

3. Zasady typografii

Rodzina czcionek

• Wyświetlacz / UI / Nagłówki: Feather Bold, z rezerwą: 'DIN Round Pro', 'Helvetica Neue', sans-serif
• Treść / Długi tekst: Mona Sans, z rezerwą: 'Helvetica Neue', system-ui, sans-serif
• Kod (rzadko, szkoły/admin): JetBrains Mono, z rezerwą: ui-monospace, Menlo, monospace

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Wysokość wiersza	Odstęp	Uwagi
Wyświetlacz	Feather Bold	56px (3.5rem)	800	1.05	-0.01em	Bohater onboardingu
H1	Feather Bold	32px (2rem)	800	1.15	-0.005em	Tytuł strony
H2	Feather Bold	24px (1.5rem)	800	1.2	normal	Nagłówek sekcji
H3	Feather Bold	18px (1.125rem)	700	1.25	normal	Tytuł karty, wiersz lekcji
Duża treść	Mona Sans	17px (1.0625rem)	500	1.5	normal	Podpowiedź lekcji, instrukcja
Treść	Mona Sans	15px (0.9375rem)	400	1.5	normal	Standardowa proza
Podpis	Mona Sans	13px (0.8125rem)	600	1.4	0.01em	Licznik XP, metadane
Przycisk	Feather Bold	16px (1rem)	800	1.2	0.02em	Standardowa etykieta przycisku
Seria	Feather Bold	14px (0.875rem)	800	1.2	normal	Numer serii, na płomieniu

Zasady

• 800 to wartość domyślna: Feather Bold działa na 800 na nagłówkach i przyciskach. 700 wygląda słabo w tym systemie.
• Duży tekst: rozmiary nagłówków są 25–40% większe niż typowe marki produktów — pewność siebie jako tożsamość.
• Zaokrąglone kształty liter: każdy glif ma miękkie zakończenia; ostre szeryfowe złamałyby kontrakt przyjazności.

4. Stylizacja komponentów

Przyciski

Podstawowy (Zieleń sowy)

• Tło: #58cc02
• Tekst: #ffffff
• Wypełnienie: 14px 24px
• Promień: 16px
• Border-bottom: 4px solid #58a700 (gruby cień)
• Najechanie: tło #89e219
• Aktywny: translate-y 4px, border-bottom 0 (przycisk „wciska się")
• Użycie: „Kontynuuj", „Sprawdź", główne CTA.

Drugorzędny (Biały z dolnym cieniem)

• Tło: #ffffff
• Tekst: #777777
• Obramowanie: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Promień: 16px
• Wypełnienie: 14px 24px
• Najechanie: tekst #3c3c3c, obramowanie #afafaf

Pomarańcz serii

• Tło: #ff9600
• Tekst: #ffffff
• Border-bottom: 4px solid #cc7a00
• Użycie: cel serii, „Rozpocznij serię"

Błąd (Czerwień kardynała)

• Tło: #ff4b4b
• Tekst: #ffffff
• Border-bottom: 4px solid #cc3b3b
• Użycie: informacja zwrotna o błędnej odpowiedzi.

Karty / Kafelki lekcji

• Tło: #ffffff
• Obramowanie: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Promień: 16px
• Wypełnienie: 16px
• Najechanie: unieść o 2px, cień 0 4px 0 #d7d7d7

Węzeł drzewa umiejętności (Bąbel lekcji)

• Rozmiar: 80×72px
• Tło: odcień koloru umiejętności (zielony dla aktywnego, szary dla zablokowanego)
• Border-bottom: 6px solid ciemniejszy wariant
• Promień: 50% (okrągły)
• Aktywny: pulsuje 1.0 → 1.05 co 1.6s

Pola wejściowe

• Tło: #ffffff
• Obramowanie: 2px solid #e5e5e5
• Promień: 12px
• Wypełnienie: 12px 16px
• Focus: obramowanie #1cb0f6 (niebieski węgorz), pierścień 0 0 0 3px rgba(28, 176, 246, 0.2)

Pasek postępu

• Tor: #e5e5e5
• Wypełnienie: #58cc02 (lub #ff9600 dla serii)
• Promień: 9999px
• Wysokość: 16px
• Animowane wypełnienie: 320ms ease-out przy przyroście.

5. Odstępy i układ

• Jednostka podstawowa: 4px. Skala: 4, 8, 12, 16, 24, 32, 48, 64.
• Kontener: maks. 1080px, rynna 24px.
• Kolumna drzewa lekcji: 320px szerokości; wyśrodkowana na pulpicie.

6. Ruch

• Czas trwania: 180ms dla naciśnięcia przycisku; 320ms dla odblokowania węzła umiejętności; 1.6s dla pulsu aktywnego węzła.
• Easing: cubic-bezier(0.34, 1.56, 0.64, 1) (back-out, lekkie przekroczenie) dla odblokowań.
• Maskotka: Duo mruga co 4–6s, skacze przy kamieniach milowych serii (480ms ease-out sprężyna).

7. Wytyczne użytkowania

• Zachowaj razem mocno nasyconą zieleń sowy, grube dolne cienie i zaokrągloną geometrię lekcji; same płaskie zielone przyciski nie brzmią jak Duolingo.
• Zarezerwuj duży pogrubiony tekst dla momentów lekcji, serii i postępu, w których produkt potrzebuje zachęty lub informacji zwrotnej.
• Używaj żywiołowego ruchu oszczędnie przy zmianach stanu postępu, unikając generycznych odbijających się animacji na każdym kontrolce.