workbuddy_skills/open-design/design-systems/pinterest/DESIGN-pl.md

System Projektowania Inspirowany Pinterestem

Category: Media & Consumer Wizualne odkrywanie. Czerwony akcent, siatka masonry, obraz na pierwszym planie.

1. Motyw Wizualny i Atmosfera

Witryna Pinteresta to ciepłe, inspirujące płótno, które traktuje wizualne odkrywanie jak magazyn lifestyle'owy. Projekt opiera się na miękkim, lekko ciepłym białym tle, z Pinterest Red (#e60023) jako jedynym, wyrazistym akcentem marki. W przeciwieństwie do chłodnych błękitów większości platform technologicznych, skala neutralna Pinteresta ma wyraźnie ciepły podton — szarości przechylają się ku oliwce/piaskowi (#91918c, #62625b, #e5e5e0), a nie ku chłodnej stali, tworząc przytulną, rzemieślniczą atmosferę sprzyjającą przeglądaniu.

Typografia używa Pin Sans — niestandardowego, zastrzeżonego kroju pisma z szerokim stosem awaryjnym, obejmującym japońskie czcionki, co odzwierciedla globalny zasięg Pinteresta. W skali wyświetlania (70px, grubość 600) Pin Sans tworzy duże, zachęcające nagłówki. W mniejszych rozmiarach system jest kompaktowy: przyciski 12px, podpisy 12–14px. System nazewnictwa zmiennych CSS (--comp-*, --sema-*, --base-*) ujawnia zaawansowaną, trójpoziomową architekturę tokenów projektowych: tokeny na poziomie komponentu, semantycznym i bazowym.

