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

# Sistema di design ispirato a Pinterest

> Category: Media e consumatori
> Scoperta visiva. Accento rosso, griglia a muratura, immagine prima.

## 1. Tema visivo e atmosfera

Il sito web di Pinterest è una tela calda e ricca di ispirazione che tratta la scoperta visiva come una rivista di lifestyle. Il design si basa su uno sfondo bianco morbido e leggermente caldo con il Rosso Pinterest (`#e60023`) come unico e audace accento del brand. A differenza dei blu freddi della maggior parte delle piattaforme tecnologiche, la scala di neutri di Pinterest ha un sottotono decisamente caldo — i grigi tendono verso l'oliva/sabbia (`#91918c`, `#62625b`, `#e5e5e0`) piuttosto che verso l'acciaio freddo, creando un'atmosfera accogliente e artigianale che invita alla navigazione.

La tipografia usa Pin Sans — un carattere proprietario personalizzato con un'ampia pila di fallback che include caratteri giapponesi, a riflettere la portata globale di Pinterest. Alla scala display (70px, peso 600), Pin Sans crea titoli grandi e accoglienti. Nelle dimensioni più piccole, il sistema è compatto: bottoni a 12px, didascalie a 12–14px. Il sistema di denominazione delle variabili CSS (`--comp-*`, `--sema-*`, `--base-*`) rivela una sofisticata architettura di token di design a tre livelli: componente, semantico e base.

Ciò che distingue Pinterest è il suo generoso sistema di raggi dei bordi (12px–40px, più 50% per i cerchi) e gli sfondi dei bottoni con tonalità calda. Il bottone secondario (`#e5e5e0`) ha una tonalità sabbia distintamente calda piuttosto che grigio freddo. Il bottone rosso primario usa un raggio di 16px — arrotondato ma non a forma di pillola. Combinato con gli sfondi caldi dei badge (`hsla(60,20%,98%,.5)` — un sottile lavaggio giallo-caldo) e i layout dominati dalla fotografia, il risultato è un design che sembra artigianale e personale, non aziendale e sterile.

**Caratteristiche chiave:**
- Tela bianca calda con neutri nelle tonalità oliva/sabbia — accogliente, non clinico
- Rosso Pinterest (`#e60023`) come unico accento audace — mai sottile, sempre sicuro
- Carattere personalizzato Pin Sans con pila di fallback globale (incluso CJK)
- Architettura di token a tre livelli: `--comp-*` / `--sema-*` / `--base-*`
- Superfici secondarie calde: grigio sabbia (`#e5e5e0`), badge caldo (`hsla(60,20%,98%,.5)`)
- Raggio dei bordi generoso: 16px standard, fino a 40px per i contenitori grandi
- Contenuto con fotografia prima — i pin/immagini sono l'elemento visivo principale
- Testo quasi viola scuro (`#211922`) — caldo, con un tocco di prugna

## 2. Tavolozza dei colori e ruoli

### Brand principale
- **Rosso Pinterest** (`#e60023`): CTA primario, accento del brand — rosso audace e sicuro
- **Verde 700** (`#103c25`): `--base-color-green-700`, accento successo/natura
- **Verde 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, verde premuto

### Testo
- **Nero prugna** (`#211922`): Testo principale — quasi nero caldo con sottotono prugna
- **Nero** (`#000000`): Testo secondario, testo del bottone
- **Grigio oliva** (`#62625b`): Descrizioni secondarie, testo attenuato
- **Argento caldo** (`#91918c`): `--comp-button-color-text-transparent-disabled`, testo disabilitato, bordi di input
- **Bianco** (`#ffffff`): Testo su superfici scure/colorate

### Interattivo
- **Blu focus** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, anelli di focus
- **Viola performance** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, funzionalità di performance
- **Viola raccomandazione** (`#7e238b`): `--sema-color-hover-text-recommendation`, raccomandazione IA
- **Blu link** (`#2b48d4`): Colore del testo del link
- **Blu Facebook** (`#0866ff`): `--facebook-background-color`, accesso social
- **Blu premuto** (`#617bff`): `--base-color-pressed-blue-200`, stato premuto

### Superficie e bordo
- **Grigio sabbia** (`#e5e5e0`): Sfondo bottone secondario — caldo, artigianale
- **Luce calda** (`#e0e0d9`): Sfondi bottoni circolari, badge
- **Lavaggio caldo** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, sfondo badge caldo sottile
- **Nebbia** (`#f6f6f3`): Superficie chiara (al 50% di opacità)
- **Bordo disabilitato** (`#c8c8c1`): `--sema-color-border-disabled`, bordi disabilitati
- **Grigio hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, bordo al passaggio del cursore
- **Superficie scura** (`#33332e`): Sfondi delle sezioni scure

