# System Projektowy Inspirowany OpenAI

> Category: AI i LLM
> Spokojny, niemal monochromatyczny system zakotwiczony w głębokiej czerni z odcieniem teal, obfitymi białymi przestrzeniami i typografią o charakterze redakcyjnym.

## 1. Motyw Wizualny i Atmosfera

Warstwa produktowa OpenAI wygląda jak laboratorium badawcze przygotowane na spotkanie z publicznością — kliniczna, powściągliwa, celowo cicha. Tło strony to czysta biel (`#ffffff`) nałożona na niemal czarny atrament (`#0d0d0d`) z subtelnym odcieniem teal, dzięki czemu nawet tekst sprawia wrażenie chłodniejszego, a nie agresywnie ciemnego. Efektem jest chromatyczna neutralność, która wysuwa na pierwszy plan wyniki modeli, kod i prozę — a nie oprawę wokół nich.

Charakterystycznym zabiegiem jest zastosowanie **Söhne** (lub systemowego odpowiednika `inter`) w umiarkowanych grubościach — 400 dla treści, 500 dla nawigacji i etykiet, 600 dla wyróżnień — w połączeniu z **Signifier**, współczesnym szeryfem używanym do redakcyjnych nagłówków wyróżniających. Podczas gdy większość marek AI skłania się ku futuryzmowi, szeryfowe nagłówki OpenAI nadają produktowi spokojnie literacki ton, jakby każde ogłoszenie było esejem.

System kształtów jest jednolicie miękki: promienie 8px–12px, pigułki 9999px dla tagów i chipów, bez ostrych narożników. Przejścia między sekcjami są zaznaczone białą przestrzenią, a nie separatorami; gdy pojawiają się obramowania, są to linie `#e5e5e5` grubości włosa, które wyglądają raczej jak nieobecność koloru niż jego obecność.

**Kluczowe Cechy:**
- Czyste białe płótno (`#ffffff`) z głębokim atramentowym czarnym z odcieniem teal (`#0d0d0d`)
- Söhne / Inter w skromnych grubościach (400, 500, 600) — powściągliwość ponad asertywność
- Szeryfowy Signifier do redakcyjnych nagłówków wyróżniających
- Miękkie promienie 8–12px wszędzie; pigułki 9999px dla chipów
- Obramowania grubości włosa (`#e5e5e5`) używane oszczędnie; biała przestrzeń jako główny separator
- Jednokolorowe ilustracje w głębokim kolorze teal — bez gradientów w znakach
- Hojny line-height (1.55–1.65) i tracking bliski zeru

## 2. Paleta Kolorów i Role

### Podstawowe
- **Czysta Biel** (`#ffffff`): Główne tło, powierzchnia kart, tło przycisków.
- **Czarny Atrament** (`#0d0d0d`): Główny tekst, znak firmowy, główne CTA.
- **Miękka Czerń** (`#1a1a1a`): Drugorzędne nagłówki, alternatywny atrament dla mniej istotnego tekstu.

### Powierzchnia i Tło
- **Mgła** (`#fafafa`): Tło przerwy sekcji, powierzchnia stopki.
- **Perła** (`#f5f5f5`): Powierzchnia kart, podwyższony panel.
- **Chmura** (`#ececec`): Tło elementów wyłączonych, odcień separatora.

### Akcent Marki
- **OpenAI Teal** (`#10a37f`): Główny kolor marki, linki, wyróżnione odznaki — jedyny kolor w skądinąd neutralnym systemie.
- **Teal Głęboki** (`#0a7a5e`): Stan najechania i wciśnięcia dla koloru marki.
- **Teal Miękki** (`#e8f5f0`): Odcień powierzchni dla odznak sukcesu, wyróżnionych objaśnień.

### Neutralne i Tekstowe
- **Grafit** (`#3c3c3c`): Tekst treści, domyślny kolor do czytania.
- **Łupek** (`#6e6e6e`): Tekst drugorzędny, podpisy, metadane.
- **Popiół** (`#9b9b9b`): Tekst trzeciorzędny, placeholder, wyłączona etykieta.
- **Kamień** (`#c4c4c4`): Dekoracyjne separatory, delikatne ikony.

### Semantyczne i Obramowania
- **Obramowanie Włos** (`#e5e5e5`): Standardowy separator grubości włosa.
- **Obramowanie Miękkie** (`#ededed`): Kontur karty na białej powierzchni.
- **Błąd** (`#ef4146`): Walidacja, akcja destrukcyjna.
- **Ostrzeżenie** (`#f5a623`): Miękki bursztyn dla stanów doradczych.
- **Informacja** (`#2563eb`): Ton linku informacyjnego (używany oszczędnie; teal nadal dominuje).

