open-design/design-systems/slack/DESIGN-pl.md

System Projektowania Inspirowany Slackiem

Category: Produktywność & SaaS Platforma komunikacji w miejscu pracy. Aubergine jako kolor główny, wieloakcentowa paleta logo, jasne powierzchnie z ciemnym paskiem bocznym, ciepły i przystępny charakter.

1. Temat Wizualny & Atmosfera

Tożsamość Slacka buduje się wokół idei, że praca powinna być ludzka, a nawet trochę zabawna. Kanoniczna powierzchnia jest jasna — białe obszary treści z głębokim paskiem bocznym w kolorze aubergine (#4A154B) — co jest odwrotnością narzędzi stawiających na ciemny motyw. Ten kontrast jest zamierzony: pasek boczny to spokojna, zawsze widoczna kotwica nawigacyjna, podczas gdy obszar treści jest jasny i otwarty.

Paleta logo — niebieska, zielona, żółta, czerwona — pojawia się głównie w ikonie hashtagu i materiałach marketingowych, a nie rozrzucona po całym interfejsie. W samym produkcie Slack stosuje powściągliwy, profesjonalny system kolorów z aubergine jako jedyną kotwicą marki.

Kluczowe Cechy:

• Jasne powierzchnie treści: biały #FFFFFF i prawie biały #F8F8F8
• Głęboki aubergine #4A154B w pasku bocznym — najbardziej rozpoznawalny element UI marki
• Cztery kolory akcentowe logo (niebieski, zielony, żółty, czerwony) używane oszczędnie tylko jako wyróżniki
• Larsseit dla nagłówków (marketing), systemowy sans-serif dla UI
• Zaokrąglone, ale nie kreskówkowe: promień 4–8px w większości komponentów
• Gęsty, ale oddychający: zwarte wiersze wiadomości z wyraźną hierarchią wątków
• Ciepły i konwersacyjny ton — emoji, reakcje i ilustracje są równoprawnym elementem

---

2. Paleta Kolorów & Role

Kolor Główny Marki

Token	Hex	Rola
--color-aubergine	#4A154B	Tło paska bocznego, główny kolor marki
--color-aubergine-dark	#350d36	Stany hover na powierzchniach aubergine
--color-aubergine-light	#611f69	Podświetlenie aktywnego elementu w pasku bocznym

Kolory Akcentowe Logo (używać oszczędnie — tylko wyróżniki, ikony, marketing)

Token	Hex	Nazwa	Rola
--color-blue	#36C5F0	Błękitny	Ikony kanałów, linki, stany informacyjne
--color-green	#2EB67D	Zieleń morska	Status online, stany sukcesu
--color-yellow	#ECB22E	Złoty	Status nieobecności, ostrzeżenia, wyróżnienia
--color-red	#E01E5A	Rubinowy	Powiadomienia, błędy, badge wzmianek

Powierzchnia & Tło

Token	Hex	Rola
--bg-primary	#FFFFFF	Główny obszar wiadomości, okna modalne
--bg-secondary	#F8F8F8	Panele wątków, powierzchnie pomocnicze
--bg-tertiary	#F1F1F1	Tła pól wejściowych, stany hover
--bg-sidebar	#4A154B	Lewy pasek boczny (aubergine)
--bg-sidebar-hover	rgba(255,255,255,0.1)	Hover elementu paska bocznego
--bg-sidebar-active	rgba(255,255,255,0.2)	Aktywny element paska bocznego
--bg-message-hover	#F8F8F8	Hover wiersza wiadomości

Kolory Tekstu

Token	Hex	Rola
--text-primary	#1D1C1D	Główny tekst treści (prawie czarny)
--text-secondary	#616061	Znaczniki czasu, wyciszone etykiety
--text-sidebar	rgba(255,255,255,0.9)	Nazwy kanałów w pasku bocznym
--text-sidebar-muted	rgba(255,255,255,0.6)	Nieaktywne elementy paska bocznego
--text-link	#1264A3	Linki inline w wiadomościach
--text-mention	#1264A3	Kolor tekstu @wzmianki

Kolory Semantyczne

Token	Hex	Rola
--color-success	#2EB67D	Toasty sukcesu, stany pozytywne
--color-warning	#ECB22E	Stany ostrzeżeń
--color-danger	#E01E5A	Stany błędów, destrukcyjne akcje
--color-info	#36C5F0	Wyróżnienia informacyjne

Obramowanie & Linia Podziału

Token	Hex	Rola
--border-default	#DDDDDD	Standardowe linie podziału, obramowania kart
--border-subtle	#F1F1F1	Subtelne separatory między wierszami
--border-focus	#1264A3	Kolor pierścienia fokusowania

---

3. Zasady Typografii

Kroje Pisma

Rola	Oficjalny	Zamiennik Web
Nagłówki Display / Marketing	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
UI / Treść / Chrome	Slack Lato (własny)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Kod / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack używa Larsseit do nagłówków marketingowych i własnego wariantu Lato dla UI wewnątrz produktu. W zastosowaniach webowych system-ui jest najbezpieczniejszym zamiennikiem.

Skala Typograficzna

Poziom	Rozmiar	Grubość	Wysokość Linii	Odstęp Liter	Zastosowanie
Display XL	48px	800	1.1	-1px	Nagłówki hero w marketingu
Display L	36px	700	1.15	-0.5px	Hero sekcji
Nagłówek 1	28px	700	1.25	normal	Tytuły okien modalnych, nagłówki stron
Nagłówek 2	22px	700	1.3	normal	Tytuły kart, sekcje ustawień
Nagłówek 3	18px	700	1.35	normal	Nagłówki podsekcji
Treść L	16px	400	1.5	normal	Tekst wiadomości, opisy
Treść	15px	400	1.46667	normal	Domyślny tekst UI (bazowy rozmiar Slacka)
Treść SM	13px	400	1.38462	normal	Metadane pomocnicze
Podpis	12px	400	1.33	normal	Znaczniki czasu, podpowiedzi
Kod	12px	400	1.5	normal	Kod inline, bloki kodu

Zasady Typograficzne

• Bazowy rozmiar treści Slacka to 15px — nieco mniejszy niż 16px dla większej gęstości
• Nieprzeczytane kanały: grubość 700 — pogrubienie jest głównym wskaźnikiem nieprzeczytania
• Znaczniki czasu: 12px --text-secondary, widoczne tylko po najechaniu
• Bloki kodu: tło #F8F8F8, obramowanie 1px solid #DDDDDD, border-radius 4px
• Nigdy nie używać rozmiarów czcionki poniżej 12px
• Nagłówki marketingowe: letter-spacing -1px dla dużych rozmiarów display

---

4. Style Komponentów

Przyciski

/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }

Pola Wejściowe

.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}

Element Kanału w Pasku Bocznym

.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}

Badge Nieprzeczytanych

.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}

Załączniki Wiadomości / Karty

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

Reakcje

.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}

---

5. Zasady Układu

Układ Trójkolumnowy

┌──────────────┬──────────────────────────────┬─────────────┐
│  Pasek Boczny│        Obszar Wiadomości      │   Wątek     │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │ opcjonalny  │
└──────────────┴──────────────────────────────┴─────────────┘

System Odstępów (baza 4px)

Token	Wartość	Zastosowanie
--space-1	4px	Ciasne odstępy
--space-2	8px	Padding komponentów
--space-3	12px	Padding pól wejściowych
--space-4	16px	Standardowy padding
--space-6	24px	Padding kart
--space-8	32px	Odstępy sekcji

Struktura Paska Bocznego

[Nazwa Obszaru Roboczego ▼]
────────────────────
Wątki
Wszystkie DM
Szkice i Wysłane
────────────────────
▼ Kanały
  # general
  # random
  # design  ● (nieprzeczytane)
────────────────────
▼ Wiadomości Bezpośrednie
  John Doe
  Jane Smith

Kompozytor Wiadomości

• Przypięty do dołu obszaru wiadomości
• border: 1px solid #DDDDDD, border-radius: 8px, margin: 0 16px 16px
• Pasek narzędzi: emoji, załącz, formatuj, przycisk wyślij

---

6. Głębia & Elewacja

Slack używa lekkich cieni na jasnej powierzchni:

Poziom	Zastosowanie	Cień
Płaski	Wiersze wiadomości, elementy paska bocznego	none
Niski	Karty, pola wejściowe	0 1px 3px rgba(0,0,0,0.08)
Średni	Listy rozwijane, popovery	0 4px 12px rgba(0,0,0,0.12)
Wysoki	Okna modalne, dialogi	0 8px 24px rgba(0,0,0,0.15)
Nakładka	Tła okien modalnych	rgba(0,0,0,0.5)

---

7. Zalecenia i Przestrogi

✅ Zalecane

