workbuddy_skills/open-design/design-systems/playstation/DESIGN-it.md

# Design System Ispirato a PlayStation

> Category: Media e consumo
> Retail per console da gioco. Layout a canale su tre superfici, tipografia display dall'autorità silenziosa, cyan con scala al passaggio del cursore.

## 1. Tema Visivo e Atmosfera

PlayStation.com si presenta come il braccio marketing di un brand premium di elettronica di consumo che, tra le altre cose, vende intrattenimento. La pagina è organizzata come un **canale verticale di superfici alternate**: una testata e un hero quasi neri, una sequenza di pannelli editoriali bianco carta al centro e un footer blu cobalto intenso che ancora l'intera esperienza. Tra queste modalità di superficie, il sito punta deciso su fotografia e render 3D del prodotto — la console PS5, le copertine dei giochi, i controller DualSense — lasciando all'hardware il compito di trasmettere l'emozione mentre il contorno grafico rimane contenuto.

La scelta tipografica distintiva è **SST Light (peso 300) a grandi dimensioni**. La famiglia SST personalizzata di Sony viene utilizzata da 22px fino a 54px in peso 300, conferendo ai titoli display una qualità sussurrata ed elegante che si avvicina più a una pubblicità di orologi di lusso che a un negozio di videogiochi. Questa "autorità silenziosa" è l'esatto opposto della Manuka urlata di The Verge o della densità da edicola di Wired — PlayStation vuole che il testo si ritiri e il prodotto guidi. Il corpo testo e l'UI si appoggiano ai pesi 500–700, ma la *voce display* è costantemente sottile e calma.

L'unico punto in cui la moderazione si rompe è nell'**interazione**. Ogni pulsante primario ha la stessa animazione al passaggio del cursore: il riempimento si trasforma in un cyan elettrico `#1eaedb`, appare un bordo bianco da 2px, un anello esterno blu PlayStation da 2px fiorisce dietro di esso, e l'intero pulsante **si scala di 1.2×**. Quella combinazione di pop cromatico, bordo, anello e scala in rilievo è una mossa distintiva unica di Sony tra i grandi brand — una miniatura animazione "accensione" che il sito ripete centinaia di volte in una singola pagina.

**Caratteristiche Chiave:**
- Layout a canale su tre superfici: hero quasi nero, contenuto bianco carta, footer blu cobalto — alternati, mai mescolati
- SST peso 300 a 22–54px per il display — titoli dall'"autorità silenziosa" che lasciano guidare la fotografia di prodotto
- PlayStation Blue `#0070cc` come colore anchor del brand; cyan `#1eaedb` riservato esclusivamente agli stati hover/focus
- Ogni elemento interattivo si scala di 1.2× al passaggio del cursore — un "power-on" lift distintivo unico di PlayStation
- Pulsanti pill con raggio pieno 999px; arte delle card con rettangoli arrotondati da 12–24px
- Commerce-orange `#d53b00` usato esclusivamente per i CTA di PlayStation Store / stato acquisto
- Copertura ampia dei breakpoint fino a 2120px — il sito si scala fino ai contesti di navigazione su TV 4K

## 2. Palette Colori e Ruoli

### Primario (Anchor del Brand)
- **PlayStation Blue** (`#0070cc`): Il colore anchor del brand. Utilizzato nel footer principale, nei link inline, nei riempimenti dei pulsanti primari su superfici scure e in ogni indicatore "ufficiale". Trattalo come immutabile — è il colore che il brand associa di più nella memoria del consumatore.
- **Console Black** (`#000000`): Nero puro per la testata, gli sfondi degli hero e le zone di presentazione del prodotto. PlayStation usa il nero per incorniciare l'hardware come un museo usa il nero per incorniciare una scultura.

### Secondario e Accento
- **PlayStation Cyan** (`#1eaedb`): Il colore dell'interazione. Applicato SOLO agli stati hover, focus e active di pulsanti e link. Non appare mai come sfondo predefinito né come colore del testo a riposo. Abbinalo a un bordo `#ffffff` da 2px e un anello esterno `#0070cc` da 2px al passaggio del cursore per il trattamento distintivo completo.
- **Link Hover Blue** (`#1883fd`): La variante più luminosa usata al passaggio del cursore sui link di testo inline. Distinta dal Cyan — questo è il colore del link, il Cyan è il colore del pulsante.
- **Dark Link Blue** (`#0068bd`): Il colore del link a riposo su superfici chiare — un cugino leggermente più saturo del blu del brand.

