/design-systems/github/DESIGN-pl.md

System projektowy inspirowany GitHub

Category: Narzędzia deweloperskie Platforma zorientowana na kod. Gęstość funkcjonalna, precyzja niebieskiego na białym, fundamenty Primer.

1. Motyw wizualny i atmosfera

Powierzchnia GitHub jest zaprojektowana, nie ozdobiona. Każdy piksel wyraża stanowisko: to narzędzie dla osób, którym zależy na diffach, buildach i pull requestach. Tło strony to czysty #ffffff (jasny) lub #0d1117 (ciemny), a treść rozmieszczona jest na gęstych prostokątnych panelach oddzielonych cienkimi ramkami zamiast pustą przestrzenią. Gęstość informacji to marka — wiersze list, linie kodu, nagłówki repozytoriów i karty powiadomień są ściśle upakowane, aby zaawansowany użytkownik mógł przeskanować sto elementów bez przewijania.

Charakterystyczne akcenty to Primer blue (#0969da) dla łączy i podstawowych akcji oraz GitHub green (#1a7f37) dla scalonych stanów, sukcesów i samego przycisku scalania. Oba wyglądają nieco stonowanie w porównaniu z niebieskim i zielonym w produktach konsumenckich — wystarczająco nasycone, by odczytywać się na tle gęstego szarego tekstu, na tyle powściągliwe, by znikać w tle, gdy kilka z nich pojawi się w jednym widoku.

Typografia używa stosu system-ui w całym produkcie, dzięki czemu tekst renderuje się ostro na każdym systemie operacyjnym, w parze z SFMono / Menlo / Consolas dla kodu. Nie ma editorial display fontu; głosem GitHub jest głos systemu, na którym już pracujesz.

Kluczowe cechy:

• Czysto białe płótno (#ffffff) lub głęboka granatowa czerń (#0d1117) — bez ciepła, bez odcienia
• Cienkie szare ramki (#d0d7de) definiują każdy panel
• Primer blue (#0969da) dla łączy/podstawowych; GitHub green (#1a7f37) dla sukcesu/scalania
• system-ui dla prozy; SFMono dla kodu — brak niestandardowego kroju pisma
• Gęste wiersze list z minimalnym paddingiem; białe przestrzenie są rzadkością
• Ikonografia Octicon w rozmiarze 16px / 24px — pojedynczy obrys, geometryczna, spójna
• Odznaki statusu w kształcie pigułki z mocną semantyką kolorów

2. Paleta kolorów i role

Podstawowe

• Canvas Default (#ffffff): Główne tło strony, jasny motyw.
• Canvas Subtle (#f6f8fa): Drugorzędna powierzchnia, pasek boczny, tło pola wprowadzania, pasek nagłówka.
• Canvas Inset (#eaeef2): Tło bloku kodu, głęboko wklęsła powierzchnia.
• Fg Default (#1f2328): Podstawowy tekst, nagłówki, tusz.
• Fg Muted (#656d76): Drugorzędny tekst, podpisy, ścieżki plików.

Akcent marki

• Primer Blue (#0969da): Łącza, główne CTA, podstawa pierścienia fokusa — uniwersalny kolor interaktywny.
• Primer Blue Hover (#0550ae): Stan najechania/wciśnięcia dla podstawowego niebieskiego.
• Accent Subtle (#ddf4ff): Delikatna niebieska powierzchnia dla wyróżnień, banerów informacyjnych.

Semantyczne

• Success / Merge Green (#1a7f37): Scalone PR, odznaki sukcesu, przycisk scalania.
• Success Subtle (#dafbe1): Odcień powierzchni sukcesu.
• Open Green (#1a7f37): Stan „Open" dla issue/PR.
• Closed / Danger Red (#cf222e): Zamknięte PR, działanie destrukcyjne, błąd walidacji.
• Danger Subtle (#ffebe9): Powierzchnia banera błędu.
• Attention / Warning Yellow (#9a6700): Tekst ostrzeżenia na bursztynowej powierzchni.
• Attention Subtle (#fff8c5): Powierzchnia banera ostrzeżenia.
• Done Purple (#8250df): Scalone i zarchiwizowane, stan „done", odznaka premium.
• Sponsor Pink (#bf3989): Serce sponsorów, marka GitHub Sponsors.

Ramka i separator

• Border Default (#d0d7de): Standardowa cienka ramka, obrys panelu.
• Border Muted (#d8dee4): Wewnętrzne separatory w panelu.
• Border Subtle (#eaeef2): Słabe separatory wierszy tabeli.

Ciemny motyw

• Dark Canvas (#0d1117): Ciemne tło strony.
• Dark Surface (#161b22): Pasek boczny, nagłówek, drugorzędna powierzchnia.
• Dark Border (#30363d): Standardowa ramka w trybie ciemnym.
• Dark Fg (#e6edf3): Podstawowy tekst na ciemnym tle.

3. Zasady typografii

Rodzina czcionek

• Body / UI: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
• Code / Mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
• Emoji: "Apple Color Emoji", "Segoe UI Emoji"

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Wysokość linii	Odstęp liter	Uwagi
Display	system-ui	32px (2rem)	600	1.25	-0.01em	Nagłówek repo, hero marketingowy
H1	system-ui	24px (1.5rem)	600	1.25	normal	Nagłówek strony
H2	system-ui	20px (1.25rem)	600	1.25	normal	Nagłówek sekcji
H3	system-ui	16px (1rem)	600	1.25	normal	Podsekcja, nagłówek panelu
Body	system-ui	14px (0.875rem)	400	1.5	normal	Domyślny rozmiar tekstu — nie 16px
Body Small	system-ui	12px (0.75rem)	400	1.4	normal	Podpisy, metadane pliku
Code	SFMono	12px (0.75rem)	400	1.45	normal	Bloki kodu, diff
Code Inline	SFMono	0.85em	400	inherit	normal	Wbudowane fragmenty code

Zasady

• 14px body, nie 16px: Gęstość prozy GitHub to jego tożsamość. Produkt renderuje przy 14px, by zmieścić więcej wierszy w widoku.
• Grubość binarna: 400 dla wszystkiego domyślnie; 600 dla nagłówków i wyróżnień. Bez 500, bez 700.
• Zawsze czcionki systemowe: nigdy nie ładuj webfontu dla chrome — tekst musi renderować się natychmiast przy wolnym połączeniu.

4. Style komponentów

Przyciski

Primary (Green)

• Tło: #1f883d
• Tekst: #ffffff
• Ramka: 1px solid rgba(31, 35, 40, 0.15)
• Padding: 5px 16px
• Radius: 6px
• Cień: 0 1px 0 rgba(31,35,40,0.1)
• Najechanie: tło #1a7f37
• Użycie: „Create repository", „Merge pull request"

Default

• Tło: #f6f8fa
• Tekst: #1f2328
• Ramka: 1px solid #d0d7de
• Padding: 5px 16px
• Radius: 6px
• Najechanie: tło #f3f4f6, ramka #d0d7de

Outline (Blue Link Style)

• Tło: #ffffff
• Tekst: #0969da
• Ramka: 1px solid #d0d7de
• Najechanie: tło #0969da, tekst #ffffff

Danger

• Tło: #ffffff
• Tekst: #cf222e
• Ramka: 1px solid #d0d7de
• Najechanie: tło #a40e26, tekst #ffffff, ramka #a40e26

Karty / Boksy

• Tło: #ffffff
• Ramka: 1px solid #d0d7de
• Radius: 6px
• Padding: 16px (nagłówek) + 16px (treść)
• Nagłówek ma pasek #f6f8fa z dolną ramką.

Pola wprowadzania

• Tło: #ffffff
• Ramka: 1px solid #d0d7de
• Radius: 6px
• Padding: 5px 12px
• Fokus: ramka #0969da, pierścień 0 0 0 3px rgba(9,105,218,0.3)

Odznaki statusu (Issue / PR)

• Open: tło #1a7f37, tekst biały, padding 4px 10px, radius 9999px.
• Closed: tło #cf222e, tekst biały.
• Merged: tło #8250df, tekst biały.
• Draft: tło #6e7781, tekst biały.

Etykiety (tagi na Issues/PRach)

• Padding: 0 7px
• Radius: 9999px
• Czcionka: 12px / 500
• Tło i tekst są programowe (kolor etykiety → tekst obliczany dla kontrastu).

5. Odstępy i układ

• Jednostka bazowa: 4px. Skala odstępów: 4, 8, 12, 16, 24, 32, 40, 48.
• Maksymalna szerokość strony: 1280px (Container-xl).
• Pasek boczny: 296px na desktopie, zwija się poniżej 1012px.
• Padding wiersza: 16px poziomo, 12px pionowo (listy są gęste z założenia).

6. Ruch

• Czas trwania: 80ms dla najechania; 200ms dla otwarcia menu/popovers.
• Wygładzanie: ease-out dla otwarć, ease-in dla zamknięć.
• Unikane: animacje ładowania strony, parallax, trwałe mikrointerakcje. Rzeczy się pojawiają; nie performują.

7. Wytyczne użytkowania

• Utrzymuj gęste listy, obramowane boksy i czcionki systemowe razem; izolowane zielone przyciski nie wystarczą, by stworzyć powierzchnię produktu podobną do GitHub.
• Używaj zielonego dla konstruktywnych akcji repozytoriów, niebieskiego dla łączy i fokusa, a czerwonego/fioletowego/szarego wyłącznie dla stanów issue, PR i workflow.
• Preferuj spokojne chrome, wyraźne ramki i kompaktowe odstępy zamiast dekoracyjnych cieni lub dużych kart w stylu marketingowym.