• Używaj aubergine #4A154B dla paska bocznego — to najbardziej ikoniczny element UI Slacka
• Utrzymuj główny obszar treści biały i jasny
• Używaj #1D1C1D (prawie czarny) dla całego tekstu treści, nie czystej czerni
• Pogrubiaj nazwy kanałów, aby pokazać status nieprzeczytania — grubość jest wskaźnikiem
• Używaj czterech kolorów akcentowych tylko dla ról semantycznych (sukces, ostrzeżenie, niebezpieczeństwo, informacja)
• Stosuj border-left: 4px na załącznikach wiadomości i osadzonych elementach
• Pokazuj znaczniki czasu tylko po najechaniu
• Używaj #1264A3 dla linków i stanów fokusowania
• Utrzymuj elementy paska bocznego zwarte: wysokość 28px, border-radius 6px

❌ Niezalecane

• Nie używaj ciemnego głównego obszaru treści — Slack preferuje jasny motyw
• Nie rozrzucaj niebieskich/zielonych/żółtych/czerwonych jako dekoracyjnych akcentów
• Nie używaj czystej czerni #000000 dla tekstu
• Nie używaj dymków mowy — wiadomości to płaskie wiersze
• Nie nadawaj przyciskom dużego promienia — 4px to standard
• Nie pokazuj znaczników czasu na stałe
• Nie używaj WIELKICH LITER dla nazw kanałów
• Nie używaj rozmiarów czcionki poniżej 12px

---

8. Zachowanie Responsywne

Punkty Przełamania

Punkt Przełamania	Szerokość	Układ
Mobile	< 768px	Pojedynczy panel, pasek boczny jako lewy drawer
Tablet	768–1024px	Tylko pasek boczny + obszar wiadomości
Desktop	> 1024px	Pełny układ trójkolumnowy

Adaptacje Mobilne

• Pasek boczny: lewy drawer, przeciągnij w prawo, aby otworzyć
• Dolny pasek zakładek: Dom, DM, Aktywność, Ty
• Panel wątku: nakładka pełnoekranowa
• Kompozytor: przypięty nad klawiaturą
• Elementy listy kanałów: wysokość obszaru dotykowego 44px
• Aubergine górny pasek nagłówka zachowany na urządzeniach mobilnych

---

9. Przewodnik po Promptach Agenta

Generując projekty w stylu Slacka, stosuj następujące podejście:

Zastosowanie kolorów:

Ustaw background: #FFFFFF jako główne płótno. Użyj #4A154B (aubergine) dla paska bocznego. Cały tekst główny to #1D1C1D. Linki i pierścienie fokusowania używają #1264A3. Cztery kolory logo — #36C5F0, #2EB67D, #ECB22E, #E01E5A — są wyłącznie semantyczne: informacja, sukces, ostrzeżenie, niebezpieczeństwo.

Typografia:

Używaj system-ui, -apple-system, sans-serif dla całego UI. Rozmiar bazowy to 15px. Nieprzeczytane kanały: grubość 700. Tekst treści: grubość 400. Znaczniki czasu: 12px #616061, tylko po najechaniu. Kod: Monaco, Menlo, monospace, 12px, tło #F8F8F8.

Układ:

Trzy kolumny: aubergine pasek boczny 240px + elastyczny biały obszar wiadomości + opcjonalny panel wątku 400px. Elementy paska bocznego: wysokość 28px, promień 6px, pogrubienie gdy nieprzeczytane. Kompozytor: przypięty na dole, border: 1px solid #DDDDDD, border-radius: 8px.

Komponenty:

Przyciski: promień 4px, wysokość 36px, aubergine jako główny. Pola wejściowe: obramowanie 1px solid #DDDDDD, pierścień fokusowania #1264A3. Wiersze wiadomości: płaskie, bez dymków, okrągły awatar 36px. Reakcje: pill border: 1px solid #DDDDDD, border-radius: 24px.

Ton:

Slack jest ciepły, profesjonalny i ludzki. Puste stany używają przyjaznych ilustracji. CTA są bezpośrednie: "Wyślij wiadomość", "Zacznij". Komunikaty o błędach są jasne i pomocne. Nigdy nie alarmujące.

Antywzorce do unikania:

Brak ciemnego obszaru treści. Brak dymków mowy. Brak czystego czarnego tekstu. Brak rozproszonych wielokolorowych akcentów. Brak WIELKICH LITER w nazwach kanałów. Brak czcionki poniżej 12px. Brak dużego promienia przycisku.