# Sistema di design Scottish Government

## Anteprima dell'interfaccia sistema di design Scottish Government

Prova una nota lunga, riducila sotto il limite di caratteri, visualizzane l'anteprima in locale, modificala e reimposta il campo.

## Riferimento di design sistema di design Scottish Government

Scottish Government Design System 4.3.0: CSS e JavaScript pubblicati, con le indicazioni ufficiali più recenti su tipografia, colori e griglia. Nell'anteprima vengono eseguiti CharacterCount nativo e stili. Arial è un fallback esplicito per l'esempio indipendente; le direzioni del governo scozzese devono usare Roboto. Le risorse del pacchetto corrente differiscono dagli esempi di installazione meno recenti.

### Tipografia adattiva

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Regular400; gli stili grandi nativi iniziano a48rem. |
| H1 | 30/40px →44/56px | Bold700. |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | Usa livelli semantici per i titoli; ds_h3 può modificarne l'aspetto senza cambiarne il livello. |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Bold700. |
| Lead | 19/32px →24/40px | Light300; un solo testo introduttivo conciso per pagina. |
| Font | Roboto | Obbligatorio per le direzioni e le aree di policy del governo scozzese; la demo indipendente usa esplicitamente Arial. |
### Ruoli colore Sass

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | Blu primario; hover dei collegamenti #00437e. |
| $ds_colour__text | #1a1a1a | Testo secondario #5e5e5e. |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | Mantieni questi ruoli per lo stato attivo anche in un tema con brand adattato. |
| $ds_colour__state--negative | #d32205 | Messaggi di errore per i campi oltre il limite. |
| $ds_colour__state--positive | #1a7032 | Messaggi positivi; non indicano che il testo locale sia stato inviato. |
| $ds_colour__border | #b3b3b3 | Alternative Strong #1a1a1a e Faint #ebebeb. |
### Utility di spaziatura adattiva

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | Invariata oltre48rem. |
| ds_!_margin-bottom--4 | 24px →32px | Da piccola a grande a48rem. |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | Adattiva, non basata su un unico valore di spaziatura fisso. |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | Usala per una separazione maggiore; evita di applicare ovunque la spaziatura massima. |
### Griglia e larghezze interne utilizzabili

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | Le colonne aumentano da2→6→12, poi restano12. |
| Content width at medium/large/xl | 736 /928 /1120px | Larghezza interna della griglia pubblicata; differisce dalla larghezza esterna del contenitore. |
| Native ds_wrapper box | 768 /960 /1152px | Include16px di padding su ciascun lato nella versione CSS. |
| Gutter / side padding | 32px /16px | Sotto768px il contenitore è fluido. |
| Reading width in specimen | 42rem maximum | Scelta applicativa all'interno del contenitore nativo, non un token universale ufficiale. |
### Specifiche di CharacterCount

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Root | data-module="ds-character-count" | Contiene un input o una textarea nativi. |
| Limit | maxlength="200" | Usato e poi rimosso durante l'inizializzazione; il testo oltre il limite resta modificabile. |
| Alternative | data-maxlength on root | Nessun fallback maxlength nativo se JavaScript non è disponibile. |
| Threshold | data-threshold="80" | Arrotonda limite×.8; con200 compare a160 caratteri. |
| Error state | ds_input--error;aria-invalid="true" | Applicato quando il conteggio è negativo; abbinato a un conteggio visibile dei caratteri in eccesso. |
| Announcements | Separate hidden message;1000ms delay | aria-describedby conserva il suggerimento esistente e aggiunge gli ID dei messaggi generati. |
| Counting unit | JavaScript value.length | Unità di codice UTF-16; non garantisce un conteggio delle emoji basato sui grafemi. |
## Guida completa sistema di design Scottish Government

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 Scottish Government Un pratico riferimento per l'inserimento del testo

### Permetti di recuperare il lavoro svolto

> L'interazione fondamentale è una guida non distruttiva alla lunghezza. L'utente può incollare una nota lunga sulle esigenze di accessibilità, vedere quanto deve modificare e conservare tutto il testo mentre lo riduce. Il contatore nativo mostra i caratteri rimanenti, lo stile per il superamento del limite e il messaggio ritardato per le tecnologie assistive. L'applicazione decide separatamente se la nota è abbastanza valida da visualizzare in anteprima.

Questo esempio di nota per un workshop è originale e non rappresenta un servizio del governo scozzese né una richiesta di informazioni mediche. Non contiene elementi grafici identificativi, archiviazione o invio. Il suggerimento del campo chiede di indicare un'esigenza pratica di accessibilità e sconsiglia di fornire dettagli privati, così che il compito sia comprensibile senza riprendere una transazione ufficiale.

