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。
161 lines
7.6 KiB
Markdown
161 lines
7.6 KiB
Markdown
# Sistema di design ispirato a Duolingo
|
||
|
||
> Category: Produttività e SaaS
|
||
> Piattaforma di apprendimento delle lingue. Verde gufo brillante, ombre spesse, gioia gamificata.
|
||
|
||
## 1. Tema visivo e atmosfera
|
||
|
||
Duolingo è la gamificazione resa come linguaggio visivo. L'interfaccia è senza riserve luminosa, con il **verde gufo** (`#58cc02`) come colore primario del brand e una spessa ombra di 4px nella parte inferiore di ogni elemento interattivo, che si legge come un pulsante 3D in attesa di essere premuto. La pagina è bianca (`#ffffff`) con bordi spessi di 2–3px in grigio scuro (`#e5e5e5`), e l'intero sistema si legge come un'app iOS del 2015 rinata con una gerarchia migliore.
|
||
|
||
La tipografia usa **Feather Bold** (un sans-serif arrotondato personalizzato) per il chrome e **Mona Sans** (o Inter) per il corpo del testo. Le dimensioni display sono grandi e sicure — Duolingo non sussurra mai. I titoli portano spesso il tratto sottolineato verde o siedono su una pillola verde, e la mascotte Duo (un gufo verde) appare come un personaggio illustrativo attivo, non come un logo statico.
|
||
|
||
Il linguaggio delle forme è amichevole: raggi di 16–20px sulle schede, 12px sui pulsanti, 9999px su chip e barre di avanzamento. L'iconografia è piena, arrotondata e codificata per colore per competenza — ogni superficie di lezione ha una combinazione di colori immediatamente identificabile.
|
||
|
||
**Caratteristiche principali:**
|
||
- Verde gufo (`#58cc02`) come colore di brand dominante, usato in oltre il 30% della superficie
|
||
- Spessa ombra inferiore di 4px su ogni pulsante (l'affordance della "pressione tattile")
|
||
- Bordi solidi di 2–3px, mai linee sottili
|
||
- Feather Bold (display arrotondato) + Mona Sans (corpo)
|
||
- Testo grande e sicuro — le dimensioni display partono da 48px e salgono
|
||
- Mascotte come personaggio: Duo il gufo appare nell'onboarding, negli errori, nelle serie
|
||
- Arancione serie (`#ff9600`) e rosa gemma (`#ce82ff`) come colori di brand secondari
|
||
|
||
## 2. Palette colori e ruoli
|
||
|
||
### Primario
|
||
- **Verde gufo** (`#58cc02`): Primario brand, CTA principale, risposta corretta.
|
||
- **Verde gufo scuro** (`#58a700`): Colore di pressione/ombra per i pulsanti verdi.
|
||
- **Verde gufo chiaro** (`#89e219`): Hover, riempimenti morbidi.
|
||
- **Verde gufo pallido** (`#dbf8c5`): Superficie morbida, banner di successo.
|
||
|
||
### Accenti secondari
|
||
- **Arancione serie** (`#ff9600`): Contatore serie, icona fiamma, energia premium.
|
||
- **Arancione serie scuro** (`#cc7a00`): Arancione premuto.
|
||
- **Rosa gemma** (`#ce82ff`): Valuta gemma, Super Duolingo.
|
||
- **Blu anguilla** (`#1cb0f6`): Pulsante suggerimento, link informativo.
|
||
- **Rosso cardinale** (`#ff4b4b`): Risposta errata, vita persa.
|
||
- **Giallo ape** (`#ffc800`): Badge pro, risultato.
|
||
|
||
### Superficie
|
||
- **Neve** (`#ffffff`): Sfondo principale.
|
||
- **Anguilla** (`#f7f7f7`): Separazione sezione, superficie secondaria.
|
||
- **Cigno** (`#e5e5e5`): Sfondo disabilitato, blocco incorporato.
|
||
- **Lupo** (`#777777`): Divisore scuro, testo secondario.
|
||
|
||
### Inchiostro e testo
|
||
- **Nero anguilla** (`#3c3c3c`): Testo principale.
|
||
- **Lupo** (`#777777`): Testo secondario, didascalie.
|
||
- **Lepre** (`#afafaf`): Disabilitato, segnaposto.
|
||
|
||
### Bordo
|
||
- **Cigno** (`#e5e5e5`): Bordo standard 2px.
|
||
- **Lepre** (`#afafaf`): Bordo enfatizzato all'hover.
|
||
|
||
## 3. Regole tipografiche
|
||
|
||
### Famiglia di font
|
||
- **Display / UI / Titoli**: `Feather Bold`, con fallback: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
|
||
- **Corpo / Testo lungo**: `Mona Sans`, con fallback: `'Helvetica Neue', system-ui, sans-serif`
|
||
- **Codice (raro, scuole/admin)**: `JetBrains Mono`, con fallback: `ui-monospace, Menlo, monospace`
|
||
|
||
### Gerarchia
|
||
|
||
| Ruolo | Font | Dimensione | Peso | Altezza riga | Spaziatura | Note |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Eroe onboarding |
|
||
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Titolo pagina |
|
||
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Intestazione sezione |
|
||
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Titolo scheda, riga lezione |
|
||
| Corpo grande | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Prompt lezione, istruzione |
|
||
| Corpo | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Prosa standard |
|
||
| Didascalia | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | Contatore XP, metadati |
|
||
| Pulsante | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Etichetta pulsante standard |
|
||
| Serie | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Numero serie, sulla fiamma |
|
||
|
||
### Principi
|
||
- **800 è il predefinito**: Feather Bold gira a 800 su titoli e pulsanti. 700 risulta debole in questo sistema.
|
||
- **Testo grande**: le dimensioni dei titoli sono 25–40% più grandi rispetto ai brand di prodotto tipici — la sicurezza come identità.
|
||
- **Forme delle lettere arrotondate**: ogni glifo ha terminazioni morbide; le grazie taglienti romperebbero il contratto di amichevolezza.
|
||
|
||
## 4. Stile dei componenti
|
||
|
||
### Pulsanti
|
||
|
||
**Primario (Verde gufo)**
|
||
- Sfondo: `#58cc02`
|
||
- Testo: `#ffffff`
|
||
- Spaziatura interna: 14px 24px
|
||
- Raggio: 16px
|
||
- Border-bottom: 4px solid `#58a700` (l'ombra spessa)
|
||
- Hover: sfondo `#89e219`
|
||
- Attivo: translate-y 4px, border-bottom 0 (il pulsante "si preme")
|
||
- Utilizzo: "Continua", "Controlla", CTA principale.
|
||
|
||
**Secondario (Bianco con ombra inferiore)**
|
||
- Sfondo: `#ffffff`
|
||
- Testo: `#777777`
|
||
- Bordo: 2px solid `#e5e5e5`
|
||
- Border-bottom: 4px solid `#e5e5e5`
|
||
- Raggio: 16px
|
||
- Spaziatura interna: 14px 24px
|
||
- Hover: testo `#3c3c3c`, bordo `#afafaf`
|
||
|
||
**Arancione serie**
|
||
- Sfondo: `#ff9600`
|
||
- Testo: `#ffffff`
|
||
- Border-bottom: 4px solid `#cc7a00`
|
||
- Utilizzo: obiettivo serie, "Inizia serie"
|
||
|
||
**Errore (Rosso cardinale)**
|
||
- Sfondo: `#ff4b4b`
|
||
- Testo: `#ffffff`
|
||
- Border-bottom: 4px solid `#cc3b3b`
|
||
- Utilizzo: feedback risposta errata.
|
||
|
||
### Schede / Riquadri lezione
|
||
- Sfondo: `#ffffff`
|
||
- Bordo: 2px solid `#e5e5e5`
|
||
- Border-bottom: 4px solid `#e5e5e5`
|
||
- Raggio: 16px
|
||
- Spaziatura interna: 16px
|
||
- Hover: sollevare di 2px, ombra `0 4px 0 #d7d7d7`
|
||
|
||
### Nodo albero competenze (Bolla lezione)
|
||
- Dimensione: 80×72px
|
||
- Sfondo: tinta colore competenza (verde per attivo, grigio per bloccato)
|
||
- Border-bottom: 6px solid variante più scura
|
||
- Raggio: 50% (circolare)
|
||
- Attivo: pulsa 1.0 → 1.05 ogni 1.6s
|
||
|
||
### Input
|
||
- Sfondo: `#ffffff`
|
||
- Bordo: 2px solid `#e5e5e5`
|
||
- Raggio: 12px
|
||
- Spaziatura interna: 12px 16px
|
||
- Focus: bordo `#1cb0f6` (blu anguilla), anello `0 0 0 3px rgba(28, 176, 246, 0.2)`
|
||
|
||
### Barra di avanzamento
|
||
- Traccia: `#e5e5e5`
|
||
- Riempimento: `#58cc02` (o `#ff9600` per la serie)
|
||
- Raggio: 9999px
|
||
- Altezza: 16px
|
||
- Riempimento animato: 320ms ease-out all'incremento.
|
||
|
||
## 5. Spaziatura e layout
|
||
|
||
- **Unità base**: 4px. Scala: 4, 8, 12, 16, 24, 32, 48, 64.
|
||
- **Contenitore**: max 1080px, grondaia 24px.
|
||
- **Colonna albero lezioni**: 320px di larghezza; centrata su desktop.
|
||
|
||
## 6. Movimento
|
||
|
||
- **Durata**: 180ms per la pressione del pulsante; 320ms per lo sblocco del nodo competenza; 1.6s per il pulse del nodo attivo.
|
||
- **Easing**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, leggero superamento) per gli sblocchi.
|
||
- **Mascotte**: Duo sbatte le palpebre ogni 4–6s, salta ai traguardi della serie (480ms ease-out molla).
|
||
|
||
## 7. Linee guida sull'uso
|
||
|
||
- Mantieni insieme il verde gufo ad alta saturazione, le spesse ombre inferiori e la geometria arrotondata delle lezioni; i pulsanti verdi piatti da soli non si leggono come Duolingo.
|
||
- Riserva il testo in grassetto sovradimensionato per i momenti di lezione, serie e progresso in cui il prodotto ha bisogno di incoraggiamento o feedback.
|
||
- Usa il movimento giocoso con parsimonia attorno ai cambiamenti di stato di avanzamento, evitando animazioni rimbalzanti generiche su ogni controllo.
|