## 3. Zasady Typografii

### Rodzina Czcionek
- **Wyróżniająca / Redakcyjna**: `Signifier`, z awaryjną: `'Source Serif Pro', Georgia, serif`
- **Treść / UI**: `Söhne`, z awaryjną: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
- **Kod / Mono**: `Söhne Mono`, z awaryjną: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`

### Hierarchia

| Rola | Czcionka | Rozmiar | Grubość | Line Height | Letter Spacing | Uwagi |
|------|----------|---------|---------|-------------|----------------|-------|
| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Redakcyjne hero, tytuły ogłoszeń |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Nagłówek strony |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Nagłówek sekcji |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Podsekcja |
| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Akapity wprowadzające |
| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standardowy tekst do czytania |
| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Treść kart, gęsty UI |
| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadane, odznaki |
| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, linki nawigacji pisane wersalikami |
| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Bloki kodu, wyjście terminala |

### Zasady
- **Powściągliwość jako tożsamość**: grubości nie przekraczają 600; 700+ wygląda niezgodnie z marką. Hierarchia wynika z rozmiaru i koloru, a nie grubości.
- **Szeryfowy dla duszy, bezszeryfowy dla systemu**: Signifier pojawia się wyłącznie w redakcyjnych momentach wyróżniających. UI produktu jest wyłącznie bezszeryfowe.
- **Ujemny tracking w display**: -0.02em dla rozmiarów display; tracking wraca do zera przy 16px.

## 4. Style Komponentów

### Przyciski

**Główny**
- Tło: `#0d0d0d`
- Tekst: `#ffffff`
- Padding: 10px 18px
- Radius: 9999px (pełna pigułka) dla chipów, 12px dla prostokątnych CTA
- Najechanie: tło `#1a1a1a`
- Zastosowanie: Główne CTA, "Wypróbuj ChatGPT", "Zaloguj się"

**Drugorzędny**
- Tło: `#ffffff`
- Tekst: `#0d0d0d`
- Obramowanie: 1px solid `#e5e5e5`
- Padding: 10px 18px
- Radius: 12px
- Najechanie: tło `#fafafa`, obramowanie `#d4d4d4`

**Akcent Marki**
- Tło: `#10a37f`
- Tekst: `#ffffff`
- Padding: 10px 18px
- Radius: 12px
- Najechanie: `#0a7a5e`
- Zastosowanie: Wyróżnione CTA uaktualnienia, ścieżka sukcesu

### Karty
- Tło: `#ffffff`
- Obramowanie: 1px solid `#ededed`
- Radius: 16px
- Padding: 24px–32px
- Cień: brak domyślnie; przy najechaniu `0 4px 16px rgba(13,13,13,0.06)`

### Pola Wprowadzania
- Tło: `#ffffff`
- Obramowanie: 1px solid `#e5e5e5`
- Radius: 12px
- Padding: 12px 14px
- Fokus: obramowanie `#10a37f`, pierścień `0 0 0 3px rgba(16,163,127,0.12)`

### Pigułki i Tagi
- Tło: `#f5f5f5`
- Tekst: `#3c3c3c`
- Padding: 4px 10px
- Radius: 9999px
- Czcionka: 12px / 500

## 5. Odstępy i Układ

- **Jednostka bazowa**: 4px. Skala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- **Kontener**: max-width 1200px, guttera 24px na urządzeniach mobilnych, 48px na komputerach.
- **Rytm sekcji**: 96–128px w pionie między głównymi sekcjami; 64px na urządzeniach mobilnych.
- **Siatka**: 12 kolumn na komputerze, 4 kolumny na urządzeniach mobilnych, przerwa 24px.

## 6. Ruch

- **Czas trwania**: 150–220ms dla najechania; 280–360ms dla przejść układu.
- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (płynne wyjście) dla wejść.
- **Powściągliwość**: bez paralaksy, bez scroll-jacking. Jedynie subtelne zanikanie i przesunięcie.

## 7. Wytyczne Użytkowania

- Zachowaj razem neutralną powściągliwość redakcyjną, miękki radius i rzadkie użycie akcentu; same zielone akcenty nie tworzą powierzchni w stylu OpenAI.
- Używaj momentów wyróżniających w stylu Signifier wyłącznie dla hierarchii redakcyjnej lub ogłoszeń, pozostawiając kontrolki produktu w systemie bezszeryfowym.
- Unikaj ozdobnego ruchu, ciężkich cieni i przesadnie dużych dekoracyjnych kart; system powinien sprawiać wrażenie spokojnego, czytelnego i przemyślanego.