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

# System Projektowania Inspirowany IBM

> Category: Media & Consumer
> Technologia korporacyjna. System projektowania Carbon, strukturowana paleta niebieskiego.

## 1. Motyw Wizualny i Atmosfera

Strona internetowa IBM jest cyfrowym wcieleniem korporacyjnego autorytetu zbudowanego na systemie projektowania Carbon — języku wizualnym tak metodycznie ustrukturyzowanym, że przypomina specyfikację inżynieryjną przetworzoną na stronę WWW. Strona opiera się na wyraźnej dwoistości: jasnobiałe (`#ffffff`) tło z niemal czarnym (`#161616`) tekstem, akcentowane pojedynczym, niezmiennym kolorem — IBM Blue 60 (`#0f62fe`). To nie jest beztroskie minimalistyczne podejście startupu technologicznego; to korporacyjna precyzja skondensowana w pikselach. Każdy element istnieje w ramach sztywnej siatki 2x systemu Carbon, każdy kolor odpowiada tokenowi semantycznemu, każda wartość odstępu zatrzaskuje się na bazowej jednostce 8px.

Rodzina krojów IBM Plex stanowi kręgosłup systemu. IBM Plex Sans w lekkiej wadze (300) dla nagłówków wyświetlaczowych tworzy nieoczekiwanie zwiewną, niemal delikatną jakość przy dużych rozmiarach — celowy kontrapunkt do korporacyjnego ciężaru IBM. Przy rozmiarach akapitowych, regularna waga (400) z odstępem liter 0.16px na podpisach 14px wprowadza skrupulatne mikro-śledzenie, które sprawia, że tekst Carbon wydaje się zaprojektowany inżynieryjnie, a nie typograficznie. IBM Plex Mono służy do kodu, danych i etykiet technicznych, dopełniając trójcę rodziny obok rzadko używanego IBM Plex Serif.

To, co definiuje tożsamość wizualną IBM poza monochromatyką i niebieskim, to poleganie na systemie tokenów komponentów Carbon. Każdy stan interaktywny mapuje się na właściwość niestandardową CSS poprzedzoną `--cds-` (Carbon Design System). Przyciski nie mają zakodowanych na stałe kolorów; odwołują się do `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. Ta stokenizowana architektura oznacza, że cała warstwa wizualna jest cienką powłoką nad głęboko systematycznym fundamentem — projektowym odpowiednikiem dobrze otypowanego API.

**Kluczowe Cechy Charakterystyczne:**
- IBM Plex Sans w wadze 300 (Light) do wyświetlaczy — korporacyjna powaga przez typograficzną powściągliwość
- IBM Plex Mono do kodu i treści technicznych ze stałym odstępem liter 0.16px przy małych rozmiarach
- Jeden kolor akcentowy: IBM Blue 60 (`#0f62fe`) — każdy element interaktywny, każde CTA, każdy link
- System tokenów Carbon (`--cds-*`) sterujący wszystkimi kolorami semantycznymi, umożliwiający przełączanie motywów na poziomie zmiennych
- Siatka odstępów 8px z ścisłym przestrzeganiem — żadnych dowolnych wartości, wszystko wyrównane
- Płaskie, pozbawione obramowań karty na powierzchni `#f4f4f4` Gray 10 — głębia przez warstwowanie kolorów tła, nie cienie
- Pola formularzy z dolnym obramowaniem (nie obwiedzione) — charakterystyczny wzorzec formularzy Carbon
- Promień zaokrąglenia 0px dla przycisków głównych — bezkompromisowo prostokątny, bez zmiękczania

## 2. Paleta Kolorów i Role

### Podstawowe
- **IBM Blue 60** (`#0f62fe`): Jedyny kolor interaktywny. Przyciski główne, linki, stany fokusa, wskaźniki aktywności. To jedyna chromatyczna barwa w podstawowej palecie UI.
- **Biały** (`#ffffff`): Tło strony, powierzchnie kart, tekst przycisku na niebieskim tle, `--cds-background`.
- **Gray 100** (`#161616`): Tekst główny, nagłówki, ciemne tła powierzchni, pasek nawigacyjny, stopka. `--cds-text-primary`.

