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>
13 KiB
13 KiB
System Projektowania Inspirowany Figmą
Kategoria: Projektowanie i Twórczość Narzędzie do projektowania zespołowego. Żywe, wielobarwne — figlarnie, a zarazem profesjonalnie.
1. Motyw Wizualny i Atmosfera
Interfejs Figmy jest narzędziem projektowym, które zaprojektowało samo siebie — mistrzowska lekcja typograficznej precyzji, w której własny, zmienny krój pisma (figmaSans) moduluje między ekstremalnie cienkim (grubość 320) a pogrubionym (grubość 700), zatrzymując się na niespotykanych wartościach pośrednich (330, 340, 450, 480, 540), których większość systemów typograficznych nigdy nie eksploruje. Ta szczegółowa kontrola grubości nadaje każdemu elementowi tekstowemu precyzyjnie dobraną wagę wizualną, budując hierarchię przez mikroróżnice zamiast tępego narzędzia „regular kontra bold".
Strona przedstawia fascynującą dwoistość: chrome interfejsu jest ściśle czarno-biały (dosłownie tylko #000000 i #ffffff wykrywane jako kolory), podczas gdy sekcja hero i prezentacje produktów eksplodują żywymi, wielobarwnymi gradientami — elektryczną zielenią, jaskrawą żółcią, głębokim fioletem i gorącym różem. To rozdzielenie oznacza, że sam system projektowania jest bezbarwny i traktuje kolorowe efekty produktu jak treść pierwszoplanową. Strona marketingowa Figmy to w istocie biała galeryjna ściana, na której eksponowane są kolorowe dzieła.
To, co wyróżnia Figmę poza zmiennym krojem pisma, to geometria kółek i pigułek. Przyciski stosują promień 50px (pigułka) lub 50% (idealne koło dla przycisków ikonowych), nadając interfejsowi organiczny, paletowy charakter narzędzia do projektowania. Przerywany wskaźnik fokusu (dashed 2px) to świadomy wybór projektowy nawiązujący do uchwytów zaznaczenia w edytorze Figmy — język UI strony odnosi się do języka UI produktu.
Kluczowe cechy:
- Własny zmienny krój pisma (figmaSans) z niespotykanie precyzyjnymi wartościami grubości: 320, 330, 340, 450, 480, 540, 700
- Ściśle czarno-biały chrome interfejsu — kolor pojawia się wyłącznie w treściach produktowych
- figmaMono dla wielkich liter w etykietach technicznych z szerokim rozstępem liter
- Geometria pigułki (50px) i koła (50%) w przyciskach
- Przerywane obrysy fokusu nawiązujące do uchwytów zaznaczenia w edytorze Figmy
- Żywe, wielobarwne gradienty hero (zielony, żółty, fioletowy, różowy)
- Funkcja OpenType
"kern"włączona globalnie - Ujemny rozstęp liter w całym interfejsie — nawet tekst podstawowy ma -0.14px do -0.26px
2. Paleta Kolorów i Ich Role
Podstawowe
- Czysta czerń (
#000000): Cały tekst, wszystkie pełne przyciski, wszystkie obramowania. Jedyny „kolor" interfejsu. - Czysta biel (
#ffffff): Wszystkie tła, białe przyciski, tekst na ciemnych powierzchniach. Druga połowa dychotomii.
Uwaga: Strona marketingowa Figmy używa WYŁĄCZNIE tych dwóch kolorów dla warstwy interfejsu. Wszystkie żywe kolory pojawiają się jedynie w zrzutach ekranu produktu, gradientach hero i treściach osadzonych.
Powierzchnie i Tła
- Czysta biel (
#ffffff): Podstawowe tło strony i powierzchnie kart. - Szklana czerń (
rgba(0, 0, 0, 0.08)): Delikatna ciemna nakładka dla drugorzędnych okrągłych przycisków i efektów szklanych. - Szklana biel (
rgba(255, 255, 255, 0.16)): Mrożona szklana nakładka dla przycisków na ciemnych lub kolorowych powierzchniach.
System Gradientów
- Gradient hero: Żywy, wielostopniowy gradient z elektryczną zielenią, jaskrawą żółcią, głębokim fioletem i gorącym różem. Ten gradient jest wizualnym znakiem rozpoznawczym sekcji hero — reprezentuje kreatywne możliwości narzędzia.
- Gradienty sekcji produktowych: Poszczególne obszary produktu (Projektowanie, Tryb deweloperski, Prototypowanie) mogą stosować własne motywy kolorystyczne w swoich prezentacjach.
3. Zasady Typograficzne
Rodzina Krojów
- Podstawowy:
figmaSans, z zamiennikami:figmaSans Fallback, SF Pro Display, system-ui, helvetica - Monospace / Etykiety:
figmaMono, z zamiennikami:figmaMono Fallback, SF Mono, menlo
Hierarchia
| Rola | Krój | Rozmiar | Grubość | Wysokość linii | Rozstęp liter | Uwagi |
|---|---|---|---|---|---|---|
| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (zwarte) | -1.72px | Maksymalny efekt, ekstremalne rozstrzelenie |
| Nagłówek sekcji | figmaSans | 64px (4rem) | 400 | 1.10 (zwarte) | -0.96px | Tytuły sekcji funkcji |
| Podtytuł | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Wyróżniony tekst sekcji |
| Podtytuł lekki | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Lekki tekst sekcji |
| Tytuł funkcji | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Pogrubione nagłówki kart |
| Tekst podstawowy duży | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px do -0.14px | Opisy, wprowadzenia |
| Tekst podstawowy / Przycisk | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px do normal | Standardowy tekst, nawigacja, przyciski |
| Tekst podstawowy lekki | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px do normal | Lekki tekst podstawowy |
| Etykieta mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (zwarte) | 0.54px | Etykiety sekcji pisane wielkimi literami |
| Mono małe | figmaMono | 12px (0.75rem) | 400 | 1.00 (zwarte) | 0.6px | Małe tagi pisane wielkimi literami |
Zasady
- Precyzja zmiennego kroju pisma: figmaSans używa grubości, których większość systemów nigdy nie stosuje — 320, 330, 340, 450, 480, 540. Tworzy to hierarchię przez subtelne różnice grubości, a nie gwałtowne skoki. Różnica między 330 a 340 jest niemal nieuchwytna, lecz strukturalnie istotna.
- Lekkość jako baza: Większość tekstu podstawowego używa grubości 320–340 (lżejszej niż typowe 400 „regular"), tworząc eteryczne, przewiewne doświadczenie czytelnicze pasujące do estetyki narzędzia projektowego.
- Kerning wszędzie: Każdy element tekstowy aktywuje funkcję OpenType
"kern"— kerning nie jest opcją, jest elementem struktury. - Ujemne rozstrzelenie jako domyślne: Nawet tekst podstawowy używa rozstępu -0.1px do -0.26px, tworząc powszechnie zwarte teksty. Tekst display ściska się dalej do -0.96px i -1.72px.
- Mono dla struktury: figmaMono pisany wielkimi literami z dodatnim rozstępem liter (0.54px–0.6px) tworzy techniczne etykiety orientacyjne.
4. Style Komponentów
Przyciski
Czarna pełna pigułka
- Tło: czysta czerń (
#000000) - Tekst: czysta biel (
#ffffff) - Promień: koło (50%) dla przycisków ikonowych
- Fokus: przerywany obrys 2px
- Maksymalne wyróżnienie
Biała pigułka
- Tło: czysta biel (
#ffffff) - Tekst: czysta czerń (
#000000) - Odstępy: 8px 18px 10px (asymetryczne pionowe)
- Promień: pigułka (50px)
- Fokus: przerywany obrys 2px
- Standardowe CTA na ciemnych lub kolorowych powierzchniach
Szklana ciemna
- Tło:
rgba(0, 0, 0, 0.08)(delikatna ciemna nakładka) - Tekst: czysta czerń
- Promień: koło (50%)
- Fokus: przerywany obrys 2px
- Drugorzędna akcja na jasnych powierzchniach
Szklana jasna
- Tło:
rgba(255, 255, 255, 0.16)(mrożone szkło) - Tekst: czysta biel
- Promień: koło (50%)
- Fokus: przerywany obrys 2px
- Drugorzędna akcja na ciemnych lub kolorowych powierzchniach
Karty i Kontenery
- Tło: czysta biel
- Obramowanie: brak lub minimalne
- Promień: 6px (małe kontenery), 8px (obrazy, karty, okna dialogowe)
- Cień: subtelne do umiarkowanych efektów elewacji
- Zrzuty ekranu produktu jako zawartość kart
Nawigacja
- Czysta, pozioma nawigacja na białym tle
- Logo: wordmark Figmy w kolorze czarnym
- Zakładki produktów: nawigacja zakładkowa w kształcie pigułki (50px)
- Linki: czarny tekst, dekoracja podkreślenia 1px
- CTA: czarny przycisk pigułka
- Najechanie kursorem: kolor tekstu przez zmienną CSS
Charakterystyczne Komponenty
Pasek zakładek produktu
- Poziome zakładki w kształcie pigułki (promień 50px)
- Każda zakładka reprezentuje obszar produktu Figmy (Projektowanie, Tryb deweloperski, Prototypowanie itd.)
- Aktywna zakładka wyróżniona
Sekcja z gradientem hero
- Pełnoszerokościowe, żywe, wielobarwne tło gradientowe
- Biały tekst nakładkowy z nagłówkiem display 86px
- Zrzuty ekranu produktu unoszące się w gradiencie
Przerywane wskaźniki fokusu
- Wszystkie elementy interaktywne używają obrysu
dashed 2pxprzy fokusie - Nawiązuje do uchwytów zaznaczenia w edytorze Figmy
- Meta-projektowy wybór łączący stronę z produktem
5. Zasady Układu
System Odstępów
- Jednostka bazowa: 8px
- Skala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
Siatka i Kontener
- Maksymalna szerokość kontenera: do 1920px
- Hero: pełnoszerokościowy gradient z wycentrowaną treścią
- Sekcje produktowe: naprzemiennie ułożone prezentacje
- Stopka: ciemna sekcja pełnej szerokości
- Responsywność od 559px do 1920px
Filozofia Białej Przestrzeni
- Rytm galerii: Hojne odstępy pozwalają każdej sekcji produktowej oddychać jak osobna ekspozycja.
- Sekcje kolorowe jako wizualny oddech: Gradient hero i prezentacje produktów zapewniają chromatyczną ulgę między monochromatycznymi sekcjami interfejsu.
Skala Promieni Narożników
- Minimalne (2px): Małe elementy linków
- Subtelne (6px): Małe kontenery, separatory
- Komfortowe (8px): Karty, obrazy, okna dialogowe
- Pigułka (50px): Przyciski zakładek, CTA
- Koło (50%): Przyciski ikonowe, okrągłe elementy
6. Głębia i Elewacja
| Poziom | Sposób | Zastosowanie |
|---|---|---|
| Płaski (Poziom 0) | Brak cienia | Tło strony, większość tekstów |
| Powierzchnia (Poziom 1) | Biała karta na gradiencie lub ciemnej sekcji | Karty, prezentacje produktów |
| Uniesiony (Poziom 2) | Subtelny cień | Pływające karty, stany hover |
Filozofia cienia: Figma używa cieni oszczędnie. Podstawowymi mechanizmami głębi są kontrast tła (biała treść na kolorowych lub ciemnych sekcjach) i inherentna wymiarowość samych zrzutów ekranu produktu.
7. Zalecenia i Przestrogi
Zalecaj
- Używaj figmaSans z precyzyjnymi grubościami zmiennymi (320–540) — ta granularna kontrola grubości JEST projektem
- Utrzymuj ściśle czarno-biały interfejs — kolor pochodzi wyłącznie z treści produktowych
- Stosuj geometrię pigułki (50px) i koła (50%) dla wszystkich elementów interaktywnych
- Stosuj przerywane obrysy fokusu 2px — charakterystyczny wzorzec dostępności
- Włączaj funkcję
"kern"dla wszystkich tekstów - Używaj figmaMono pisanego wielkimi literami z dodatnim rozstępem liter dla etykiet
- Stosuj ujemny rozstęp liter w całym interfejsie (-0.1px do -1.72px)
Unikaj
- Nie dodawaj kolorów interfejsu — monochromatyczna paleta jest absolutna
- Nie używaj standardowych grubości krojów pisma (400, 500, 600, 700) — stosuj unikalne wartości zmiennego kroju pisma (320, 330, 340, 450, 480, 540)
- Nie używaj ostrych narożników w przyciskach — wyłącznie geometria pigułki i koła
- Nie używaj pełnych obrysów fokusu — przerywany jest charakterystyczny
- Nie zwiększaj grubości tekstu podstawowego powyżej 450 — estetyka lekkości jest kluczowa
- Nie stosuj dodatniego rozstępu liter w tekście podstawowym — zawsze jest ujemny
8. Zachowanie Responsywne
Punkty Graniczne
| Nazwa | Szerokość | Główne zmiany |
|---|---|---|
| Małe mobile | <560px | Zwarta struktura, układanie pionowe |
| Tablet | 560–768px | Drobne korekty |
| Małe desktop | 768–960px | Układy 2-kolumnowe |
| Desktop | 960–1280px | Standardowy układ |
| Duże desktop | 1280–1440px | Rozszerzony |
| Ultra-szeroki | 1440–1920px | Maksymalna szerokość |
Strategia Zwijania
- Tekst hero: 86px → 64px → 48px
- Zakładki produktów: poziome przewijanie na mobile
- Sekcje funkcji: układanie w jedną kolumnę
- Stopka: wielokolumnowa → układanie pionowe
9. Przewodnik po Promptach dla Agenta
Szybka Referencja Kolorów
- Wszystko: „czysta czerń (#000000)" i „czysta biel (#ffffff)"
- Szklana ciemna: „rgba(0, 0, 0, 0.08)"
- Szklana jasna: „rgba(255, 255, 255, 0.16)"
Przykładowe Prompty Komponentów
- „Utwórz hero na żywym, wielobarwnym gradiencie (zielony, żółty, fioletowy, różowy). Nagłówek 86px figmaSans grubość 400, line-height 1.0, letter-spacing -1.72px. Biały tekst. Biały przycisk pigułka CTA (promień 50px, odstępy 8px 18px)."
- „Zaprojektuj pasek zakładek produktu z przyciskami w kształcie pigułki (promień 50px). Aktywna: czarne tło, biały tekst. Nieaktywna: przezroczyste, czarny tekst. figmaSans 20px grubość 480."
- „Zbuduj etykietę sekcji: figmaMono 18px, wielkie litery, letter-spacing 0.54px, czarny tekst. Kerning włączony."
- „Utwórz tekst podstawowy 20px figmaSans grubość 330, line-height 1.40, letter-spacing -0.14px. Czysta czerń na białym tle."
Przewodnik Iteracji
- Używaj precyzyjnych wartości grubości zmiennego kroju pisma: 320, 330, 340, 450, 480, 540, 700
- Interfejs jest zawsze czarno-biały — nigdy nie dodawaj kolorów do chrome
- Przerywane obrysy fokusu, nie pełne
- Rozstęp liter jest zawsze ujemny w tekście podstawowym, zawsze dodatni w etykietach mono
- Pigułka (50px) dla przycisków i zakładek, koło (50%) dla przycisków ikonowych