# sistema de design .italia

## sistema de design .italia Prévia da interface

Percorra um plano local real de três etapas, recupere-se de uma escolha vazia e volte sem perder sua observação.

## sistema de design .italia Referência de design

Pacote instalado e documentação oficial de Bootstrap Italia 2.18.3; CSS nativos e renderização de fontes verificados em três larguras.

### Tipografia e fontes

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Main family | Titillium Web | Pesos WOFF2 nativos 400/600/700 incluídos na prévia. |
| Long reading / code | Lora / Roboto Mono | font-serif e font-monospace; não use monospace em toda a interface. |
| Body | 16px / 1.5 | Base padrão desde a revisão tipográfica 2.7. |
| H1 mobile | 40px / 48px | CSS 2.18.3 real abaixo de 576px. |
| H1 from 576px | 48px / 56px | CSS nativo medido; a tabela da documentação ainda indica entrelinha de 60px. |
| Responsive typography | 576px threshold | Diferente do limite compacto de 992px do Stepper. |
### Tokens semânticos nativos

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bs-primary | hsl(210,100%,40%) = #0066cc | Cor da ação primária e dos links. |
| --bs-body-color | hsl(0,0%,10%) | Cor padrão para leitura. |
| --bs-success | hsl(160,100%,25%) | Indica sucesso, não um estado de conclusão automático. |
| --bs-danger | hsl(350,60%,50%) | Indica erro ou ação destrutiva. |
| --bs-warning | hsl(36,100%,30%) | Função de aviso, distinta do amarelo da paleta. |
| --bs-border-radius | 4px | Também existem variantes pequenas de 2px e grandes de 8px. |
### Espaçamento e layout

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | Com a raiz padrão de 16px; por exemplo, p-3=1rem e p-5=3rem. |
| Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | De sm a xxl. |
| Container maxima | 540 / 720 / 960 / 1176 / 1320px | CSS Italia real; xl difere do valor padrão de 1140px de Bootstrap. |
| Preview width | 900px maximum | Opção da aplicação para um plano local curto, não um token oficial de contêiner. |
| Stepper compact mode | Below 992px | Somente o rótulo ativo e o índice textual ficam visíveis. |
### Estrutura do Stepper

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Root/header | steppers / steppers-header | O cabeçalho contém uma lista de etapas. |
| Stage states | confirmed / active | O código da aplicação deve atualizá-las após a validação. |
| Mobile index | steppers-index | Mantenha n/total sincronizado com a etapa ativa. |
| Body | steppers-content; aria-live=polite | Anuncia mudanças no conteúdo de página única. |
| Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | As classes definem a apresentação, não o encaminhamento automático do formulário. |
## sistema de design .italia Guia completo

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## sistema de design .italia Sistema e implementação

### Designers Italia por meio de sua biblioteca de código

> Designers Italia vai além de um pacote CSS: inclui orientações de design de serviços, kits e recursos de implementação. Este exemplo se concentra na implementação documentada de Bootstrap Italia, fixada na versão 2.18.3. Ele não sugere que a instalação da biblioteca conclua o design de um serviço público nem que atenda a todos os requisitos de um site municipal.

Bootstrap Italia inclui e personaliza Bootstrap 5.2.3 na versão analisada. Não adicione outro pacote padrão de Bootstrap por cima. A prévia usa seus CSS nativos e arquivos de fonte Titillium Web fornecidos localmente, com um fluxo original de planejamento de visita à biblioteca em três etapas.

Consulte a especificação de apoio

## sistema de design .italia Tipografia e valores exatos

### Cada fonte tem uma função específica

Titillium Web é a família tipográfica padrão da interface. Lora é a opção serifada para textos mais longos, e Roboto Mono é usada em código ou conteúdo monoespaçado. A prévia carrega os pesos reais de Titillium Web que utiliza e mantém a licença da fonte, em vez de substituí-la silenciosamente por uma fonte do sistema.

O texto do corpo permanece em 16px. Os títulos mudam em 576px: em uma tela pequena, H1 tem 40px e entrelinha de 48px; depois, passa a 48px e entrelinha de 56px na versão instalada de CSS. A tabela da documentação indica entrelinha de 60px para desktop; a tabela de referência aqui registra a versão analisada e explica a diferença, em vez de misturar duas fontes.

Consulte a especificação de apoio

## sistema de design .italia Etapas responsivas e espaçamento