Leggi la specifica di supporto

## Sistema di design Scottish Government Roboto e gerarchia adattiva

### Rispetta le metriche pubblicate

Il sistema richiede Roboto per le direzioni e le aree di policy del governo scozzese. Le altre organizzazioni che adottano il sistema possono scegliere un font leggibile diverso, mantenendo le regole per dimensioni e interlinea e verificando il risultato. L'esempio autonomo indica esplicitamente Arial come fallback; non afferma che un font web mancante sia Roboto.

Il testo del corpo passa da 16/24px a 19/32px e il titolo principale da 30/40px a 44/56px. Entrambe le modifiche avvengono nel foglio di stile nativo per schermi più grandi. La classe ds_h 3 modifica la dimensione visiva senza richiedere un titolo semantico di terzo livello. La distinzione è importante quando un modulo breve richiede un titolo di sezione più piccolo, ma non un'interruzione artificiale della struttura del documento.

Leggi la specifica di supporto

## Sistema di design Scottish Government Uno stato attivo distintivo

### Distingui stato attivo, errore e completamento

Il blu svolge il ruolo principale del brand e dei collegamenti, il nero quello del testo e il giallo quello dello stato attivo. Sono impostazioni Sass denominate, non una raccolta inventata di proprietà personalizzate CSS. L'adattamento del brand avviene prima di caricare il sistema, tramite il relativo modulo di impostazioni. Le indicazioni ufficiali mantengono la palette dello stato attivo anche quando cambiano gli altri colori del brand.

Il contatore dei caratteri introduce il rosso negativo solo quando si supera la lunghezza consentita. Un secondo errore applicativo per un campo vuoto può usare lo stesso ruolo negativo, ma il messaggio deve indicare che manca una risposta, non che è stato superato il limite di caratteri. L'anteprima non usa mai il verde positivo per suggerire che un invio remoto sia riuscito.

- Mantieni un contorno visibile dello stato attivo da tastiera su textarea e pulsanti di azione.

- Descrivi il superamento del limite con il testo, non solo con un bordo rosso.

- Collega i riepiloghi degli errori e i suggerimenti dei campi a un ID stabile del campo.

Leggi la specifica di supporto

## Sistema di design Scottish Government Larghezza del contenitore e spaziatura

### Evita di confondere le larghezze esterna e interna

La tabella ufficiale della griglia descrive le larghezze interne dei contenuti: 736, 928 e 1120px rispettivamente per i breakpoint medio, grande ed extra-large. I corrispondenti contenitori nativi misurano 768, 960 e 1152px, perché includono 16px di padding laterale. Questa distinzione evita che chi adotta il sistema annidi le due larghezze e restringa accidentalmente il layout due volte.

L’anteprima colloca una colonna di lettura da 42rem all’interno del contenitore nativo. Questo limite massimo è una scelta applicativa adatta a un modulo breve, non una nuova impostazione del sistema. Sotto i 768px, il contenitore diventa fluido e lo stesso spazio laterale di 16px protegge l’area di testo dal bordo dello schermo.

Le utility di spaziatura sono responsive. Ad esempio, ds_!_margin-bottom--4 passa da 24 a 32px a 48rem; anche i livelli superiori aumentano. Il riferimento riporta entrambi i valori, così da non scambiare una schermata desktop per un’intercapedine fissa e universale.

Leggi la specifica di supporto

## Sistema di design Scottish Government Un campo con conteggio caratteri nativo

### Inizia con una vera area di testo

L’elemento radice ds_question include data-module e la soglia percentuale opzionale. L’etichetta associata e il suggerimento sono normali elementi accessibili HTML. Un’area di testo con maxlength offre un utile fallback senza JavaScript. Dopo il potenziamento, il componente legge quel valore e rimuove il limite rigido, così il testo incollato non viene troncato senza avviso.

Per un campo da 200 caratteri con una soglia dell’80%, il conteggio viene mostrato a 160 caratteri. Il testo di esempio nella pagina pubblica del componente e l’esempio di codice da 250 caratteri non usano gli stessi valori: questo esempio mantiene un unico limite coerente. Senza JavaScript, il suggerimento visibile indica comunque il limite e si applica maxlength nativo.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Riferimento del codice

Leggi la specifica di supporto

## Sistema di design Scottish Government Di cosa si occupa il componente nativo

### Messaggi, tempistiche e conteggio