To, co wyróżnia Pinterest, to hojny system zaokrągleń (12px–40px plus 50% dla kół) oraz ciepło zabarwione tła przycisków. Przycisk drugorzędny (#e5e5e0) ma wyraźnie ciepły, piaskowobeżowy ton, a nie zimną szarość. Główny czerwony przycisk używa promienia 16px — zaokrąglony, ale nie w kształcie pigułki. W połączeniu z ciepłymi tłami odznak (hsla(60,20%,98%,.5) — subtelna żółtawa poświata) i układami zdominowanymi przez fotografię efektem jest projekt, który wygląda rzemieślniczo i osobiście, a nie korporacyjnie i sterylnie.

Kluczowe Cechy:

• Ciepłe białe płótno z neutralnymi tonami oliwkowymi/piaskowymi — przytulne, nie kliniczne
• Pinterest Red (#e60023) jako jedyny wyrazisty akcent — nigdy subtelny, zawsze pewny siebie
• Niestandardowa czcionka Pin Sans z globalnym stosem awaryjnym (w tym CJK)
• Trójpoziomowa architektura tokenów: --comp-* / --sema-* / --base-*
• Ciepłe powierzchnie drugorzędne: piaskowa szarość (#e5e5e0), ciepła odznaka (hsla(60,20%,98%,.5))
• Hojne zaokrąglenia: 16px standardowe, do 40px dla dużych kontenerów
• Treść na pierwszym planie — piny/obrazy są głównym elementem wizualnym
• Ciemnofioletowy tekst (#211922) — ciepły, z nutą śliwki

2. Paleta Kolorów i Role

Główna Marka

• Pinterest Red (#e60023): Główne CTA, akcent marki — odważna, pewna siebie czerwień
• Green 700 (#103c25): --base-color-green-700, akcent sukcesu/natury
• Green 700 Hover (#0b2819): --base-color-hover-green-700, wciśnięta zieleń

Tekst

• Śliwkowa Czerń (#211922): Tekst główny — ciepła, prawie czarna z podtonem śliwki
• Czerń (#000000): Tekst drugorzędny, tekst przycisków
• Oliwkowa Szarość (#62625b): Opisy drugorzędne, wyciszony tekst
• Ciepłe Srebro (#91918c): --comp-button-color-text-transparent-disabled, tekst wyłączony, obramowania pól
• Biel (#ffffff): Tekst na ciemnych/kolorowych powierzchniach

Interaktywne

• Niebieski Fokus (#435ee5): --comp-button-color-border-focus-outer-transparent, pierścienie fokusu
• Fiolet Wydajności (#6845ab): --sema-color-hover-icon-performance-plus, funkcje wydajności
• Fiolet Rekomendacji (#7e238b): --sema-color-hover-text-recommendation, rekomendacja AI
• Niebieski Linków (#2b48d4): Kolor tekstu linków
• Niebieski Facebooka (#0866ff): --facebook-background-color, logowanie społecznościowe
• Wciśnięty Niebieski (#617bff): --base-color-pressed-blue-200, stan wciśnięty

Powierzchnia i Obramowanie

• Piaskowa Szarość (#e5e5e0): Tło przycisku drugorzędnego — ciepłe, rzemieślnicze
• Ciepłe Światło (#e0e0d9): Tła okrągłych przycisków, odznaki
• Ciepły Napar (hsla(60, 20%, 98%, 0.5)): --comp-badge-color-background-wash-light, subtelne ciepłe tło odznaki
• Mgła (#f6f6f3): Jasna powierzchnia (przy 50% kryciu)
• Obramowanie Wyłączone (#c8c8c1): --sema-color-border-disabled, wyłączone obramowania
• Szarość Hover (#bcbcb3): --base-color-hover-grayscale-150, obramowanie hover
• Ciemna Powierzchnia (#33332e): Tła ciemnych sekcji

Semantyczne

• Czerwień Błędu (#9e0a0a): Stany błędów pól wyboru/formularzy

3. Zasady Typografii

Rodzina Czcionek

• Główna: Pin Sans, zamienniki: -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Wysokość Linii	Odstęp Liter	Uwagi
Nagłówek Główny	Pin Sans	70px (4.38rem)	600	normalny	normalny	Maksymalny impact
Nagłówek Sekcji	Pin Sans	28px (1.75rem)	700	normalny	-1.2px	Ujemne śledzenie
Treść	Pin Sans	16px (1.00rem)	400	1.40	normalny	Standardowy odczyt
Pogrubiony Podpis	Pin Sans	14px (0.88rem)	700	normalny	normalny	Wyraziste metadane
Podpis	Pin Sans	12px (0.75rem)	400–500	1.50	normalny	Mały tekst, tagi
Przycisk	Pin Sans	12px (0.75rem)	400	normalny	normalny	Etykiety przycisków

Zasady

• Kompaktowa skala typograficzna: Zakres to 12px–70px z dramatycznym skokiem — większość tekstu funkcjonalnego to 12–16px, tworząc gęstą, aplikacyjną hierarchię informacji.
• Ciepły rozkład grubości: 600–700 dla nagłówków, 400–500 dla treści. Bez ultralekkich grubości — typografia zawsze wydaje się solidna.
• Ujemne śledzenie w nagłówkach: -1.2px w nagłówkach 28px tworzy przytulne, bliskie tytuły sekcji.
• Pojedyncza rodzina czcionek: Pin Sans obsługuje wszystko — nie wykryto drugorzędnej czcionki wyświetlania ani o stałej szerokości.

4. Stylizacja Komponentów

Przyciski

Główny Czerwony

• Tło: #e60023 (Pinterest Red)
• Tekst: #000000 (czarny — niezwykły wybór dla kontrastu na czerwonym)
• Padding: 6px 14px
• Promień: 16px (hojnie zaokrąglony, nie w kształcie pigułki)
• Obramowanie: 2px solid rgba(255, 255, 255, 0) (przezroczysty)
• Fokus: semantyczne obramowanie + kontur przez zmienne CSS

Drugorzędny Piaskowy

• Tło: #e5e5e0 (ciepła piaskowa szarość)
• Tekst: #000000
• Padding: 6px 14px
• Promień: 16px
• Fokus: ten sam semantyczny system obramowania

Okrągła Akcja

• Tło: #e0e0d9 (ciepłe światło)
• Tekst: #211922 (śliwkowa czerń)
• Promień: 50% (koło)
• Zastosowanie: Akcje pinów, elementy sterowania nawigacją

Duch / Przezroczysty

• Tło: przezroczysty
• Tekst: #000000
• Brak obramowania
• Zastosowanie: Trzeciorzędne akcje

Karty i Kontenery

• Karty pinów na pierwszym planie fotografii z hojnym promieniem (12px–20px)
• Brak tradycyjnego box-shadow na większości kart
• Białe lub ciepłe mgłowe tła
• Białe grube obramowanie 8px na niektórych kontenerach obrazów

Pola Wejściowe

• Pole e-mail: białe tło, obramowanie 1px solid #91918c, promień 16px, padding 11px 15px
• Fokus: semantyczny system obramowania + konturu przez zmienne CSS

Nawigacja

• Czysty nagłówek na białym lub ciepłym tle
• Logo Pinteresta + pasek wyszukiwania wyśrodkowany
• Pin Sans 16px dla linków nawigacyjnych
• Akcenty Pinterest Red dla aktywnych stanów

Obróbka Obrazów

• Siatka masonry w stylu pinów (charakterystyczny układ Pinteresta)
• Zaokrąglone rogi: 12px–20px na obrazach
• Fotografia jako główna treść — każdy pin to obraz
• Grube białe obramowania (8px) na wyróżnionych kontenerach obrazów

5. Zasady Układu

System Odstępów

• Jednostka bazowa: 8px
• Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
• Duże skoki: 32px → 80px → 100px dla odstępów sekcji

Siatka i Kontener

• Siatka masonry dla treści pinów (charakterystyczny układ)
• Wyśrodkowane sekcje treści z hojną maksymalną szerokością
• Pełnoszerokie ciemne stopka
• Pasek wyszukiwania jako główny element nawigacji

Filozofia Białej Przestrzeni

• Gęstość inspiracji: Siatka masonry pakuje piny ciasno — gęstość treści JEST propozycją wartości. Biała przestrzeń istnieje między sekcjami, nie wewnątrz siatki.
• Oddech powyżej, gęstość poniżej: Sekcje hero/funkcje mają hojny padding; siatka pinów jest kompaktowa i immersywna.

Skala Zaokrągleń

• Standardowe (12px): Małe karty, linki
• Przycisk (16px): Przyciski, pola wejściowe, średnie karty
• Komfortowe (20px): Karty funkcji
• Duże (28px): Duże kontenery
• Sekcja (32px): Elementy zakładek, duże panele
• Hero (40px): Kontenery hero, duże bloki funkcji
• Koło (50%): Przyciski akcji, wskaźniki zakładek

6. Głębokość i Elewacja

Poziom	Leczenie	Zastosowanie
Płaski (Poziom 0)	Brak cienia	Domyślny — piny opierają się na treści, nie na cieniu
Subtelny (Poziom 1)	Minimalny cień (z tokenów)	Podwyższone nakładki, rozwijane menu
Fokus (Dostępność)	Pierścień --sema-color-border-focus-outer-default	Stany fokusu

Filozofia Cieni: Pinterest używa minimalnych cieni. Siatka masonry opiera się na treści (fotografii) do tworzenia zainteresowania wizualnego, a nie na efektach elewacji. Głębokość pochodzi z ciepła kolorów powierzchni i hojnego zaokrąglenia kontenerów.

7. Co Robić i Czego Unikać

Robić

• Używaj ciepłych neutralów (#e5e5e0, #e0e0d9, #91918c) — ciepły oliwkowo/piaskowy ton to tożsamość marki
• Stosuj Pinterest Red (#e60023) tylko dla głównych CTA — jest odważny i wyjątkowy
• Używaj wyłącznie Pin Sans — jedna czcionka do wszystkiego
• Stosuj hojne zaokrąglenia: 16px dla przycisków/pól, 20px+ dla kart
• Utrzymuj gęstą siatkę masonry — gęstość treści to wartość
• Używaj ciepłych teł odznak (hsla(60,20%,98%,.5)) dla subtelnych ciepłych przemyceń
• Używaj #211922 (śliwkowej czerni) dla tekstu głównego — jest cieplejsza niż czysta czerń

Unikać

• Nie używaj chłodnych szarości neutralnych — zawsze ciepłe/oliwkowe tony
• Nie używaj czystej czerni (#000000) jako tekstu głównego — używaj śliwkowej czerni (#211922)
• Nie używaj przycisków w kształcie pigułki — promień 16px jest zaokrąglony, ale nie w kształcie pigułki
• Nie dodawaj ciężkich cieni — Pinterest jest z założenia płaski, głębokość pochodzi z treści
• Nie używaj małego promienia zaokrąglenia (<12px) na kartach — hojne zaokrąglenie jest podstawą
• Nie wprowadzaj dodatkowych kolorów marki — czerwień + ciepłe neutralne to kompletna paleta
• Nie używaj cienkich grubości czcionek — Pin Sans minimum 400

8. Responsywne Zachowanie

Punkty Przerwania

Nazwa	Szerokość	Kluczowe Zmiany
Mobilny	<576px	Jedna kolumna, kompaktowy układ
Duży Mobilny	576–768px	Siatka pinów 2-kolumnowa
Tablet	768–890px	Rozszerzona siatka
Mały Desktop	890–1312px	Standardowa siatka masonry
Desktop	1312–1440px	Pełny układ
Duży Desktop	1440–1680px	Rozszerzone kolumny siatki
Ultraszeroki	>1680px	Maksymalna gęstość siatki

Strategia Zwijania

• Siatka pinów: 5+ kolumn → 3 → 2 → 1
• Nawigacja: pasek wyszukiwania + ikony → uproszczona nawigacja mobilna
• Sekcje funkcji: bok do boku → ułożone
• Hero: 70px → skaluje się proporcjonalnie
• Stopka: ciemna wielokolumnowa → ułożona

9. Przewodnik Promptów Agenta

Szybka Referenca Kolorów

• Marka: Pinterest Red (#e60023)
• Tło: Biały (#ffffff)
• Tekst: Śliwkowa Czerń (#211922)
• Tekst drugorzędny: Oliwkowa Szarość (#62625b)
• Powierzchnia przycisku: Piaskowa Szarość (#e5e5e0)
• Obramowanie: Ciepłe Srebro (#91918c)
• Fokus: Niebieski Fokus (#435ee5)

Przykładowe Prompty Komponentów

• "Stwórz hero: białe tło. Nagłówek 70px Pin Sans grubość 600, śliwkowa czerń (#211922). Czerwony przycisk CTA (#e60023, promień 16px, padding 6px 14px). Drugorzędny piaskowy przycisk (#e5e5e0, promień 16px)."
• "Zaprojektuj kartę pinu: białe tło, promień 16px, brak cienia. Fotografia wypełnia górę, opis 16px Pin Sans grubość 400 poniżej w #62625b."
• "Zbuduj okrągły przycisk akcji: tło #e0e0d9, promień 50%, ikona #211922."
• "Stwórz pole wejściowe: białe tło, 1px solid #91918c, promień 16px, padding 11px 15px. Fokus: niebieski kontur przez tokeny semantyczne."
• "Zaprojektuj ciemną stopkę: tło #33332e. Logo Pinteresta w bieli. Linki 12px Pin Sans w #91918c."

Przewodnik Iteracji

1. Ciepłe neutralne wszędzie — oliwkowe/piaskowe szarości, nigdy chłodna stal
2. Pinterest Red tylko dla CTA — odważny i wyjątkowy
3. Promień 16px na przyciskach/polach, 20px+ na kartach — hojny, ale nie w kształcie pigułki
4. Pin Sans to jedyna czcionka — kompaktowy 12px dla UI, 70px dla wyświetlania
5. Fotografia niesie projekt — UI pozostaje ciepłe i minimalne
6. Śliwkowa czerń (#211922) dla tekstu — cieplejsza niż czysta czerń