### Dois pontos de quebra resolvem problemas diferentes

O limite da tipografia é 576px, enquanto o Stepper altera a apresentação do cabeçalho abaixo de 992px. Em telas compactas, o rótulo atual e o índice n/total continuam visíveis. Os nomes das outras etapas não são espremidos em colunas ilegíveis. Quem visita pelo celular ainda precisa de um anúncio da etapa atual, fornecido pelo exemplo por meio do foco no título e de um texto de estado acessível.

As classes utilitárias de espaçamento seguem a escala rem verificada: 4, 8, 16, 24 e 48px para os tamanhos de 1 a 5, considerando o tamanho padrão da raiz. Os limites máximos dos contêineres da grade incluem 1176px em xl, em vez do valor padrão de Bootstrap de 1140px, muitas vezes lembrado de forma equivocada. O plano independente usa um limite mais estreito, de 900px, como uma escolha explícita da aplicação.

Consulte a especificação de apoio

## sistema de design .italia Anatomia e responsabilidades do Stepper

### O cabeçalho não controla o fluxo de trabalho

A estrutura documentada separa steppers-header, steppers-content e steppers-nav. Os itens da lista do cabeçalho recebem as classes confirmed e active; o índice informa a posição. Os botões anterior e próximo recebem suas classes específicas. Essas classes descrevem a apresentação. Cabe à aplicação decidir se o formulário atual é válido e se é possível avançar para uma etapa posterior.

O exemplo usa seções comuns para cada etapa e mantém os controles no DOM, ocultando as seções inativas. Assim, ao voltar à etapa da observação de acesso, o texto permanece. A etapa de revisão lê os controles existentes; não os recria com base em um resultado presumido do servidor.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Referência de código

Consulte a especificação de apoio

## sistema de design .italia Validação e progresso significativo

### Avance somente após fazer a escolha obrigatória

O tipo de visita é obrigatório. Se a pessoa tentar continuar sem escolhê-lo, a primeira etapa permanece ativa, uma mensagem de erro específica é exibida e o primeiro botão de opção recebe o foco. Ao escolher um tipo e continuar, a primeira etapa é marcada como concluída. A observação é opcional e pode ficar em branco; nesse caso, a revisão informa que nenhuma observação foi adicionada.

O botão Voltar leva à etapa anterior sem apagar a seleção nem a observação. Começar de novo limpa deliberadamente ambos e retorna ao início. A tela final é chamada de plano local: ela nunca afirma que uma reserva foi enviada, aprovada ou armazenada.

1. Tente continuar sem selecionar um botão de opção e confira a mensagem de erro.

2. Escolha um tipo de visita, adicione uma observação curta e abra a revisão.

3. Volte à observação, confirme que o valor foi mantido e, depois, comece de novo para limpar o plano.

Consulte a especificação de apoio

## sistema de design .italia Estado acessível e foco

### Mantenha alinhadas a posição visual e a posição anunciada

O item ativo da lista recebe aria-current="step" e um rótulo da etapa atual oculto visualmente. As etapas anteriores recebem um texto de conclusão, além da classe confirmed. O índice numérico compacto fica oculto para tecnologias assistivas, pois o título atual e a semântica da etapa já indicam a posição; ele continua visível para orientação visual.

O corpo que muda usa aria-live="polite", conforme a orientação oficial para uma sequência de página única. O exemplo também move o foco para o novo título, oferecendo às pessoas que usam o teclado um ponto de início previsível para a leitura. Teste essa combinação com as tecnologias assistivas compatíveis para evitar anúncios repetitivos em formulários mais complexos.

- Use botões reais para mudar de etapa e desative o botão Voltar na primeira etapa.

- Mantenha os rótulos associados aos botões de opção e à área de texto; o texto do placeholder não substitui um rótulo.

- Indique em texto os estados atual e concluído, não apenas pela cor azul ou por um ícone.

Consulte a especificação de apoio

## sistema de design .italia Recursos e inicialização nativos

### CSS, fontes e JavaScript opcional

O pacote fornece CSS, um script incluído, fontes de origem e um sprite SVG. Este exemplo de Stepper precisa de CSS e das fontes escolhidas; a navegação faz parte da lógica da aplicação. Outros componentes usam data-bs-toggle ou os atributos de dados documentados para inicialização automática. Não combine a inicialização automática com uma segunda instância manual do mesmo componente.

