# Sistema di design gov.cz ## Anteprima dell’interfaccia sistema di design gov.cz Esplora sei risorse originali distribuite su due pagine, apri una scheda di lettura e torna all’azione. ## Riferimento sistema di design gov.cz Primitive cromatiche e alias semantici di tokens.css di @gov-design-system-ce/styles 4.7.1. L’anteprima usa gli stili pubblicati e il pacchetto Roboto. ### Primitive primarie e neutre | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --color-primary-50 | rgb(242, 246, 252) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-primary-100 | rgb(226, 238, 248) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-primary-600 | rgb(0, 70, 155) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-primary-700 | rgb(14, 53, 120) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-primary-800 | rgb(16, 38, 87) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-secondary-600 | rgb(250, 180, 19) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-neutral-0 | rgb(255, 255, 255) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-neutral-50 | rgb(246, 246, 246) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | | --color-neutral-950 | rgb(38, 38, 38) | Valori delle primitive pubblicati nella versione 4.7.1. Di norma, l’applicazione dovrebbe usare il ruolo semantico corrispondente. | ### Ruoli per lettura e feedback | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --text-primary | var(--color-neutral-950) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --text-secondary | var(--color-neutral-700) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --text-primary-color | var(--color-primary-600) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --text-white | var(--color-neutral-0) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --text-status-error | var(--color-error-700) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --text-status-success | var(--color-success-700) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --status-focus | var(--color-focus-600) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --status-warning | var(--color-warning-400) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | | --status-error | var(--color-error-600) | Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato. | ### Stati del pulsante primario | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --button-solid-primary | var(--color-primary-600) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | | --button-solid-primary-hover | var(--color-primary-700) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | | --button-solid-primary-active | var(--color-primary-800) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | | --button-solid-disabled | var(--color-neutral-200) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | | --button-outlined-primary | var(--color-primary-50) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | | --button-outlined-primary-hover | var(--color-primary-100) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | | --button-outlined-primary-active | var(--color-primary-200) | Token di stato effettivamente usati dagli stili pubblicati del pulsante. Mantieni distinti gli stati disabilitato, hover e attivo. | ## Guida completa sistema di design gov.cz 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. ## Fondamenti di Gov CE e ordine degli asset sistema di design gov.cz ### Mantieni allineate le versioni dei pacchetti > Questo esempio fissa componenti, stili, icone e font alla versione 4.7.1. I cinque fogli di stile fondamentali vengono caricati nell’ordine pubblicato. Hanno responsabilità diverse: le sole variabili non applicano stili a una card e la sola registrazione di un elemento personalizzato non include il componente globale CSS. L’entry point completo include tutti e cinque i fogli prima del piccolo livello di composizione originale. ### Inizializza la configurazione prima di registrare i componenti Il percorso delle icone viene configurato prima che siano eseguiti i moduli di entry point dei componenti importati dinamicamente. L’ordine è importante perché pagination include le icone delle frecce tra le proprie dipendenze. Copia l’intera directory delle icone nel percorso pubblico configurato, mantenendone le sottodirectory. Il buon esito di un import JavaScript non dimostra che le richieste separate delle icone siano riuscite. ## Riferimenti ai colori semantici e agli stati sistema di design gov.cz ### Associa il colore a un ruolo Il riferimento distingue la primitiva blu primaria dagli alias per testo, focus e stati del pulsante. Usare lo stesso blu apparente ovunque cancellerebbe queste distinzioni. Il kit di strumenti usa i pulsanti primari a tinta unita ufficiali e lascia che il foglio di stile del componente ne determini l’aspetto negli stati attivo, hover e disabilitato. Solo il layout circostante della raccolta è originale CSS. ### Mantieni visibili la tipografia e il contesto dei contenuti Roboto proviene dal pacchetto di font abbinato. Le card presentano titoli brevi e orientati all’azione, una riga di metadati e un riepilogo prima dell’azione di lettura. I testi delle sei risorse sono materiale originale di esercitazione OpenDesign, non istruzioni ufficiali tradotte del governo ceco. Servono a mostrare la gerarchia e un’interazione locale completa, senza far passare l’esempio per un servizio governativo. ## Slot delle card e azioni di lettura sistema di design gov.cz ### Inserisci il titolo nello slot previsto Ogni gov-card riceve un titolo nello slot headline. Metadati, descrizione e pulsante ne costituiscono il contenuto. L’azione ha un aria-label che include il titolo della risorsa, così gli assistivi distinguono i pulsanti «Leggi la risorsa» ripetuti. Il componente trasferisce gli attributi ARIA all’elemento interattivo interno; un attributo accessible-label inventato non avrebbe lo stesso effetto. ### Mantieni il layout al di fuori del contratto del componente Una griglia CSS a tre colonne diventa a colonna singola sugli schermi stretti. La griglia e il relativo breakpoint sono stati creati per questo esempio: non sono proprietà ufficiali aggiuntive della card. Nell’anteprima, la larghezza minima globale del body di 320px viene inoltre rimossa all’interno del contenitore incorporato molto stretto. Questo intervento limitato sulla composizione mantiene gli stili del componente e impedisce alla pagina contenitore di traboccare. ## Paginazione nativa e stato dell’applicazione sistema di design gov.cz ### Leggi i dati dell’evento nativo gov-pagination riceve total=6 e page-size=3. Il suo evento gov-page fornisce detail.pagination.currentPage, che seleziona i tre record corrispondenti. Il componente di paginazione gestisce i controlli della pagina corrente; l’applicazione gestisce il set di dati e la porzione visibile. Tutte le etichette di navigazione predefinite in ceco vengono sostituite esplicitamente con etichette in inglese per questo esempio in inglese. - total indica il numero di record, non il numero di pagine. - page-size determina la lunghezza della porzione. - gov-page espone detail.pagination.currentPage. - Le etichette di navigazione devono corrispondere alla lingua dell’interfaccia. ### Evita di mostrare schede obsolete dopo un cambio di pagina Cambiare pagina chiude la risorsa attualmente aperta, così che i dettagli non sembrino appartenere a un insieme di schede diverso. Il conteggio indica Risorse 1–3 o 4–6 di 6. Si tratta di una paginazione locale su un insieme di dati piccolo e noto: non ci sono indicatori di caricamento artificiosi né si dichiara una richiesta al server. Un’implementazione basata su server richiederebbe una gestione distinta di attesa, errore e risultati. ## Sistema di design gov.cz Comportamento del focus durante la lettura e al ritorno ### Sposta il focus sulla risorsa aperta L’azione di lettura mostra i dettagli in un’area locale e sposta il focus sul titolo. In questo modo, gli utenti che usano la tastiera raggiungono chiaramente i nuovi contenuti aggiunti sotto la raccolta. Il titolo, reso focalizzabile con tabindex=-1, può ricevere il focus dall’applicazione senza aggiungere una tappa alla normale sequenza di Tab. Il contenuto aperto resta testo ordinario e leggibile. ### Torna all’azione che l’ha aperta Torna alle risorse nasconde i dettagli e riporta il focus sul pulsante interno che li ha aperti. Non è una finestra modale: il focus non è intrappolato, non vengono aggiunte semantiche di dialogo e la pagina non viene oscurata. La raccolta originale resta disponibile. Aprire, chiudere e cambiare pagina più volte permette di verificare se lo stato dell’applicazione e il focus seguono la stessa risorsa. ## Sistema di design gov.cz Integrazione locale completa ### Usa insieme i file forniti Questa voce contiene il codice completo dell’applicazione, inclusi tutti e sei i record, la creazione delle schede, la gestione della paginazione e il focus sui dettagli. Il foglio di stile contiene solo la composizione originale. Installa i quattro pacchetti fissati a una versione specifica, copia le icone e salva entrambi i file in un progetto Vite vanilla. L’anteprima nel browser integra esattamente queste voci dei componenti e gli asset dei font locali. 1. Installa tutti e quattro i pacchetti Gov CE alla versione 4.7.1. 2. Copia le icone in public/assets/gov-cz-icons mantenendo le sottocartelle. 3. Salva JavaScript completo e la composizione CSS in src. 4. Avvia l’app e verifica la paginazione, il ripristino del focus e le richieste delle icone. ### Verifica le interazioni e il caricamento degli asset Apri la prima risorsa, torna al relativo pulsante, passa alla seconda pagina e leggi un’altra risorsa. Verifica che all’inizio i controlli prima/precedente siano disabilitati e che alla fine lo siano quelli successiva/ultima. Controlla lo stesso flusso a larghezza desktop e telefono, anche in un’area incorporata più stretta. Nel pannello di rete verifica la presenza di eventuali icone mancanti e degli errori JavaScript. ## Esempi di componenti del sistema di progettazione sistema di design gov.cz ### main.js — toolkit completo con paginazione Dati completi, registrazione dei componenti nativi, suddivisione delle pagine e focus per la lettura. ``` import '@gov-design-system-ce/styles/tokens.css'; import '@gov-design-system-ce/styles/styles.css'; import '@gov-design-system-ce/styles/layout.css'; import '@gov-design-system-ce/styles/components.css'; import '@gov-design-system-ce/styles/animations.css'; import '@gov-design-system-ce/fonts/lib/roboto.css'; import './gov-cz.css'; window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'}; const resources=[ {title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'}, {title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'}, {title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'}, {title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'}, {title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'}, {title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'} ]; document.querySelector('#root').innerHTML=`