### Superficie e Sfondo
- **Paper White** (`#ffffff`): Canvas principale dei contenuti per i pannelli editoriali tra la testata e il footer.
- **Ice Mist** (`#f5f7fa`): Il punto di arrivo atmosferico del gradiente di sezione chiaro. Usato in modo sottile dietro certi pannelli per sollevarli dal bianco puro.
- **Divider Tint** (`#f3f3f3`): Il colore discreto della riga divisoria orizzontale tra le righe di contenuto.
- **Masthead Black** (`#000000`): Canvas per la nav superiore e l'hero — riservato alle zone focalizzate sul prodotto.
- **Shadow Black** (`#121314`): L'anchor iniziale del gradiente di sezione scuro quando un pannello necessita di profondità atmosferica.
- **Filter Mist** (`rgba(245, 247, 250, 0.3)`): Sfondo traslucido usato dietro le barre filtro sticky — l'unico momento "glassmorphism" del sito.

### Neutri e Testo
- **Display Ink** (`#000000`): Titoli display primari su superfici bianche.
- **Deep Charcoal** (`#1f1f1f`): Titoli del corpo testo e colore del link a riposo — leggermente più morbido del nero puro per ridurre l'effetto visivo su blocchi grandi.
- **Body Gray** (`#6b6b6b`): Testo del corpo secondario e metadati.
- **Mute Gray** (`#cccccc`): Etichette terziarie, stati disabilitati.
- **Placeholder Ink** (`rgba(0, 0, 0, 0.6)`): Testo placeholder dei form — nero al 60%, non un valore grigio separato.
- **Inverse White** (`#ffffff`): Testo primario su superfici scure e blu.
- **Dark-Link Blue** (`#53b1ff`): Il colore del link a riposo su superfici scure/nere — una variante ariosa e più chiara del PlayStation Blue per la leggibilità sul nero.

### Semantico e Commerce
- **Commerce Orange** (`#d53b00`): Riservato ai CTA di acquisto di PlayStation Store, ai callout di prezzo e ai badge "in saldo". L'unico colore caldo del sito — usalo con parsimonia e mai al di fuori di un contesto commerce.
- **Commerce Orange Active** (`#aa2f00`): Lo stato premuto/active dei pulsanti commerce.
- **Warning Red** (`#c81b3a`): Errori dei form e avvisi per azioni distruttive.
- **Shadow Wash 80** (`rgba(0, 0, 0, 0.8)`): Il drammatico scrim usato dietro il testo hero sulla fotografia di prodotto.
- **Shadow Wash 16** (`rgba(0, 0, 0, 0.16)`): Anello di elevazione a basso peso sulle card.
- **Shadow Wash 08** (`rgba(0, 0, 0, 0.08)`): Elevazione card leggerissima — quasi invisibile, ma separa i pannelli bianchi dallo sfondo bianco.
- **Shadow Wash 06** (`rgba(0, 0, 0, 0.06)`): L'ombra più leggera del sistema.

### Sistema di Gradienti
PlayStation usa **due gradienti di sezione** e niente altro:
- **Gradiente Sezione Chiara**: da `#ffffff` → `#f5f7fa` — una velatura quasi impercettibile che solleva delicatamente un pannello dal canvas.
- **Gradiente Sezione Scura**: da `#121314` → `#000000` — una breve velatura verticale che conferisce ai pannelli hero una sottile vignettatura senza introdurre alcuno spostamento di tonalità.

Entrambi i gradienti sono usati **solo come sfondi di sezione**, mai all'interno dei componenti. Non ci sono pulsanti con gradiente, né testo con gradiente, né aloni luminosi. Il brand è blu — non blu-viola, non blu-cyan.

## 3. Regole Tipografiche

### Famiglia di Font
- **SST** / **Playstation SST** (Sony, proprietario) — fallback: `Arial`, `Helvetica`. Il carattere globale personalizzato di Sony, progettato da Toshi Omagari e Akira Kobayashi. Copre i pesi 300 / 500 / 600 / 700 nella homepage. Il peso **300 a 22–54px** è la firma tipografica di PlayStation.
- **SST (condensed / alternate)** — fallback: `helvetica`, `arial`. Una variante compressa usata in alcuni moduli UI dove la larghezza è rilevante.
- **Arial** — fallback utility per la rara variante di pulsante che viene renderizzata in sans-serif di sistema.

