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。
270 lines
17 KiB
Markdown
270 lines
17 KiB
Markdown
# System Designu Inspirowany przez Cohere
|
||
|
||
> Kategoria: AI i LLM
|
||
> Platforma AI dla przedsiębiorstw. Żywe gradienty, estetyka pulpitu nawigacyjnego bogatego w dane.
|
||
|
||
## 1. Motyw Wizualny i Atmosfera
|
||
|
||
Interfejs Cohere to dopracowany pulpit dowodzenia klasy enterprise — pewny siebie, czysty i zaprojektowany tak, by AI sprawiało wrażenie poważnej infrastruktury, a nie produktu konsumenckiego. Doświadczenie rozgrywa się na jasnym, białym tle, gdzie treść organizowana jest w hojnie zaokrąglone karty (promień 22px), tworzące organiczny, chmuropodobny język konteneryzacji. To witryna skierowana do CTO i architektów korporacyjnych: profesjonalna, ale nie zimna; wyrafinowana, ale nie onieśmielająca.
|
||
|
||
Język projektowy łączy dwa światy dzięki systemowi podwójnych krojów pisma: CohereText — niestandardowy szeryfowy krój wyświetlaczowy o ciasnym śledztwie — nadaje nagłówkom powagę technologicznego manifestu, natomiast Unica77 Cohere Web obsługuje wszystkie teksty treści i UI z geometryczną szwajcarską precyzją. Ta para szeryfowo-bezszeryfowa tworzy osobowość „pewnego autorytetu spotkającego inżynierską klarowność", doskonale odzwierciedlającą platformę AI dla przedsiębiorstw.
|
||
|
||
Kolor stosowany jest z ekstremalnym umiarkowaniem — interfejs jest niemal całkowicie czarno-biały z chłodnymi szarymi obramowaniami (`#d9d9dd`, `#e5e7eb`). Fioletowo-śliwkowy pojawia się wyłącznie w fotograficznych pasmach hero, sekcjach gradientowych oraz interaktywnym błękicie (`#1863dc`) sygnalizującym stany hover i focus. Ta chromatyczna powściągliwość sprawia, że kiedy kolor JUŻ się pojawia — na zrzutach ekranu produktu, fotografii biznesowej i w głębokiej fioletowej sekcji — niesie maksymalną wagę wizualną.
|
||
|
||
**Kluczowe Cechy:**
|
||
- Jasne białe tło z chłodnymi szarymi obramowaniami kontenerów
|
||
- Sygnaturowy promień obramowania 22px — charakterystyczne „zaokrąglenie kart Cohere"
|
||
- Podwójny niestandardowy krój pisma: CohereText (wyświetlaczowy szeryfowy) + Unica77 (bezszeryfowy do treści)
|
||
- Chromatyczna powściągliwość klasy enterprise: czerń, biel, chłodne szarości, minimalistyczny akcent fioletowo-niebieski
|
||
- Głęboko fioletowe/śliwkowe sekcje hero zapewniające dramatyczny kontrast
|
||
- Przyciski ghost/przezroczyste, które na hover zmieniają się na niebieski
|
||
- Fotografia biznesowa ukazująca zróżnicowane zastosowania w rzeczywistym świecie
|
||
- CohereMono dla kodu i etykiet technicznych z transformacjami na wielkie litery
|
||
|
||
## 2. Paleta Kolorów i Role
|
||
|
||
### Podstawowe
|
||
- **Czerń Cohere** (`#000000`): Tekst głównych nagłówków i elementy o maksymalnym znaczeniu.
|
||
- **Prawie Czerń** (`#212121`): Standardowy kolor linków treści — nieco łagodniejszy niż czysta czerń.
|
||
- **Głęboka Ciemność** (`#17171c`): Prawie czerń z niebieskim odcieniem, przeznaczona dla nawigacji i tekstu w ciemnych sekcjach.
|
||
|
||
### Drugorzędne i Akcentowe
|
||
- **Błękit Interakcji** (`#1863dc`): Główny interaktywny akcent — pojawia się na hover przycisków, stanach focus i aktywnych linkach. Jedyny chromatyczny kolor akcji.
|
||
- **Pierścień Niebieski** (`#4c6ee6` przy 50%): Kolor pierścienia Tailwind dla wskaźników fokusa klawiaturowego.
|
||
- **Fiolet Fokusa** (`#9b60aa`): Kolor obramowania fokusa pola tekstowego — stonowany fiolet.
|
||
|
||
### Tło i Powierzchnie
|
||
- **Czysta Biel** (`#ffffff`): Główne tło strony i powierzchnia kart.
|
||
- **Śnieg** (`#fafafa`): Subtelnie wyniesione powierzchnie i jasne tła sekcji.
|
||
- **Najjaśniejsza Szarość** (`#f2f2f2`): Obramowania kart i najdelikatniejsze linie kontenerów.
|
||
|
||
### Neutralne i Tekstowe
|
||
- **Stonowany Łupek** (`#93939f`): Odpominięte linki stopki i tekst trzeciorzędny — chłodna szarość z lekkim niebiesko-fioletowym odcieniem.
|
||
- **Chłodne Obramowanie** (`#d9d9dd`): Standardowe obramowania sekcji i elementów listy — chłodna, lekko fioletowa szarość.
|
||
- **Jasne Obramowanie** (`#e5e7eb`): Jaśniejszy wariant obramowania — standardowa gray-200 z Tailwind.
|
||
|
||
### System Gradientów
|
||
- **Pasmo Hero Fioletowo-Śliwkowe**: Głęboko fioletowe sekcje gradientowe tworzące dramatyczny kontrast na tle białego tła. Pojawiają się jako pełnoszerokościowe pasma mieszczące zrzuty ekranu produktu i kluczowe komunikaty.
|
||
- **Gradient Ciemnej Stopki**: Strona przechodzi przez głęboki fiolet/antracyt do czarnej stopki, tworząc efekt „zmierzchu".
|
||
|
||
## 3. Zasady Typografii
|
||
|
||
### Rodzina Czcionek
|
||
- **Wyświetlaczowa**: `CohereText`, z rezerwowymi: `Space Grotesk, Inter, ui-sans-serif, system-ui`
|
||
- **Treść / UI**: `Unica77 Cohere Web`, z rezerwowymi: `Inter, Arial, ui-sans-serif, system-ui`
|
||
- **Kod**: `CohereMono`, z rezerwowymi: `Arial, ui-sans-serif, system-ui`
|
||
- **Ikony**: `CohereIconDefault` (niestandardowa czcionka ikonograficzna)
|
||
|
||
### Hierarchia
|
||
|
||
| Rola | Czcionka | Rozmiar | Grubość | Interlinia | Śledzenie | Uwagi |
|
||
|------|----------|---------|---------|------------|-----------|-------|
|
||
| Wyświetlaczowy / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (ciasna) | -1.44px | Maksymalny impakt, autorytet szeryfowy |
|
||
| Wyświetlaczowy Drugorzędny | CohereText | 60px (3.75rem) | 400 | 1.00 (ciasna) | -1.2px | Duże nagłówki sekcji |
|
||
| Nagłówek Sekcji | Unica77 | 48px (3rem) | 400 | 1.20 (ciasna) | -0.48px | Tytuły sekcji funkcji |
|
||
| Podnagłówek | Unica77 | 32px (2rem) | 400 | 1.20 (ciasna) | -0.32px | Nagłówki kart, nazwy funkcji |
|
||
| Tytuł Funkcji | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Mniejsze tytuły sekcji |
|
||
| Treść Duża | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Akapity wprowadzające |
|
||
| Treść / Przycisk | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standardowa treść, tekst przycisku |
|
||
| Przycisk Średni | Unica77 | 14px (0.88rem) | 500 | 1.71 (rozluźniona) | normal | Mniejsze przyciski, wyróżnione etykiety |
|
||
| Podpis | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadane, opisy |
|
||
| Etykieta Wersalikami | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Etykiety sekcji pisane wersalikami |
|
||
| Mały | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Najmniejszy tekst, linki stopki |
|
||
| Kod Mikro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
|
||
|
||
### Zasady
|
||
- **Szeryfowy do deklaracji, bezszeryfowy do użytku**: CohereText niesie głos marki w skali wyświetlaczowej — jego szeryfy nadają nagłówkom autorytet opublikowanych badań. Unica77 obsługuje wszystko, co funkcjonalne, z geometryczno-szwajcarską neutralnością.
|
||
- **Ujemne śledzenie w dużej skali**: CohereText używa śledzenia -1.2px do -1.44px przy 60–72px, tworząc gęste, efektowne bloki tekstowe.
|
||
- **Jedna grubość treści**: Niemal cały tekst Unica77 ma grubość 400. Grubość 500 pojawia się wyłącznie dla wyróżnienia małych przycisków. System opiera się na rozmiarze i odstępach, a nie na kontraście grubości.
|
||
- **Etykiety kodu wersalikami**: CohereMono używa wersalików z dodatnim śledzeniem (0.16–0.28px) dla tagów technicznych i znaczników sekcji.
|
||
|
||
## 4. Style Komponentów
|
||
|
||
### Przyciski
|
||
|
||
**Ghost / Przezroczysty**
|
||
- Tło: przezroczyste (`rgba(255, 255, 255, 0)`)
|
||
- Tekst: Czerń Cohere (`#000000`)
|
||
- Brak widocznego obramowania
|
||
- Hover: tekst zmienia się na Błękit Interakcji (`#1863dc`), krycie 0.8
|
||
- Focus: pełne obramowanie 2px w Błękicie Interakcji
|
||
- Główny styl przycisku — niewidoczny dopóki nie zostanie poddany interakcji
|
||
|
||
**Ciemny Pełny**
|
||
- Tło: ciemne/czarne
|
||
- Tekst: Czysta Biel
|
||
- Do CTA na jasnych powierzchniach
|
||
- Pigułkowy lub standardowy promień
|
||
|
||
**Obramowany**
|
||
- Kontener oparty na obramowaniu
|
||
- Używany w działaniach drugorzędnych
|
||
|
||
### Karty i Kontenery
|
||
- Tło: Czysta Biel (`#ffffff`)
|
||
- Obramowanie: cienka linia Najjaśniejszej Szarości (`1px solid #f2f2f2`) dla subtelnych kart; Chłodne Obramowanie (`#d9d9dd`) dla wyróżnionych
|
||
- Promień: **22px** — sygnaturowy promień Cohere dla głównych kart, obrazów i kontenerów dialogowych. Również 4px, 8px, 16px, 20px dla mniejszych elementów
|
||
- Cień: minimalny — Cohere opiera się na kolorze tła i obramowaniach, a nie na cieniach
|
||
- Specjalny: promień `0px 0px 22px 22px` (zaokrąglenie tylko od dołu) dla kontenerów sekcji
|
||
- Dialog: promień 8px dla okienek modalnych/dialogowych
|
||
|
||
### Pola Tekstowe i Formularze
|
||
- Tekst: biały na ciemnym polu, czarny na jasnym
|
||
- Obramowanie fokusa: Fiolet Fokusa (`#9b60aa`) z `1px solid`
|
||
- Cień fokusa: czerwony pierścień (`rgb(179, 0, 0) 0px 0px 0px 2px`) — prawdopodobnie dla sygnalizacji stanu błędu
|
||
- Obrys fokusa: Błękit Interakcji, linia 2px
|
||
|
||
### Nawigacja
|
||
- Czysta pozioma nawigacja na białym lub ciemnym tle
|
||
- Logo: wordmark Cohere (niestandardowe SVG)
|
||
- Linki: ciemny tekst, 16px Unica77
|
||
- CTA: ciemny pełny przycisk
|
||
- Mobile: zwijanie do hamburgera
|
||
|
||
### Obróbka Obrazów
|
||
- Fotografia biznesowa z różnorodną tematyką i środowiskami
|
||
- Fioletowo odcieniona fotografia hero dla dramatycznych sekcji
|
||
- Zrzuty ekranu UI produktu na ciemnych powierzchniach
|
||
- Obrazy z promieniem 22px odpowiadającym systemowi kart
|
||
- Sekcje z pełnoszerokościowym fioletowym gradientem
|
||
|
||
### Charakterystyczne Komponenty
|
||
|
||
**System Kart 22px**
|
||
- Promień obramowania 22px to sygnatura wizualna Cohere
|
||
- Wszystkie główne karty, obrazy i kontenery używają tego promienia
|
||
- Tworzy chmuropodobną, organiczną miękkość wyróżniającą się spośród typowych 8–12px
|
||
|
||
**Pasek Zaufania Enterprise**
|
||
- Logo firm wyświetlane w poziomym pasku
|
||
- Demonstruje adopcję przez przedsiębiorstwa
|
||
- Czyste, monochromatyczne traktowanie logotypów
|
||
|
||
**Fioletowe Pasma Hero**
|
||
- Pełnoszerokościowe, głęboko fioletowe sekcje mieszczące prezentacje produktów
|
||
- Tworzą dramatyczne przerwy wizualne w białym układzie strony
|
||
- Zrzuty ekranu produktu unoszą się wewnątrz fioletowego środowiska
|
||
|
||
**Tagi Kodu Wersalikami**
|
||
- CohereMono wersalikami ze śledzeniem
|
||
- Używane jako znaczniki sekcji i etykiety kategoryzacji
|
||
- Tworzy techniczną, ustrukturyzowaną hierarchię informacji
|
||
|
||
## 5. Zasady Układu
|
||
|
||
### System Odstępów
|
||
- Jednostka bazowa: 8px
|
||
- Skala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
|
||
- Padding przycisku zmienia się w zależności od wariantu
|
||
- Wewnętrzny padding karty: około 24–32px
|
||
- Pionowe odstępy sekcji: hojne (56–60px między sekcjami)
|
||
|
||
### Siatka i Kontener
|
||
- Maksymalna szerokość kontenera: do 2560px (bardzo szeroka) z responsywnym skalowaniem
|
||
- Hero: wyśrodkowany z dramatyczną typografią
|
||
- Sekcje funkcji: wielokolumnowe siatki kart
|
||
- Sekcje enterprise: pełnoszerokościowe fioletowe pasma
|
||
- Wykryto 26 punktów przełamania — ekstremalnie granularny system responsywny
|
||
|
||
### Filozofia Przestrzeni Białej
|
||
- **Klarowność enterprise**: Każda sekcja prezentuje jedną wyraźną propozycję z przestrzenią do oddychania.
|
||
- **Fotografia jako bohater**: Duże sekcje fotograficzne zapewniają zainteresowanie wizualne bez potrzeby dekoracyjnych elementów projektowych.
|
||
- **Grupowanie kartami**: Powiązana treść grupowana jest w karty z zaokrągleniem 22px, tworząc naturalne klastry informacyjne.
|
||
|
||
### Skala Promienia Obramowania
|
||
- Ostry (4px): Elementy nawigacji, małe tagi, paginacja
|
||
- Komfortowy (8px): Okna dialogowe, kontenery drugorzędne, małe karty
|
||
- Hojny (16px): Wyróżnione kontenery, średnie karty
|
||
- Duży (20px): Duże karty funkcji
|
||
- Sygnaturowy (22px): Główne karty, obrazy hero, główne kontenery — TEN promień Cohere
|
||
- Pigułkowy (9999px): Przyciski, tagi, wskaźniki statusu
|
||
|
||
## 6. Głębia i Elewacja
|
||
|
||
| Poziom | Traktowanie | Zastosowanie |
|
||
|--------|-------------|--------------|
|
||
| Płaski (Poziom 0) | Brak cienia, brak obramowania | Tło strony, bloki tekstowe |
|
||
| Obramowany (Poziom 1) | `1px solid #f2f2f2` lub `#d9d9dd` | Standardowe karty, separatory listy |
|
||
| Pasmo Fioletowe (Poziom 2) | Pełnoszerokościowe ciemne fioletowe tło | Sekcje hero, prezentacje funkcji |
|
||
|
||
**Filozofia Cieni**: Cohere jest niemal wolny od cieni. Głębia komunikowana jest poprzez **kontrast koloru tła** (białe karty na fioletowych pasmach, biała powierzchnia na śniegu), **konteneryzację obramowaniem** (chłodne szare obramowania) i dramatyczne **naprzemienne przejścia sekcji od jasnych do ciemnych**. Gdy elementy wymagają elewacji, osiągają ją przez bycie białymi na ciemnym tle, a nie przez rzucanie cieni.
|
||
|
||
## 7. Nakazy i Zakazy
|
||
|
||
### Nakazy
|
||
- Używaj promienia obramowania 22px na wszystkich głównych kartach i kontenerach — to sygnatura wizualna
|
||
- Używaj CohereText dla nagłówków wyświetlaczowych (72px, 60px) z ujemnym śledzeniem
|
||
- Używaj Unica77 dla całego tekstu treści i UI przy grubości 400
|
||
- Utrzymuj paletę czarno-białą z chłodnymi szarymi obramowaniami
|
||
- Używaj Błękitu Interakcji (#1863dc) wyłącznie dla interaktywnych stanów hover/focus
|
||
- Używaj głęboko fioletowych sekcji dla dramatycznych przerw wizualnych i prezentacji produktów
|
||
- Stosuj wersaliki + śledzenie w CohereMono dla etykiet sekcji
|
||
- Utrzymuj fotografię odpowiednią dla przedsiębiorstw z różnorodną tematyką
|
||
|
||
### Zakazy
|
||
- Nie używaj promienia obramowania innego niż 22px na głównych kartach — sygnaturowy promień ma znaczenie
|
||
- Nie wprowadzaj ciepłych kolorów — paleta jest ściśle chłodnotonalna
|
||
- Nie używaj mocnych cieni — głębia pochodzi z kontrastu kolorów i obramowań
|
||
- Nie używaj grubości pogrubionej (700+) dla tekstu treści — zakres to 400–500
|
||
- Nie pomijaj hierarchii szeryfowo/bezszeryfowej — CohereText dla nagłówków, Unica77 dla treści
|
||
- Nie używaj fioletu jako koloru powierzchni kart — fiolet zarezerwowany jest dla pełnoszerokościowych sekcji
|
||
- Nie redukuj odstępów sekcji poniżej 40px — układy enterprise potrzebują przestrzeni do oddychania
|
||
- Nie dodawaj dekoracji do przycisków domyślnie — ghost/przezroczysty to stan bazowy
|
||
|
||
## 8. Zachowanie Responsywne
|
||
|
||
### Punkty Przełamania
|
||
| Nazwa | Szerokość | Kluczowe Zmiany |
|
||
|-------|-----------|-----------------|
|
||
| Małe Mobile | <425px | Kompaktowy układ, minimalne odstępy |
|
||
| Mobile | 425–640px | Jedna kolumna, karty układane w stos |
|
||
| Duże Mobile | 640–768px | Drobne korekty odstępów |
|
||
| Tablet | 768–1024px | Rozpoczynają się siatki 2-kolumnowe |
|
||
| Desktop | 1024–1440px | Pełny układ wielokolumnowy |
|
||
| Duży Desktop | 1440–2560px | Maksymalna szerokość kontenera |
|
||
|
||
*Wykryto 26 punktów przełamania — jedna z najbardziej granularnie responsywnych witryn w zbiorze danych.*
|
||
|
||
### Cele Dotykowe
|
||
- Przyciski odpowiednio zwymiarowane dla interakcji dotykowej
|
||
- Linki nawigacji z komfortowymi odstępami
|
||
- Powierzchnie kart jako cele dotykowe
|
||
|
||
### Strategia Zwijania
|
||
- **Nawigacja**: Pełna nawigacja zwija się do hamburgera
|
||
- **Siatki funkcji**: Wielokolumnowy → 2-kolumnowy → jedna kolumna
|
||
- **Tekst hero**: 72px → 48px → 32px progresywne skalowanie
|
||
- **Sekcje fioletowe**: Utrzymują pełną szerokość, treść układana w stos
|
||
- **Siatki kart**: 3 → 2 → 1 kolumna
|
||
|
||
### Zachowanie Obrazów
|
||
- Fotografia skaluje się proporcjonalnie wewnątrz kontenerów z promieniem 22px
|
||
- Zrzuty ekranu produktu zachowują proporcje
|
||
- Sekcje fioletowe skalują tło proporcjonalnie
|
||
|
||
## 9. Przewodnik po Promptach dla Agenta
|
||
|
||
### Szybkie Odniesienie do Kolorów
|
||
- Tekst Główny: „Czerń Cohere (#000000)"
|
||
- Tło Strony: „Czysta Biel (#ffffff)"
|
||
- Tekst Drugorzędny: „Prawie Czerń (#212121)"
|
||
- Akcent Hover: „Błękit Interakcji (#1863dc)"
|
||
- Stonowany Tekst: „Stonowany Łupek (#93939f)"
|
||
- Obramowania Kart: „Najjaśniejsza Szarość (#f2f2f2)"
|
||
- Obramowania Sekcji: „Chłodne Obramowanie (#d9d9dd)"
|
||
|
||
### Przykładowe Prompty Komponentów
|
||
- „Utwórz sekcję hero na Czystej Bieli (#ffffff) z CohereText przy 72px grubości 400, line-height 1.0, letter-spacing -1.44px. Tekst w Czerni Cohere. Podtytuł w Unica77 przy 18px grubości 400, line-height 1.4."
|
||
- „Zaprojektuj kartę funkcji z promieniem obramowania 22px, obramowaniem 1px solid Najjaśniejszej Szarości (#f2f2f2) na białym tle. Tytuł w Unica77 przy 32px, letter-spacing -0.32px. Treść w Unica77 przy 16px, Stonowany Łupek (#93939f)."
|
||
- „Zbuduj przycisk ghost: przezroczyste tło, tekst w Czerni Cohere w Unica77 przy 16px. Na hover tekst zmienia się na Błękit Interakcji (#1863dc) z kryciem 0.8. Focus: obrys 2px solid Błękit Interakcji."
|
||
- „Utwórz głęboko fioletową pełnoszerokościową sekcję z białym tekstem. CohereText przy 60px dla nagłówka. Zrzut ekranu produktu unosi się wewnątrz z promieniem obramowania 22px."
|
||
- „Zaprojektuj etykietę sekcji używając CohereMono przy 14px, wersaliki, letter-spacing 0.28px. Tekst w Stonowanym Łupku (#93939f)."
|
||
|
||
### Przewodnik po Iteracji
|
||
1. Skup się na JEDNYM komponencie na raz
|
||
2. Zawsze używaj promienia 22px dla głównych kart — „zaokrąglenie kart Cohere"
|
||
3. Określaj krój pisma — CohereText dla nagłówków, Unica77 dla treści, CohereMono dla etykiet
|
||
4. Elementy interaktywne używają Błękitu Interakcji (#1863dc) wyłącznie na hover
|
||
5. Utrzymuj białe powierzchnie z chłodnymi szarymi obramowaniami — bez ciepłych tonów
|
||
6. Fiolet jest przeznaczony dla pełnoszerokościowych sekcji, nigdy dla teł kart
|