# Sistema di progettazione Designsystemet ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Designsystemet Usa il contatore nativo dei caratteri, cambia tema e dimensioni e mantieni o invalida la revisione in base a ciò che è cambiato. ## Riferimento di progettazione del sistema di progettazione sistema di design Designsystemet Esportazioni del tema predefinito e implementazione nativa di ds-field in @digdir/designsystemet-css/web 1.23.0. I valori della modalità chiara sono indicati esplicitamente nelle righe dei colori. ### Ruoli di accento predefiniti per la modalità chiara | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ds-color-accent-background-default | #fff | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-background-tinted | #eef4fa | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-surface-tinted | #ddeaf6 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-surface-hover | #c7ddf0 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-border-subtle | #99c0e3 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-border-default | #2a7cc5 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-text-default | #002c54 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-base-default | #0062ba | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-base-hover | #004f96 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-base-active | #003d75 | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | | --ds-color-accent-base-contrast-default | #fff | Ruolo effettivo del tema predefinito chiaro nella versione 1.23.0. Lo schema scuro a runtime usa valori distinti per il ruolo. | ### Ruoli neutri predefiniti per la modalità chiara | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-background-tinted | #f3f3f4 | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-surface-default | #fff | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-border-subtle | #bbbcbd | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-text-subtle | #5b5d60 | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-text-default | #292c30 | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-base-default | #24272b | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | | --ds-color-neutral-base-contrast-default | #fff | Usa i ruoli neutri per le superfici di supporto e il testo, senza attribuire un significato di stato non necessario. | ### Fondamenti delle modalità dimensionali e della tipografia | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-size-mode-font-size--md | 1.125 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-size-mode-font-size--lg | 1.3125 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-size-base | 18 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-font-family | Inter | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-font-weight-regular | 400 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-font-weight-medium | 500 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-font-weight-semibold | 600 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-line-height-sm | 1.3 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-line-height-md | 1.5 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-line-height-lg | 1.7 | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-border-radius-base | 0.25rem | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Scalare o espressione effettivamente esportata. Usa le modalità data-size invece di interpretare ogni valore scalare come un valore in pixel. | ## Guida completa al sistema di progettazione sistema di design Designsystemet 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. ## Comportamento, CSS e pacchetti del tema del sistema di progettazione sistema di design Designsystemet ### Carica le tre parti nell’ordine corretto > Designsystemet separa il comportamento indipendente dal framework, CSS dei componenti e i valori del tema. Questo esempio blocca designsystemet-web e designsystemet-css alla versione 1.23.0, importa CSS e poi il tema predefinito, quindi registra il comportamento una sola volta. Un campo stilizzato senza il relativo pacchetto di comportamento non corrisponde all’implementazione collegata ds-field mostrata qui. ### Usa il contratto attuale di HTML senza framework L’esempio usa ds-field attorno ai normali elementi input, textarea e select con classi ds-input. In questo modo si mantengono i controlli nativi del modulo e il pacchetto collega etichette e descrizioni. Non copia un’implementazione precedente del campo basata solo su React API. Il sorgente completo include le importazioni corrette dei pacchetti e la logica di revisione dell’applicazione originale. ## Schema di colori e modalità dimensionali del sistema di progettazione sistema di design Designsystemet ### Cambia l’aspetto tramite attributi data La pagina imposta data-color-scheme su light o dark nell’elemento root. Il tema fornisce i colori semantici corrispondenti, mentre i valori del modulo restano invariati. La tabella dei parametri riporta esplicitamente i valori predefiniti per la modalità chiara; non afferma che gli stessi colori esadecimali valgano anche nella modalità scura. Un pulsante secondario per l’aspetto descrive l’azione successiva. ### Fai in modo che la modalità dimensionale influisca sull’intero sistema Il controllo delle dimensioni di lettura cambia data-size tra sm, md e lg. In questo modo cambia la modalità dimensionale del tema, invece di ingrandire solo il titolo. I fattori delle modalità pubblicate sono 1, 1.125 e 1.3125; partecipano alle formule dei token e non sono un’istruzione universale per impostare quei valori in pixel a un controllo. L’esempio verifica la modalità grande sia su uno schermo di telefono sia su desktop. ## Inter e tipografia semantica del sistema di progettazione sistema di design Designsystemet ### Includi i pesi previsti L’anteprima include Inter 400, 500 e 600 e abilita la funzione del font documentata cv05 per la forma della l minuscola. La pagina usa le classi native per titoli e paragrafi, così che il peso del font e l’interlinea seguano il tema. Un’annotazione fissa di 14px è una nota di supporto definita ad hoc, chiaramente al di fuori della scala interattiva principale. ### Mantieni i contenuti di supporto accanto al relativo controllo Il suggerimento del titolo spiega lo scopo dell’etichetta; quello del risultato descrive il tipo di contenuto atteso. Restano accanto ai rispettivi controlli e sono collegati tramite ds-field. Le indicazioni di supporto si trovano in una scheda separata, posizionata dopo il modulo sugli schermi stretti. Per mostrare le istruzioni, il layout non dipende dall’hover. ## Relazioni automatiche e feedback sui caratteri del sistema di progettazione sistema di design Designsystemet ### Lascia che ds-field colleghi un solo controllo Ogni ds-field contiene un controllo simile a un input, la relativa etichetta ed eventuali descrizioni data-field. Il pacchetto assegna gli ID e crea le relazioni tra etichette e descrizioni. Raggruppare controlli non correlati nello stesso ds-field renderebbe ambiguo questo contratto automatico. Per un gruppo, usa un fieldset invece di presumere che il wrapper sia un contenitore generico per moduli. - Inserisci un solo controllo simile a un input in ogni ds-field. - Usa le descrizioni data-field per i contenuti di supporto correlati. - Lascia che l’observer nativo gestisca ID e relazioni aria-describedby. ### Scopri cosa misura il contatore Il contatore nativo usa data-limit, data-under e data-over, sostituendo %d con il numero di caratteri rimanenti o in eccesso. Nella versione 1.23.0 calcola la lunghezza della stringa JavaScript ed espone il feedback tramite data-label/data-state, includendo uno stato non valido quando si supera il limite. Non garantisce il conteggio dei grafemi per ogni emoji. Il limite di 140 caratteri è un vincolo di scrittura di questo esempio, non una regola ufficiale sui contenuti di Designsystemet. ## Convalida dell’applicazione e stato di revisione del sistema di progettazione sistema di design Designsystemet ### Convalida separatamente i requisiti del contenuto L’applicazione richiede un titolo e un risultato non vuoti e rifiuta un risultato più lungo del limite dell’esempio. Dopo aver mostrato un messaggio utile, porta il focus sul campo pertinente. Il contatore nativo spiega la lunghezza, mentre il gestore dell’invio applica la regola di revisione locale. L’attributo maxlength non tronca silenziosamente il testo incollato. ### Conserva i dati quando cambi la presentazione Una revisione completata mostra come testo il titolo e il risultato correnti. Modificare uno dei due campi cancella il risultato; cambiare aspetto o dimensioni lo mantiene, perché questi controlli non modificano il brief. Questa distinzione è intenzionale e verificata. Non viene inviato nulla a un servizio di gestione dei progetti e l’anteprima non dichiara mai che sia stata creata un’attività esterna. ## Implementazione completa dei campi nativi del sistema di progettazione sistema di design Designsystemet ### Riproduci l’esempio specifico della versione Crea un progetto Vite vanilla, installa i due pacchetti Designsystemet bloccati e Inter, quindi salva il file di ingresso completo e digdir.css. Mantieni l’elemento root di mount. Il sorgente include la registrazione, l’ordine del tema, il markup del contatore, i controlli di presentazione e tutte le transizioni di convalida della revisione. L’anteprima locale usa lo stesso observer nativo dei campi, non un’imitazione disegnata a mano. 1. Importa una volta il comportamento, poi CSS dei componenti e il tema predefinito. 2. Carica Inter 400, 500 e 600 e salva il file di ingresso/CSS completo. 3. Prova il contatore oltre il limite e correggi il risultato. 4. Rivedi, cambia dimensioni e aspetto, quindi modifica il testo per cancellare il risultato. ### Verifica il comportamento oltre il limite e il ripristino Incolla 150 caratteri normali nel risultato e verifica che venga segnalato il superamento del limite di dieci caratteri. La revisione deve essere rifiutata. Sostituisci il testo con un risultato breve e completa la revisione, poi cambia la modalità scura e le dimensioni di lettura senza perdere il risultato. Modifica il titolo e verifica che la vecchia revisione venga cancellata. Controlla il focus visibile e il ritorno a capo a ogni larghezza del viewport. ## Esempi di componenti del sistema di progettazione sistema di design Designsystemet ### main.js — studio completo dei campi nativi e del tema Editor completo, markup reale del contatore, controlli per aspetto e dimensioni e convalida locale della revisione. ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` Riferimento del codice - Select usa lo stile ds-input corrente all’interno di ds-field. Il feedback del contatore è gestito dall’observer nativo. ### digdir.css — composizione responsive originale Layout basato sul tema nativo, inclusa l’impostazione della funzione di Inter. ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` Riferimento del codice - Le modifiche al tema e alle dimensioni mantengono i valori; solo le modifiche ai contenuti invalidano la revisione. ## Configurazione dell’agente del sistema di design Designsystemet ### Punto di partenza per l’implementazione Le relazioni native tra etichette, lo stato del contatore, il recupero dagli errori di convalida e le modifiche delle dimensioni nei temi chiaro e scuro sono stati verificati in un browser reale. ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### Un prompt per il tuo progetto ``` Crea l’editor del brief seguendo, nell’ordine corretto, il comportamento di Designsystemet 1.23.0/CSS/tema predefinito. Usa ds-field con un solo controllo nativo, gli effettivi attributi del contatore data-field e i pesi di Inter. Mantieni la revisione durante le modifiche all’aspetto e alle dimensioni, cancellala dopo le modifiche ai contenuti e applica la regola originale di 140 caratteri senza troncare il testo incollato. ``` ## Fonti e ambito del sistema di design Designsystemet Un editor locale realizzato da OpenDesign con Designsystemet CSS e il comportamento web 1.23.0. Il tema predefinito e l’osservatore dei campi sono nativi; il contenuto del brief, il limite di 140 caratteri e il flusso di revisione sono originali. - Configurazione e ordine del tema Comportamento nativo, CSS, tema e configurazione dei font. - Fondamenti del tema Punti di accesso per dimensioni, colori e tipografia. - Implementazione pubblica Osservatore ds-field con versione e tema generato. - Ambito del sistema Ambito condiviso di componenti e linee guida. ## Risorse correlate al sistema di design Designsystemet ### DSFR Esamina la tipografia, la griglia e l’accordion concreti del sistema dello Stato francese API nel suo contesto istituzionale. Confronta il comportamento dei pannelli informativi collegati e indipendenti in un esempio didattico chiaramente neutrale. ### Europa Component Library Esamina i ruoli cromatici, tipografici e di spaziatura EC di Europa attraverso un brief completo con accordion nativo, inclusi l’uso da tastiera, l’apertura di tutti i pannelli e un’alternativa leggibile senza JavaScript. ### gov.cz sistema di design Esplora i ruoli cromatici reali, gli slot delle schede e la paginazione nativa di Gov Design System CE attraverso un toolkit di lettura completo con sei risorse e gestione esplicita del focus e dello stato della pagina. - [Riferimento per l’implementazione](https://designsystemet.no/en/fundamentals/code/setup) - [Fonte](https://github.com/digdir/designsystemet) - [Riferimento del codice](https://designsystemet.no/en/fundamentals/code/setup) - [Configurazione e ordine del tema Comportamento nativo, CSS, tema e configurazione dei font.](https://designsystemet.no/en/fundamentals/code/setup) - [Fondamenti del tema Punti di accesso per dimensioni, colori e tipografia.](https://designsystemet.no/en/fundamentals) - [Implementazione pubblica Osservatore ds-field con versione e tema generato.](https://github.com/digdir/designsystemet) - [Ambito del sistema Ambito condiviso di componenti e linee guida.](https://designsystemet.no/en/intro)