### Gerarchia

| Ruolo | Font | Dimensione | Peso | Altezza riga | Spaziatura lettere | Note |
|---|---|---|---|---|---|---|
| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | Il momento SST più grande della pagina — titolo luxury a peso leggero |
| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | Titoli hero secondari |
| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | Titoli dei pannelli feature |
| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | Intestazioni di sezione |
| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | Titoli di modulo — ancora in peso leggero 300 |
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | Sotto-intestazione promozionale |
| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | Intestazioni UI compatte |
| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Etichetta pulsante primario |
| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | CTA ad alta enfasi (acquisto, abbonamento) |
| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | Etichetta pulsante secondario |
| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | Corpo testo di lettura standard |
| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | Testo del link inline |
| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | Mini CTA nelle card |
| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | Didascalie, etichette tag |
| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | Metadati standard |
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | Didascalia enfatizzata |
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | Didascalia semi-grassetto |
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | Pulsante UI con interlinea stretta |
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | Etichetta tab/pill |
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | Didascalia UI più piccola |
| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | Microcopy del footer, testo legale |
| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | Micro testo enfatizzato |

### Principi
- **Il peso 300 a grandi dimensioni è la voce.** PlayStation è l'unico grande brand di console che usa un display a peso leggero per i titoli hero. Resisti all'impulso di "aggiornare" il tipo display a 500 o 700 — la quiete è la personalità.
- **I salti di peso avvengono nel layer UI.** Sotto i 18px il sistema passa a 500–700 per la leggibilità. Il gradiente di peso da 300 (display) → 400 (corpo) → 500 (didascalie) → 700 (pulsanti) è la gerarchia.
- **La spaziatura delle lettere è appena percettibile.** La maggior parte dei valori è compresa tra 0.1–0.45px, positivi o leggermente negativi. Il `-0.1px` sull'hero da 54px stringe il tipo display quanto basta per sembrare "progettato" senza diventare una dichiarazione tipografica.
- **Due varianti di SST.** "SST" e "Playstation SST" sono funzionalmente la stessa famiglia con set di metriche leggermente diversi (Playstation SST è più stretto a piccole dimensioni). Trattali come intercambiabili per scopi che esulano dalla licenza interna di Sony.
- **Niente tutto maiuscolo.** A differenza di The Verge o Wired, PlayStation usa raramente etichette in MAIUSCOLO. Kicker e tag rimangono in title case o sentence case — un'altra mossa di "autorità silenziosa".
- **Niente serif in nessun punto.** L'intero sistema è sans. Non esiste alcuna voce contrapposta di stampa.

## 4. Stili dei Componenti

### Pulsanti

**Primario — Pill PlayStation Blue**
- Sfondo: `#0070cc` (PlayStation Blue)
- Testo: `#ffffff`, SST 18px / 500 / 0.4px tracking
- Bordo: nessuno a riposo
- Raggio bordo: `999px` — pill completo
- Padding: ~`12px 24px` (variabile in base alla classe dimensione)
- Outline: `rgb(255, 255, 255) none 0px` a riposo
- **Hover (mossa distintiva)**:
  - Lo sfondo si riempie di `#1eaedb` (PlayStation Cyan)
  - Il testo rimane `#ffffff`
  - Appare un bordo `#ffffff` da 2px
  - Un anello esterno `#0070cc` da 2px fiorisce (`0 0 0 2px #0070cc`)
  - `transform: scale(1.2)` — il pulsante cresce effettivamente del 20%
- Active: `opacity: 0.6` — un rapido oscuramento per segnalare la pressione
- Focus: Come hover, ma l'anello diventa un'ombra focus `rgb(0, 114, 206) 0px 0px 0px 2px`
- Transizione: ~180ms ease su sfondo, transform e ombra

**Secondario — Contorno Bianco su Scuro**
- Sfondo: `#ffffff`
- Testo: `#0172ce` (variante PlayStation Blue)
- Bordo: `2px outset #000000` — un vero bordo `outset`, estremamente raro nel CSS moderno
- Raggio: variabile (spesso `999px` o `36px`)
- Padding: `16px 20px`
- Hover: stesso riempimento cyan distintivo + scale(1.2) + trattamento anello
- Focus: stesso trattamento anello