L’implementazione con versione specifica crea un messaggio visibile con aria-hidden e un messaggio separato, nascosto, per le tecnologie assistive. Aggiunge gli ID pertinenti all’aria-describedby esistente invece di eliminare il suggerimento scritto. Attende 1000ms prima di aggiornare l’annuncio nascosto, così il feedback durante la digitazione può concludersi per primo.

La lunghezza effettiva deriva da JavaScript string.value.length: conta le unità di codice UTF-16. Un simbolo al di fuori del piano multilingue di base può occupare due unità e un’emoji composta può occuparne di più. Se un servizio ha bisogno di una diversa regola di conteggio, deve allineare il contatore e la convalida lato server, anziché attribuire a questo componente un conteggio basato sui caratteri percepiti dalle persone.

Il componente ascolta gli eventi input. Se un’applicazione compila un esempio o svuota il campo tramite codice, deve inviare anche un evento input. Le azioni di esempio e di ripristino della demo lo fanno. Un commento nel codice sorgente menziona il polling del riconoscimento vocale, ma l’implementazione esaminata non imposta un intervallo di polling; per questo la guida non dichiara che tale comportamento sia supportato.

Leggi la specifica di supporto

## Sistema di design Scottish Government Usa i percorsi della versione corrente

### Caricamento del modulo e inizializzazione circoscritta

Il pacchetto corrente è @scottish-government/design-system. La versione 4.3.0 colloca il foglio di stile compilato in dist/css/design-system.min.css, mentre un paragrafo di installazione più datato fa ancora riferimento a dist/styles/main.css. Questa procedura usa l’asset effettivamente pubblicato. Lo script esporta un modulo ES, quindi va importato con type="module" anziché con un normale tag script classico.

Crea un’istanza di CharacterCount per questo campo e chiama init. DS.initAll è disponibile anche per le pagine con più componenti, ma questo esempio inizializza solo il contatore necessario. Non è configurato alcun servizio di analisi aggiuntivo. La convalida lato server resta separata dalla libreria: un contatore aiuta a modificare il testo, ma non è un meccanismo di controllo.

1. Installa il pacchetto fissato alla versione 4.3.0 e copia il CSS compilato e il modulo in una directory locale per gli asset.

2. Inserisci nella pagina la struttura completa di etichetta, suggerimento e area di testo prima di importare il modulo.

3. Inizializza il contatore una sola volta, quindi collega le azioni di anteprima e ripristino dell’applicazione usando normali eventi input.

Leggi la specifica di supporto

## Sistema di design Scottish Government Verifica il recupero dopo il superamento del limite

### Non verificare solo un campo vuoto

Parti da un valore inferiore alla soglia, supera i 160 caratteri e poi incollane più di 200. Il testo completo deve restare nell’area di testo, mentre appare un messaggio di superamento del limite e aria-invalid diventa true. Riduci il testo sotto il limite e verifica che sia la classe di errore sia lo stato di non validità vengano rimossi.

L’azione Anteprima dell’applicazione blocca le note vuote o oltre il limite mostrando un errore collegato. Una nota valida appare in un’anteprima locale tramite textContent, perciò il markup digitato viene visualizzato come testo e non interpretato. Modifica nota riporta alla stessa area di testo, mantenendo il valore. Ripristina la svuota tramite un evento input, così anche il conteggio nativo viene azzerato.

A 390px, controlla l’andata a capo del titolo, l’area di testo a larghezza piena, il comportamento dei pulsanti quando vanno a capo e il riepilogo degli errori. Alle larghezze maggiori, la colonna di lettura non dovrebbe trasformarsi in un paragrafo troppo ampio. Questi controlli verificano questo esempio; un servizio reale richiede comunque ricerca con gli utenti, prove dei font e una revisione con tecnologie assistive nel contesto definitivo.

Leggi la specifica di supporto

## Sistema di design Scottish Government Esempi di componenti del sistema di design

### Un limite di caratteri non distruttivo

Un’etichetta, un suggerimento, un’area di testo e una soglia dell’80% con potenziamento progressivo.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Riferimento del codice

### Asset compilati della versione corrente 4.3.0