OPENDESIGN · ORIGINAL SERVICE TOOLKIT

Small steps toward a clearer service

Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.

`; await import('@gov-design-system-ce/components/dist/components/gov-card.js'); await import('@gov-design-system-ce/components/dist/components/gov-pagination.js'); let page=1,opened=-1; const cards=document.querySelector('#cards'), detail=document.querySelector('#detail'); function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`

${r.title}

${r.kind} · ${r.time}

${r.summary}

Read resource`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;} cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();}); document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();}); document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render(); ``` Riferimento del codice - La configurazione viene eseguita prima delle importazioni delle voci dei componenti. I nomi ARIA usano aria-label. ### gov-cz.css — composizione originale della raccolta Griglia reattiva e dettagli locali leggibili, con gli stili nativi dei componenti. ``` body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}} html,body{min-width:0}.eyebrow{overflow-wrap:anywhere} ``` Riferimento del codice - Il layout a griglia e la modifica della larghezza minima per l’incorporamento sono CSS originali dell’applicazione. ## Sistema di design gov.cz Configurazione dell’agente ### Punto di partenza per l’implementazione Mantieni intatte le sottocartelle delle icone. Questo esempio importa direttamente i moduli delle voci dei componenti e non richiede di copiare un runtime per il caricamento differito. ``` npm create vite@latest gov-toolkit -- --template vanilla cd gov-toolkit npm install npm install @gov-design-system-ce/components@4.7.1 @gov-design-system-ce/styles@4.7.1 @gov-design-system-ce/icons@4.7.1 @gov-design-system-ce/fonts@4.7.1 mkdir -p public/assets/gov-cz-icons cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/ # Save the supplied files as src/main.js and src/gov-cz.css. # The root index.html must contain
and load /src/main.js. npm run dev ``` ### Un prompt per il tuo progetto ``` Crea il toolkit Gov CE 4.7.1 fornito usando schede, pulsanti e paginazione nativi. Mantieni l’ordine effettivo dei fogli di stile e la configurazione del percorso delle icone. Usa gov-page detail.pagination.currentPage, etichette ARIA significative in inglese, chiudi i dettagli non più pertinenti al cambio di pagina e ripristina il focus dopo la lettura. Mantieni l’attribuzione originale dei contenuti di esempio. ``` ## Sistema di design gov.cz Fonti e ambito Studio originale di un toolkit di servizi OpenDesign basato su componenti, stili, icone e font di Gov Design System CE 4.7.1. I testi di esempio e il comportamento della raccolta sono originali; non si tratta di un servizio governativo ufficiale. - Integrazione HTML Ordine degli asset, registrazione e composizione dei componenti. - Paginazione Controlli di pagina e semantica di navigazione. - Card Contenuto della scheda e slot del titolo. - Token dei colori Ruoli cromatici primitivi e semantici. - Tipografia Gerarchia dei font e del testo. ## Sistema di design gov.cz Risorse correlate ### GOV.UK sistema di design Crea un percorso GOV.UK di domande e verifica delle risposte con la scala tipografica v6 corrente, spaziatura responsiva, colori funzionali, convalida collegata e un’integrazione Frontend concreta. ### HarvardSites sistema di design Scopri HarvardSites come piattaforma editoriale: confronta gli stili dei siti, scegli abbinamenti di font documentati e componi pagine universitarie con componenti di contenuto progettati per lo scopo. ### Helsinki Componi gruppi di selezione HDS nativi, colori semantici per i messaggi e riepiloghi degli errori collegati in un flusso completo, eseguibile in locale, di revisione e correzione. - [Riferimento per l’implementazione](https://designsystem.gov.cz/komponenty/pagination) - [Fonte](https://designsystem.gov.cz/principy/barevne-tokeny) - [Riferimento del codice](https://designsystem.gov.cz/zaciname/developers/html) - [Riferimento del codice](https://designsystem.gov.cz/komponenty/card) - [Integrazione HTML Ordine degli asset, registrazione e composizione dei componenti.](https://designsystem.gov.cz/zaciname/developers/html) - [Paginazione Controlli di pagina e semantica di navigazione.](https://designsystem.gov.cz/komponenty/pagination) - [Card Contenuto della scheda e slot del titolo.](https://designsystem.gov.cz/komponenty/card) - [Token dei colori Ruoli cromatici primitivi e semantici.](https://designsystem.gov.cz/principy/barevne-tokeny) - [Tipografia Gerarchia dei font e del testo.](https://designsystem.gov.cz/principy/typografie)