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

System Projektowania Inspirowany Discord

Category: Produktywność i SaaS Platforma głosowa i czatowa. Głęboki blurple, ciemne powierzchnie jako baza, żywe akcenty.

1. Temat Wizualny i Atmosfera

Produkt Discord jest stworzony na wieczorne sesje, rajdy i grupowe rozmowy głosowe — dlatego cała powierzchnia jest ciemna od podstaw. Domyślne tło to głęboki Background Primary (#313338 jasny motyw, #1e1f22 ciemny motyw), a kolumny czatu są nakładane na nieco jaśniejsze lub ciemniejsze odcienie, by oznaczać kanały, wątki i boczne panele. Charakterystyczny Blurple (#5865f2) jest zarezerwowany dla znaku marki, głównych CTA, wzmianek i elementu „ty" — stosowany oszczędnie, by wyróżniał się na tle stonowanych neutralów.

Typografia opiera się na gg sans (własnej czcionce Discord zastępującej Whitney) do treści i interfejsu, z zaokrąglonymi geometrycznymi kształtami, które sprawiają wrażenie przyjaznych, a zarazem czytelnych w małych rozmiarach wymaganych przez klienta czatu. Nagłówki rosną stopniowo; wiersze czatu są ścisłe (4–8px między grupami wiadomości), dzięki czemu godziny przewijania historii są łatwe do przeglądania.

Język kształtów jest zaokrąglony, lecz nie balonowo miękki: promień 8px na kartach, 4px na polach wejściowych, pełne pigułki na odznakach statusu i tagach. Serwery mają awatary w kształcie zaokrąglonych kwadratów o rozmiarze 48px, które po najechaniu kursorem zamieniają się w koła — drobny element animacji, który stał się częścią tożsamości marki.

Kluczowe Cechy:

• Ciemne powierzchnie jako baza: #1e1f22 / #2b2d31 / #313338 (3-poziomowa głębia)
• Blurple #5865f2 jako jedyny nasycony akcent na powierzchni czatu
• gg sans (styl Whitney) do wszystkich tekstów — przyjazna, geometryczna, neutralna
• Awatary serwerów w kształcie zaokrąglonych kwadratów (promień 16px) przeskakujące w koła po najechaniu
• Ścisłe odstępy wierszy czatu, hojne wypełnienie bocznych paneli
• Kropki statusu: zielona online, żółta idle, czerwona dnd, szara offline
• Rozdzielniki 1px wyrównane do piksela w subtelnej bieli przy niskiej przezroczystości

2. Paleta Kolorów i Role

Główne

• Blurple (#5865f2): Główny kolor marki, główne CTA, podświetlenie wzmianki.
• Blurple Hover (#4752c4): Hover/aktywny dla blurple.
• Blurple Soft (#7289da): Stary blurple, drugorzędny akcent w marketingu.

Powierzchnie (Ciemny Motyw — domyślny)

• Background Tertiary (#1e1f22): Listwa z listą serwerów, najgłębsze tło.
• Background Secondary (#2b2d31): Pasek boczny kanałów, pasek boczny ustawień.
• Background Primary (#313338): Powierzchnia czatu, kolumna wiadomości.
• Background Floating (#111214): Pływające popovers, podpowiedzi, autouzupełnianie.
• Background Modifier Hover (rgba(78, 80, 88, 0.3)): Nakładka hover na wierszach.
• Background Modifier Selected (rgba(78, 80, 88, 0.6)): Aktywny wiersz.

Powierzchnie (Jasny Motyw)

• Light Bg Primary (#ffffff): Powierzchnia czatu w jasnym motywie.
• Light Bg Secondary (#f2f3f5): Pasek boczny w jasnym motywie.
• Light Bg Tertiary (#e3e5e8): Najgłębsza jasna powierzchnia.

Tekst

• Header Primary (#f2f3f5): Nagłówki kanałów, tytuły modali w ciemnym motywie.
• Header Secondary (#b5bac1): Wyciszone nagłówki.
• Text Normal (#dbdee1): Tekst główny w ciemnym motywie — nieco chłodniejszy niż czysta biel.
• Text Muted (#949ba4): Znaczniki czasu, nazwy serwerów, drugorzędne metadane.
• Text Link (#00a8fc): Hiperłącza w wiadomościach — błękitny, odróżniający się od blurple.
• Channels Default (#80848e): Nieaktywna nazwa kanału na pasku bocznym.

Status i Znaczenie

• Status Online (#23a55a): Kropka online, stany sukcesu.
• Status Idle (#f0b232): Kropka idle, niedostępny.
• Status DND (#f23f43): Nie przeszkadzać, służy też jako czerwień destrukcyjna.
• Status Streaming (#593695): Fioletowy „Streaming".
• Status Offline (#80848e): Szary offline.
• Mention Highlight (rgba(88, 101, 242, 0.1)): Delikatna warstwa blurple na wierszach z @wzmianką.

Obramowania i Rozdzielniki

• Background Modifier Accent (rgba(255, 255, 255, 0.06)): Standardowy rozdzielnik w ciemnym motywie.
• Border Subtle (#3f4147): Jednolity rozdzielnik dla kart.

3. Zasady Typografii

Rodzina Czcionek

• Treść / UI / Nagłówki: gg sans, z fallbackiem: "Helvetica Neue", Helvetica, Arial, sans-serif
• Wyświetlanie (legacy / Whitney): Whitney, z fallbackiem: gg sans
• Kod / Mono: "gg mono", z fallbackiem: Consolas, Andale Mono, Courier New, Courier, monospace

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Wysokość linii	Odstęp liter	Uwagi
Display Hero	gg sans	56px (3.5rem)	800	1.1	-0.02em	Hero marketingowy
Nagłówek strony	gg sans	24px (1.5rem)	700	1.25	normal	Tytuły ustawień/profilu
Nazwa kanału	gg sans	16px (1rem)	600	1.25	normal	#general, nagłówek kanału
Treść wiadomości	gg sans	16px (1rem)	400	1.375	normal	Standardowy tekst czatu
Nazwa użytkownika	gg sans	16px (1rem)	500	1.25	normal	Autor wiadomości
Znacznik czasu	gg sans	12px (0.75rem)	500	1.25	normal	„Dzisiaj o 16:32"
Kanał paska bocznego	gg sans	16px (1rem)	500	1.25	normal	Wiersze listy kanałów
Nazwa serwera	gg sans	16px (1rem)	600	1.25	normal	Nagłówek serwera
Podpis / Meta	gg sans	12px (0.75rem)	400	1.3	0.02em	Tekst statusu, tag edycji
Kod wbudowany	gg mono	0.875em	400	inherit	normal	Wbudowany code
Blok kodu	gg mono	14px (0.875rem)	400	1.5	normal	Blok potrójnym ogrodzeniem

Zasady

• Przyjazna geometria: gg sans zastępuje Whitney zaokrąglonymi zakończeniami liter a/g/s — marka chce ciepła bez utraty czytelności.
• Kontrast grubości ponad kontrast koloru: hierarchia pochodzi ze stopni grubości 400→500→600→700→800; powierzchnia pozostaje neutralna.
• Treść 16px: wiadomości czatu nie zmniejszają się poniżej 16px. Gęstość pochodzi z wysokości linii (1.375), nie z rozmiaru czcionki.

4. Style Komponentów

Przyciski

Główny

• Tło: #5865f2
• Tekst: #ffffff
• Wypełnienie: 8px 16px
• Promień: 4px
• Hover: #4752c4
• Użycie: Główne CTA, „Kontynuuj", „Dołącz do serwera"

Drugorzędny

• Tło: #4e5058
• Tekst: #ffffff
• Wypełnienie: 8px 16px
• Promień: 4px
• Hover: #6d6f78

Trzeciorzędny / Subtelny (styl linku)

• Tło: transparent
• Tekst: #dbdee1
• Hover: tekst podkreślony, brak zmiany tła

Destrukcyjny

• Tło: #da373c
• Tekst: #ffffff
• Hover: #a12d2f

Pola wejściowe

• Tło: #1e1f22
• Tekst: #dbdee1
• Obramowanie: 1px solid #1e1f22
• Promień: 4px
• Wypełnienie: 10px 12px
• Fokus: obramowanie #5865f2

Awatary Serwerów

• Rozmiar: 48×48px
• Promień: 16px (zaokrąglony kwadrat) domyślnie; przechodzi do 50% przy hover i aktywnym stanie.
• Stan aktywny: biała pigułka 4px na lewej krawędzi kolumny ikon.

Kropki Statusu

• Rozmiar: 10×10px
• Obramowanie: 3px solid background-tertiary (tworzy efekt „wycięcia")
• Pozycja: prawy dolny róg awatara.

Karty / Osadzenia

• Tło: #2b2d31 (ciemny) lub #f2f3f5 (jasny)
• Lewe obramowanie: 4px solid kolor akcentu osadzenia.
• Promień: 4px
• Wypełnienie: 8px 16px

Pigułka Wzmianki

• Tło: rgba(88, 101, 242, 0.3)
• Tekst: #c9cdfb
• Wypełnienie: 0 2px
• Promień: 3px

5. Odstępy i Układ

• Jednostka bazowa: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
• Listwa serwerów: szerokość 72px, stała.
• Pasek boczny kanałów: szerokość 240px.
• Lista członków: szerokość 240px na pulpicie.
• Kolumna czatu: płynna, min 380px.

6. Ruch

• Czas trwania: 200ms dla hover; 350ms dla morfowania awatara w koło; 80ms dla zanikania podpowiedzi.
• Przyspieszenie: cubic-bezier(0.215, 0.61, 0.355, 1) dla morfowania awatara (szybkie, potem ustabilizowanie).
• Pulsowanie powiadomień: 1.4s ease-in-out infinite na wskaźniku nieprzeczytanej wzmianki.

7. Ograniczenia Użytkowania

• Zachowaj ciemną powłokę, zwartą gęstość i hierarchię działań blurple razem; użycie blurple na jasnym układzie w stylu marketingowym niszczy klimat produktu Discord.
• Utrzymuj powierzchnie o dużej nawigacji zorganizowane wokół listew, pasków bocznych i kolumn czatu, a nie izolowanych dekoracyjnych kart.
• Używaj języka zaokrąglonych kwadratowych awatarów i kropek statusu przy reprezentowaniu osób, serwerów lub aktywnej obecności.