### Skala Neutralna (Rodzina Szarości)
- **Gray 100** (`#161616`): Tekst główny, nagłówki, ciemne elementy UI, tło stopki.
- **Gray 90** (`#262626`): Wtórne ciemne powierzchnie, stany najechania na ciemnych tłach.
- **Gray 80** (`#393939`): Trzeciorzędna ciemna, stany aktywne.
- **Gray 70** (`#525252`): Tekst wtórny, tekst pomocniczy, opisy. `--cds-text-secondary`.
- **Gray 60** (`#6f6f6f`): Tekst zastępczy, tekst wyłączony.
- **Gray 50** (`#8d8d8d`): Wyłączone ikony, przytłumione etykiety.
- **Gray 30** (`#c6c6c6`): Obramowania, linie podziału, dolne obramowania pól formularzy. `--cds-border-subtle`.
- **Gray 20** (`#e0e0e0`): Subtelne obramowania, kontury kart.
- **Gray 10** (`#f4f4f4`): Tło powierzchni wtórnej, wypełnienia kart, naprzemienne wiersze. `--cds-layer-01`.
- **Gray 10 Hover** (`#e8e8e8`): Stan najechania dla powierzchni Gray 10.

### Interaktywne
- **Blue 60** (`#0f62fe`): Główny interaktywny — przyciski, linki, fokus. `--cds-link-primary`, `--cds-button-primary`.
- **Blue 70** (`#0043ce`): Stan najechania na link. `--cds-link-primary-hover`.
- **Blue 80** (`#002d9c`): Stan aktywny/wciśnięty dla niebieskich elementów.
- **Blue 10** (`#edf5ff`): Powierzchnia odcienia niebieskiego, tło wybranego wiersza.
- **Focus Blue** (`#0f62fe`): `--cds-focus` — wewnętrzne obramowanie 2px na sfokusowanych elementach.
- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — biały pierścień wewnętrzny dla fokusa na ciemnych tłach.

### Wsparcie i Status
- **Red 60** (`#da1e28`): Błąd, niebezpieczeństwo. `--cds-support-error`.
- **Green 50** (`#24a148`): Sukces. `--cds-support-success`.
- **Yellow 30** (`#f1c21b`): Ostrzeżenie. `--cds-support-warning`.
- **Blue 60** (`#0f62fe`): Informacyjny. `--cds-support-info`.

### Ciemny Motyw (Motyw Gray 100)
- **Tło**: Gray 100 (`#161616`). `--cds-background`.
- **Layer 01**: Gray 90 (`#262626`). Powierzchnie kart i kontenerów.
- **Layer 02**: Gray 80 (`#393939`). Podwyższone powierzchnie.
- **Tekst główny**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
- **Tekst wtórny**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
- **Subtelne obramowanie**: Gray 80 (`#393939`). `--cds-border-subtle`.
- **Interaktywny**: Blue 40 (`#78a9ff`). Linki i elementy interaktywne przesuwają się w stronę jaśniejszych odcieni dla kontrastu.

## 3. Zasady Typografii

### Rodzina Czcionek
- **Podstawowa**: `IBM Plex Sans`, z zastępnikami: `Helvetica Neue, Arial, sans-serif`
- **Monospace**: `IBM Plex Mono`, z zastępnikami: `Menlo, Courier, monospace`
- **Szeryfowa** (ograniczone użycie): `IBM Plex Serif`, do kontekstów redakcyjnych/ekspresywnych
- **Czcionka Ikon**: `ibm_icons` — własnościowe glify ikon przy 20px

### Hierarchia

| Rola | Czcionka | Rozmiar | Waga | Wysokość Wiersza | Odstęp Liter | Uwagi |
|------|----------|---------|------|------------------|--------------|-------|
| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maksymalny efekt, lekka waga dla elegancji |
| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Wtórne hero, responsywna alternatywa |
| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Ekspresywny nagłówek |
| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Nagłówki sekcji |
| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Tytuły podsekcji |
| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Tytuły kart, nagłówki funkcji |
| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lżejsze nagłówki kart |
| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standardowy tekst do czytania |
| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Wyróżniony akapit, etykiety |
| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Zwięzły akapit, podpisy |
| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Pogrubione podpisy, elementy nawigacji |
| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadane, znaczniki czasu |
| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Kod inline, terminal |
| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Bloki kodu |
| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Dekoracyjne mono dla hero |

