skills/nexu-io__open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-09-20 06:15:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
chore/plugin-previews
nexu-io__open-design/design-systems/github/DESIGN-pl.md
T
xne998808-ai 681dacde18 feat(landing): DESIGN.md systems hub + design-token spec sheet + scenario mocks on design-system pages (#4420) 
* feat(landing): systems-page DESIGN.md/FAQ copy + design-token loader

* feat(landing): DESIGN.md+FAQ sections on systems hub, token spec sheet on detail

* feat(landing): detail-page TOC nav, token visuals, tighter spacing, unified related cards

* feat(landing): multi-scenario themed previews (web/app/slides/poster) on design-system detail

* feat(landing): localized routes for design-system detail pages (chrome i18n, DESIGN.md body stays en)

* feat(landing): theme scenario mocks from real design tokens; phone app, 16:9 slide, refined poster

* feat(landing): redesign slide mock (two-zone), sticky schema nav, contribute moved to top

* feat(landing): right-rail section nav + 2-up related cards on design-system detail

* fix(landing): localize design-system detail title suffix + keyword-rich meta description + keywords meta

* feat(landing): declutter detail header — icon-only share, move contribute callout to page bottom

* fix(landing): cancel homepage 130px section padding on detail-block (killed huge inter-section gaps)

* i18n(landing): localize design-system detail + systems-hub chrome across 17 locales

* feat(landing): locale-aware DESIGN.md body loading (DESIGN-<locale>.md) with English fallback

* i18n(design-systems): localize apple DESIGN.md body into 17 locales

* i18n(design-systems): localize stripe DESIGN.md body into 17 locales

* i18n(design-systems): localize vercel DESIGN.md body into 17 locales

* i18n(design-systems): localize notion DESIGN.md body into 17 locales

* i18n(design-systems): localize github DESIGN.md body into 17 locales

* i18n(design-systems): localize airtable DESIGN.md body into 17 locales

* i18n(design-systems): localize figma DESIGN.md body into 17 locales

* i18n(design-systems): localize openai DESIGN.md body into 17 locales

* i18n(design-systems): localize slack DESIGN.md body into 17 locales

* i18n(design-systems): localize discord DESIGN.md body into 17 locales

* i18n(design-systems): localize webflow DESIGN.md body into 17 locales

* i18n(design-systems): localize cohere DESIGN.md body into 17 locales

* i18n(design-systems): localize duolingo DESIGN.md body into 17 locales

* i18n(design-systems): localize spotify DESIGN.md body into 17 locales

* i18n(design-systems): localize shopify DESIGN.md body into 17 locales

* i18n(design-systems): localize nvidia DESIGN.md body into 17 locales

* i18n(design-systems): localize pinterest DESIGN.md body into 17 locales

* i18n(design-systems): localize uber DESIGN.md body into 17 locales

* i18n(design-systems): localize nike DESIGN.md body into 17 locales

* i18n(design-systems): localize airbnb DESIGN.md body into 17 locales

* i18n(design-systems): localize ibm DESIGN.md body into 17 locales

* i18n(design-systems): localize playstation DESIGN.md body into 17 locales

* i18n(design-systems): localize starbucks DESIGN.md body into 17 locales

* i18n(landing): localize detailSystemLabel (design-system H1/title noun) across 17 locales

* i18n(landing): localize plugins chrome (contribute callout, card CTA, search, about) across 15 remaining locales

* i18n(landing): localized card taglines + category labels for design systems (149 systems x 17 locales)

* fix(landing): suppress on-load locale auto-redirect on design-system detail pages (keep localized routes + hreflang)

* fix(landing): localize SystemCard detail link so cards on /<locale>/ stay in-locale

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>
2026-06-17 15:24:58 +08:00

8.2 KiB
Raw Permalink Blame History

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.
Reference in New Issue View Git Blame Copy Permalink