**Commerce Orange**
- Sfondo: `#d53b00` (Commerce Orange)
- Testo: `#ffffff`, SST 18px / 700 / 0.45px tracking
- Raggio bordo: `999px` — pill
- Usato solo su CTA PS Store / Acquista / Abbonati Plus
- Active: lo sfondo si scurisce a `#aa2f00`
- Hover: segue la regola cyan-invert come tutti gli altri pulsanti (NON un hover specifico per l'arancione)

**Ghost Trasparente**
- Sfondo: trasparente
- Testo: `#1f1f1f` (Deep Charcoal)
- Bordo: `1px solid #dedede`
- Padding: `0 10px` (stretto, ottimizzato per la nav)
- Hover: riempimento cyan, testo bianco, bordo bianco da 2px, scale(1.2)
- Active: il testo si sposta su `#0072ce`, opacity 0.6

**Cerchio Icona**
- Sfondo: `rgba(0, 0, 0, 0.2)` su fotografie; `#ffffff` su superfici chiare
- Raggio bordo: `100%` — cerchio perfetto
- Usato per le frecce prev/next del carosello e i pulsanti di condivisione
- Hover: si schiarisce a `var(--color-role-backgrounds-primary-link-hover)` (circa `#e5e5e5` su chiaro)

**Mini CTA (In-card)**
- SST 14px / 700 / 0.324px tracking
- Padding ~8px 16px
- Raggio: `999px`
- Usato all'interno delle card gioco per mini CTA "Acquista ora" / "Aggiungi al carrello"

### Card e Contenitori

**Hero Card (Feature Gioco)**
- Sfondo: fotografia/render — di solito ancorato al nero
- Raggio bordo: `24px` o `19px` per le feature card
- Padding: 32–48px interno
- Ombra: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` — un'ombra proiettata drammatica usata solo quando una card si sovrappone alla fotografia hero
- Hover: sottile transform di scala, un contorno cyan appare sul CTA primario

**Tile Copertina Gioco**
- Sfondo: copertina del gioco, senza padding
- Raggio bordo: `12px` o `13px` (immagini) / `19px` (cornice card)
- Ombra: `rgba(0, 0, 0, 0.08) 0px 5px 9px 0px` — elevazione leggerissima
- Hover: il CTA primario della card si illumina in cyan, la card stessa può scalare di 1.02×
- Transizione: 200ms ease sul transform

**Pannello Contenuto (Bianco)**
- Sfondo: `#ffffff` o il gradiente di sezione chiara `#ffffff → #f5f7fa`
- Bordo: tipicamente nessuno; separato dai vicini da spaziatura e ombra sottile
- Raggio: da `12px` a `24px` a seconda della gerarchia del pannello
- Ombra: `rgba(0, 0, 0, 0.06) 0px 5px 9px 0px` — la più leggera del sistema

**Card Scura su Scuro**
- Sfondo: `rgba(0, 0, 0, 0.2)` su fotografia
- Raggio bordo: `6px` (compatto) o `24px` (feature)
- Usato per inlay "press kit" o "stat block" su video hero

### Input e Form
- **Predefinito**: sfondo `#ffffff`, bordo `1px solid #cccccc`, raggio bordo `3px` (più stretto del resto del sistema — gli input sono l'unico punto in cui PlayStation diventa genuinamente compatto), testo SST 16px in `#1f1f1f`, placeholder `rgba(0, 0, 0, 0.6)`.
- **Focus**: anello focus `#0070cc` da 2px tramite `box-shadow: 0 0 0 2px #0070cc`. Nessun cambio di colore del bordo — l'anello fa il lavoro.
- **Errore**: il bordo e il testo si spostano su `#c81b3a` (Warning Red), testo di errore inline sotto nello stesso rosso.
- **Transizione**: ~180ms ease su bordo e ombra.

### Navigazione

- **Nav superiore**: striscia nera (`#000000`) a piena larghezza con il logo PlayStation (bianco) allineato a sinistra, link di categoria centrati in SST 14–16px / 500 e un piccolo CTA "Accedi" allineato a destra.
- **Hover sul link nav**: il colore transita da `#ffffff` a `#1883fd` (Link Hover Blue), senza sottolineatura.
- **Sezione attiva**: marcata da una sottile sottolineatura da 2px in `#0070cc`.
- **Mobile**: la nav collassa in un cassetto hamburger. All'interno del cassetto, i link si impilano verticalmente con gap da 16px e padding orizzontale da 20px.
- **Comportamento sticky**: la nav rimane fissa in alto durante lo scroll; quando entra in una zona di superficie chiara **non si inverte** — rimane su sfondo nero per tutta la navigazione.

### Trattamento delle Immagini

- **Rapporti d'aspetto**: video/fotografia hero 16:9, render console 1:1, copertine giochi 3:4, immagini lifestyle 4:3.
- **Angoli**: arrotondati a `12px`, `13px` o `24px` a seconda del contesto della card. Le copertine dei giochi ottengono `6–12px`, le immagini hero `24px`.
- **Full-bleed**: solo nella testata hero e nei banner promozionali del footer. Tutto il resto si trova all'interno di una colonna di contenuto con padding.
- **Ombra**: drammatica `rgba(0, 0, 0, 0.8) 0 5px 9px 0` sugli hero, leggera `rgba(0, 0, 0, 0.06) 0 5px 9px 0` sulle tile della griglia.
- **Hover**: l'immagine rimane statica, la cornice della card e il CTA primario rispondono.
- **Lazy loading**: `loading="lazy"` su tutto ciò che è sotto il fold, `eager` sull'hero della testata.

### Pill Store Giochi (Distintivo)
- Sfondo: `#ffffff`
- Testo: `#000000`, SST 14px / 500
- Padding: `14px 18px`
- Raggio: `9999px` — pill completo
- Un tag pill neutro che si affianca alle copertine dei giochi per etichettare la piattaforma ("PS5", "PS4", "PSVR2"). Contrasto bianco su scuro.

## 5. Principi di Layout

### Sistema di Spaziatura
- **Unità base**: 8px.
- **Scala**: 1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.
- **Padding di sezione**: 48–96px verticale tra i pannelli principali. Le transizioni hero-contenuto usano il valore più alto.
- **Padding card**: 20–32px interno. Le feature hero card possono espandersi a 48px.
- **Spaziatura inline**: 8–12px tra titolo e deck, 12–16px tra deck e CTA.
- **Micro-scala**: i valori 1/2/3/4.5/5/9/10/12 sono usati per il padding dei pill, la spaziatura delle didascalie e gli offset dei bordi — non per il ritmo editoriale.

### Griglia e Contenitore
- **Larghezza massima**: ~1920px (i breakpoint rilevati da dembrandt arrivano fino a 2120px). Il contenitore è tipicamente limitato a circa `1280–1920px` a seconda del pannello.
- **Modelli di colonne**: griglia responsive a 12 colonne che si risolve in righe di tile di gioco a 3/4/6 colonne a seconda della gerarchia. Le zone hero spesso si estendono su 12 colonne; le tile in evidenza si trovano in configurazioni 6+3+3 o 4+4+4.
- **Padding esterno**: 16px mobile → 48px tablet → 64–96px desktop.
- **Gutter**: 16–24px tra le colonne, più stretto (8–12px) all'interno dei cluster di tile.

### Filosofia degli Spazi Bianchi
PlayStation tratta gli spazi bianchi come un brand di lusso tratta l'illuminazione del negozio — come un segnale premium. Tra i moduli c'è notevolmente più spazio di respirazione verticale rispetto a qualsiasi altro grande sito retail, e i pannelli editoriali bianchi spesso contengono solo un titolo + un'immagine + un CTA con padding a scala hero. L'effetto è un "ritmo da galleria" in cui ogni prodotto ha la propria sala invece di competere in una griglia di miniature.

### Scala del Raggio del Bordo
- **2px** — pulsanti del banner cookie e piccola UI di amministrazione
- **3px** — input form, pannelli tab (più stretto di tutto il resto — un segnale deliberato di "UI funzionale")
- **6px** — pulsanti compatti e immagini inline
- **12px** — immagini standard delle copertine dei giochi e immagini di contenuto
- **13px** — certi wrapper di figure (un offset di 1px rispetto a 12px per l'annidamento)
- **19px** — feature card
- **20px** — span di tag inline
- **24px** — hero card, cornici feature primarie
- **36px** — nav full-pill e varianti di pulsanti secondari
- **48px** — pulsanti feature grandi
- **999px / 100%** — pulsanti primari full-pill e pulsanti icona circolari

Undici valori di raggio discreti — uno dei sistemi di raggio più ricchi di qualsiasi sito in questo catalogo. La gamma esiste perché PlayStation usa deliberatamente raggi diversi per *gerarchie* diverse: 3px per l'utility, 12px per i media, 24px per le feature, 999px per i CTA.

## 6. Profondità ed Elevazione

| Livello | Trattamento | Uso |
|---|---|---|
| 0 | Nessuna ombra | Contenuto predefinito su `#ffffff` |
| 1 | `rgba(0, 0, 0, 0.06) 0 5px 9px 0` | Sollevamento leggero del pannello editoriale |
| 2 | `rgba(0, 0, 0, 0.08) 0 5px 9px 0` | Elevazione standard della tile griglia |
| 3 | `rgba(0, 0, 0, 0.16) 0 5px 9px 0` | Card enfatizzata (hover o active) |
| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | Ombra overlay hero — proiettata drammatica su fotografia |
| 5 | `0 0 0 2px #0070cc` (anello focus) | Stato focus del pulsante primario |
| 6 | `0 0 0 2px #000000` (anello hover) | Anello hover del pulsante secondario |
| 7 | Gradiente di sezione `#121314 → #000000` | Profondità atmosferica sui pannelli hero scuri |

La filosofia della profondità di PlayStation è **stratificata ma contenuta**. La scala delle ombre va da 0.06 a 0.16 per gli stati normali, poi salta a 0.8 per le proiezioni hero — non esiste un middle-ground di 0.2, 0.3, 0.4. L'effetto è che la maggior parte della pagina rimane quasi piatta, ma quando una hero card deve fluttuare sulla fotografia, *fluttua* davvero. L'elevazione è o sussurrata o urlata, mai bisbigliata.

### Profondità Decorativa
- **Gradienti di sezione** (scuro e chiaro, entrambi descritti sopra) — usati solo come sfondi di sezione
- **Anelli focus/hover** a 2px, sempre blu o cyan a seconda dello stato
- **Nessun bagliore, sfocatura o effetto atmosferico** al di là dei due gradienti di sezione
- **Nessun pulsante o testo con gradiente** — il sistema visivo è blocchi di colore solido ovunque tranne che nelle transizioni di sezione

## 7. Da Fare e Da Non Fare

### Da Fare
- **Fai** uso di PlayStation Blue (`#0070cc`) come riempimento principale del CTA e anchor del footer. È il colore anchor del brand.
- **Fai** uso di SST peso 300 per ogni titolo display da 22px in su. Il titolo a peso leggero è la voce.
- **Fai** applicare la firma hover completa a ogni pulsante primario: riempimento cyan + bordo bianco da 2px + anello esterno blu da 2px + `scale(1.2)`.
- **Fai** uso del raggio full-pill (`999px`) sui pulsanti primari e commerce.
- **Fai** riservare PlayStation Cyan (`#1eaedb`) esclusivamente agli stati hover, focus e active — mai come sfondo a riposo.
- **Fai** uso di Commerce Orange (`#d53b00`) solo sui CTA di PlayStation Store / acquisto e nei callout di prezzo.
- **Fai** alternare i pannelli hero scuri con i pannelli di contenuto bianchi e ancora con un footer blu intenso — il layout a canale su tre superfici è il ritmo della pagina.
- **Fai** uso di ombre hero drammatiche `rgba(0, 0, 0, 0.8)` quando una card si sovrappone alla fotografia di prodotto.
- **Fai** mantenere la nav superiore nera in ogni posizione di scroll — non si inverte al bianco sui pannelli chiari.

### Da Non Fare
- **Non** mettere in grassetto i titoli display. Il peso 300 a 22–54px è la voce di PlayStation. Il tipo display in peso 700 si legge come "un altro rivenditore di giochi".
- **Non** usare etichette o kicker in TUTTO MAIUSCOLO. PlayStation usa raramente il maiuscolo — è un brand dall'autorità silenziosa, non un brand da nastro di avvertimento.
- **Non** usare pulsanti, testo o sfondi con gradiente al di fuori dei due gradienti di sezione dichiarati.
- **Non** introdurre colori caldi al di fuori di Commerce Orange. Nessun CTA rosso, nessuna evidenziazione gialla, nessuna pillola di successo verde.
- **Non** usare angoli quadrati su pulsanti o media. Il sistema ha undici raggi — scegline uno, ma mai `0`.
- **Non** saltare la mossa hover `scale(1.2)` sui pulsanti primari. La scala in rilievo è una firma d'interazione del brand.
- **Non** usare il tipo serif. Il sistema è 100% SST sans.
- **Non** lasciare che il cyan `#1eaedb` appaia come colore del testo o dello sfondo a riposo. Esiste solo in movimento.
- **Non** progettare pannelli che competono per l'attenzione. Il ritmo degli spazi bianchi di PlayStation dà a ogni modulo la propria "sala galleria".

## 8. Comportamento Responsivo

### Breakpoint

| Nome | Larghezza | Cambiamenti Principali |
|---|---|---|
| Small Mobile | <400px | Colonna singola, nav collassa in hamburger, l'hero SST si scala a ~28px |
| Mobile | 400–599px | Colonna singola, tile si impilano a piena larghezza, il padding si apre a 16px |
| Large Mobile | 600–767px | Ancora colonna singola ma opzione a 2 colonne per le tile in moduli selezionati |
| Tablet Portrait | 768–1023px | Griglia giochi a 2 colonne, nav ancora condensata |
| Tablet Landscape | 1024–1279px | Griglia a 3–4 colonne, nav completa ripristinata |
| Desktop | 1280–1599px | Griglia editoriale completa, scala display hero massima (44–54px) |
| Large Desktop | 1600–1919px | Il contenitore si limita a 1600px, i margini si espandono |
| 4K / Schermo Grande | ≥1920px | Il contenitore si espande fino a 1920px max, il contenuto hero si scala per adattarsi alla distanza di visione TV |
| Ultra-Wide | ≥2120px | Breakpoint estremo — la pagina rimane ancorata, i margini esterni assorbono la larghezza extra |

La scansione dembrandt ha rilevato 30 breakpoint tra 320px e 2120px — un range responsivo insolitamente ampio. PlayStation si ottimizza specificamente per i **contesti a grande schermo** (1920–2120px) perché i possessori di PS5 navigano frequentemente sul sito su TV tramite il browser della console o tramite il cast-to-TV da telefono. La maggior parte dei siti retail smette di ottimizzare a 1440px; PlayStation continua fino al 4K.

### Target di Tocco
- I pulsanti pill primari sono alti ~48–56px (testo SST 18px + ~12–16px di padding verticale) — comodamente WCAG AAA.
- I link nav sono più piccoli (~32–40px di altezza) sul desktop; su mobile si portano a 48px+ all'interno del cassetto.
- I pulsanti cerchio icona sono 40–48px — ottimizzati per il tocco.

### Strategia di Collasso
- **Nav**: nav completa → condensata → cassetto hamburger al restringersi del viewport. Il logo rimane ancorato a sinistra; il CTA rimane ancorato a destra.
- **Griglia**: 6 col → 4 col → 3 col → 2 col → 1 col. Le card tile dei giochi si ridispongono senza ritagliare le copertine.
- **Spaziatura**: il padding di sezione si stringe da 96px → 64px → 48px → 32px → 24px al restringersi del viewport.
- **Tipo**: l'hero SST si scala da 54px → 44px → 35px → 28px → 22px. Il peso leggero 300 viene preservato in ogni dimensione.
- **Fotografia hero**: scambio con art-direction — il desktop usa crop 16:9 larghi, il mobile usa crop 4:3 o 1:1 con il prodotto centrato.

### Comportamento delle Immagini
- Raster responsivo (`srcset` + `<picture>` con art-direction), rapporti d'aspetto preservati per breakpoint.
- Pronto per 4K: il sito serve immagini ad alta densità a 1920px+ per evitare l'upscaling nella navigazione su TV.
- `loading="lazy"` su tutto ciò che è sotto il fold; l'hero è `eager` con un hint di preload.

## 9. Guida ai Prompt per Agenti

### Riferimento Rapido Colori
- **CTA Primario**: "PlayStation Blue (`#0070cc`)"
- **Accento Hover / Focus**: "PlayStation Cyan (`#1eaedb`)"
- **Sfondo (Superficie Bianca)**: "Paper White (`#ffffff`)"
- **Sfondo (Superficie Scura)**: "Console Black (`#000000`)"
- **Testo Titolo su Bianco**: "Display Ink (`#000000`)"
- **Testo Corpo su Bianco**: "Deep Charcoal (`#1f1f1f`)"
- **Testo Corpo su Nero**: "Inverse White (`#ffffff`)"
- **Accento Commerce / Acquisto**: "Commerce Orange (`#d53b00`)"
- **Anchor Footer**: "PlayStation Blue (`#0070cc`)"

### Esempi di Prompt per Componenti
1. *"Crea un pulsante CTA primario con riempimento PlayStation Blue `#0070cc`, testo bianco in SST 18px / 500 / 0.4px tracking, raggio bordo 999px, padding 12px × 24px. Al passaggio del cursore, lo sfondo transita a `#1eaedb` PlayStation Cyan, appare un bordo `#ffffff` da 2px, un anello esterno `#0070cc` da 2px fiorisce tramite box-shadow, e l'intero pulsante si scala di 1.2× — tutto con una transizione ease da 180ms."*
2. *"Progetta un pannello hero su canvas Console Black `#000000` con un titolo SST peso 300 da 54px in `#ffffff` con -0.1px letter-spacing e line-height 1.25. Posiziona un singolo CTA primario sotto con il trattamento hover PlayStation standard. Nessuna etichetta in TUTTO MAIUSCOLO da nessuna parte."*
3. *"Costruisci una tile copertina gioco: immagine con rapporto d'aspetto 3:4 e raggio bordo 12px, ombra proiettata leggerissima `rgba(0, 0, 0, 0.08) 0 5px 9px 0`, un titolo SST 700 da 14px sotto, un tag piattaforma SST 500 da 12px e un mini CTA primario in PlayStation Blue con 14px / 700 / 0.324px tracking."*
4. *"Crea un pulsante pill commerce per un acquisto su PlayStation Store: riempimento Commerce Orange `#d53b00`, testo `#ffffff` in SST 18px / 700 / 0.45px tracking, raggio 999px, padding 12px × 28px. Lo stato active si scurisce a `#aa2f00`. L'hover segue il cyan-invert standard con scala 1.2×."*
5. *"Progetta un pannello di contenuto bianco tra sezioni hero scure: sfondo `#ffffff` con il sottile gradiente di sezione chiara `#ffffff → #f5f7fa`, raggio bordo 24px, padding interno 48px, elevazione leggerissima `rgba(0, 0, 0, 0.06) 0 5px 9px 0`, un titolo SST 300 da 35px, un paragrafo di corpo da 18px e un singolo CTA primario."*

### Guida all'Iterazione
Quando si perfezionano schermate esistenti generate con questo design system:
1. **Controlla il peso del display.** Ogni titolo da 22px in su dovrebbe essere SST peso 300. Se vedi peso 500 o 700 alla scala hero, hai perso la voce PlayStation.
2. **Controlla il trattamento hover.** Ogni pulsante primario deve scalare di 1.2× al passaggio del cursore con la combinazione riempimento cyan + bordo bianco + anello blu. Mancarne uno qualsiasi di questi quattro rompe la firma d'interazione.
3. **Controlla gli angoli.** Ogni contenitore e pulsante dovrebbe avere 2, 3, 6, 12, 13, 19, 20, 24, 36, 48 o 999px / 100%. Gli angoli quadrati rompono la voce.
4. **Controlla la dispersione cromatica.** Solo PlayStation Blue (`#0070cc`), Cyan (`#1eaedb`), Commerce Orange (`#d53b00`) e i grigi/neri/bianchi dichiarati dovrebbero apparire nel chrome. Se vedi qualsiasi altra tonalità, correggila.
5. **Controlla l'alternanza delle superfici.** La pagina dovrebbe alternare hero scuro → contenuto bianco → hero scuro → contenuto bianco → footer blu. Se due pannelli della stessa superficie sono adiacenti, inserisci una transizione.
6. **Controlla il casing.** Solo sentence case e title case. Nessuna etichetta, pulsante o kicker in TUTTO MAIUSCOLO. Se vedi il maiuscolo, convertilo.
7. **Controlla il peso delle ombre.** L'opacità delle ombre dovrebbe essere 0.06 / 0.08 / 0.16 / 0.8 — niente nel mezzo. Se vedi ombre con 0.1, 0.2, 0.3, 0.5, correggile al livello dichiarato più vicino.
8. **Controlla gli spazi bianchi.** Se due moduli sembrano "competitivi" (si contendono l'attenzione), aggiungi 48–96px di spazio di respirazione verticale. Il ritmo da galleria di PlayStation è non negoziabile.