### Semantico
- **Rosso errore** (`#9e0a0a`): Stati di errore checkbox/modulo

## 3. Regole tipografiche

### Famiglia di caratteri
- **Principale**: `Pin Sans`, fallback: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`

### Gerarchia

| Ruolo | Carattere | Dimensione | Peso | Altezza di riga | Spaziatura lettere | Note |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Impatto massimo |
| Titolo sezione | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking negativo |
| Corpo | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Lettura standard |
| Didascalia grassetto | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Metadati forti |
| Didascalia | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Testo piccolo, tag |
| Bottone | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Etichette bottone |

### Principi
- **Scala tipografica compatta**: L'intervallo è 12px–70px con un salto drammatico — la maggior parte del testo funzionale è a 12–16px, creando una gerarchia di informazioni densa, simile a un'app.
- **Distribuzione del peso calda**: 600–700 per i titoli, 400–500 per il corpo. Nessun peso ultrasottile — il tipo sembra sempre sostanziale.
- **Tracking negativo nei titoli**: -1,2px nei titoli di 28px crea titoli di sezione accoglienti e intimi.
- **Famiglia di caratteri singola**: Pin Sans gestisce tutto — nessun carattere display secondario o a spaziatura fissa rilevato.

## 4. Stili dei componenti

### Bottoni

**Rosso primario**
- Sfondo: `#e60023` (Rosso Pinterest)
- Testo: `#000000` (nero — scelta insolita per il contrasto sul rosso)
- Padding: 6px 14px
- Raggio: 16px (generosamente arrotondato, non a pillola)
- Bordo: `2px solid rgba(255, 255, 255, 0)` (trasparente)
- Focus: bordo semantico + contorno tramite variabili CSS

**Sabbia secondario**
- Sfondo: `#e5e5e0` (grigio sabbia caldo)
- Testo: `#000000`
- Padding: 6px 14px
- Raggio: 16px
- Focus: stesso sistema di bordo semantico

**Azione circolare**
- Sfondo: `#e0e0d9` (luce calda)
- Testo: `#211922` (nero prugna)
- Raggio: 50% (cerchio)
- Uso: azioni pin, controlli di navigazione

**Ghost / Trasparente**
- Sfondo: trasparente
- Testo: `#000000`
- Nessun bordo
- Uso: azioni terziarie

### Schede e contenitori
- Schede pin con fotografia prima e raggio generoso (12px–20px)
- Nessuna ombra box tradizionale sulla maggior parte delle schede
- Sfondi bianchi o nebbia calda
- Bordo bianco spesso di 8px su alcuni contenitori di immagini

### Input
- Input email: sfondo bianco, bordo `1px solid #91918c`, raggio 16px, padding 11px 15px
- Focus: sistema di bordo semantico + contorno tramite variabili CSS

### Navigazione
- Intestazione pulita su sfondo bianco o caldo
- Logo Pinterest + barra di ricerca centrati
- Pin Sans 16px per i link di navigazione
- Accenti Rosso Pinterest per gli stati attivi

### Trattamento delle immagini
- Griglia a muratura stile pin (layout caratteristico di Pinterest)
- Angoli arrotondati: 12px–20px sulle immagini
- Fotografia come contenuto principale — ogni pin è un'immagine
- Bordi bianchi spessi (8px) sui contenitori delle immagini in evidenza

## 5. Principi di layout

### Sistema di spaziatura
- Unità base: 8px
- Scala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Salti grandi: 32px → 80px → 100px per la spaziatura delle sezioni

### Griglia e contenitore
- Griglia a muratura per il contenuto dei pin (layout caratteristico)
- Sezioni di contenuto centrate con larghezza massima generosa
- Footer scuro a larghezza intera
- Barra di ricerca come elemento di navigazione principale

### Filosofia degli spazi bianchi
- **Densità di ispirazione**: La griglia a muratura comprime i pin — la densità del contenuto È la proposta di valore. Lo spazio bianco esiste tra le sezioni, non all'interno della griglia.
- **Respira sopra, densità sotto**: Le sezioni hero/in evidenza ricevono padding generoso; la griglia dei pin è compatta e immersiva.

### Scala del raggio dei bordi
- Standard (12px): Schede piccole, link
- Bottone (16px): Bottoni, input, schede medie
- Comodo (20px): Schede in evidenza
- Grande (28px): Contenitori grandi
- Sezione (32px): Elementi tab, pannelli grandi
- Hero (40px): Contenitori hero, blocchi in evidenza grandi
- Cerchio (50%): Bottoni di azione, indicatori tab

## 6. Profondità ed elevazione

