# Sistema di design Decanter ## Anteprima dell’interfaccia del sistema di design Decanter Filtra le schede originali degli eventi, apri un abstract e ripristina la visualizzazione dopo un argomento senza risultati. ## Riferimento di progettazione del sistema di design Decanter Pacchetto Decanter 7.5.3 e convenzioni e istruzioni ufficiali per l’installazione di v7. Le rimozioni di v8 sono trattate come note di migrazione. L’anteprima è un’interpretazione etichettata HTML/CSS, con font di fallback locali e senza elementi identificativi dell’università. ### Configurazione tipografica | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Primary sans / serif | Source Sans 3 / Source Serif 4 | Font di fallback: Helvetica/Arial e Georgia/Times. | | Long-form line height | 1.4–1.5em | Intervallo di lettura consigliato. | | Short text / headings | 1.2–1.3em | Gruppi più compatti. | ### Impostazioni modulari selezionate | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Scale mobile / tablet / desktop | 1.15 / 1.2 / 1.25 | Rapporto tra i passaggi type-*. | | basefont-23 selection | 18px XS–SM; 21px MD–XL; 23px 2XL | Configurazione esplicita usata nell’esempio. | | Breakpoints SM / MD / LG / XL / 2XL | 576 / 768 / 992 / 1200 / 1500px | Soglie responsive. | | cc maximum | 1500px at 1700px viewport | Contenitore fluido con margini dello schermo. | | Screen edge XS / SM / MD / LG / XL | 20 / 30 / 50 / 80 / 100px | Selezionata, non una scala matematica. | ### Colore dell’identità e colore delle azioni | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Cardinal red | #8c1515 | Colore primario dell’identità. | | Black / cool grey | #2e2d29 / #53565a | Palette neutra primaria. | ### Palette interattiva per il web | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Digital red / dark | #b1040e / #820000 | Stile interattivo; non sostituisce il colore del logotipo. | | Digital blue / dark | #006cb8 / #00548f | Stile dei link. | ## Guida completa al sistema di design Decanter Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Decanter: un preset Tailwind, non un SDK ### Fissa il percorso di generazione documentato > Il pacchetto Decanter verificato è la versione 7.5.3 e dichiara Tailwind CSS ^3.4.17. Il suo punto di ingresso pubblico è un preset di configurazione Tailwind. Aggiungi require("decanter") a presets, indica in content i file sorgente effettivi e compila il foglio di stile delle utility. Non esiste alcun provider React Decanter da importare. La documentazione include rimozioni previste per v8, pur indicando ancora v7 come percorso d’installazione. Questo riferimento blocca la versione v7.5.3 ed evita le utility obsolete foggy, slab e le versioni precedenti delle utility per il testo modulare. L’anteprima autonoma è un’interpretazione chiaramente etichettata delle regole di layout, non una presunta compilazione Tailwind. Leggi la specifica di supporto ## Sistema di design Decanter: tipografia modulare responsive ### La scala dipende dalla base Source Sans 3 e Source Serif 4 sono le famiglie sans e serif principali, con Helvetica/Arial e Georgia/Times come fallback. Le utility type-* definiscono ruoli proporzionali, non titoli con dimensioni in pixel fisse. Il moltiplicatore della scala è 1.15 su dispositivi mobili, 1.2 su tablet e 1.25 su desktop. L’esempio sceglie la configurazione basefont-23 documentata: 18px da XS a SM, 21px da MD a XL e 23px a 2XL. Usa per il titolo una dimensione type-3, così da mantenere proporzioni adeguate in un esempio compatto incorporato. Se il progetto sceglie una base diversa, deve ricalcolare le dimensioni risultanti invece di copiare i valori in pixel dell’anteprima. Leggi la specifica di supporto ## Sistema di design Decanter: contenitore fluido e griglia ### Il margine dello schermo fa parte del layout Il contenitore cc usa spaziature laterali selezionate: 20px a XS, 30px a SM, 50px a MD, 80px a LG e 100px a XL. Si espande fino a raggiungere una larghezza massima del contenuto di 1500px, con una viewport di 1700px. È un sistema fluido con regole esplicite per i margini, non un semplice contenitore fisso da 1200px. L’esempio rispetta questi margini e dispone le due schede editoriali su una sola colonna al di sotto di MD. Il contenuto delle schede segue il normale ordine del documento, quindi, quando il layout si dispone in verticale, la navigazione da tastiera segue la stessa sequenza di lettura. Leggi la specifica di supporto ## Sistema di design Decanter: spaziatura adattiva ### Usa le utility responsive con criterio Decanter fornisce le famiglie rs-m-* e rs-p-* per margini e padding responsive. Il valore selezionato cambia negli intervalli documentati; non è un alias per la spaziatura fissa di Tailwind. Il codice di esempio usa rs-p-1 attorno a una scheda e un normale padding fisso per la relativa azione. Per rendere riproducibile il riferimento, l’interpretazione autonoma indica come codice dell’applicazione ogni modifica a CSS. Per una build nativa, usa l’utility generata dal preset invece di definire una seconda regola concorrente con lo stesso nome. Evita frammenti dinamici come "rs-p-" + size quando lo scanner della build non può rilevare la classe completa. Leggi la specifica di supporto ## Sistema di design Decanter: colore dell’identità e interattivo ### Il Cardinal e il rosso digitale hanno funzioni diverse Il rosso Cardinal primario di Stanford è #8c1515. Il rosso digitale #b1040e è un colore interattivo/di accento e non sostituisce il Cardinal nell’identità universitaria. Il blu digitale #006cb8 è usato per i link, con #00548f per il relativo stato di interazione più scuro. L’esempio usa il rosso digitale per l’azione che espande i dettagli e superfici neutre dai toni sobri. Non include il logotipo, il sigillo o la barra ufficiale dell’identità di Stanford. Un’implementazione istituzionale deve usare elementi identificativi autorizzati e attenersi alle regole del brand dell’università; un riferimento tecnico non implica alcuna approvazione. Leggi la specifica di supporto ## Sistema di design Decanter: schede editoriali con azioni ### Componi i contenuti invece di ipotizzare una API di componente API Gli esempi ufficiali di schede sono HTML semantici, con utility per spaziatura, tipografia, superfici e azioni. Nella nostra composizione la categoria dell’evento è distinta dal titolo, data e luogo sono mostrati in testo e un pulsante reale rivela l’abstract nella stessa pagina. Non si inventa una API API per un componente Card Decanter. Un titolo con link sarebbe adatto se il risultato effettivo fosse la navigazione. In questo caso il risultato è un’espansione locale, quindi un pulsante con aria-expanded e aria-controls comunica il comportamento. L’anteprima usa nomi di eventi e abstract originali, anziché copiare notizie dell’università. - Usa il titolo dell’evento come intestazione della scheda. - Mantieni visibili data e luogo anche prima dell’espansione. - Usa un pulsante per mostrare o nascondere i dettagli e un link solo per una navigazione effettiva. Leggi la specifica di supporto ## Sistema di design Decanter: filtri e disclosure ### Mantieni i contenuti accessibili in ogni layout Il selettore di argomenti filtra le due schede originali degli eventi di ricerca e aggiorna il conteggio visibile dei risultati. L’opzione senza corrispondenze dimostra intenzionalmente uno stato vuoto e la possibilità di reimpostare il filtro. Il filtro non modifica la gerarchia delle intestazioni né trasforma le schede in opzioni selezionabili di un modulo. Ogni scheda di approfondimento ha un proprio stato del pulsante. Quando si chiude una scheda, il focus rimane sullo stesso elemento di attivazione. Modificando il filtro, le schede nascoste si chiudono: tornando a un argomento si riparte da una panoramica coerente. I controlli sono comportamenti dell’applicazione aggiunti a un approccio di design basato sulle utility, non fanno parte del pacchetto Decanter JavaScript. Leggi la specifica di supporto ## Sistema di design Decanter: build e convalida del risultato ### Le classi generate richiedono sorgenti sottoposte a scansione La configurazione fornita è destinata a Tailwind 3 e al preset Decanter 7.5.3 verificato. Include le direttive di input, il glob dei contenuti, il comando di output e una composizione originale di schede. Collega il foglio di stile risultante dall’intestazione del documento. Carica separatamente i file dei font approvati oppure mantieni intenzionalmente i fallback documentati. L’anteprima non è stata generata con questa toolchain, come indicato nell’etichetta di implementazione. Per un’adozione in produzione, compila l’intero set di classi e controlla l’output generato, soprattutto dopo un aggiornamento di major version che modifica le utility deprecate. 1. Blocca Decanter e la major version di Tailwind compatibile. 2. Registra il preset e sottoponi a scansione la directory sorgente effettiva. 3. Compila i tre livelli di direttive Tailwind. 4. Verifica il font di base scelto, i margini dello schermo e le azioni delle schede nei breakpoint documentati. Leggi la specifica di supporto ## Esempi di componenti del sistema di design Decanter ### Scheda editoriale originale HTML semantico composto con famiglie di utility verificate e un pulsante di apertura gestito dall’applicazione. ```

