④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,312 @@
+# Sistema di Design Ispirato a Notion
+
+> Category: Produttività e SaaS
+> Spazio di lavoro tutto-in-uno. Minimalismo caldo, intestazioni con grazie, superfici morbide.
+
+## 1. Tema Visivo e Atmosfera
+
+Il sito di Notion incarna la filosofia dello strumento stesso: una tela bianca che non ostacola il tuo lavoro. Il sistema di design è costruito su neutri caldi anziché grigi freddi, creando un minimalismo distintivamente accessibile che evoca la sensazione di carta di qualità piuttosto che vetro sterile. La tela della pagina è bianco puro (`#ffffff`), ma il testo non è nero puro — è un nero caldo quasi assoluto (`rgba(0,0,0,0.95)`) che ammorbidisce impercettibilmente l'esperienza di lettura. La scala di grigi caldi (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) porta sottili sfumature giallo-marroni, conferendo all'interfaccia un calore tattile, quasi analogico.
+
+Il font personalizzato NotionInter (una Inter modificata) è la colonna portante del sistema. Alle dimensioni di visualizzazione (64px), utilizza una spaziatura tra lettere negativa aggressiva (-2.125px), creando titoli che sembrano compressi e precisi. L'intervallo di pesi è più ampio dei sistemi tipici: 400 per il corpo, 500 per gli elementi dell'interfaccia, 600 per le etichette semi-grassetto e 700 per i titoli di visualizzazione. Le funzioni OpenType `"lnum"` (cifre allineate) e `"locl"` (forme localizzate) sono abilitate sui testi più grandi, aggiungendo sofisticazione tipografica che ricompensa la lettura attenta.
+
+Ciò che rende distintivo il linguaggio visivo di Notion è la sua filosofia dei bordi. Invece di bordi pesanti o ombre, Notion usa bordi ultra-sottili `1px solid rgba(0,0,0,0.1)` — bordi che esistono come sussurri, linee di divisione appena percettibili che creano struttura senza peso. Il sistema di ombre è ugualmente sobrio: pile a più livelli con opacità cumulativa che non supera mai 0.05, creando profondità che si percepisce più che si vede.
+
+**Key Characteristics:**
+- NotionInter (Inter modificata) con spaziatura negativa tra le lettere alle dimensioni di visualizzazione (-2.125px a 64px)
+- Palette di neutri caldi: i grigi hanno sfumature giallo-marroni (`#f6f5f4` bianco caldo, `#31302e` scuro caldo)
+- Testo quasi nero tramite `rgba(0,0,0,0.95)` — non nero puro, crea micro-calore
+- Bordi ultra-sottili: `1px solid rgba(0,0,0,0.1)` in tutto il sistema — divisione dal peso di un sussurro
+- Pile di ombre a più livelli con opacità sotto 0.05 per una profondità quasi impercettibile
+- Blu Notion (`#0075de`) come unico colore d'accento per CTA ed elementi interattivi
+- Badge a pillola (raggio 9999px) con sfondi blu sfumati per indicatori di stato
+- Unità di spaziatura base di 8px con scala organica non rigida
+
+## 2. Palette di Colori e Ruoli
+
+### Primario
+- **Nero Notion** (`rgba(0,0,0,0.95)` / `#000000f2`): Testo principale, intestazioni, testo del corpo. L'opacità al 95% ammorbidisce il nero puro senza sacrificare la leggibilità.
+- **Bianco puro** (`#ffffff`): Sfondo della pagina, superfici delle card, testo del pulsante su sfondo blu.
+- **Blu Notion** (`#0075de`): CTA principale, colore dei link, accento interattivo — l'unico colore saturo nell'interfaccia principale.
+
+### Secondario del Brand
+- **Blu marino scuro** (`#213183`): Colore secondario del brand, usato con parsimonia per enfasi e sezioni scure di funzionalità.
+- **Blu attivo** (`#005bab`): Stato attivo/premuto del pulsante — variante più scura del Blu Notion.
+
+### Scala dei Neutri Caldi
+- **Bianco caldo** (`#f6f5f4`): Tinta di superficie di sfondo, alternanza di sezioni, riempimento sottile delle card. La sfumatura gialla è fondamentale.
+- **Scuro caldo** (`#31302e`): Sfondo di superficie scura, testo in sezioni scure. Più caldo dei grigi standard.
+- **Grigio caldo 500** (`#615d59`): Testo secondario, descrizioni, etichette attenuate.
+- **Grigio caldo 300** (`#a39e98`): Testo segnaposto, stati disabilitati, testo delle didascalie.
+
+### Colori d'Accento Semantici
+- **Verde acqua** (`#2a9d99`): Stati di successo, indicatori positivi.
+- **Verde** (`#1aae39`): Conferma, badge di completamento.
+- **Arancione** (`#dd5b00`): Stati di avviso, indicatori di attenzione.
+- **Rosa** (`#ff64c8`): Accento decorativo, evidenziazioni di funzionalità.
+- **Viola** (`#391c57`): Funzionalità premium, accenti profondi.
+- **Marrone** (`#523410`): Accento terroso, sezioni di funzionalità calde.
+
+### Interattivi
+- **Blu link** (`#0075de`): Colore principale del link con sottolineatura al passaggio del cursore.
+- **Blu link chiaro** (`#62aef0`): Variante di link più chiaro per sfondi scuri.
+- **Blu focus** (`#097fe8`): Anello di focus sugli elementi interattivi.
+- **Sfondo badge blu** (`#f2f9ff`): Sfondo del badge a pillola, superficie blu sfumata.
+- **Testo badge blu** (`#097fe8`): Testo del badge a pillola, blu più scuro per la leggibilità.
+
+### Ombre e Profondità
+- **Ombra card** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Elevazione card a più livelli.
+- **Ombra profonda** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Elevazione profonda a cinque livelli per modali e contenuti in evidenza.
+- **Bordo sussurro** (`1px solid rgba(0,0,0,0.1)`): Bordo di divisione standard — card, divisori, sezioni.
+
+## 3. Regole Tipografiche
+
+### Famiglia di Font
+- **Principale**: `NotionInter`, con fallback: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
+- **Funzioni OpenType**: `"lnum"` (cifre allineate) e `"locl"` (forme localizzate) abilitate su testi di visualizzazione e intestazioni.
+
+### Gerarchia
+
+| Ruolo | Font | Dimensione | Peso | Altezza Riga | Spaziatura Lettere | Note |
+|------|------|------|--------|-------------|----------------|-------|
+| Visualizzazione Principale | NotionInter | 64px (4.00rem) | 700 | 1.00 (compatto) | -2.125px | Compressione massima, titoli da cartellone |
+| Visualizzazione Secondaria | NotionInter | 54px (3.38rem) | 700 | 1.04 (compatto) | -1.875px | Hero secondario, titoli di funzionalità |
+| Intestazione di Sezione | NotionInter | 48px (3.00rem) | 700 | 1.00 (compatto) | -1.5px | Titoli di sezioni di funzionalità, con `"lnum"` |
+| Sottotitolo Grande | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Intestazioni delle card, sottosezioni di funzionalità |
+| Sottotitolo | NotionInter | 26px (1.63rem) | 700 | 1.23 (compatto) | -0.625px | Sottotitoli di sezione, intestazioni di contenuto |
+| Titolo Card | NotionInter | 22px (1.38rem) | 700 | 1.27 (compatto) | -0.25px | Card di funzionalità, titoli di elenco |
+| Corpo Grande | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introduzioni, descrizioni di funzionalità |
+| Corpo | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Testo di lettura standard |
+| Corpo Medio | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigazione, testo dell'interfaccia enfatizzato |
+| Corpo Semi-Grassetto | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Etichette in evidenza, stati attivi |
+| Corpo Grassetto | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Titoli alla dimensione del corpo |
+| Nav / Pulsante | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Link di navigazione, testo del pulsante |
+| Didascalia | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadati, etichette secondarie |
+| Didascalia Leggera | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Didascalie del corpo, descrizioni |
+| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Badge a pillola, tag, etichette di stato |
+| Micro Etichetta | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Metadati piccoli, timestamp |
+
+### Principi
+- **Compressione in scala**: NotionInter alle dimensioni di visualizzazione usa -2.125px di spaziatura tra lettere a 64px, rilassandosi progressivamente a -0.625px a 26px e normale a 16px. La compressione crea densità nei titoli mantenendo la leggibilità alle dimensioni del corpo.
+- **Sistema a quattro pesi**: 400 (corpo/lettura), 500 (interfaccia/interattivo), 600 (enfasi/navigazione), 700 (intestazioni/visualizzazione). L'intervallo di pesi più ampio rispetto alla maggior parte dei sistemi consente una gerarchia sfumata.
+- **Scala calda**: L'altezza della riga si restringe all'aumentare delle dimensioni — 1.50 nel corpo (16px), 1.23-1.27 nei sottotitoli, 1.00-1.04 nella visualizzazione. Questo crea titoli più densi e d'impatto.
+- **Micro-tracking del badge**: Il testo del badge a 12px usa spaziatura positiva tra le lettere (0.125px) — l'unico tracking positivo nel sistema, creando testo piccolo più ampio e leggibile.
+
+## 4. Stili dei Componenti
+
+### Pulsanti
+
+**Blu Primario**
+- Sfondo: `#0075de` (Blu Notion)
+- Testo: `#ffffff`
+- Padding: 8px 16px
+- Raggio: 4px (sottile)
+- Bordo: `1px solid transparent`
+- Hover: lo sfondo si scurisce a `#005bab`
+- Attivo: trasformazione scale(0.9)
+- Focus: contorno `2px solid`, ombra `var(--shadow-level-200)`
+- Utilizzo: CTA principale ("Prova Notion gratis", "Inizia")
+
+**Secondario / Terziario**
+- Sfondo: `rgba(0,0,0,0.05)` (grigio caldo traslucido)
+- Testo: `#000000` (quasi nero)
+- Padding: 8px 16px
+- Raggio: 4px
+- Hover: il colore del testo cambia, scale(1.05)
+- Attivo: trasformazione scale(0.9)
+- Utilizzo: Azioni secondarie, invii di moduli
+
+**Fantasma / Pulsante Link**
+- Sfondo: trasparente
+- Testo: `rgba(0,0,0,0.95)`
+- Decorazione: sottolineatura al passaggio del cursore
+- Utilizzo: Azioni terziarie, link in linea
+
+**Pulsante Badge a Pillola**
+- Sfondo: `#f2f9ff` (blu sfumato)
+- Testo: `#097fe8`
+- Padding: 4px 8px
+- Raggio: 9999px (pillola completa)
+- Font: 12px peso 600
+- Utilizzo: Badge di stato, etichette di funzionalità, tag "Nuovo"
+
+### Card e Contenitori
+- Sfondo: `#ffffff`
+- Bordo: `1px solid rgba(0,0,0,0.1)` (bordo sussurro)
+- Raggio: 12px (card standard), 16px (card in evidenza/hero)
+- Ombra: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
+- Hover: intensificazione sottile dell'ombra
+- Card con immagine: raggio superiore di 12px, l'immagine riempie la metà superiore
+
+### Input e Moduli
+- Sfondo: `#ffffff`
+- Testo: `rgba(0,0,0,0.9)`
+- Bordo: `1px solid #dddddd`
+- Padding: 6px
+- Raggio: 4px
+- Focus: anello di contorno blu
+- Segnaposto: grigio caldo `#a39e98`
+
+### Navigazione
+- Nav orizzontale pulita su sfondo bianco, non fissa
+- Logo del brand allineato a sinistra (icona 33x34px + wordmark)
+- Link: NotionInter 15px peso 500-600, testo quasi nero
+- Hover: cambio di colore verso `var(--color-link-primary-text-hover)`
+- CTA: pulsante a pillola blu ("Prova Notion gratis") allineato a destra
+- Mobile: menu a scomparsa con icona hamburger
+- Menu a discesa del prodotto con menu categorizzati a più livelli
+
+### Trattamento delle Immagini
+- Screenshot del prodotto con bordo `1px solid rgba(0,0,0,0.1)`
+- Immagini con angoli superiori arrotondati: raggio `12px 12px 0px 0px`
+- Gli screenshot del pannello/spazio di lavoro dominano le sezioni di funzionalità
+- Sfondi con gradienti caldi dietro le illustrazioni hero (illustrazioni di personaggi decorativi)
+
+### Componenti Distintivi
+
+**Card di Funzionalità con Illustrazioni**
+- Intestazioni illustrative grandi (La Grande Onda, screenshot dell'interfaccia del prodotto)
+- Card con raggio 12px e bordo sussurro
+- Titolo a 22px peso 700, descrizione a 16px peso 400
+- Variante con sfondo bianco caldo (`#f6f5f4`) per le sezioni alternate
+
+**Barra di Fiducia / Griglia di Loghi**
+- Loghi aziendali (sezione dei team fidati) nei loro colori del brand
+- Layout a scorrimento orizzontale o griglia con conteggi dei team
+- Visualizzazione delle metriche: numero grande + schema di descrizione
+
+**Card delle Metriche**
+- Visualizzazione di numeri grandi (es. "$4.200 di ROI")
+- NotionInter 40px+ peso 700 per la metrica
+- Descrizione sotto in testo del corpo grigio caldo
+- Contenitore card con bordo sussurro
+
+## 5. Principi di Layout
+
+### Sistema di Spaziatura
+- Unità base: 8px
+- Scala: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
+- Scala organica non rigida con valori frazionari (5.6px, 6.4px) per micro-aggiustamenti
+
+### Griglia e Contenitore
+- Larghezza massima del contenuto: circa 1200px
+- Hero: colonna singola centrata con padding superiore generoso (80-120px)
+- Sezioni di funzionalità: griglie a 2-3 colonne per le card
+- Sfondi di sezione a larghezza piena in bianco caldo (`#f6f5f4`) per l'alternanza
+- Screenshot di codice/pannello contenuti con bordo sussurro
+
+### Filosofia dello Spazio Bianco
+- **Ritmo verticale generoso**: 64-120px tra le sezioni principali. Notion lascia respirare il contenuto con ampio padding verticale.
+- **Alternanza calda**: Le sezioni bianche si alternano con sezioni in bianco caldo (`#f6f5f4`), creando un ritmo visivo morbido senza bruschi cambi di colore.
+- **Densità orientata al contenuto**: I blocchi di testo del corpo sono compatti (altezza riga 1.50), ma circondati da ampi margini, creando isole di contenuto leggibile in un mare di spazio bianco.
+
+### Scala del Raggio dei Bordi
+- Micro (4px): Pulsanti, input, elementi interattivi funzionali
+- Sottile (5px): Link, elementi di elenco, voci di menu
+- Standard (8px): Card piccole, contenitori, elementi in linea
+- Comodo (12px): Card standard, contenitori di funzionalità, parti superiori delle immagini
+- Grande (16px): Card hero, contenuti in evidenza, blocchi promozionali
+- Pillola completa (9999px): Badge, pillole, indicatori di stato
+- Cerchio (100%): Indicatori di scheda, avatar
+
+## 6. Profondità ed Elevazione
+
+| Livello | Trattamento | Utilizzo |
+|-------|-----------|-----|
+| Piatto (Livello 0) | Nessuna ombra, nessun bordo | Sfondo della pagina, blocchi di testo |
+| Sussurro (Livello 1) | `1px solid rgba(0,0,0,0.1)` | Bordi standard, contorni delle card, divisori |
+| Card Morbida (Livello 2) | Pila di ombre a 4 livelli (opacità max. 0.04) | Card di contenuto, blocchi di funzionalità |
+| Card Profonda (Livello 3) | Pila di ombre a 5 livelli (opacità max. 0.05, sfocatura 52px) | Modali, pannelli in evidenza, elementi hero |
+| Focus (Accessibilità) | Contorno `2px solid var(--focus-color)` | Focus da tastiera su tutti gli elementi interattivi |
+
+**Filosofia delle Ombre**: Il sistema di ombre di Notion usa più livelli con opacità individuale estremamente bassa (da 0.01 a 0.05) che si accumulano in un'elevazione morbida e dall'aspetto naturale. L'ombra card a 4 livelli va da 1.04px a 18px di sfocatura, creando un gradiente di profondità invece di un'unica ombra dura. L'ombra profonda a 5 livelli si estende a 52px di sfocatura con opacità 0.05, producendo un'occlusione ambientale che sembra luce naturale invece di profondità generata dal computer. Questo approccio a livelli fa sì che gli elementi sembrino integrati nella pagina invece di fluttuare sopra di essa.
+
+### Profondità Decorativa
+- Sezione hero: illustrazioni di personaggi decorativi (stile giocoso, disegnato a mano)
+- Alternanza di sezioni: cambiamenti di sfondo da bianco a bianco caldo (`#f6f5f4`)
+- Nessun bordo duro di sezione — la separazione deriva da cambiamenti di colore dello sfondo e dalla spaziatura
+
+## 7. Comportamento Responsivo
+
+### Breakpoint
+| Nome | Larghezza | Modifiche Principali |
+|------|-------|-------------|
+| Mobile Piccolo | <400px | Colonna singola compatta, padding minimo |
+| Mobile | 400-600px | Mobile standard, layout impilato |
+| Tablet Piccolo | 600-768px | Iniziano le griglie a 2 colonne |
+| Tablet | 768-1080px | Griglie complete di card, padding espanso |
+| Desktop Piccolo | 1080-1200px | Layout desktop standard |
+| Desktop | 1200-1440px | Layout completo, larghezza massima del contenuto |
+| Desktop Grande | >1440px | Centrato, margini generosi |
+
+### Target di Tocco
+- I pulsanti usano padding comodo (8px-16px verticale)
+- I link di navigazione a 15px con spaziatura adeguata
+- I badge a pillola hanno 8px di padding orizzontale per le aree di tocco
+- Il pulsante del menu mobile usa il pulsante hamburger standard
+
+### Strategia di Collasso
+- Hero: visualizzazione a 64px -> scala a 40px -> 26px su mobile, mantiene la spaziatura tra lettere proporzionale
+- Navigazione: link orizzontali + CTA blu -> menu hamburger
+- Card di funzionalità: 3 colonne -> 2 colonne -> colonna singola impilata
+- Screenshot del prodotto: mantengono il rapporto d'aspetto con immagini responsive
+- Loghi della barra di fiducia: griglia -> scorrimento orizzontale su mobile
+- Footer: più colonne -> colonna singola impilata
+- Spaziatura della sezione: 80px+ -> 48px su mobile
+
+### Comportamento delle Immagini
+- Gli screenshot dello spazio di lavoro mantengono il bordo sussurro a tutte le dimensioni
+- Le illustrazioni hero scalano proporzionalmente
+- Gli screenshot del prodotto usano immagini responsive con raggio dei bordi consistente
+- Le sezioni di bianco caldo a larghezza piena mantengono il trattamento da bordo a bordo
+
+## 8. Accessibilità e Stati
+
+### Sistema di Focus
+- Tutti gli elementi interattivi ricevono indicatori di focus visibili
+- Contorno di focus: `2px solid` con colore di focus + livello di ombra 200
+- Navigazione da tastiera supportata in tutti i componenti interattivi
+- Testo ad alto contrasto: quasi nero su bianco supera WCAG AAA (rapporto >14:1)
+
+### Stati Interattivi
+- **Predefinito**: Aspetto standard con bordi sussurro
+- **Hover**: Cambio di colore nel testo, scale(1.05) sui pulsanti, sottolineatura sui link
+- **Attivo/Premuto**: Trasformazione scale(0.9), variante di sfondo più scuro
+- **Focus**: Anello di contorno blu con rinforzo dell'ombra
+- **Disabilitato**: Testo in grigio caldo (`#a39e98`), opacità ridotta
+
+### Contrasto dei Colori
+- Testo principale (rgba(0,0,0,0.95)) su bianco: rapporto ~18:1
+- Testo secondario (#615d59) su bianco: rapporto ~5.5:1 (WCAG AA)
+- CTA blu (#0075de) su bianco: rapporto ~4.6:1 (WCAG AA per testo grande)
+- Testo badge (#097fe8) su sfondo badge (#f2f9ff): rapporto ~4.5:1 (WCAG AA per testo grande)
+
+## 9. Guida ai Prompt per Agenti
+
+### Riferimento Rapido ai Colori
+- CTA principale: Blu Notion (`#0075de`)
+- Sfondo: Bianco puro (`#ffffff`)
+- Sfondo alternativo: Bianco caldo (`#f6f5f4`)
+- Testo intestazione: Quasi nero (`rgba(0,0,0,0.95)`)
+- Testo corpo: Quasi nero (`rgba(0,0,0,0.95)`)
+- Testo secondario: Grigio caldo 500 (`#615d59`)
+- Testo attenuato: Grigio caldo 300 (`#a39e98`)
+- Bordo: `1px solid rgba(0,0,0,0.1)`
+- Link: Blu Notion (`#0075de`)
+- Anello di focus: Blu focus (`#097fe8`)
+
+### Esempi di Prompt per Componenti
+- "Crea una sezione hero su sfondo bianco. Titolo a 64px NotionInter peso 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Sottotitolo a 20px peso 600, line-height 1.40, color #615d59. Pulsante CTA blu (#0075de, raggio 4px, padding 8px 16px, testo bianco) e pulsante fantasma (sfondo trasparente, testo quasi nero, sottolineatura all'hover)."
+- "Progetta una card: sfondo bianco, bordo 1px solid rgba(0,0,0,0.1), raggio 12px. Usa la pila di ombre: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Titolo a 22px NotionInter peso 700, letter-spacing -0.25px. Corpo a 16px peso 400, color #615d59."
+- "Costruisci un badge a pillola: sfondo #f2f9ff, testo #097fe8, raggio 9999px, padding 4px 8px, 12px NotionInter peso 600, letter-spacing 0.125px."
+- "Crea la navigazione: intestazione bianca. NotionInter 15px peso 600 per i link, testo quasi nero. CTA a pillola blu 'Prova Notion gratis' allineato a destra (sfondo #0075de, testo bianco, raggio 4px)."
+- "Progetta un layout a sezioni alternate: le sezioni bianche si alternano con sezioni in bianco caldo (#f6f5f4). Ogni sezione ha 64-80px di padding verticale, max-width 1200px centrato. Intestazione di sezione a 48px peso 700, line-height 1.00, letter-spacing -1.5px."
+
+### Guida all'Iterazione
+1. Usa sempre neutri caldi — i grigi di Notion hanno sfumature giallo-marroni (#f6f5f4, #31302e, #615d59, #a39e98), mai grigio-blu
+2. La spaziatura tra lettere scala con la dimensione del font: -2.125px a 64px, -1.875px a 54px, -0.625px a 26px, normale a 16px
+3. Quattro pesi: 400 (lettura), 500 (interazione), 600 (enfasi), 700 (annuncio)
+4. I bordi sono sussurri: 1px solid rgba(0,0,0,0.1) — mai più pesanti
+5. Le ombre usano 4-5 livelli con opacità individuale che non supera mai 0.05
+6. Lo sfondo di sezione in bianco caldo (#f6f5f4) è essenziale per il ritmo visivo
+7. Badge a pillola (9999px) per stato/tag, raggio 4px per pulsanti e input
+8. Il Blu Notion (#0075de) è l'unico colore saturo nell'interfaccia principale — usalo con parsimonia per CTA e link