### Zasady
- **Lekka waga przy rozmiarach wyświetlaczowych**: Ekspresywny zestaw typograficzny Carbon używa wagi 300 (Light) przy 42px+. Tworzy to charakterystyczne napięcie — treść przemawia z korporacyjnym autorytetem, podczas gdy litery szepczą typograficzną lekkością.
- **Mikro-śledzenie przy małych rozmiarach**: Odstęp liter 0.16px przy 14px i 0.32px przy 12px. Te pozornie nieistotne wartości to tajemna broń Carbon w zakresie czytelności przy kompaktowych rozmiarach — otwierają ciasne formy liter IBM Plex dokładnie o tyle, ile trzeba.
- **Trzy funkcjonalne wagi**: 300 (wyświetlacz/ekspresywny), 400 (akapit/do czytania), 600 (wyróżnienie/etykiety UI). Waga 700 jest celowo nieobecna w produkcyjnej skali typograficznej.
- **Produktywny vs. Ekspresywny**: Zestawy produktywne używają ściślejszych wysokości wierszy (1.29) dla gęstego UI. Zestawy ekspresywne oddychają swobodniej (1.40-1.50) dla treści marketingowych i redakcyjnych.

## 4. Style Komponentów

### Przyciski

**Przycisk Główny (Niebieski)**
- Tło: `#0f62fe` (Blue 60) → `--cds-button-primary`
- Tekst: `#ffffff` (White)
- Dopełnienie: 14px 63px 14px 15px (asymetryczne — miejsce na ikonę końcową)
- Obramowanie: 1px solid transparent
- Promień zaokrąglenia: 0px (ostry prostokąt — sygnatura Carbon)
- Wysokość: 48px (domyślna), 40px (kompaktowa), 64px (ekspresywna)
- Najechanie: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
- Aktywny: `#002d9c` (Blue 80) → `--cds-button-primary-active`
- Fokus: `2px solid #0f62fe` inset + `1px solid #ffffff` wewnętrzny

**Przycisk Wtórny (Szary)**
- Tło: `#393939` (Gray 80)
- Tekst: `#ffffff`
- Najechanie: `#4c4c4c` (Gray 70)
- Aktywny: `#6f6f6f` (Gray 60)
- Takie samo dopełnienie/promień jak główny

**Przycisk Trzeciorzędny (Ghost Niebieski)**
- Tło: transparent
- Tekst: `#0f62fe` (Blue 60)
- Obramowanie: 1px solid `#0f62fe`
- Najechanie: tekst `#0353e9` + odcień tła Blue 10
- Promień zaokrąglenia: 0px

**Przycisk Ghost**
- Tło: transparent
- Tekst: `#0f62fe` (Blue 60)
- Dopełnienie: 14px 16px
- Obramowanie: brak
- Najechanie: odcień tła `#e8e8e8`

**Przycisk Niebezpieczeństwa**
- Tło: `#da1e28` (Red 60)
- Tekst: `#ffffff`
- Najechanie: `#b81921` (Red 70)

### Karty i Kontenery
- Tło: `#ffffff` w jasnym motywie, `#f4f4f4` (Gray 10) dla podwyższonych kart
- Obramowanie: brak (płaski design — brak obramowania lub cienia na większości kart)
- Promień zaokrąglenia: 0px (dopasowany do prostokątnej estetyki przycisków)
- Najechanie: tło zmienia się na `#e8e8e8` (Gray 10 Hover) dla klikalnych kart
- Dopełnienie treści: 16px
- Separacja: warstwowanie kolorów tła (biały → gray 10 → biały) zamiast cieni

### Pola Formularzy
- Tło: `#f4f4f4` (Gray 10) — `--cds-field`
- Tekst: `#161616` (Gray 100)
- Dopełnienie: 0px 16px (tylko poziome)
- Wysokość: 40px (domyślna), 48px (duża)
- Obramowanie: brak na bokach/górze — `2px solid transparent` na dole
- Aktywne dolne obramowanie: `2px solid #161616` (Gray 100)
- Fokus: dolne obramowanie `2px solid #0f62fe` (Blue 60) — `--cds-focus`
- Błąd: dolne obramowanie `2px solid #da1e28` (Red 60)
- Etykieta: 12px IBM Plex Sans, odstęp liter 0.32px, Gray 70
- Tekst pomocniczy: 12px, Gray 60
- Tekst zastępczy: Gray 60 (`#6f6f6f`)
- Promień zaokrąglenia: 0px (góra) — pola mają ostre rogi

