# Sistema de Design DSFR ## Prévia da interface do sistema de design DSFR Compare seções vinculadas e independentes usando controles acionáveis pelo teclado e indicadores visíveis do estado expandido. ## Referência de design do sistema de design DSFR Documentação oficial do DSFR v1.15 e metadados verificados do pacote @gouvfr/dsfr 1.15.3. Estes são valores de referência oficiais; a prévia neutra demonstra a estrutura de interação sem usar a identidade visual do Estado. ### Tipografia oficial | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Primary / supplementary families | Marianne / Spectral | Fontes institucionais; é necessário respeitar os termos aplicáveis. | | Fallback families | Arial / Georgia | Substituições documentadas. | | Standard text | 16px / 24px | Estilo de texto fr-text para o corpo. | | Article text | 18px / 28px | Papel editorial fr-text--lg. | | H1 mobile → desktop | 32/40px → 40/48px | Tamanho da fonte / altura da linha; alteração em MD. | ### Grade oficial | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | SM / MD / LG / XL | 576 / 768 / 992 / 1248px | Limites de breakpoint documentados. | | XL content maximum | 1200px | Largura máxima do contêiner na referência da grade. | | Optional gutters | 16px small; 24px LG and above | A grade de código não habilita gutters por padrão. | ### Espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Base progression | Multiples of 4px | Ritmo de layout comum. | | Documented exceptions | −6, −2, 2, 6px | Ajustes específicos, não uma nova escala arbitrária. | ### Regras do acordeão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | fr-accordions-group | Linked by default | Ao abrir um item, outro se fecha. | | data-fr-group="false" | Multiple panels may stay open | Modo independente explícito. | | aria-controls | Matches panel id | Relação entre controle e painel. | | fr-collapse--expanded | Runtime expanded class | Gerenciado por DSFR JavaScript. | ## Guia completo do sistema de design DSFR 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. ## Escopo institucional do sistema de design DSFR ### Um sistema de identidade do Estado > DSFR é o sistema de design do Estado francês. Os termos oficiais atuais definem os serviços .gouv.fr e os aplicativos móveis do Estado como seu contexto de uso previsto e distinguem usuários e operadores do Estado de organizações externas. Trata-se de um limite substancial de adoção, não de uma nota de rodapé que possa ser removida ocultando um logotipo. Uma equipe elegível deve seguir o processo oficial de aprovação e implementação de projetos. Um produto sem relação com esse contexto pode estudar a arquitetura da informação documentada e as considerações de acessibilidade sem se apresentar como parte da identidade do Estado francês. A prévia desta página é um exercício original e neutro de acordeão: não carrega estilos, fontes nem scripts do DSFR. Consulte a especificação de apoio ## Referência tipográfica oficial do sistema de design DSFR ### Marianne: usos e fontes alternativas A documentação tipográfica identifica Marianne e Spectral, com Arial e Georgia como fontes alternativas, respectivamente. O texto padrão do corpo usa 16px/24px; o texto de artigos, 18px/28px. O H1 muda de 32px/40px em dispositivos móveis para 40px/48px em computadores. Esses valores descrevem o sistema oficial, enquanto a demonstração usa um tratamento tipográfico neutro próprio. As classes de tamanho do texto não substituem os níveis semânticos dos títulos. Mantenha o título da página como h1 e cada título do acordeão no nível de cabeçalho adequado. Não use um estilo visual maior para pular níveis na estrutura do documento. Consulte a especificação de apoio ## Grade e espaçamento do sistema de design DSFR ### Limites responsivos explícitos A referência da grade define SM 576px, MD 768px, LG 992px e XL 1248px. A largura máxima de conteúdo é 1200px. As margens internas opcionais são de 16px nos tamanhos menores e 24px a partir de LG. A grade de código não tem margens internas por padrão, um detalhe importante ao converter uma grade do Figma em marcação. O espaçamento se baseia em múltiplos de 4px, com exceções documentadas de −6px, −2px, 2px e 6px. Assim, uma classe de espaçamento representa um sistema controlado, não uma autorização para inventar deslocamentos arbitrários. A prévia neutra usa uma coluna de leitura independente e não pretende reproduzir a grade oficial. Consulte a especificação de apoio ## Anatomia do acordeão no sistema de design DSFR ### Cabeçalho, controle e painel associado O componente documentado contém section.fr-accordion, heading.fr-accordion__title, button.fr-accordion__btn e um div.fr-collapse em seguida. O aria-controls do botão deve corresponder ao id do painel; aria-expanded descreve seu estado aberto. O nível do cabeçalho depende da hierarquia da página. O painel contém elementos de texto apropriados, como parágrafos e listas. DSFR JavaScript nativo gerencia a classe de expansão; um aplicativo elegível não deve adicionar um segundo manipulador de clique independente que entre em conflito com o componente. A prévia neutra implementa seu próprio estado aberto/fechado, igualmente explícito, para fins de comparação educativa. Consulte a especificação de apoio ## Acordeões agrupados ou independentes no sistema de design DSFR ### A configuração do grupo altera o comportamento Por padrão, um fr-accordions-group vincula os itens: ao abrir um, o outro item aberto se fecha. Definir data-fr-group="false" permite manter vários painéis abertos. O exemplo apresenta os dois modos para que o leitor compare seus efeitos na consulta cruzada de informações. Essa diferença é importante para instruções de preparação. Quem consulta uma lista de documentos talvez precise manter aberto também um painel com um endereço. Um grupo que permite apenas um item aberto economiza espaço, mas oculta o contexto repetidamente. Escolha o modo conforme a tarefa, em vez de tratar o padrão como regra editorial. A página de acessibilidade vai além do comportamento padrão em tempo de execução: recomenda, por padrão, grupos independentes, pois grupos vinculados podem dificultar o uso. Por isso, o exemplo começa no modo independente. - O modo independente permite comparar duas seções ao mesmo tempo. - O modo vinculado permite expandir apenas uma seção por vez. - Ao alternar os modos, mantenha o estado de aria-expanded internamente consistente. Consulte a especificação de apoio ## Sistema de design DSFR: o que deve permanecer visível ### Não oculte a etapa essencial As orientações do componente recomendam acordeões para conteúdo extenso, opcional ou relevante apenas para algumas pessoas. Não recomendam ocultar informações que todos precisam ler, usar acordeões para conteúdo muito curto, aninhar controles complexos ou colocá-los dentro de uma janela modal. Por isso, a finalidade e os controles do exemplo permanecem visíveis. Apenas as observações opcionais sobre o acesso à sala, a lista de equipamentos e a explicação sobre a chegada ficam recolhidas. Cada título apresenta uma pergunta distinta, e o conteúdo revelado usa parágrafos curtos e listas, em vez de um segundo fluxo interativo. 1. Mantenha a instrução principal fora do acordeão. 2. Divida o material complementar de acordo com as dúvidas de quem lê, não por critérios arbitrários de extensão. 3. Use um parágrafo comum quando a seção contiver apenas uma resposta curta. Consulte a especificação de apoio ## Sistema de design DSFR: inspeção de teclado e estado ### Valide a estrutura antes da decoração Cada controle neutro de prévia é um botão real; por isso, Enter e Espaço acionam o botão pelo comportamento padrão do navegador. O script altera aria-expanded e o estado hidden do painel controlado. Ele nunca remove o controle quando o painel é fechado, e o foco permanece no botão acionado. O seletor de modo permite comparar imediatamente os comportamentos independente e vinculado. Um pequeno indicador de estado visível lista os painéis abertos; ele é um recurso didático deste exemplo, não um componente oficial de DSFR. Em telas estreitas, os títulos quebram linha e o botão mantém toda a largura da área clicável. A página oficial de acessibilidade também documenta contrastes insuficientes ao passar o cursor no tema escuro e limitações específicas nas notificações para leitores de tela e navegadores. Não presuma acessibilidade completa só por usar o componente sem alterações; verifique essas limitações conhecidas para a versão e o ambiente em que será implantado. Consulte a especificação de apoio ## Sistema de design DSFR: integração em projetos elegíveis ### Carregue as dependências principais e do componente A página oficial de código lista as dependências CSS principais e do acordeão, além dos scripts de módulo principais e do acordeão. Depois de carregado, o ambiente de execução aprimora automaticamente a marcação documentada. A API pública permite revelar um painel com dsfr(element).collapse.disclose() após a inicialização. A instalação fornecida destina-se a um projeto institucional elegível. Ela foi verificada com base no código-fonte, mas não foi executada nesta prévia neutra, que intencionalmente não depende do ambiente de execução de DSFR. Ao atualizar, as equipes de produção devem manter em conjunto a estrutura oficial de diretórios de recursos, a marcação do componente e as condições de uso vigentes. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design DSFR ### Estrutura oficial do acordeão Marcação para projetos elegíveis com painéis que podem ser expandidos de forma independente. ```

