mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
681dacde18
* 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>
162 lines
8.2 KiB
Markdown
162 lines
8.2 KiB
Markdown
# 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.
|