# Sistema de Design Poncho
## Prévia da interface do Sistema de Design Poncho
Filtre a grade nativa de painéis, abra um detalhe e volte à atividade escolhida.
## Referência de design do Sistema de Design Poncho
ar-poncho 2.0.320 CSS e Bootstrap 3.4.1; valores calculados verificados em 1440, 768 e 390px. As fontes alternativas estão definidas explicitamente.
### Tipografia publicada de CSS
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Package inspected | ar-poncho 2.0.320 | Não use o banner desatualizado v0.3.3 como versão do pacote. |
| Font documentation | Lora headings / Montserrat body | Página atual de tipografia e importação de fontes de CSS; o README antigo do repositório ainda menciona Encode Sans. |
| Body | 16px / 1.42857143; weight 500 | Medido com Bootstrap 3.4.1 e Poncho; a prévia local usa Arial. |
| H1 | 2.5rem = 40px / 44px | O título da prévia permanece em 40px em dispositivos móveis. |
| H2 / H3 | 2rem / 1.75rem | Títulos básicos; regras específicas dos painéis substituem estas. |
| Panel H3 | 20px / 26px | Contexto do componente, CSS nativo medido. |
| Lead | 18px / 1.2; weight 500 | Uma breve introdução, não um título. |
### Papéis das cores
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --primary | #242C4F | Azul-marinho para links/ações principais. |
| --secondary | #45658D | Azul secundário. |
| --success | #2e7d33 | Papel de ação principal/sucesso; não é uma decoração arbitrária. |
| --danger | #c62828 | Papel de ação destrutiva ou erro. |
| --warning | #E7BA61 | Papel de alerta; ainda é preciso verificar o contraste do texto. |
| --gray-base | #333333 | Texto padrão. |
| --gray-lighter | #f2f2f2 | Superfície neutra clara. |
### Dimensões da grade e dos componentes
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: preenchimento de 15px em cada lado da coluna. |
| Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 cria três colunas a partir de 768px. |
| Containers | 750 / 970 / 1170px | Nos breakpoints correspondentes; largura fluida abaixo de 768px. |
| Panel body | 15px 20px | Substituição de componente de Poncho. |
| Panel radius / spacing | 10px / 30px bottom margin | CSS nativo, como usado neste exemplo. |
| Button | 16px; 8px 20px padding; 3px border; 30px radius | Estilo de ação arredondado de Poncho; não é a geometria padrão de Bootstrap. |
| Section spacing | 30px default; 20px small; 40px large | Regras para section, section-sm e section-lg. |
## Guia completo do Sistema de Design Poncho
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.
## Versão e dependências do Sistema de Design Poncho
### Um sistema Bootstrap 3
> Poncho sobrepõe estilos de serviços públicos argentinos ao Bootstrap 3.4.1. A página de instalação ainda menciona uma direção experimental do Bootstrap 4; isso não torna as classes do Bootstrap 5 compatíveis com os exemplos publicados. Este recurso fixa ar-poncho 2.0.320 e Bootstrap 3.4.1 para permitir a análise conjunta da anatomia dos painéis e do comportamento responsivo.
O banner de CSS exibe v0.3.3, embora a versão instalada do pacote seja 2.0.320. Consulte o manifesto do pacote e o arquivo de lock, não apenas o banner. A prévia independente usa CSS nativo para painéis, botões e grade; a filtragem de atividades é original de JavaScript, não um componente de busca de Poncho.
Consulte a especificação de apoio
## Tipografia e evidências do Sistema de Design Poncho
### Resolver referências conflitantes de fontes
A documentação atual de tipografia indica Lora para os títulos e Montserrat para o texto corrido. A folha de estilos baixada importa essas famílias, mas também contém declarações antigas de Encode Sans. O README de configuração do repositório ainda recomenda Encode Sans. Essa é uma inconsistência real entre versões e fontes; uma migração para produção deve examinar a cascata final da versão escolhida, em vez de presumir que todas as referências históricas descrevem um tema uniforme.
A prévia explicita suas fontes alternativas Arial e Georgia e remove a importação externa de fontes para garantir a confiabilidade offline. A geometria nativa continua visível: corpo de 16px, H1 de 40px e texto de introdução de 18px. Os títulos dos painéis usam tamanho próprio de 20px; portanto, copiar a escala básica de H3 para um cartão mudaria o componente.
Consulte a especificação de apoio
## Cores e hierarquia de ações do Sistema de Design Poncho
### Escolha uma ação de acordo com seu significado
A documentação dos botões distingue ações de link padrão, links secundários, uma ação principal ou de sucesso e ações destrutivas. btn-primary é a ação comum forte, no estilo de link; btn-link atende a ações secundárias. btn-success indica a ação principal de avanço, e as orientações limitam seu uso a uma por página. btn-danger é reservado para intenções destrutivas ou irreversíveis.
O navegador de atividades usa uma ação secundária para redefinir o filtro e uma ação principal para voltar ao detalhe expandido. Não há botão verde de inscrição porque não é possível inscrever ninguém. Nunca indique sucesso só porque alguém abriu um painel local.
- btn-primary: ação forte comum; evite ações concorrentes no mesmo grupo.
- btn-link: ação secundária ou informativa, como redefinir o filtro.
- btn-success / btn-danger: use somente quando a ação realmente tiver o significado documentado.
Consulte a especificação de apoio
## Grade e espaçamento do Sistema de Design Poncho
### Use a grade herdada de forma intencional
Bootstrap 3 usa uma grade de 12 colunas com espaçamentos de 30px. Uma linha equilibra o preenchimento de 15px das colunas. col-sm-4 divide igualmente os três painéis de atividades a partir de 768px; abaixo dessa largura, eles passam a ocupar toda a largura. Nos breakpoints documentados, os contêineres adotam as larguras de 750px, 970px e 1170px.
Poncho acrescenta espaçamento próprio dos componentes: o corpo dos painéis usa 15px na vertical e 20px na horizontal, com uma margem inferior de 30px. Os botões usam raio de 30px, borda de 3px e preenchimento de 8px por 20px. Esses valores explicam a diferença visível em relação a uma página Bootstrap sem modificações; não os substitua por um tema genérico de cartões arredondados.
Consulte a especificação de apoio
## Anatomia de um painel clicável do Sistema de Design Poncho
### Um destino por cartão
Os exemplos oficiais de painel envolvem todo o painel em uma âncora, com panel-body dentro dela e o título e o texto de apoio dentro desse corpo. Assim, uma entrada compacta de diretório forma um único destino coerente. Evite colocar outro link ou botão dentro dessa âncora: isso cria alvos interativos conflitantes.
O trecho de produção aponta para uma rota real de atividade. A prévia local, por sua vez, intercepta essa mesma âncora semântica para exibir o texto original do detalhe. Ela registra o elemento que abriu o detalhe, move o foco para a nova região e devolve o foco quando a pessoa fecha o detalhe. Esse comportamento da aplicação é acrescentado à marcação documentada do painel.
```
```
Referência de código
Consulte a especificação de apoio
## Filtragem e estado local do Sistema de Design Poncho
### Um filtro funcional, não apenas decorativo
O seletor de tipos de atividade tem um rótulo explícito e três categorias. Uma alteração oculta os contêineres dos painéis que não correspondem à seleção e atualiza uma mensagem de status com a nova contagem. A contagem representa as atividades visíveis, não o total de inscrições ou a disponibilidade. A redefinição restaura as três atividades e devolve o foco ao filtro.
Ao mudar de categoria, um detalhe aberto é fechado para que o conteúdo de uma atividade que agora está oculta não fique desconectado dos resultados. Abrir um painel não altera o filtro. Essas regras são intencionalmente simples, mas completas o bastante para testar a relação entre controles, resultados e detalhes.
1. Selecione Artes e confirme que apenas a oficina de gravura permanece.
2. Abra a atividade e examine sua descrição; depois, volte ao mesmo painel.
3. Redefina o filtro e confirme que as três atividades estão visíveis novamente.
Consulte a especificação de apoio
## Teclado e estrutura do conteúdo do Sistema de Design Poncho
### Não copie estados desabilitados apenas visuais
A tabela oficial de botões demonstra a classe CSS para estado desabilitado. Um botão real de HTML que precise ser desabilitado também requer o atributo disabled; a classe sozinha não impede a ativação pelo teclado. Para links, avalie se ainda há um destino válido, em vez de tratar o estilo desabilitado como um modelo de interação completo.
Use um H1 e uma hierarquia coerente. Este diretório usa H3 nos painéis porque o detalhe expandido é uma seção H2; em uma lista independente, sem uma seção intermediária, adapte os níveis dos títulos à estrutura real do documento. Bibliotecas de ícones decorativos são opcionais e foram omitidas aqui, pois os rótulos de texto comunicam todas as ações.
Consulte a especificação de apoio
## Configuração nativa e escopo do Sistema de Design Poncho
### Carregue somente as camadas usadas pelo exemplo
Carregue Bootstrap CSS antes de Poncho CSS para que o tema substitua os estilos da base. A grade básica e os painéis não exigem Bootstrap JavaScript nem jQuery. Se a aplicação adicionar componentes interativos de Bootstrap, carregue uma versão compatível do jQuery antes de Bootstrap 3.4.1 JavaScript e teste os componentes que ela realmente usa.
Esta é uma pilha de dependências legada com limites de compatibilidade definidos. Instalar uma versão moderna de Bootstrap junto dela não é uma estratégia de migração. Diferencie a reutilização do código sob a licença MIT do repositório da identidade governamental, dos logotipos oficiais e da licença de conteúdo exibida nas páginas do governo. A prévia usa atividades fictícias da comunidade e não afirma ser um serviço do governo argentino.
Consulte a especificação de apoio
## Exemplos de componentes do Sistema de Design Poncho
### Navegação pelo painel inteiro
Uma âncora envolve o corpo do painel; não aninhe controles interativos.
```
```
Referência de código
### Diretório completo de atividades
Painéis nativos de Poncho, filtro de categorias funcional e visualização de detalhes que restaura o foco.
```
Community activities
COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE
Find a local activity
Browse practical sessions at the community centre.
```
Referência de código
## Configuração do agente de IA do Sistema de Design Poncho
### Ponto de partida para implementação
Configuração nativa de CSS. Esta prévia não precisa de Bootstrap JavaScript, pois sua lógica de filtro e detalhes é original. O ZIP completo do exemplo funcional em Sources 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/poncho.html. Não abra exemplos baseados em módulos por meio de file://.
```
npm install ar-poncho@2.0.320 bootstrap@3.4.1
# Copy the following package assets into your site's public vendor directory:
# node_modules/bootstrap/dist/css/bootstrap.min.css
# node_modules/ar-poncho/dist/css/poncho.min.css
# Load Bootstrap first, then Poncho.
# Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
```
### Um prompt para seu projeto
```
Use ar-poncho 2.0.320 com Bootstrap 3.4.1. Crie um diretório acessível com uma grade de 12 colunas e cartões de painel com um único link âncora. Preserve as cores, o preenchimento e os raios nativos dos botões. Ofereça filtros identificados por rótulos, contagem de resultados e restauração do foco. Confira a cascata de fontes em relação ao pacote fixado; não misture APIs de Bootstrap 5 nem invente uma confirmação de registro.
```
## Fontes e escopo do sistema de design Poncho
Exemplo independente de OpenDesign que usa CSS nativo, sem identidade governamental. A documentação atual e o README antigo divergem quanto às famílias tipográficas; o CSS fixado e o fallback explícito definem esta prévia.
- Repositório oficial e instalação Configuração do pacote, dependências e licença MIT do código.
- Anatomia do painel Links âncora no cartão inteiro, texto complementar e variantes.
- Significado dos botões Hierarquia das ações, nomes de classe e estados.
- Tipografia Famílias tipográficas atuais e orientações semânticas para texto.
- CSS publicado Declarações reais de cores, tipografia e geometria.
- Grade do Bootstrap 3 Colunas responsivas, espaçamentos e larguras de contêiner herdados.
- 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 Poncho
### Queensland Government sistema de design
Explore a implementação de Bootstrap de Queensland em um seletor de recursos ilustrado e completo, com funções de tema reais, estilo nativo de caixas de seleção e um diálogo acessível de revisão.
### Ripple
Explore as funções de cor reais de Ripple, sua escala de espaçamento de 14 etapas e referências tipográficas responsivas em uma linha do tempo completa de oficina, com exibição progressiva de informações, progresso e foco no próximo passo pelo teclado.
### Scottish Government sistema de design
Aplique a tipografia responsiva, o espaçamento e as funções de cor do governo escocês em um campo nativo com contagem de caracteres, que preserva o texto acima do limite e permite corrigir o conteúdo.
- [Referência de implementação](https://argob.github.io/poncho/componentes/paneles/)
- [Fonte](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Fonte](https://getbootstrap.com/docs/3.4/css/#grid)
- [Consulte a especificação de apoio](https://github.com/argob/poncho)
- [Consulte a especificação de apoio](https://argob.github.io/poncho/identidad/tipografia/)
- [Consulte a especificação de apoio](https://argob.github.io/poncho/componentes/botones/)
- [Consulte a especificação de apoio](https://getbootstrap.com/docs/3.4/css/#grid)
- [Referência de código](https://argob.github.io/poncho/componentes/paneles/)
- [Consulte a especificação de apoio](https://argob.github.io/poncho/componentes/paneles/)
- [Repositório oficial e instalação Configuração do pacote, dependências e licença MIT do código.](https://github.com/argob/poncho)
- [Anatomia do painel Links âncora no cartão inteiro, texto complementar e variantes.](https://argob.github.io/poncho/componentes/paneles/)
- [Significado dos botões Hierarquia das ações, nomes de classe e estados.](https://argob.github.io/poncho/componentes/botones/)
- [Tipografia Famílias tipográficas atuais e orientações semânticas para texto.](https://argob.github.io/poncho/identidad/tipografia/)
- [CSS publicado Declarações reais de cores, tipografia e geometria.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Grade do Bootstrap 3 Colunas responsivas, espaçamentos e larguras de contêiner herdados.](https://getbootstrap.com/docs/3.4/css/#grid)