Percorso CSS verificato per versione e inizializzazione del modulo ES.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

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.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
```

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.

## Sistema di design Scottish Government Configurazione dell’agente

### Punto di partenza per l’implementazione

La demo locale esegue il modulo CSS 4.3.0 e CharacterCount effettivi. Il fallback dei font è esplicito; non viene utilizzato il percorso dist/styles meno recente della pagina di installazione. Lo ZIP completo con l’esempio funzionante, disponibile in Sources, include anche le dipendenze esatte per l’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/scottish-government.html. Non aprire gli esempi basati su moduli tramite file://.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

### Un prompt per il tuo progetto

```
Usa il componente CharacterCount del Scottish Government Design System 4.3.0 in un modulo autonomo per una nota sulle esigenze di accessibilità. Fissa i percorsi verificati dist/css/design-system.min.css e dist/scripts/design-system.js per il modulo ES. Fornisci un’area di testo da 200 caratteri con soglia dell’80%, suggerimento associato e inizializzazione circoscritta del componente. Conserva il testo incollato che supera il limite, lascia alla libreria gli aggiornamenti del conteggio nativo e di ARIA e aggiungi una convalida locale separata, oltre a un’anteprima, una modifica e un ripristino sicuri che mostrino solo testo. Le operazioni di esempio e ripristino eseguite tramite codice devono generare eventi input. Usa tipografia e spaziatura responsive pubblicate, specifica esplicitamente la scelta del font e non simulare identità ufficiali o invii.
```

## Sistema di design Scottish Government Fonti e ambito

Riferimento per un’implementazione autonoma. Le direzioni del governo scozzese devono usare Roboto; questo esempio senza marchio specifica Arial come fallback. Testi originali; nessuna memorizzazione, trasmissione o affiliazione ufficiale. La licenza del codice e i permessi per gli asset grafici governativi sono aspetti distinti.

- Tipo Regole tipografiche e per l’adozione dei font.

- Colore Ruoli della palette Sass e limiti dei temi.

- Griglia Larghezze interne della griglia, colonne e margini interni.

- Conteggio Limiti non distruttivi e comportamento delle soglie.

- JS API di inizializzazione e potenziamento.

- Installazione Installazione del pacchetto; confronto con i percorsi pubblicati correnti.

- Focus Indicazioni per un focus da tastiera visibile.

- Domanda Struttura per raggruppare le domande.

- Errore Indicazioni per il recupero e il riepilogo degli errori.

- 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.

## Sistema di design Scottish Government Risorse correlate

### Singapore Government sistema di design

Usa gli attuali Web Components di SGDS con token responsive reali, temi giorno e notte e quantità native con limiti, per mantenere sincronizzato un piano locale.

### Decanter

Componi pagine editoriali accademiche con il preset Tailwind di Decanter, la scala tipografica responsive e margini fluidi. Esplora schede di eventi originali con filtri tematici funzionanti e abstract espandibili.

### 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.


- [Riferimento per l’implementazione](https://designsystem.gov.scot/components/character-count)
- [Fonte](https://designsystem.gov.scot/styles/typography)
- [Fonte](https://designsystem.gov.scot/styles/colour)
- [Fonte](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [Fonte](https://designsystem.gov.scot/styles/column-grid)
- [Fonte](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Leggi la specifica di supporto](https://designsystem.gov.scot/components/character-count)
- [Leggi la specifica di supporto](https://designsystem.gov.scot/styles/typography)
- [Leggi la specifica di supporto](https://designsystem.gov.scot/styles/colour)
- [Leggi la specifica di supporto](https://designsystem.gov.scot/styles/column-grid)
- [Riferimento del codice](https://designsystem.gov.scot/components/character-count)
- [Leggi la specifica di supporto](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Leggi la specifica di supporto](https://designsystem.gov.scot/get-started/javascript)
- [Leggi la specifica di supporto](https://designsystem.gov.scot/components/error-summary)
- [Riferimento del codice](https://designsystem.gov.scot/get-started/javascript)
- [Tipo Regole tipografiche e per l’adozione dei font.](https://designsystem.gov.scot/styles/typography)
- [Colore Ruoli della palette Sass e limiti dei temi.](https://designsystem.gov.scot/styles/colour)
- [Griglia Larghezze interne della griglia, colonne e margini interni.](https://designsystem.gov.scot/styles/column-grid)
- [Conteggio Limiti non distruttivi e comportamento delle soglie.](https://designsystem.gov.scot/components/character-count)
- [JS API di inizializzazione e potenziamento.](https://designsystem.gov.scot/get-started/javascript)
- [Installazione Installazione del pacchetto; confronto con i percorsi pubblicati correnti.](https://designsystem.gov.scot/get-started/installation)
- [Focus Indicazioni per un focus da tastiera visibile.](https://designsystem.gov.scot/styles/focus-states)
- [Domanda Struttura per raggruppare le domande.](https://designsystem.gov.scot/components/question)
- [Errore Indicazioni per il recupero e il riepilogo degli errori.](https://designsystem.gov.scot/components/error-summary)