admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
22 KiB
Design System Inspired by Nike
Category: E-Commerce & Retail Retail sportivo. UI monocromatica, tipografia maiuscola imponente, fotografie a tutta pagina.
1. Tema Visivo e Atmosfera
Nike.com è una cattedrale cinetica del retail — un sito che trasferisce l'energia esplosiva dello sport in un'esperienza di acquisto digitale. Il design opera su un principio di semplicità radicale: eliminare tutto fino al nero, bianco e grigio in modo che la fotografia atletica e il colore del prodotto possano dominare senza concorrenza. Il risultato assomiglia meno a un sito web e più a un editoriale sportivo impaginato con la precisione di una rivista di lusso. Ogni pixel di spazio serve o a vendere un prodotto o a condurre verso il prodotto.
Il "Podium CDS" (il Core Design System interno di Nike) stabilisce una fondazione aggressivamente monocromatica. L'interfaccia sparisce in testo nero (#111111) e superfici bianche, lasciando che la fotografia hero — atleti sudati, scarpe in volo, energia degli stadi — porti il peso emotivo. Quando il colore compare nell'interfaccia, è quasi esclusivamente funzionale: rosso per gli errori, blu per i link, verde per i successi. Il prodotto è la storia del colore. Questa sobrietà crea un paradosso visivo: le pagine più colorate di internet sembrano le più minimali, perché tutta la vivacità proviene dalla merce e non dall'interfaccia.
Il sistema tipografico è l'altra metà dell'identità visiva di Nike. Titoli enormi in maiuscolo con Nike Futura ND — una variante condensata e personalizzata di Futura con un'interlinea (0.90) impossibilmente stretta — sfondano le immagini hero come un'onda d'urto tipografica. Sotto i titoli, la famiglia Helvetica Now si occupa di tutto, dalla navigazione alle descrizioni dei prodotti, con la chiarezza precisa della tradizione svizzera. Questa divisione tra carattere display espressivo e corpo funzionale rispecchia la dualità del brand Nike: ispirazione incontra esecuzione.
Key Characteristics:
- UI monocromatica (nero/bianco/grigio) che lascia alla fotografia del prodotto l'esclusività del colore
- Tipografia display maiuscola di grandi dimensioni (96px, interlinea 0.90) che sfonda le immagini hero
- Fotografie a tutta pagina senza border radius — le immagini riempiono ogni bordo disponibile
- Pulsanti a pillola (30px radius) come elemento interattivo principale
- Griglia spaziatura a 8px con disciplina atletica — ogni misura si aggancia al sistema
- Architettura di shopping guidata per categoria con grandi card di navigazione fotografica
- Modello di elevazione senza ombre e con bordi minimi — la differenziazione delle superfici avviene solo attraverso variazioni di grigio
2. Palette Colori e Ruoli
Primari
- Nike Black (
#111111): Il fondamento — testo principale, sfondi dei pulsanti, testo nav, overlay hero. Deliberatamente non nero puro (#000000), crea un'esperienza di lettura leggermente più morbida - Nike White (
#FFFFFF): Canvas principale della pagina, testo dei pulsanti su sfondo scuro, superfici delle card, sfondo della barra di navigazione
Superfici e Sfondi
- Snow (
#FAFAFA): Superficie più chiara, differenziazione sottile quasi-bianca (--podium-cds-color-grey-50) - Light Gray (
#F5F5F5): Sfondo secondario, riempimento input di ricerca, segnaposto immagine, scheletro di caricamento (--podium-cds-color-grey-100) - Hover Gray (
#E5E5E5): Sfondo stato hover, riempimento pulsante disabilitato (--podium-cds-color-grey-200) - Dark Surface (
#28282A): Sfondo principale nelle sezioni scure/invertite (--podium-cds-color-grey-800) - Deep Charcoal (
#1F1F21): Sfondo primario inverso, superficie più scura non-nera (--podium-cds-color-grey-900) - Dark Hover (
#39393B): Stato hover su sfondi scuri (--podium-cds-color-grey-700)
Neutrali e Testo
- Primary Text (
#111111): Testo del corpo principale, titoli, link di navigazione (--podium-cds-color-text-primary) - Secondary Text (
#707072): Testi descrittivi, metadati, timestamp, etichette prezzi (--podium-cds-color-text-secondary) - Disabled Text (
#9E9EA0): Elementi inattivi, opzioni non disponibili (--podium-cds-color-text-disabled) - Disabled Inverse (
#4B4B4D): Testo disabilitato su sfondi scuri (--podium-cds-color-text-disabled-inverse) - Border Primary (
#707072): Colore bordo standard, corrispondente al testo secondario - Border Secondary (
#CACACB): Bordi sottili, bordi input, linee divisorie (--podium-cds-color-grey-300) - Border Disabled (
#CACACB): Stato bordo inattivo - Border Active (
#111111): Bordo attivo/in focus, corrispondente al testo primario
Semantici e Accentuati
- Nike Red (
#D30005): Errori critici, badge saldi, notifiche urgenti (--podium-cds-color-red-600) - Bright Red (
#EE0005): Red-500, rosso leggermente più chiaro per enfasi - Nike Orange Badge (
#D33918): Testo badge, callout promozionali (--podium-cds-color-text-badge) - Orange Flash (
#FF5000): Accento arancione espressivo (--podium-cds-color-orange-400) - Success Green (
#007D48): Conferma, disponibilità, stati positivi (--podium-cds-color-green-600) - Success Inverse (
#1EAA52): Successo su sfondi scuri (--podium-cds-color-green-500) - Link Blue (
#1151FF): Link testuali, evidenziazioni informative (--podium-cds-color-blue-500) - Info Inverse (
#1190FF): Link su sfondi scuri (--podium-cds-color-blue-400) - Warning Yellow (
#FEDF35): Sfondi di avviso, banner attenzione (--podium-cds-color-yellow-200) - Focus Ring (
rgba(39, 93, 197, 1)): Anello indicatore focus da tastiera
Spettro Cromatico Esteso (Podium CDS)
Ogni rampa di colore va da 50 a 900 per uso espressivo nelle campagne e nelle pagine prodotto:
- Red:
#FFE5E5→#EE0005→#530300 - Orange:
#FFE2D6→#FF5000→#3E1009 - Yellow:
#FEF087→#FCA600→#99470A - Green:
#DFFFB9→#1EAA52→#003C2A - Teal:
#D4FFFB→#008E98→#043441 - Blue:
#D6EEFF→#1151FF→#020664 - Purple:
#E4E1FC→#6E0FF6→#1C0060 - Pink:
#FFE1F3→#ED1AA0→#4C012D
Sistema dei Gradienti
Nike evita i gradienti nell'interfaccia. Quando compaiono dei gradienti, sono fotografici — applicati agli sfondi hero dei prodotti (es. una scarpa rossa su un gradiente rosso-rosso più scuro). Il design system in sé utilizza solo colori piatti.
3. Regole Tipografiche
Font Family
Display: Nike Futura ND (variante condensata personalizzata di Futura esclusiva di Nike)
- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
- Usato esclusivamente per i grandi titoli display in maiuscolo
- Caratteristicamente stretta interlinea (0.90) e trasformazione in maiuscolo
Heading: Helvetica Now Display Medium
- Fallbacks: Helvetica, Arial
- Usato per i titoli di sezione e i titoli dei prodotti tra 24 e 32px
Body Medium: Helvetica Now Text Medium (weight 500)
- Fallbacks: Helvetica, Arial
- Usato per link, pulsanti, didascalie, testo del corpo enfatizzato
Body: Helvetica Now Text (weight 400)
- Fallbacks: Helvetica, Arial
- Usato per il testo del corpo standard, descrizioni, metadati
Arabic: Neue Frutiger Arabic — alternativa specifica per la locale
Gerarchia
| Ruolo | Dimensione | Peso | Interlinea | Spaziatura Lettere | Note |
|---|---|---|---|---|---|
| Display | 96px | 500 | 0.90 | — | Nike Futura ND, maiuscolo, titoli hero |
| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, titoli di sezione |
| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, sottosezioni |
| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, titoli card |
| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, descrizioni prodotto |
| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, testo enfatizzato |
| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, link di navigazione |
| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, link footer/utilità |
| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, testo CTA |
| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, pulsanti secondari |
| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, etichette prezzi |
| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, timestamp |
| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, testo legale |
Principi
La tipografia di Nike è uno studio nella tensione. Il livello display — Nike Futura ND a 96px con un'interlinea devastante di 0.90 — è progettato per sembrare il tabellone di uno stadio: massiccio, condensato, maiuscolo, impossibile da ignorare. Trasforma i titoli in grida di battaglia. Al di sotto del livello display, Helvetica Now offre un contrappunto clinico: leggibilità con precisione svizzera e interlinea generosa di 1.75 per una navigazione confortevole tra i prodotti. Il weight 500 (Medium) domina in tutto il testo del corpo, conferendo alla prosa di Nike una leggera assertività senza la pesantezza del grassetto — ogni frase si legge come una raccomandazione sicura, non come un urlo.
4. Stili dei Componenti
Pulsanti
Primario
- Background: Nike Black (
#111111) - Testo: White (
#FFFFFF), 16px/500, Helvetica Now Text Medium - Border: nessuno
- Border radius: pillola completamente arrotondata (30px)
- Padding: ~12px 24px
- Hover: il background passa a Grey-500 (
#707072), colore testo hover - Active: effetto ripple scale(0) con opacity 0.5
- Focus: 2px box-shadow ring in
rgba(39, 93, 197, 1) - Transition: background 200ms ease
Primario su Sfondo Scuro
- Background: White (
#FFFFFF) - Testo: Black (
#111111) - Hover: il background passa a Grey-300 (
#CACACB)
Secondario (Delineato)
- Background: transparent
- Testo: Nike Black (
#111111) - Border: 1.5px solid
#CACACB(grey-300) - Border radius: 30px
- Hover: il bordo si scurisce a
#707072, background a grey-200
Disabilitato
- Background: Grey-200 (
#E5E5E5) - Testo: Grey-400 (
#9E9EA0) - Cursor: not-allowed
Pulsante Icona
- Background: Grey-100 (
#F5F5F5) - Forma: 30px radius (o 50% per circolare)
- Padding: 6px
- Hover: background Grey-500
Card e Contenitori
- Background: White (
#FFFFFF) — nessun bordo visibile della card nella maggior parte dei casi - Border radius: 0px per le card con immagine prodotto (immagini a tutto campo), 20px per i contenitori interattivi
- Shadow: nessuna — Nike non usa assolutamente nessuna ombra nelle card
- Hover: nessun effetto di sollevamento sulle card prodotto; sottolineatura sui link testuali all'interno delle card
- Card prodotto: immagine in alto (senza radius), metadati testuali in basso con gap di 12px
- Card categoria: fotografia a tutto campo con sovrapposizione testo su gradiente scuro
- Transition: opacity 200ms ease per il cambio immagine in hover
Input e Form
- Background: Grey-100 (
#F5F5F5) - Border: 1px solid
#CACACBquando visibile, o senza bordo nella ricerca - Border radius: 24px (input di ricerca), 8px (input nei form)
- Font: Helvetica Now Text, 16px
- Focus: il bordo passa a
#111111(border-active), 2px focus ring inrgba(39, 93, 197, 1) - Errore: border
#D30005(critical) - Placeholder: Grey-500 (
#707072) - Transition: border-color 200ms ease
Navigazione
- Background: White (
#FFFFFF), sticky - Altezza: ~60px desktop
- Sinistra: logo Nike Swoosh (24x24px SVG)
- Centro: link di categoria (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium
- Destra: Ricerca (input 24px radius), Preferiti, icone Carrello
- Hover: il colore del testo passa a Grey-500 (
#707072) - Mobile: menu hamburger, overlay a schermo intero
- Banner superiore: barra messaggi promozionali con sfondo scuro (#111111) e testo bianco
Trattamento delle Immagini
- Immagini hero: a tutto campo, senza border radius, da bordo a bordo
- Griglia prodotti: rapporto 1:1 o 4:3, senza border radius
- Card categoria: 16:9 o 4:3, a tutto campo con sovrapposizione testo
- Segnaposto immagine: sfondo solido Grey-100 (
#F5F5F5) - Caricamento lazy: native loading="lazy", scheletro usa bg #F5F5F5
- Hover prodotto: cambio immagine secondaria (vista frontale → laterale)
Banner Promozionali
- Sfondo scuro a larghezza completa (
#111111) con testo bianco - Padding stretto (8-12px verticale)
- Testo centrato, 12px/500 Helvetica Now Text Medium
- Usato per promozioni di spedizione, vantaggi per i membri, annunci di saldi
5. Principi di Layout
Sistema di Spaziatura
Unità base: 4px (la griglia primaria è a multipli di 8px)
| Token | Valore | Utilizzo |
|---|---|---|
| space-1 | 4px | Spazi stretti tra icone, spaziatura inline |
| space-2 | 8px | Unità base, spazi icone pulsanti |
| space-3 | 12px | Padding interno card, margini stretti |
| space-4 | 16px | Padding standard, spaziatura nav |
| space-5 | 20px | Gap tra card prodotto |
| space-6 | 24px | Padding interno sezione, gap griglia |
| space-7 | 32px | Interruzioni di sezione |
| space-8 | 48px | Padding sezione principale |
| space-9 | 64px | Padding sezione hero |
| space-10 | 80px | Spaziatura sezioni grandi |
Griglia e Contenitore
- Larghezza massima contenitore: 1920px
- Larghezza contenuto standard: ~1440px con padding orizzontale
- Griglia prodotti: 3 colonne su desktop, 2 su tablet, 1 su mobile
- Griglia categoria: 3 colonne con immagini a tutto campo
- Gap griglia: 4-12px tra le card prodotto (intenzionalmente stretto)
- Padding orizzontale: 48px desktop, 24px tablet, 16px mobile
Filosofia dello Spazio Bianco
La strategia degli spazi bianchi di Nike è deliberatamente aggressiva — non nel modo lussuoso e respirante di un brand di moda, ma in un modo compresso ad alta densità che riempie ogni pixel con contenuto o con assenza intenzionale. Le griglie prodotto usano gap minimi (4-12px) per creare una sensazione di abbondanza e scelta. Le interruzioni di sezione sono generose (48-80px) per separare i contesti di acquisto. L'effetto complessivo è quello di un negozio che sembra pieno di prodotti rimanendo comunque navigabile — come un grande negozio sportivo ben organizzato.
Scala Border Radius
| Valore | Contesto |
|---|---|
| 0px | Immagini prodotto, fotografia hero (bordi netti) |
| 8px | Input nei form (non ricerca) |
| 18px | Elementi interattivi piccoli |
| 20px | Contenitori, card con contenuto UI |
| 24px | Input di ricerca, pillole medie |
| 30px | Pulsanti, tag, filtri (pillola completa) |
| 50% | Pulsanti icona circolari, segnaposto avatar |
6. Profondità ed Elevazione
| Livello | Trattamento | Utilizzo |
|---|---|---|
| Flat | Nessuna ombra, nessun bordo | Stato predefinito per tutto |
| Divider | 0px -1px 0px 0px #E5E5E5 inset |
Linea inset sottile tra le sezioni |
| Focus | 0 0 0 2px rgba(39, 93, 197, 1) |
Anello focus da tastiera |
| Overlay | Scrim scuro sopra la fotografia | Leggibilità testo su immagine |
La filosofia di elevazione di Nike è radicalmente piatta. Non ci sono ombre nelle card, nessun sollevamento in hover, nessun elemento flottante. La profondità è comunicata esclusivamente attraverso il colore — le sezioni scure retrocedono, quelle chiare avanzano, le variazioni di grigio indicano i cambi di stato. Questa piattezza rinforza la personalità del brand atletica e diretta: nessun fronzolo visivo, solo comunicazione diretta. L'unica "ombra" nell'intero sistema è una linea divisoria inset di 1px e l'anello di focus richiesto per l'accessibilità.
Profondità Decorativa
- Overlay fotografici hero: Scrims a gradiente scuro sopra le fotografie a tutto campo per la leggibilità del testo
- Gradienti sfondo prodotto: Sfondi colorati dietro le foto hero dei prodotti (es. scarpa rossa su gradiente rosso)
- Barre banner: Strisce promozionali solide scure (#111111) in cima alla pagina
7. Cosa Fare e Cosa Evitare
Cosa Fare
- Usare Nike Black (#111111) per tutto il testo principale — mai il puro #000000
- Mantenere i pulsanti a forma di pillola (30px radius) e limitati alle varianti primaria/secondaria
- Usare fotografie a tutto campo, da bordo a bordo, per le sezioni hero — nessun border radius sulle immagini
- Lasciare che la fotografia del prodotto fornisca tutta la vivacità cromatica; mantenere l'interfaccia monocromatica
- Usare Nike Futura ND in maiuscolo SOLO per i titoli display (96px+)
- Mantenere gap stretti nella griglia prodotti (4-12px) per una sensazione densa e abbondante
- Usare Grey-100 (#F5F5F5) per tutti gli sfondi di input e segnaposto
- Riservare il colore esclusivamente al significato semantico (rosso=errore, verde=successo, blu=link)
- Usare weight 500 (Medium) per tutti gli elementi testuali interattivi
Cosa Evitare
- Non aggiungere ombre alle card — il modello di elevazione di Nike è completamente piatto
- Non usare border radius sulle immagini prodotto — solo gli elementi UI hanno angoli arrotondati
- Non introdurre colori del brand al di là della scala di grigi per gli elementi dell'interfaccia
- Non usare Nike Futura ND sotto i 24px — è esclusivamente un carattere display
- Non aggiungere effetti di sollevamento in hover — le card Nike non si animano in hover
- Non usare il weight normale (400) per pulsanti o link — usare sempre 500
- Non posizionare sfondi colorati dietro gli elementi dell'interfaccia — il colore è riservato ai contesti prodotto
- Non usare più di due livelli di gerarchia testuale per card (titolo + corpo)
- Non aggiungere divisori decorativi — l'inset di 1px è l'unico pattern divisorio
- Non ammorbidire il contrasto — il design di Nike spinge deliberatamente il nero su bianco al massimo
8. Comportamento Responsive
Breakpoint
| Nome | Larghezza | Cambiamenti Principali |
|---|---|---|
| Mobile | <640px | Colonna singola, nav hamburger, il testo display si ridimensiona, padding stretto 16px |
| Small Tablet | 640-768px | Inizia la griglia prodotti a 2 colonne, nav ancora collassata |
| Tablet | 768-960px | Griglie a 2 colonne, le card categoria si scalano, padding orizzontale 24px |
| Small Desktop | 960-1024px | La nav si espande a orizzontale completo, griglia prodotti a 3 colonne |
| Desktop | 1024-1440px | Layout completo, nav espansa, griglie a 3 colonne, padding 48px |
| Large Desktop | >1440px | Contenitore a larghezza massima centrato, margini aumentati, immagini hero a tutto campo |
Target di Tocco
- Target di tocco minimo: 44x44px (WCAG AAA)
- Icone nav mobile: area di tocco 48x48px
- Card prodotto: l'intera superficie è tappabile
- Pillole filtro: altezza minima 36px con padding 12px
Strategia di Collasso
- Navigazione: Link categoria completi → menu hamburger sotto 960px; icone ricerca, preferiti, carrello rimangono visibili
- Griglie prodotti: 3 col → 2 col a 960px → 1 col a 640px
- Sezioni hero: Il testo display si scala da 96px → 64px → 48px; le immagini hero rimangono a tutto campo a tutte le dimensioni
- Card categoria: 3 col → 2 col → 1 col con fotografia a tutto campo mantenuta
- Padding sezione: 80px → 48px → 32px → 24px man mano che il viewport si restringe
- Banner promozionale: il testo va a capo o viene troncato, mantiene lo sfondo scuro
Comportamento delle Immagini
- Immagini responsive via Nike CDN (
c.static-nike.com) con parametri di larghezza - Immagini prodotto: srcset con risoluzioni multiple (w_320, w_640, w_960, w_1920)
- Immagini hero: a tutto campo a tutti i breakpoint, il rapporto d'aspetto cambia (16:9 desktop → 4:3 mobile)
- Caricamento lazy: native loading="lazy", segnaposto grey-100 durante il caricamento
- Art direction: i ritagli degli hero cambiano tra le composizioni desktop e mobile
9. Guida ai Prompt per l'Agente
Riferimento Rapido Colori
- CTA principale: Nike Black (
#111111) - Sfondo: White (
#FFFFFF) - Superficie secondaria: Light Gray (
#F5F5F5) - Testo titoli: Nike Black (
#111111) - Testo corpo / hover: Secondary Text (
#707072) - Bordo: Border Secondary (
#CACACB) - Errore: Nike Red (
#D30005) - Link: Link Blue (
#1151FF)
Esempi di Prompt per Componenti
- "Crea una sezione hero prodotto con fotografia a tutto campo da bordo a bordo, senza border radius, un overlay a gradiente scuro per il testo, e un titolo enorme in maiuscolo da 96px/500 in stile Nike Futura con interlinea 0.90 e un pulsante a pillola Nike Black (#111111) (30px radius)"
- "Progetta una griglia prodotti a 3 colonne con immagini quadrate (senza border radius), gap di 4px tra le card, nome prodotto in 16px/500 Nike Black (#111111), prezzo in 14px/500, e testo secondario in Grey-500 (#707072)"
- "Costruisci una barra di navigazione bianca sticky con logo allineato a sinistra, link di categoria centrati in 16px/500 (#111111) con colore hover #707072, e ricerca allineata a destra (24px radius, sfondo #F5F5F5), preferiti e icone carrello"
- "Crea una striscia banner promozionale con sfondo #111111, testo bianco centrato 12px/500, e padding verticale 8px — larghezza completa, senza border radius"
- "Progetta un pulsante secondario delineato con sfondo transparent, bordo #CACACB 1.5px, pill radius 30px, testo #111111 16px/500, bordo che si scurisce a #707072 in hover"
Guida all'Iterazione
Quando si perfezionano schermate esistenti generate con questo design system:
- Concentrarsi su UN componente alla volta
- Fare riferimento a nomi di colore specifici e codici hex da questo documento
- Ricordare: la fotografia del prodotto è il colore — l'interfaccia rimane monocromatica
- Usare la scala di grigi per i cambi di stato: #F5F5F5 → #E5E5E5 → #CACACB → #707072
- Se qualcosa nell'interfaccia sembra troppo colorato, probabilmente lo è — Nike mantiene l'interfaccia in scala di grigi
- Il carattere display (Nike Futura) deve essere SEMPRE in maiuscolo e mai sotto i 24px
- Il carattere corpo (Helvetica Now) dovrebbe quasi sempre avere weight 500 per gli elementi interattivi