### Nawigacja
- Tło: `#161616` (Gray 100) — ciemny masthead pełnej szerokości
- Wysokość: 48px
- Logo: logo IBM 8-pasków, białe na ciemnym, wyrównane do lewej
- Linki: 14px IBM Plex Sans, waga 400, `#c6c6c6` (Gray 30) domyślny
- Najechanie na link: tekst `#ffffff`
- Aktywny link: `#ffffff` z dolnym wskaźnikiem obramowania
- Przełącznik platformy: poziome zakładki wyrównane do lewej
- Wyszukiwanie: pole wyszukiwania wysuwane po kliknięciu ikony
- Mobile: hamburger z przesuwanym panelem z lewej

### Linki
- Domyślny: `#0f62fe` (Blue 60) bez podkreślenia
- Najechanie: `#0043ce` (Blue 70) z podkreśleniem
- Odwiedzony: pozostaje Blue 60 (bez zmiany stanu odwiedzonego)
- Linki inline: domyślnie podkreślone w treści akapitowej

### Wyróżniające Się Komponenty

**Blok Treści (Hero/Wyróżniony)**
- Naprzemienne pasy tła pełnej szerokości biały/gray-10
- Nagłówek wyrównany do lewej z typem wyświetlaczowym 60px lub 48px
- CTA jako niebieski przycisk główny z ikoną strzałki
- Ilustracja/obraz wyrównany do prawej lub poniżej na mobile

**Kafelek (Klikalna Karta)**
- Tło: `#f4f4f4` lub `#ffffff`
- Pełnoszerokie dolne obramowanie lub zmiana tła przy najechaniu
- Ikona strzałki w prawym dolnym rogu przy najechaniu
- Brak cienia — płaskość jest tożsamością

**Etykieta / Tag**
- Tło: kolor kontekstowy przy 10% kryciu (np. Blue 10, Red 10)
- Tekst: odpowiadający kolor 60-stopniowy
- Dopełnienie: 4px 8px
- Promień zaokrąglenia: 24px (pigułka — wyjątek od reguły 0px)
- Czcionka: 12px waga 400

**Baner Powiadomień**
- Pełnoszerokie pasmo, zazwyczaj tło Blue 60 lub Gray 100
- Biały tekst, 14px
- Ikona zamknięcia/odrzucenia wyrównana do prawej

## 5. Zasady Układu

### System Odstępów
- Jednostka bazowa: 8px (siatka Carbon 2x)
- Skala odstępów komponentów: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
- Skala odstępów układu: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
- Mini jednostka: 8px (najmniejszy użyteczny odstęp)
- Dopełnienie wewnątrz komponentów: zazwyczaj 16px
- Przerwa między kartami/kafelkami: 1px (linia włosowa) lub 16px (standardowa)

### Siatka i Kontener
- 16-kolumnowa siatka (system siatki 2x Carbon)
- Maksymalna szerokość treści: 1584px (maksymalny breakpoint)
- Rynny kolumn: 32px (16px na mobile)
- Margines: 16px (mobile), 32px (tablet+)
- Treść zazwyczaj zajmuje 8-12 kolumn dla czytelnych długości wierszy
- Sekcje pełnokrwiste naprzemienne z zawartą treścią

### Filozofia Białej Przestrzeni
- **Funkcjonalna gęstość**: Carbon preferuje produktywną gęstość zamiast rozległej białej przestrzeni. Sekcje są ciasno upakowane w porównaniu do konsumenckich systemów projektowania — odzwierciedla to korporacyjne DNA IBM.
- **Strefowanie kolorami tła**: Zamiast ogromnych odstępów między sekcjami, IBM używa naprzemiennych kolorów tła (biały → gray 10 → biały) do tworzenia wizualnej separacji przy minimalnej przestrzeni pionowej.
- **Stały rytm 48px**: Główne przejścia sekcji używają 48px odstępów pionowych. Sekcje hero mogą używać 80px–96px.

### Skala Promieni Zaokrągleń
- **0px**: Przyciski główne, pola formularzy, kafelki, karty — dominujące podejście. Carbon jest fundamentalnie prostokątny.
- **2px**: Okazjonalnie na małych elementach interaktywnych (etykiety)
- **24px**: Tagi/etykiety (kształt pigułki — jedyny zaokrąglony wyjątek)
- **50%**: Okręgi awatarów, kontenery ikon

## 6. Głębia i Elewacja