Ao usar módulos, importe apenas os componentes necessários para a aplicação. A documentação oficial observa que os métodos de transição retornam antes do fim da transição e que as chamadas feitas durante uma transição podem ser ignoradas. Aguarde o evento de conclusão correspondente antes de encadear ações dependentes nesses componentes; este Stepper simples não inventa uma API de transição nativa.

Consulte a especificação de apoio

## sistema de design .italia Limites de integração

### Use o kit sem sugerir que o serviço foi concluído

A documentação da biblioteca recomenda manter a versão atualizada e desaconselha depender de uma CDN pública em produção. A configuração fixa a versão verificada, e o exemplo local inclui os próprios recursos e licenças. Um serviço real ainda precisa de conteúdo planejado, tratamento de dados, validação no servidor e uma confirmação de envio.

O exemplo mostra uma visita genérica a uma biblioteca, sem logotipo municipal nem insígnia oficial. É um exemplo didático de OpenDesign, não um serviço de uma autoridade pública. Mantenha essa distinção em qualquer protótipo para que uma tela de revisão visualmente refinada não seja confundida com um registro de solicitação real.

Consulte a especificação de apoio

## Exemplos de componentes do sistema de design sistema de design .italia

### Estrutura do Stepper na segunda etapa

Os estados confirmado e ativo, além do índice para dispositivos móveis, devem ser sincronizados pelo código da aplicação.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Referência de código

### Fluxo local completo de planejamento

CSS/fontes nativos, validação obrigatória dos botões de opção, nota opcional, revisão, voltar e reiniciar.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
```

Referência de código

## Configuração do agente sistema de design .italia

### Ponto de partida para implementação

Configuração nativa de CSS e das fontes. A navegação do Stepper é lógica da aplicação; a seguir, há um exemplo completo funcional. O ZIP do exemplo completo em Sources também inclui as dependências exatas da pré-visualização e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/designers-italia.html. Não abra exemplos baseados em módulos usando file://.

```
npm install bootstrap-italia@2.18.3
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
```

### Um prompt para seu projeto

```
Use Bootstrap Italia 2.18.3, CSS nativo e Titillium Web. Crie a estrutura documentada de steppers/cabeçalho/conteúdo/nav com estados ativo e confirmado e índice sincronizado para dispositivos móveis. Gerencie a validação e a navegação no código da aplicação, preserve os valores ao voltar e rotule o estado final de acordo com uma resposta real do backend. Não misture um segundo runtime de Bootstrap nem afirme que uma revisão local foi enviada.
```

## sistema de design .italia Fontes e escopo

Exemplo independente de OpenDesign com foco em Bootstrap Italia. Não representa uma autoridade pública nem um serviço real de agendamento.

- Instalação e recursos CSS, módulos, pacote, fontes e limites do runtime.

- Steppers Estrutura nativa, estados, modo compacto e região dinâmica.

- Tipografia Famílias tipográficas e títulos responsivos.

- Espaçamento Escala e sintaxe dos utilitários.

- Origem publicada Dimensões da versão fixada e variáveis semânticas.

- Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação.

## sistema de design .italia Recursos relacionados

### Designsystemet

Explore as funções reais de tema, os modos de tamanho e o comportamento nativo dos campos de Designsystemet por meio de um editor completo de briefing de tarefa, com indicação de caracteres e estado de apresentação preservado.

### DSFR

Conheça a tipografia, a grade e o API de acordeão concretos do sistema do Estado francês, dentro de seu escopo institucional. Compare o comportamento de divulgação vinculada e independente em um exemplo educacional claramente neutro.

### Europa Component Library

Examine as funções de cor EC, tipografia e espaçamento do Europa por meio de um briefing completo com acordeão nativo, incluindo navegação por teclado, comportamento de abrir tudo e uma alternativa legível sem JavaScript.


- [Referência de implementação](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Fonte](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Fonte](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)
- [Fonte](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Fonte](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Consulte a especificação de apoio](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Consulte a especificação de apoio](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Consulte a especificação de apoio](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Referência de código](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Consulte a especificação de apoio](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Instalação e recursos CSS, módulos, pacote, fontes e limites do runtime.](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Steppers Estrutura nativa, estados, modo compacto e região dinâmica.](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Tipografia Famílias tipográficas e títulos responsivos.](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Espaçamento Escala e sintaxe dos utilitários.](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Origem publicada Dimensões da versão fixada e variáveis semânticas.](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)