Put the actual supporting-document instructions here.

``` Referência de código ### Revelação programática Execute após a inicialização do ambiente oficial para o painel de destino. ``` const panel = document.getElementById('documents'); window.dsfr(panel).collapse.disclose(); ``` Referência de código ### Exemplo completo independente 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. ``` Accordion structure laboratory
Neutral interaction study · No DSFR visual identity or assets

Prepare for a community workshop

The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.

Open sections: none

Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.
``` Referência de código - 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. ## Configuração do agente de IA para o sistema de design DSFR ### Ponto de partida para implementação Instalação para projetos elegíveis, verificada com base no código-fonte; não executada pela prévia neutra. Preserve o escopo institucional e os termos oficiais vigentes. Copie o diretório dist para manter os caminhos relativos dos recursos dependentes. O ZIP completo do exemplo funcional, em Fontes, também fornece 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/dsfr.html. Não abra exemplos baseados em módulos usando file://. ``` # For a project within the documented DSFR institutional scope: npm install @gouvfr/dsfr@1.15.3 # Copy node_modules/@gouvfr/dsfr/dist to your public asset directory. # In : # # # Before : # # ``` ### Um prompt para seu projeto ``` Explique a estrutura e o escopo do acordeão DSFR. Em um projeto estadual elegível, use fr-accordion, fr-accordion__title, fr-accordion__btn e fr-collapse com ids/aria-controls correspondentes, os recursos principais e do acordeão, e data-fr-group=false quando for necessário manter várias seções abertas para comparação. Para uma prévia educativa independente, use estilos originais neutros e identifique claramente o conteúdo como uma interpretação estrutural; não carregue fontes de identidade estadual nem alegue que se trata de um serviço oficial. ``` ## Sistema de design DSFR: fontes e escopo DSFR tem um escopo de uso institucional documentado. Esta página é uma referência técnica, e sua prévia original e neutra não é um serviço do governo francês nem uma implementação com a identidade visual de DSFR. - Visão geral de DSFR Categorias oficiais de acesso ao sistema e recursos. - Escopo de aplicação Regras oficiais que definem quais organizações podem usar DSFR. - Fundamentos Orientações fundamentais de design e identidade. - 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. ## Recursos relacionados ao sistema de design DSFR ### 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. ### GOV.UK sistema de design Crie um fluxo de perguntas e conferência de respostas no estilo GOV.UK com a escala tipográfica atual v6, espaçamento responsivo, cores funcionais, validação vinculada e integração concreta com Frontend. - [Referência de implementação](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Fonte](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [Fonte](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [Fonte](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/espacement) - [Fonte](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Consulte a especificação de apoio](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon) - [Consulte a especificação de apoio](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [Consulte a especificação de apoio](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [Consulte a especificação de apoio](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Consulte a especificação de apoio](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/accessibilite-de-l-accordeon) - [Referência de código](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Visão geral de DSFR Categorias oficiais de acesso ao sistema e recursos.](https://www.systeme-de-design.gouv.fr/version-courante/fr) - [Escopo de aplicação Regras oficiais que definem quais organizações podem usar DSFR.](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/perimetre-d-application) - [Fundamentos Orientações fundamentais de design e identidade.](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)