| Poziom | Leczenie | Zastosowanie |
|--------|----------|--------------|
| Płaski (Level 0) | Brak cienia, tło `#ffffff` | Domyślna powierzchnia strony |
| Layer 01 | Brak cienia, tło `#f4f4f4` | Karty, kafelki, naprzemienne sekcje |
| Layer 02 | Brak cienia, tło `#e0e0e0` | Podwyższone panele wewnątrz Layer 01 |
| Uniesiony | `0 2px 6px rgba(0,0,0,0.3)` | Listy rozwijane, podpowiedzi, menu przepełnienia |
| Nakładka | `0 2px 6px rgba(0,0,0,0.3)` + ciemna kurtyna | Okna modalne, boczne panele |
| Fokus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Pierścień fokusa klawiatury |
| Dolne obramowanie | `2px solid #161616` na dolnej krawędzi | Aktywne pole formularza, wskaźnik aktywnej zakładki |

**Filozofia Cieni**: Carbon jest celowo niechętny cieniom. IBM osiąga głębię przede wszystkim przez warstwowanie kolorów tła — układanie powierzchni o stopniowo ciemniejszych szarościach zamiast dodawania box-shadow. Tworzy to płaską, zainspirowaną drukiem estetykę, gdzie hierarchia jest komunikowana przez wartość koloru, a nie symulowane światło. Cienie są zarezerwowane wyłącznie dla elementów pływających (listy rozwijane, podpowiedzi, modale), gdzie element rzeczywiście nakłada się na treść. Ta powściągliwość nadaje rzadkiemu cieniowi znaczący wpływ — gdy coś unosi się w Carbon, ma to znaczenie.

## 7. Co Robić i Czego Nie Robić

### Robić
- Używaj IBM Plex Sans w wadze 300 dla rozmiarów wyświetlaczowych (42px+) — lekkość jest zamierzona
- Stosuj odstęp liter 0.16px dla tekstu akapitowego 14px i 0.32px dla podpisów 12px
- Używaj promienia zaokrąglenia 0px dla przycisków, pól formularzy, kart i kafelków — prostokąty są systemem
- Odwołuj się do nazw tokenów `--cds-*` podczas implementacji (np. `--cds-button-primary`, `--cds-text-primary`)
- Używaj warstwowania kolorów tła (biały → gray 10 → gray 20) dla głębi zamiast cieni
- Używaj dolnego obramowania (nie obwiedni) dla wskaźników pól formularzy
- Zachowuj domyślną wysokość przycisku 48px i asymetryczne dopełnienie dla pomieszczenia ikon
- Stosuj Blue 60 (`#0f62fe`) jako jedyny akcent — jeden niebieski do rządzenia wszystkimi

### Nie Robić
- Nie zaokrąglaj rogów przycisków — promień 0px jest tożsamością Carbon
- Nie używaj cieni na kartach ani kafelkach — płaskość jest sednem
- Nie wprowadzaj dodatkowych kolorów akcentowych — system IBM jest monochromatyczny + niebieski
- Nie używaj wagi 700 (Bold) — skala kończy się na 600 (Semibold)
- Nie dodawaj odstępu liter do tekstu w rozmiarze wyświetlaczowym — śledzenie jest tylko dla 14px i mniejszych
- Nie obwódź pól formularzy pełnymi obramowaniami — pola Carbon używają tylko dolnego obramowania
- Nie używaj gradientowych teł — powierzchnie IBM są płaskie, jednokolorowe
- Nie odchylaj się od siatki odstępów 8px — każda wartość powinna być podzielna przez 8 (z 2px i 4px dla mikrokorekt)

## 8. Zachowanie Responsywne

### Breakpointy
| Nazwa | Szerokość | Kluczowe Zmiany |
|-------|-----------|-----------------|
| Small (sm) | 320px | Jedna kolumna, nawigacja hamburger, marginesy 16px |
| Medium (md) | 672px | Zaczyna się siatka 2-kolumnowa, rozszerzona treść |
| Large (lg) | 1056px | Pełna nawigacja widoczna, siatki 3-4 kolumnowe |
| X-Large (xlg) | 1312px | Maksymalna gęstość treści, szerokie układy |
| Max | 1584px | Maksymalna szerokość treści, wyśrodkowana z marginesami |

### Obszary Dotyku
- Wysokość przycisku: 48px domyślna, minimum 40px (kompaktowa)
- Linki nawigacyjne: wysokość wiersza 48px dla dotyku
- Wysokość pola formularza: 40px domyślna, 48px duże
- Przyciski z ikonami: obszar dotyku 48px kwadrat
- Elementy menu mobilnego: pełnoszerokie wiersze 48px

