admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
326 lines
23 KiB
Markdown
326 lines
23 KiB
Markdown
# System Projektowania Inspirowany Stripe
|
||
|
||
> Category: Fintech i Krypto
|
||
> Infrastruktura płatności. Charakterystyczne fioletowe gradienty, elegancja weight-300.
|
||
|
||
## 1. Motyw Wizualny i Atmosfera
|
||
|
||
Strona internetowa Stripe jest złotym standardem projektowania fintech — system, który potrafi być jednocześnie techniczny i luksusowy, precyzyjny i ciepły. Strona otwiera się na czystym białym płótnie (`#ffffff`) z ciemno-granatowymi nagłówkami (`#061b31`) i charakterystycznym fioletowym kolorem (`#533afd`), który pełni funkcję zarówno kotwicy marki, jak i interaktywnego akcentu. Nie jest to zimny, kliniczny fiolet oprogramowania dla przedsiębiorstw; to bogaty, nasycony fiolet, który sprawia wrażenie pewnego siebie i premium. Ogólne wrażenie to instytucja finansowa przeprojektowana przez światowej klasy odlewnię czcionek.
|
||
|
||
Niestandardowy krój `sohne-var` to zmienna czcionka definiująca tożsamość wizualną Stripe. Każdy element tekstowy włącza zestaw stylistyczny OpenType `"ss01"`, który modyfikuje kształty znaków, nadając im wyraźnie geometryczny, nowoczesny charakter. Przy rozmiarach displayowych (48px–56px), sohne-var używa grubości 300 — niezwykle lekkiej grubości dla nagłówków, która tworzy eteryczny, wręcz szeptany autorytet. Jest to przeciwieństwo konwencji "pogrubionego nagłówka bohatera"; nagłówki Stripe nie potrzebują krzyczeć. Ujemny odstęp między literami (-1,4px przy 56px, -0,96px przy 48px) zagęszcza tekst w gęste, inżynieryjne bloki. Przy mniejszych rozmiarach system używa grubości 300 z proporcjonalnie zredukowanym kerningiem oraz cyframi tabelarycznymi za pomocą `"tnum"` do wyświetlania danych finansowych.
|
||
|
||
To, co naprawdę wyróżnia Stripe, to system cieni. Zamiast płaskiego lub jednowarstwowego podejścia większości stron, Stripe używa wielowarstwowych cieni z niebieskim odcieniem: charakterystyczne `rgba(50,50,93,0.25)` w połączeniu z `rgba(0,0,0,0.1)` tworzy cienie o chłodnej, niemal atmosferycznej głębi — jakby elementy unosiły się na zmierzchowym niebie. Niebieskoszary odcień koloru podstawowego cienia (50,50,93) bezpośrednio nawiązuje do granatowo-fioletowej palety marki, sprawiając, że nawet głębia uniesienia wydaje się zgodna z identyfikacją wizualną.
|
||
|
||
**Kluczowe Cechy:**
|
||
- sohne-var z OpenType `"ss01"` na całym tekście — niestandardowy zestaw stylistyczny definiujący kształty liter marki
|
||
- Grubość 300 jako charakterystyczna grubość nagłówków — lekka, pewna siebie, wbrew konwencji
|
||
- Ujemny odstęp między literami przy rozmiarach displayowych (-1,4px przy 56px, stopniowe rozluźnienie w dół)
|
||
- Wielowarstwowe cienie z niebieskim odcieniem używające `rgba(50,50,93,0.25)` — uniesienie, które czuć jako kolor marki
|
||
- Ciemno-granatowe (`#061b31`) nagłówki zamiast czarnych — ciepłe, premium, klasy finansowej
|
||
- Zachowawcze zaokrąglenie narożników (4px–8px) — nic w kształcie pigułki, nic surowego
|
||
- Akcenty rubinowy (`#ea2261`) i magenta (`#f96bee`) dla gradientów i elementów dekoracyjnych
|
||
- `SourceCodePro` jako towarzyszący krój monospacingowy dla kodu i etykiet technicznych
|
||
|
||
## 2. Paleta Kolorów i Role
|
||
|
||
### Podstawowe
|
||
- **Stripe Purple** (`#533afd`): Podstawowy kolor marki, tła CTA, tekst linków, interaktywne wyróżnienia. Nasycony niebieskofioletowy, który zakotwicza cały system.
|
||
- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Podstawowy kolor nagłówków. Nie czarny, nie szary — bardzo ciemny niebieski, który dodaje ciepła i głębi tekstowi.
|
||
- **Pure White** (`#ffffff`): Tło strony, powierzchnie kart, tekst przycisków na ciemnych tłach.
|
||
|
||
### Marka i Ciemne
|
||
- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Głęboki indygo dla ciemnych sekcji, tła stopki i intensywnych momentów marki.
|
||
- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. Najciemniejszy neutralny — prawie czarny z niebieskim podtonem dla maksymalnej głębi bez surowości.
|
||
|
||
### Kolory Akcentowe
|
||
- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Ciepły różowo-czerwony dla ikon, alertów i elementów akcentowych.
|
||
- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Żywy różowofioletowy dla gradientów i dekoracyjnych wyróżnień.
|
||
- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Zabarwiona powierzchnia dla kart i odznak w tonacji magenty.
|
||
|
||
### Interaktywne
|
||
- **Primary Purple** (`#533afd`): Podstawowy kolor linków, stany aktywne, zaznaczone elementy.
|
||
- **Purple Hover** (`#4434d4`): Ciemniejszy fiolet dla stanów hover na elementach podstawowych.
|
||
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Ciemny fiolet dla stanów hover ikon.
|
||
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Miękka lawenda dla stonowanych teł hover.
|
||
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Kolor suwaka zakresu i wyróżnienia pola input.
|
||
|
||
### Skala Neutralna
|
||
- **Heading** (`#061b31`): Podstawowe nagłówki, tekst nawigacji, wyraźne etykiety.
|
||
- **Label** (`#273951`): `--hds-color-input-text-label`. Etykiety formularzy, drugorzędne nagłówki.
|
||
- **Body** (`#64748d`): Tekst drugorzędny, opisy, podpisy.
|
||
- **Success Green** (`#15be53`): Odznaki statusu, wskaźniki sukcesu (z przezroczystością 0,2–0,4 dla teł/obramowań).
|
||
- **Success Text** (`#108c3d`): Kolor tekstu odznaki sukcesu.
|
||
- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Akcent ostrzeżenia i wyróżnienia.
|
||
|
||
### Powierzchnie i Obramowania
|
||
- **Border Default** (`#e5edf5`): Standardowy kolor obramowania dla kart, separatorów i kontenerów.
|
||
- **Border Purple** (`#b9b9f9`): Obramowania stanów aktywnych/zaznaczonych na przyciskach i polach input.
|
||
- **Border Soft Purple** (`#d6d9fc`): Subtelne obramowania z fioletowym odcieniem dla elementów drugorzędnych.
|
||
- **Border Magenta** (`#ffd7ef`): Różowe obramowania dla elementów w tonacji magenty.
|
||
- **Border Dashed** (`#362baa`): Przerywane obramowania dla stref upuszczania i elementów zastępczych.
|
||
|
||
### Kolory Cieni
|
||
- **Shadow Blue** (`rgba(50,50,93,0.25)`): Charakterystyczny — podstawowy kolor cienia z niebieskim odcieniem.
|
||
- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Głębszy niebieski cień dla uniesionych elementów.
|
||
- **Shadow Black** (`rgba(0,0,0,0.1)`): Drugorzędna warstwa cienia wzmacniająca głębię.
|
||
- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Miękki cień otoczenia dla subtelnego uniesienia.
|
||
- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimalny cień otoczenia dla lekkiego efektu uniesienia.
|
||
|
||
## 3. Reguły Typografii
|
||
|
||
### Rodzina Czcionek
|
||
- **Podstawowa**: `sohne-var`, z fallbackiem: `SF Pro Display`
|
||
- **Monospacingowa**: `SourceCodePro`, z fallbackiem: `SFMono-Regular`
|
||
- **Funkcje OpenType**: `"ss01"` włączone globalnie na całym tekście sohne-var; `"tnum"` dla cyfr tabelarycznych w danych finansowych i podpisach.
|
||
|
||
### Hierarchia
|
||
|
||
| Rola | Czcionka | Rozmiar | Grubość | Wysokość wiersza | Odstęp liter | Funkcje | Uwagi |
|
||
|------|------|------|--------|-------------|----------------|----------|-------|
|
||
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (ciasno) | -1.4px | ss01 | Maksymalny rozmiar, autorytet szeptu |
|
||
| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (ciasno) | -0.96px | ss01 | Drugorzędne nagłówki bohaterów |
|
||
| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (ciasno) | -0.64px | ss01 | Tytuły sekcji funkcji |
|
||
| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (ciasno) | -0.26px | ss01 | Nagłówki kart, podsekcje |
|
||
| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (ciasno) | -0.22px | ss01 | Mniejsze nagłówki sekcji |
|
||
| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Opisy funkcji, tekst wprowadzający |
|
||
| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Standardowy tekst do czytania |
|
||
| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (ciasno) | normal | ss01 | Tekst przycisku podstawowego |
|
||
| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (ciasno) | normal | ss01 | Przyciski drugorzędne/kompaktowe |
|
||
| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (ciasno) | normal | ss01 | Linki nawigacyjne |
|
||
| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Małe etykiety, metadane |
|
||
| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Drobny druk, znaczniki czasu |
|
||
| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Dane finansowe, liczby |
|
||
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (ciasno) | 0.1px | ss01 | Bardzo małe etykiety, znaczniki osi |
|
||
| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (ciasno) | -0.3px | tnum | Dane wykresów, małe liczby |
|
||
| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (ciasno) | normal | ss01 | Najmniejsze etykiety |
|
||
| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (luźno) | normal | -- | Bloki kodu, składnia |
|
||
| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (luźno) | normal | -- | Pogrubiony kod, słowa kluczowe |
|
||
| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (luźno) | normal | uppercase | Etykiety techniczne |
|
||
| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (ciasno) | normal | ss01 | Małe adnotacje kodu |
|
||
|
||
### Zasady
|
||
- **Lekka grubość jako sygnatura**: Grubość 300 przy rozmiarach displayowych to najbardziej charakterystyczny wybór typograficzny Stripe. Tam, gdzie inni używają 600–700, by przykuwać uwagę, Stripe używa lekkości jako luksusu — tekst jest tak pewny siebie, że nie potrzebuje grubości, by być autorytatywny.
|
||
- **ss01 wszędzie**: Zestaw stylistyczny `"ss01"` jest nieodzowny. Modyfikuje konkretne glify (prawdopodobnie alternatywne formy `a`, `g`, `l`), tworząc bardziej geometryczny, współczesny charakter w całym tekście sohne-var.
|
||
- **Dwa tryby OpenType**: `"ss01"` dla tekstu displayowego/treści, `"tnum"` dla cyfr tabelarycznych w danych finansowych. Nigdy się nie nakładają — liczba w akapicie używa ss01, liczba w tabeli danych używa tnum.
|
||
- **Progresywny tracking**: Odstęp liter zagęszcza się proporcjonalnie do rozmiaru: -1,4px przy 56px, -0,96px przy 48px, -0,64px przy 32px, -0,26px przy 26px, normalny przy 16px i poniżej.
|
||
- **Prostota dwóch grubości**: Głównie 300 (treść i nagłówki) i 400 (UI/przyciski). Brak pogrubienia (700) w głównym kroju — SourceCodePro używa 500/700 dla kontrastu kodu.
|
||
|
||
## 4. Style Komponentów
|
||
|
||
### Przyciski
|
||
|
||
**Primary Purple**
|
||
- Tło: `#533afd`
|
||
- Tekst: `#ffffff`
|
||
- Padding: 8px 16px
|
||
- Radius: 4px
|
||
- Czcionka: 16px sohne-var grubość 400, `"ss01"`
|
||
- Hover: tło `#4434d4`
|
||
- Użycie: Podstawowe CTA ("Start now", "Contact sales")
|
||
|
||
**Ghost / Outlined**
|
||
- Tło: transparent
|
||
- Tekst: `#533afd`
|
||
- Padding: 8px 16px
|
||
- Radius: 4px
|
||
- Obramowanie: `1px solid #b9b9f9`
|
||
- Czcionka: 16px sohne-var grubość 400, `"ss01"`
|
||
- Hover: tło zmienia się na `rgba(83,58,253,0.05)`
|
||
- Użycie: Działania drugorzędne
|
||
|
||
**Transparent Info**
|
||
- Tło: transparent
|
||
- Tekst: `#2874ad`
|
||
- Padding: 8px 16px
|
||
- Radius: 4px
|
||
- Obramowanie: `1px solid rgba(43,145,223,0.2)`
|
||
- Użycie: Działania trzeciorzędne/informacyjne
|
||
|
||
**Neutral Ghost**
|
||
- Tło: transparent (`rgba(255,255,255,0)`)
|
||
- Tekst: `rgba(16,16,16,0.3)`
|
||
- Padding: 8px 16px
|
||
- Radius: 4px
|
||
- Obrys: `1px solid rgb(212,222,233)`
|
||
- Użycie: Działania wyłączone lub stonowane
|
||
|
||
### Karty i Kontenery
|
||
- Tło: `#ffffff`
|
||
- Obramowanie: `1px solid #e5edf5` (standardowe) lub `1px solid #061b31` (ciemny akcent)
|
||
- Radius: 4px (ciasny), 5px (standardowy), 6px (wygodny), 8px (wyróżniony)
|
||
- Cień (standardowy): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
|
||
- Cień (otoczenia): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
|
||
- Hover: cień się intensyfikuje, często dodając warstwę z niebieskim odcieniem
|
||
|
||
### Odznaki / Tagi / Pigułki
|
||
**Neutral Pill**
|
||
- Tło: `#ffffff`
|
||
- Tekst: `#000000`
|
||
- Padding: 0px 6px
|
||
- Radius: 4px
|
||
- Obramowanie: `1px solid #f6f9fc`
|
||
- Czcionka: 11px grubość 400
|
||
|
||
**Success Badge**
|
||
- Tło: `rgba(21,190,83,0.2)`
|
||
- Tekst: `#108c3d`
|
||
- Padding: 1px 6px
|
||
- Radius: 4px
|
||
- Obramowanie: `1px solid rgba(21,190,83,0.4)`
|
||
- Czcionka: 10px grubość 300
|
||
|
||
### Pola Input i Formularze
|
||
- Obramowanie: `1px solid #e5edf5`
|
||
- Radius: 4px
|
||
- Focus: `1px solid #533afd` lub fioletowa obwódka
|
||
- Etykieta: `#273951`, 14px sohne-var
|
||
- Tekst: `#061b31`
|
||
- Placeholder: `#64748d`
|
||
|
||
### Nawigacja
|
||
- Czysta pozioma nawigacja na białym, przyklejona z rozmytym tłem
|
||
- Logotyp marki wyrównany do lewej
|
||
- Linki: sohne-var 14px grubość 400, tekst `#061b31` z `"ss01"`
|
||
- Radius: 6px na kontenerze nawigacji
|
||
- CTA: fioletowy przycisk wyrównany do prawej ("Sign in", "Start now")
|
||
- Mobile: przełącznik hamburger z promieniem 6px
|
||
|
||
### Elementy Dekoracyjne
|
||
**Przerywane Obramowania**
|
||
- `1px dashed #362baa` (fioletowy) dla stref zastępczych/upuszczania
|
||
- `1px dashed #ffd7ef` (magenta) dla dekoracyjnych obramowań w tonacji magenty
|
||
|
||
**Gradienty Akcentowe**
|
||
- Gradienty od rubinu do magenty (`#ea2261` do `#f96bee`) dla dekoracji bohaterów
|
||
- Ciemne sekcje marki używają teł `#1c1e54` z białym tekstem
|
||
|
||
## 5. Zasady Układu
|
||
|
||
### System Odstępów
|
||
- Jednostka bazowa: 8px
|
||
- Skala: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
|
||
- Uwaga: Skala jest gęsta przy małych wartościach (co 2px od 4–12), co odzwierciedla zorientowane na precyzję UI Stripe dla danych finansowych
|
||
|
||
### Siatka i Kontener
|
||
- Maksymalna szerokość treści: około 1080px
|
||
- Bohater: wyśrodkowana pojedyncza kolumna z hojnym paddingiem, lekkie nagłówki
|
||
- Sekcje funkcji: siatki 2–3 kolumnowe dla kart funkcji
|
||
- Pełnoszerokościowe ciemne sekcje z tłem `#1c1e54` dla zanurzenia w marce
|
||
- Podglądy kodu/dashboardu jako zawarte karty z cieniami z niebieskim odcieniem
|
||
|
||
### Filozofia Przestrzeni
|
||
- **Precyzyjne odstępy**: W odróżnieniu od ogromnej pustki systemów minimalistycznych, Stripe używa mierzonej, celowej przestrzeni. Każda przerwa to świadomy wybór typograficzny.
|
||
- **Gęste dane, szczodry chrome**: Wyświetlenia danych finansowych (tabele, wykresy) są ściśle upakowane, ale otaczający je chrome UI jest szczodrze rozmieszczony. Tworzy to poczucie kontrolowanej gęstości — jak dobrze zorganizowany arkusz kalkulacyjny w pięknej ramce.
|
||
- **Rytm sekcji**: Białe sekcje przeplatają się z ciemnymi sekcjami marki (`#1c1e54`), tworząc dramatyczny kadencję jasne/ciemne, która zapobiega monotonii bez wprowadzania arbitralnych kolorów.
|
||
|
||
### Skala Zaokrąglenia Narożników
|
||
- Mikro (1px): Drobnoziarniste elementy, subtelne zaokrąglenie
|
||
- Standardowe (4px): Przyciski, pola input, odznaki, karty — koń roboczy
|
||
- Wygodne (5px): Standardowe kontenery kart
|
||
- Luźne (6px): Nawigacja, większe elementy interaktywne
|
||
- Duże (8px): Wyróżnione karty, elementy bohaterów
|
||
- Złożone: `0px 0px 6px 6px` dla kontenerów zaokrąglonych od dołu (panele zakładek, stopki rozwijane)
|
||
|
||
## 6. Głębia i Uniesienie
|
||
|
||
| Poziom | Leczenie | Użycie |
|
||
|-------|-----------|-----|
|
||
| Płaski (Poziom 0) | Brak cienia | Tło strony, tekst inline |
|
||
| Otoczenia (Poziom 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Subtelne uniesienie karty, wskazówki hover |
|
||
| Standardowy (Poziom 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Standardowe karty, panele treści |
|
||
| Uniesiony (Poziom 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Wyróżnione karty, rozwijane, popovery |
|
||
| Głęboki (Poziom 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Okna modalne, pływające panele |
|
||
| Obwódka (Dostępność) | `2px solid #533afd` obrys | Obwódka fokusu klawiatury |
|
||
|
||
**Filozofia Cieni**: System cieni Stripe opiera się na zasadzie chromatycznej głębi. Tam gdzie większość systemów projektowych używa neutralnych szarych lub czarnych cieni, podstawowy kolor cienia Stripe (`rgba(50,50,93,0.25)`) to głęboki niebieskoszary, który nawiązuje do granatowej palety marki. Tworzy to cienie, które nie tylko dodają głębi — dodają atmosferę marki. Wielowarstwowe podejście łączy ten cień z niebieskim odcieniem z czystą czarną warstwą drugorzędną (`rgba(0,0,0,0.1)`) przy innym przesunięciu, tworząc efekt paralaksy, gdzie cień z marką leży dalej od elementu, a neutralny cień bliżej. Ujemne wartości rozproszenia (-30px, -18px) zapewniają, że cienie nie rozciągają się poza footprint elementu poziomo, utrzymując uniesienie pionowe i kontrolowane.
|
||
|
||
### Dekoracyjna Głębia
|
||
- Ciemne sekcje marki (`#1c1e54`) tworzą immersyjną głębię poprzez kontrast koloru tła
|
||
- Nakładki gradientowe z przejściami od rubinu do magenty dla dekoracji bohaterów
|
||
- Kolor cienia `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) dla cieni górnej krawędzi na przyklejonych elementach
|
||
|
||
## 7. Co Robić i Czego Nie Robić
|
||
|
||
### Robić
|
||
- Używać sohne-var z `"ss01"` na każdym elemencie tekstowym — zestaw stylistyczny TO jest marka
|
||
- Używać grubości 300 dla wszystkich nagłówków i tekstu treści — lekkość jest sygnaturą
|
||
- Stosować cienie z niebieskim odcieniem (`rgba(50,50,93,0.25)`) dla wszystkich uniesionych elementów
|
||
- Używać `#061b31` (głęboki granat) dla nagłówków zamiast `#000000` — ciepło ma znaczenie
|
||
- Utrzymywać zaokrąglenie narożników między 4px–8px — zachowawcze zaokrąglenie jest celowe
|
||
- Używać `"tnum"` dla każdego tabelarycznego/finansowego wyświetlenia liczb
|
||
- Warstwować cienie: niebieski odcień daleko + neutralny blisko dla paralaksy głębi
|
||
- Używać fioletu `#533afd` jako podstawowego koloru interaktywnego/CTA
|
||
|
||
### Nie Robić
|
||
- Nie używać grubości 600–700 dla nagłówków sohne-var — grubość 300 to głos marki
|
||
- Nie używać dużego zaokrąglenia narożników (12px+, kształty pigułek) na kartach lub przyciskach — Stripe jest zachowawczy
|
||
- Nie używać neutralnych szarych cieni — zawsze odcień niebieski (`rgba(50,50,93,...)`)
|
||
- Nie pomijać `"ss01"` na żadnym tekście sohne-var — alternatywne glify definiują osobowość
|
||
- Nie używać czystej czerni (`#000000`) dla nagłówków — zawsze `#061b31` głęboki granat
|
||
- Nie używać ciepłych kolorów akcentowych (pomarańczowego, żółtego) dla elementów interaktywnych — fiolet jest podstawowy
|
||
- Nie stosować dodatniego odstępu liter przy rozmiarach displayowych — Stripe śledzi ciasno
|
||
- Nie używać akcentów magenty/rubinu dla przycisków lub linków — są wyłącznie dekoracyjne/gradientowe
|
||
|
||
## 8. Zachowanie Responsywne
|
||
|
||
### Punkty Przełamania
|
||
| Nazwa | Szerokość | Kluczowe Zmiany |
|
||
|------|-------|-------------|
|
||
| Mobile | <640px | Pojedyncza kolumna, zmniejszone rozmiary nagłówków, ułożone karty |
|
||
| Tablet | 640-1024px | Siatki 2-kolumnowe, umiarkowany padding |
|
||
| Desktop | 1024-1280px | Pełny układ, 3-kolumnowe siatki funkcji |
|
||
| Large Desktop | >1280px | Wyśrodkowana treść z hojnymi marginesami |
|
||
|
||
### Obszary Dotykowe
|
||
- Przyciski używają wygodnego paddingu (8px–16px pionowo)
|
||
- Linki nawigacyjne przy 14px z odpowiednim odstępem
|
||
- Odznaki mają minimalny padding poziomy 6px dla celów dotykowych
|
||
- Przycisk przełącznika nawigacji mobilnej z promieniem 6px
|
||
|
||
### Strategia Składania
|
||
- Bohater: display 56px -> 32px na mobile, grubość 300 zachowana
|
||
- Nawigacja: poziome linki + CTA -> przełącznik hamburger
|
||
- Karty funkcji: 3-kolumnowe -> 2-kolumnowe -> ułożone w jednej kolumnie
|
||
- Ciemne sekcje marki: zachowanie pełnoszerokościowego traktowania, zmniejszenie wewnętrznego paddingu
|
||
- Tabele danych finansowych: poziome przewijanie na mobile
|
||
- Odstępy sekcji: 64px+ -> 40px na mobile
|
||
- Skala typograficzna kompresuje się: rozmiary bohaterów 56px -> 48px -> 32px w różnych punktach przełamania
|
||
|
||
### Zachowanie Obrazów
|
||
- Zrzuty ekranu dashboardu/produktu zachowują cień z niebieskim odcieniem we wszystkich rozmiarach
|
||
- Dekoracje gradientowe bohatera upraszczają się na mobile
|
||
- Bloki kodu zachowują traktowanie `SourceCodePro`, mogą przewijać się poziomo
|
||
- Obrazy kart zachowują spójne zaokrąglenie narożników 4px–6px
|
||
|
||
## 9. Przewodnik po Promptach dla Agenta
|
||
|
||
### Szybki Podgląd Kolorów
|
||
- Podstawowe CTA: Stripe Purple (`#533afd`)
|
||
- Hover CTA: Purple Dark (`#4434d4`)
|
||
- Tło: Pure White (`#ffffff`)
|
||
- Tekst nagłówka: Deep Navy (`#061b31`)
|
||
- Tekst treści: Slate (`#64748d`)
|
||
- Tekst etykiety: Dark Slate (`#273951`)
|
||
- Obramowanie: Soft Blue (`#e5edf5`)
|
||
- Link: Stripe Purple (`#533afd`)
|
||
- Ciemna sekcja: Brand Dark (`#1c1e54`)
|
||
- Sukces: Green (`#15be53`)
|
||
- Akcent dekoracyjny: Ruby (`#ea2261`), Magenta (`#f96bee`)
|
||
|
||
### Przykładowe Prompty dla Komponentów
|
||
- "Stwórz sekcję bohatera na białym tle. Nagłówek przy 48px sohne-var grubość 300, line-height 1.15, letter-spacing -0.96px, kolor #061b31, font-feature-settings 'ss01'. Podtytuł przy 18px grubość 300, line-height 1.40, kolor #64748d. Fioletowy przycisk CTA (#533afd, radius 4px, padding 8px 16px, biały tekst) i przycisk ghost (transparent, 1px solid #b9b9f9, tekst #533afd, radius 4px)."
|
||
- "Zaprojektuj kartę: białe tło, obramowanie 1px solid #e5edf5, radius 6px. Cień: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Tytuł przy 22px sohne-var grubość 300, letter-spacing -0.22px, kolor #061b31, 'ss01'. Treść przy 16px grubość 300, #64748d."
|
||
- "Zbuduj odznakę sukcesu: tło rgba(21,190,83,0.2), tekst #108c3d, radius 4px, padding 1px 6px, 10px sohne-var grubość 300, obramowanie 1px solid rgba(21,190,83,0.4)."
|
||
- "Stwórz nawigację: biały przyklejony nagłówek z backdrop-filter blur(12px). sohne-var 14px grubość 400 dla linków, tekst #061b31, 'ss01'. Fioletowe CTA 'Start now' wyrównane do prawej (#533afd bg, biały tekst, radius 4px). Kontener nawigacji radius 6px."
|
||
- "Zaprojektuj ciemną sekcję marki: tło #1c1e54, biały tekst. Nagłówek 32px sohne-var grubość 300, letter-spacing -0.64px, 'ss01'. Treść 16px grubość 300, rgba(255,255,255,0.7). Karty wewnątrz używają obramowania rgba(255,255,255,0.1) z radius 6px."
|
||
|
||
### Przewodnik po Iteracji
|
||
1. Zawsze włączaj `font-feature-settings: "ss01"` na tekście sohne-var — to jest DNA typograficzne marki
|
||
2. Grubość 300 jest domyślna; używaj 400 tylko dla przycisków/linków/nawigacji
|
||
3. Formuła cienia: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2` gdzie Y1/B1 są większe (daleki cień) a Y2/B2 mniejsze (bliski cień)
|
||
4. Kolor nagłówka to `#061b31` (głęboki granat), treść to `#64748d` (łupek), etykiety to `#273951` (ciemny łupek)
|
||
5. Zaokrąglenie narożników pozostaje w zakresie 4px–8px — nigdy nie używaj kształtów pigułek ani dużego zaokrąglenia
|
||
6. Używaj `"tnum"` dla dowolnych liczb w tabelach, wykresach lub wyświetleniach finansowych
|
||
7. Ciemne sekcje używają `#1c1e54` — nie czarnego, nie szarego, ale głębokiego markowego indygo
|
||
8. SourceCodePro dla kodu przy 12px/500 z line-height 2.00 (bardzo hojny dla czytelności)
|