Crie uma interface de serviço público com componentes reais de colaboradores e um tema explícito. Esta referência usa Utrecht CSS para demonstrar o mapeamento de tokens, a estrutura de uma lista de dados e dois temas originais com o mesmo fluxo de edição.
Componentes nativos de botão/lista de dados Utrecht CSS 9.0.15, tokens de tema originais e interação da aplicação. · Referência de implementação
02
Sistema de design NL Referência de design
Composição concreta de colaboradores: @utrecht/component-library-css 9.0.15. Os nomes de tokens e as classes públicas são APIs inspecionadas da biblioteca; valores numéricos e cores identificados como “exemplo” são configurações originais da aplicação, não uma especificação universal de NL Design System.
NL Design System oferece suporte explícito à combinação de contribuições de várias organizações e descreve o estilo visual de cada organização por meio de tokens de design. Portanto, a unidade prática de adoção é uma implementação de componentes escolhida junto com um tema escolhido. Esta página seleciona a implementação do colaborador Utrecht CSS e um tema de demonstração original.
Essa escolha não afirma que Utrecht seja a implementação canônica de todos os componentes de NL Design System. Ela oferece ao leitor um caminho reproduzível sem inventar uma fonte nacional, uma cor azul ou uma escala de espaçamento. O pacote nativo real de CSS é @utrecht/component-library-css 9.0.15.
Sistema de design NL Tokens de componentes públicos
Mantenha os valores da aplicação fora de CSS da biblioteca
O tema fornecido define propriedades personalizadas públicas --utrecht-* em um elemento contêiner. O botão usa esses valores, enquanto sua classe determina a estrutura do componente. Variáveis que começam com --_utrecht- são cálculos internos da implementação de CSS inspecionada; alterá-las diretamente vincularia a aplicação a detalhes de implementação.
O verde-azulado #005a5b e o roxo #57328c do exemplo são cores originais da aplicação. Eles demonstram uma identidade visual substituível sem copiar a identidade de um município. Ambos usam texto branco nas ações, e o tom de hover é definido separadamente. Nenhuma cor é descrita como valor oficial de token de NL Design System.
css
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
A demonstração define Arial, sans-serif em 18px, com entrelinha de 1.6, para leitura de documentos. O primeiro tema usa um título de 32px e cantos de 4px nos botões; o segundo mantém o mesmo tamanho legível para o texto corrido, com cantos de 8px e título com serifa. As mudanças entre os temas são intencionalmente visíveis.
Quando o token está ausente, o botão nativo usa um fallback de altura mínima de bloco de 44px. Nosso tema define 48px e preenchimentos explícitos no eixo de bloco e no eixo em linha. Isso é um valor real de CSS API, escolhido para a aplicação, e não uma dimensão presumida para todo o ecossistema. O layout usa uma largura máxima de conteúdo de 56rem e espaços de 24px, definidos por este exemplo.
O recibo usa um elemento dl com .utrecht-data-list e o modificador .utrecht-data-list--rows. Cada .utrecht-data-list__item agrupa uma chave dt e um valor dd. O modificador rows ativa a grade responsiva, os espaços entre linhas e as bordas; sem ele, a lista de dados básica não habilita esse layout. O HTML continua significativo antes de qualquer tema ser carregado.
Nosso recibo lista um local de retirada, uma referência e o item selecionado. Não se trata de uma tabela com registros repetidos: cada chave identifica um atributo diferente da mesma solicitação. Em telas estreitas, a chave e o valor ficam empilhados. A aplicação define tokens de linha para que nomes longos de locais caibam sem serem cortados.
Use dt para o nome do atributo e dd para o valor atual.
Coloque cada par de chave e valor no contêiner de item documentado.
Permita que identificadores e nomes longos de locais quebrem linha, em vez de alargar a página.
Uma classe de botão não implementa um fluxo de trabalho
.utrecht-button fornece o componente básico, e .utrecht-button--primary-action seleciona o grupo de tokens da aparência primária. O elemento nativo ainda precisa de type=button para uma ação local que não deve enviar um formulário ao redor. A lista de dados permanece somente para leitura até que a aplicação abra um painel de edição.
O botão Alterar local de retirada da demonstração revela um fieldset com botões de opção nativos. Ao salvar, as alterações atualizam o valor na lista de definições e anunciam o novo local por meio de uma região de status educada. Cancelar fecha o painel sem alterar o valor salvo. Esses comportamentos são implementados no código da aplicação; instalar apenas um pacote CSS não os implementa.
O seletor de tema altera data-theme no contêiner externo. As classes dos componentes, os valores do registro e a opção de rádio selecionada permanecem intactos. Isso demonstra de forma concreta a separação de marca branca: o mesmo recibo e a mesma interação podem acomodar identidades visuais distintas.
A troca de tema é uma demonstração de desenvolvimento, não uma configuração que um serviço público precise oferecer. Em um serviço real que atende várias organizações, escolha o tema com base em uma configuração confiável da aplicação. Os valores do tema não devem alterar a elegibilidade, a validação nem o significado de um status.
Carregue o componente versionado CSS uma única vez.
Aplique os tokens de tema pertinentes a um elemento contêiner.
Renderize a mesma marcação semântica do componente dentro desse contêiner.
Verifique o foco, a quebra de linha e as cores dos estados em cada tema compatível.
O modelo de contribuição NL Design System descreve como as contribuições avançam em direção a padrões compartilhados. A presença de um componente em um repositório comunitário, por si só, não garante que toda composição esteja pronta para produção. Confira a implementação selecionada, os estados compatíveis e o nível atual de maturidade na documentação do componente.
A prévia mantém uma legenda visível para as opções de local, anuncia o resultado salvo e devolve o foco ao botão que iniciou a edição. A troca de tema não remove o foco. A tela continua utilizável com os controles de teclado nativos dos botões de opção e os contornos de foco da aplicação; essas verificações complementam, mas não substituem, os testes do componente da comunidade.
Instale o pacote verificado CSS e importe dist/index.css por meio de um empacotador compatível com CSS, seguido da sua folha de estilos do tema. Para a lista de dados e o botão que usam apenas CSS, não é necessário um provedor React nem um inicializador de componentes JavaScript. O script original da aplicação gerencia a edição, o salvamento, o cancelamento e a troca de tema.
O código-fonte do componente empacotado está licenciado sob EUPL-1.2. Preserve os avisos de licença e de código-fonte ao distribuí-lo, e não presuma que a licença do código concede permissão para reutilizar o logotipo de um município. Este exemplo usa temas originais e não inclui marcas municipais.
O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></html>
Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.
Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.
04
Sistema de design NL Configuração do agente de IA
Ponto de partida para implementação
A prévia independente carrega localmente a mesma versão nativa de CSS. Os componentes de botão e lista de dados que usam apenas CSS não precisam de um provedor React. Os valores originais do tema devem acompanhar a biblioteca. O ZIP completo do exemplo funcional, disponível em Fontes, também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/nl-design-system.html. Não abra exemplos baseados em módulos usando file://.
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
Um prompt para seu projeto
Prompt para agente de IA
Use @utrecht/component-library-css 9.0.15 para uma lista de definições de recibo e um botão primário. Forneça um tema original aplicado ao contêiner por meio de tokens públicos --utrecht-*, sem alterar as variáveis internas --_utrecht-*. Ofereça a edição do local com opções de rádio identificadas, salvar e cancelar, um anúncio educado da atualização e o retorno do foco. Demonstre um segundo tema original sem substituir a marcação do componente nem perder dados. Identifique todos os valores numéricos do tema como escolhas da aplicação.
05
Sistema de design NL Fontes e escopo
NL Design System é um ecossistema independente de marcas. Este exemplo educativo seleciona uma implementação da comunidade e dois temas originais; não afirma representar um estilo visual nacional nem usa a identidade de um município.