### Strategia Zwijania
- Hero: wyświetlacz 60px → 42px → nagłówek 32px w miarę zwężania widoku
- Nawigacja: pełny poziomy masthead → hamburger z wysuwanym panelem
- Siatka: 4-kolumnowa → 2-kolumnowa → jedna kolumna
- Kafelki/karty: pozioma siatka → pionowy stos
- Obrazy: zachowanie proporcji, max-width 100%
- Stopka: wielokolumnowe grupy linków → ułożone w jednej kolumnie
- Dopełnienie sekcji: 48px → 32px → 16px

### Zachowanie Obrazów
- Responsywne obrazy z `max-width: 100%`
- Ilustracje produktów skalowane proporcjonalnie
- Obrazy hero mogą zmieniać układ z boku-do-boku na ułożony poniżej
- Wizualizacje danych zachowują proporcje z poziomym przewijaniem na mobile

## 9. Przewodnik po Promptach dla Agenta

### Szybki Podgląd Kolorów
- Główne CTA: IBM Blue 60 (`#0f62fe`)
- Tło: White (`#ffffff`)
- Tekst nagłówka: Gray 100 (`#161616`)
- Tekst akapitu: Gray 100 (`#161616`)
- Tekst wtórny: Gray 70 (`#525252`)
- Powierzchnia/Karta: Gray 10 (`#f4f4f4`)
- Obramowanie: Gray 30 (`#c6c6c6`)
- Link: Blue 60 (`#0f62fe`)
- Najechanie na link: Blue 70 (`#0043ce`)
- Pierścień fokusa: Blue 60 (`#0f62fe`)
- Błąd: Red 60 (`#da1e28`)
- Sukces: Green 50 (`#24a148`)

### Przykładowe Prompty do Komponentów
- "Utwórz sekcję hero na białym tle. Nagłówek 60px IBM Plex Sans waga 300, line-height 1.17, kolor #161616. Podtytuł 16px waga 400, line-height 1.50, kolor #525252, max-width 640px. Niebieski przycisk CTA (#0f62fe tło, #ffffff tekst, promień zaokrąglenia 0px, wysokość 48px, dopełnienie 14px 63px 14px 15px)."
- "Zaprojektuj kafelek karty: tło #f4f4f4, promień zaokrąglenia 0px, dopełnienie 16px. Tytuł 20px IBM Plex Sans waga 600, line-height 1.40, kolor #161616. Akapit 14px waga 400, odstęp liter 0.16px, line-height 1.29, kolor #525252. Najechanie: tło zmienia się na #e8e8e8."
- "Zbuduj pole formularza: tło #f4f4f4, promień zaokrąglenia 0px, wysokość 40px, poziome dopełnienie 16px. Etykieta powyżej 12px waga 400, odstęp liter 0.32px, kolor #525252. Dolne obramowanie: domyślnie 2px solid transparent, 2px solid #0f62fe na fokusie. Tekst zastępczy: #6f6f6f."
- "Utwórz ciemny pasek nawigacyjny: tło #161616, wysokość 48px. Logo IBM białe wyrównane do lewej. Linki 14px IBM Plex Sans waga 400, kolor #c6c6c6. Najechanie: tekst #ffffff. Aktywny: #ffffff z dolnym obramowaniem 2px."
- "Zbuduj komponent taga: tło Blue 10 (#edf5ff), tekst Blue 60 (#0f62fe), dopełnienie 4px 8px, promień zaokrąglenia 24px, 12px IBM Plex Sans waga 400."

### Przewodnik po Iteracji
1. Zawsze używaj promienia zaokrąglenia 0px dla przycisków, pól formularzy i kart — to jest niepodlegające negocjacji w Carbon
2. Odstęp liter tylko przy małych rozmiarach: 0.16px przy 14px, 0.32px przy 12px — nigdy dla tekstu wyświetlaczowego
3. Trzy wagi: 300 (wyświetlacz), 400 (akapit), 600 (wyróżnienie) — bez pogrubienia
4. Blue 60 to jedyny kolor akcentowy — nie wprowadzaj wtórnych kolorów akcentowych
5. Głębia pochodzi z warstwowania kolorów tła (biały → `#f4f4f4` → `#e0e0e0`), nie cieni
6. Pola formularzy mają tylko dolne obramowanie, nigdy pełne obwiednie
7. Używaj prefiksu `--cds-` do nazewnictwa tokenów, aby zachować zgodność z Carbon
8. 48px to uniwersalna wysokość elementów interaktywnych