Research conversation

Reading the changing coast

An original example event about field observations.

``` Riferimento del codice ### Configurazione del preset Una configurazione minima completa per l’approccio scelto con Tailwind 3 bloccato a una versione specifica. ``` module.exports = { presets: [require('decanter')], content: ['./src/**/*.{html,js}'] }; ``` Riferimento del codice ### Esempio autonomo completo Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP. ``` Decanter editorial composition

RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES

Ideas take shape in conversation.

A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.

2 example events

ENVIRONMENT

Reading the changing coast

How field notes reveal changes that a single measurement cannot capture.

ARCHIVES

The stories between records

Exploring how context connects objects in a community archive.

Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.
``` Riferimento del codice - Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale. - Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima. ## Configurazione dell’agente del sistema di design Decanter ### Punto di partenza per l’implementazione Entry point di build del preset verificato sul sorgente; non eseguito per l’anteprima autonoma interpretata. Collega dist/styles.css nell’intestazione del documento. I font e le risorse di identità istituzionale sono decisioni separate. Lo ZIP completo dell’esempio funzionante nelle Fonti include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 nella directory e apri http://localhost:8080/stanford-decanter.html. Non aprire gli esempi basati su moduli tramite file://. ``` npm install --save-dev decanter@7.5.3 tailwindcss@3.4.17 # tailwind.config.cjs # module.exports = { # presets: [require('decanter')], # content: ['./src/**/*.{html,js}'] # }; # src/input.css # @tailwind base; # @tailwind components; # @tailwind utilities; npx tailwindcss -c tailwind.config.cjs -i ./src/input.css -o ./dist/styles.css ``` ### Un prompt per il tuo progetto ``` Componi una pagina editoriale di eventi con Decanter 7.5.3/Tailwind 3. Usa il preset, scegli esplicitamente basefont e applica la scala type-* e i margini cc dello schermo. Distingui argomento, titolo, orario e luogo in schede semantiche. Implementa il filtro locale per argomento e i controlli degli approfondimenti con aria-expanded. Evita le utility foggy/slab deprecate, le storie universitarie copiate e i marchi identificativi. Distingui chiaramente qualsiasi anteprima interpretata manualmente da una build di Decanter compilata. ``` ## Fonti e ambito del sistema di design Decanter Composizione didattica indipendente di OpenDesign, non pagina ufficiale di un evento universitario. Contenuti originali e nessun marchio Stanford. L’adozione del codice e l’uso dell’identità autorizzato dal brand sono aspetti distinti. - Panoramica di Decanter Finalità ufficiale, pubblico di riferimento e risorse principali. - Installazione per sviluppatori Indicazioni di implementazione e configurazione specifiche per versione. - Progettare in Figma Accesso alla libreria di design ufficiale. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Risorse correlate al sistema di design Decanter ### Suomi.fi sistema di design Crea moduli chiari per i servizi pubblici finlandesi con Source Sans 3, token di spaziatura espliciti e un modello recuperabile di selezione dei documenti. ### UNDP sistema di design Esplora i token pubblicati di colore e spaziatura di UNDP, le schede native controllabili da tastiera e un esempio completo di lettura e workshop con progressi di revisione locali. ### USWDS Combina i token di spaziatura di USWDS, i ruoli del tema, le tabelle semantiche e gli accordion nativi in un confronto di opportunità consultabile. - [Riferimento per l’implementazione](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Fonte](https://decanter.stanford.edu/for-designers/type-grids-and-color) - [Fonte](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Fonte](https://identity.stanford.edu/design-elements/color/primary-colors/) - [Fonte](https://identity.stanford.edu/design-elements/color/web/) - [Leggi la specifica di supporto](https://decanter.stanford.edu/for-developers/installation) - [Leggi la specifica di supporto](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Leggi la specifica di supporto](https://identity.stanford.edu/design-elements/color/web/) - [Leggi la specifica di supporto](https://decanter.stanford.edu/examples/cards) - [Riferimento del codice](https://decanter.stanford.edu/examples/cards) - [Riferimento del codice](https://decanter.stanford.edu/for-developers/installation) - [Riferimento del codice](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Panoramica di Decanter Finalità ufficiale, pubblico di riferimento e risorse principali.](https://decanter.stanford.edu/) - [Installazione per sviluppatori Indicazioni di implementazione e configurazione specifiche per versione.](https://decanter.stanford.edu/for-developers/installation) - [Progettare in Figma Accesso alla libreria di design ufficiale.](https://decanter.stanford.edu/for-designers/figma)