| Livello | Trattamento | Uso |
|-------|-----------|-----|
| Piatto (Livello 0) | Nessuna ombra | Predefinito — i pin si affidano al contenuto, non all'ombra |
| Sottile (Livello 1) | Ombra minimale (dai token) | Overlay elevati, menu a tendina |
| Focus (Accessibilità) | Anello `--sema-color-border-focus-outer-default` | Stati di focus |

**Filosofia delle ombre**: Pinterest usa ombre minimali. La griglia a muratura si affida al contenuto (fotografia) per creare interesse visivo piuttosto che agli effetti di elevazione. La profondità deriva dal calore dei colori delle superfici e dall'arrotondamento generoso dei contenitori.

## 7. Da fare e da non fare

### Da fare
- Usare neutri caldi (`#e5e5e0`, `#e0e0d9`, `#91918c`) — il tono caldo oliva/sabbia è l'identità
- Applicare il Rosso Pinterest (`#e60023`) solo per i CTA principali — è audace e singolare
- Usare Pin Sans esclusivamente — un carattere per tutto
- Applicare raggio dei bordi generoso: 16px per bottoni/input, 20px+ per schede
- Mantenere la griglia a muratura densa — la densità del contenuto è il valore
- Usare sfondi badge caldi (`hsla(60,20%,98%,.5)`) per lavaggi caldi sottili
- Usare `#211922` (nero prugna) per il testo principale — più caldo del nero puro

### Da non fare
- Non usare neutri grigio freddi — sempre caldo/tonalità oliva
- Non usare il nero puro (`#000000`) come testo principale — usare il nero prugna (`#211922`)
- Non usare bottoni a forma di pillola — il raggio di 16px è arrotondato ma non a pillola
- Non aggiungere ombre pesanti — Pinterest è piatto per design, la profondità viene dal contenuto
- Non usare piccolo raggio dei bordi (<12px) sulle schede — l'arrotondamento generoso è essenziale
- Non introdurre colori del brand aggiuntivi — rosso + neutri caldi è la tavolozza completa
- Non usare pesi del carattere sottili — Pin Sans minimo 400

## 8. Comportamento responsivo

### Punti di interruzione
| Nome | Larghezza | Cambiamenti chiave |
|------|-------|-------------|
| Mobile | <576px | Colonna singola, layout compatto |
| Mobile grande | 576–768px | Griglia pin a 2 colonne |
| Tablet | 768–890px | Griglia espansa |
| Desktop piccolo | 890–1312px | Griglia a muratura standard |
| Desktop | 1312–1440px | Layout completo |
| Desktop grande | 1440–1680px | Colonne griglia espanse |
| Ultra wide | >1680px | Densità massima della griglia |

### Strategia di riduzione
- Griglia pin: 5+ colonne → 3 → 2 → 1
- Navigazione: barra di ricerca + icone → nav mobile semplificata
- Sezioni in evidenza: fianco a fianco → impilate
- Hero: 70px → scala proporzionalmente verso il basso
- Footer: scuro multicolonna → impilato

## 9. Guida ai prompt per agenti

### Riferimento rapido dei colori
- Brand: Rosso Pinterest (`#e60023`)
- Sfondo: Bianco (`#ffffff`)
- Testo: Nero prugna (`#211922`)
- Testo secondario: Grigio oliva (`#62625b`)
- Superficie bottone: Grigio sabbia (`#e5e5e0`)
- Bordo: Argento caldo (`#91918c`)
- Focus: Blu focus (`#435ee5`)

### Esempi di prompt per componenti
- "Creare un hero: sfondo bianco. Titolo a 70px Pin Sans peso 600, nero prugna (#211922). Bottone CTA rosso (#e60023, raggio 16px, padding 6px 14px). Bottone sabbia secondario (#e5e5e0, raggio 16px)."
- "Progettare una scheda pin: sfondo bianco, raggio 16px, nessuna ombra. La fotografia riempie la parte superiore, descrizione 16px Pin Sans peso 400 sotto in #62625b."
- "Costruire un bottone di azione circolare: sfondo #e0e0d9, raggio 50%, icona #211922."
- "Creare un campo di input: sfondo bianco, 1px solid #91918c, raggio 16px, padding 11px 15px. Focus: contorno blu tramite token semantici."
- "Progettare il footer scuro: sfondo #33332e. Logo script Pinterest in bianco. Link 12px Pin Sans in #91918c."

### Guida all'iterazione
1. Neutri caldi ovunque — grigi oliva/sabbia, mai acciaio freddo
2. Rosso Pinterest solo per i CTA — audace e singolare
3. Raggio di 16px su bottoni/input, 20px+ su schede — generoso ma non a pillola
4. Pin Sans è l'unico carattere — compatto a 12px per l'interfaccia, 70px per il display
5. La fotografia porta il design — l'interfaccia rimane calda e minimale
6. Nero prugna (#211922) per il testo — più caldo del nero puro