# Sistema de design Designsystemet ## Prévia da interface do sistema de design Designsystemet Use o contador nativo de caracteres, altere o tema e o tamanho e preserve ou invalide a revisão conforme o que mudou. ## Referência de design do sistema de design Designsystemet Exportações do tema padrão e implementação nativa de ds-field em @digdir/designsystemet-css/web 1.23.0. As linhas de cores registram explicitamente os valores do modo claro. ### Funções de destaque padrão do modo claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ds-color-accent-background-default | #fff | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-background-tinted | #eef4fa | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-surface-tinted | #ddeaf6 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-surface-hover | #c7ddf0 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-border-subtle | #99c0e3 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-border-default | #2a7cc5 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-text-default | #002c54 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-base-default | #0062ba | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-base-hover | #004f96 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-base-active | #003d75 | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | | --ds-color-accent-base-contrast-default | #fff | Função real do tema claro padrão na versão 1.23.0. O esquema escuro do runtime usa valores de função próprios. | ### Funções neutras padrão do modo claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-background-tinted | #f3f3f4 | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-surface-default | #fff | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-border-subtle | #bbbcbd | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-text-subtle | #5b5d60 | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-text-default | #292c30 | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-base-default | #24272b | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | | --ds-color-neutral-base-contrast-default | #fff | Use funções neutras para superfícies de apoio e texto sem atribuir um significado de status desnecessário. | ### Modo de tamanho e fundamentos tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-size-mode-font-size--md | 1.125 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-size-mode-font-size--lg | 1.3125 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-size-base | 18 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-font-family | Inter | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-font-weight-regular | 400 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-font-weight-medium | 500 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-font-weight-semibold | 600 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-line-height-sm | 1.3 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-line-height-md | 1.5 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-line-height-lg | 1.7 | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-border-radius-base | 0.25rem | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Escalar ou expressão exportada real. Use os modos data-size em vez de interpretar cada valor escalar como um valor em pixels. | ## Guia completo do sistema de design Designsystemet 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. ## Comportamento, CSS e pacotes de tema do sistema de design Designsystemet ### Carregue as três partes na ordem correta > Designsystemet separa o comportamento independente de framework, o CSS dos componentes e os valores do tema. Este exemplo fixa designsystemet-web e designsystemet-css na versão 1.23.0, importa o CSS e, em seguida, o tema padrão, e registra o comportamento uma única vez. Um campo estilizado sem o pacote de comportamento não é a mesma implementação conectada de ds-field mostrada aqui. ### Use o contrato atual de HTML simples O exemplo usa ds-field envolvendo elementos input, textarea e select comuns com classes ds-input. Assim, os controles nativos do formulário são mantidos, enquanto o pacote conecta rótulos e descrições. Ele não copia um API de campo antigo exclusivo do React. O código-fonte completo inclui as importações corretas dos pacotes e a lógica de revisão original da aplicação. ## Esquema de cores e modos de tamanho do sistema de design Designsystemet ### Altere a aparência com atributos data A página define data-color-scheme como light ou dark no elemento raiz. O tema fornece as cores semânticas correspondentes, enquanto os valores do formulário permanecem inalterados. A tabela de parâmetros registra explicitamente os valores padrão de light; ela não sugere que esses mesmos códigos hexadecimais se aplicam ao modo dark. Um botão secundário de aparência descreve a próxima ação. ### Aplique o modo de tamanho ao sistema inteiro O controle de tamanho de leitura altera data-size entre sm, md e lg. Isso muda o modo de tamanho do tema, em vez de ampliar apenas o título. Os fatores publicados para os modos são 1, 1.125 e 1.3125; eles participam das fórmulas dos tokens e não são uma instrução universal para definir um controle com esses valores em pixels. O exemplo testa o modo grande em telas de celular e desktop. ## Inter e tipografia semântica no sistema de design Designsystemet ### Inclua os pesos pretendidos A prévia inclui Inter 400, 500 e 600 e ativa o recurso de fonte cv05 documentado para a forma da letra l minúscula. A página usa classes nativas de títulos e parágrafos para que o peso da fonte e a altura da linha sigam o tema. Uma anotação fixa de 14px é uma nota de apoio definida no conteúdo, claramente fora da escala interativa principal. ### Mantenha o conteúdo de apoio junto ao controle A dica do título explica a finalidade do rótulo; a dica do resultado descreve o tipo de conteúdo esperado. Ambas ficam junto aos respectivos controles e são conectadas por ds-field. As orientações de apoio ficam em um cartão separado, posicionado após o formulário em telas estreitas. O layout não depende de passar o cursor sobre um elemento para exibir instruções. ## Relações automáticas e feedback de caracteres no sistema de design Designsystemet ### Use ds-field para conectar um controle Cada ds-field contém um controle do tipo campo de entrada, seu rótulo e descrições opcionais data-field. O pacote atribui IDs e cria as relações entre rótulo e descrição. Agrupar controles sem relação dentro de um único ds-field tornaria ambíguo esse comportamento automático. Use um fieldset para agrupar controles, em vez de presumir que o contêiner seja um elemento genérico de formulário. - Mantenha um único controle do tipo campo de entrada em cada ds-field. - Use descrições data-field para conteúdo de apoio relacionado. - Deixe o observador nativo manter os IDs e as relações described-by. ### Entenda o que o contador mede O contador nativo usa data-limit, data-under e data-over, substituindo %d pela quantidade restante ou excedente. Na versão 1.23.0, ele calcula com base no comprimento da string JavaScript e apresenta feedback por meio de data-label/data-state, incluindo um estado inválido quando o limite é excedido. Isso não garante a contagem de grafemas para todos os emojis. O limite de 140 caracteres é uma restrição de escrita deste exemplo, não uma regra oficial de conteúdo do Designsystemet. ## Validação da aplicação e estado de revisão no sistema de design Designsystemet ### Valide a tarefa definida no conteúdo separadamente A aplicação exige um título e um resultado para a tarefa e rejeita resultados que excedam o limite do exemplo. Depois de exibir uma mensagem que indica como resolver o problema, ela coloca o foco no campo correspondente. O contador nativo informa o comprimento, enquanto o manipulador de envio aplica a regra de revisão local. Nenhum atributo maxlength trunca silenciosamente o texto colado. ### Preserve os dados ao alterar a apresentação Uma revisão bem-sucedida exibe o título e o resultado atuais como texto. A edição de qualquer um dos campos limpa o resultado; a alteração da aparência ou do tamanho o preserva, pois esses controles não mudam o briefing. Essa distinção é intencional e foi verificada. Nada é enviado a um serviço de gerenciamento de projetos, e a prévia nunca afirma que uma tarefa externa foi criada. ## Implementação completa de campos nativos no sistema de design Designsystemet ### Reproduza o exemplo versionado Crie um projeto Vite vanilla, instale os dois pacotes Designsystemet fixados em versões específicas e o Inter; em seguida, salve o arquivo de entrada completo e digdir.css. Mantenha o elemento raiz de montagem. O código-fonte inclui o registro, a ordem do tema, a marcação do contador, os controles de apresentação e todas as transições de validação da revisão. A prévia local usa o mesmo observador nativo de campos, em vez de uma imitação desenhada à mão. 1. Importe o comportamento uma vez e, em seguida, CSS do componente e o tema padrão. 2. Carregue Inter 400, 500 e 600 e salve o arquivo de entrada/CSS completo. 3. Teste o contador acima do limite e corrija o resultado. 4. Faça a revisão, alterne o tamanho e a aparência e, em seguida, edite o texto para limpar o resultado. ### Teste o comportamento acima do limite e a recuperação Cole 150 caracteres comuns no campo de resultado e confirme que o contador informa dez caracteres acima do limite. A revisão deve rejeitar o conteúdo. Substitua o texto por um resultado curto e faça a revisão com sucesso; em seguida, altere o modo escuro e o tamanho de leitura sem perder o resultado. Edite o título e confirme que a revisão anterior é limpa. Verifique o foco visível e a quebra de linha em cada largura de tela. ## Exemplos de componentes do sistema de design Designsystemet ### main.js — estudo completo de campos nativos e tema Editor completo, marcação real do contador, controles de aparência e tamanho e validação local da revisão. ``` 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()}); ``` Referência de código - O select usa o estilo ds-input atual dentro de ds-field. O observador nativo gerencia o feedback do contador. ### digdir.css — composição responsiva original Layout sobre o tema nativo, incluindo a configuração do recurso 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}} ``` Referência de código - As alterações de tema e tamanho preservam os valores; somente edições no conteúdo invalidam a revisão. ## Configuração de agente do sistema de design Designsystemet ### Ponto de partida para implementação As relações nativas entre rótulos, o estado do contador, a recuperação da validação e as alterações de tamanho nos modos claro e escuro foram testados em um navegador real. ``` 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 ``` ### Um prompt para seu projeto ``` Crie o editor de briefing usando o comportamento de Designsystemet 1.23.0, CSS e o tema padrão, na ordem correta. Use ds-field com um único controle nativo, atributos reais data-field do contador e os pesos da fonte Inter. Preserve a revisão ao alterar a aparência e o tamanho, limpe-a após edições no conteúdo e aplique o limite original de 140 caracteres sem truncar o texto colado. ``` ## Fontes e escopo do sistema de design Designsystemet Um editor local criado por OpenDesign usando Designsystemet CSS e comportamento da web 1.23.0. O tema padrão e o observador de campos são nativos; o conteúdo do briefing, a regra de 140 caracteres e o fluxo de revisão são originais. - Configuração e ordem do tema Comportamento nativo, CSS, tema e configuração de fontes. - Fundamentos do tema Pontos de entrada para tamanho, cor e tipografia. - Implementação pública Observador ds-field versionado e tema gerado. - Escopo do sistema Escopo compartilhado de componentes e diretrizes. ## Recursos relacionados ao sistema de design Designsystemet ### 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. ### gov.cz sistema de design Explore as funções reais das cores, os espaços de cartões e a paginação nativa do Gov Design System CE com um kit completo de leitura de seis recursos, incluindo estados explícitos de foco e página. - [Referência de implementação](https://designsystemet.no/en/fundamentals/code/setup) - [Fonte](https://github.com/digdir/designsystemet) - [Referência de código](https://designsystemet.no/en/fundamentals/code/setup) - [Configuração e ordem do tema Comportamento nativo, CSS, tema e configuração de fontes.](https://designsystemet.no/en/fundamentals/code/setup) - [Fundamentos do tema Pontos de entrada para tamanho, cor e tipografia.](https://designsystemet.no/en/fundamentals) - [Implementação pública Observador ds-field versionado e tema gerado.](https://github.com/digdir/designsystemet) - [Escopo do sistema Escopo compartilhado de componentes e diretrizes.](https://designsystemet.no/en/intro)