# Sistema de design Pico CSS ## Pico CSS Prévia da interface do sistema de design Altere a largura da linha e o tamanho da amostra, mude a aparência e consulte um perfil local em um diálogo nativo. ## Sistema de design Pico CSS Referência de design do sistema Folha de estilos padrão compilada de Pico CSS 2.1.1. As primeiras definições de cores correspondem ao tema claro. O dimensionamento responsivo da fonte raiz altera o valor em pixels de rem; não suponha que todos os viewports usem uma raiz de 16px. As larguras de leitura e o breakpoint de composição de 800px são escolhas da aplicação. ### Tipografia e ritmo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --pico-font-family | var(--pico-font-family-sans-serif) | Alias da família sans-serif do sistema. | | --pico-line-height | 1.5 | Altura de linha padrão do corpo do texto. | | --pico-font-size | 100% | Tamanho inicial da raiz, antes das regras de mídia responsivas. | | --pico-spacing | 1rem | Unidade base de espaçamento. | | --pico-typography-spacing-vertical | 1rem | Ritmo vertical do texto. | | --pico-grid-column-gap | var(--pico-spacing) | Espaçamento entre colunas .grid nativas. | | --pico-border-radius | 0.25rem | Formato padrão de controles e cartões. | | --pico-border-width | 0.0625rem | Espessura padrão do limite. | | --pico-outline-width | 0.125rem | Largura do contorno de foco. | | --pico-form-element-spacing-vertical | 0.75rem | Preenchimento vertical de campos e botões. | | --pico-form-element-spacing-horizontal | 1rem | Preenchimento horizontal de campos e botões. | ### Funções principais do tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --pico-primary | #0172ad | Cor de links e de leitura principal. | | --pico-primary-background | #0172ad | Cor de fundo do botão primário. | | --pico-primary-hover | #015887 | Texto principal ao passar o cursor. | | --pico-primary-hover-background | #02659a | Superfície do botão principal ao passar o cursor. | | --pico-primary-focus | rgba(2, 154, 232, 0.5) | Cor de destaque do foco. | | --pico-primary-inverse | #fff | Texto sobre o fundo principal. | | --pico-background-color | #fff | Superfície da página. | | --pico-color | #373c44 | Texto padrão do corpo. | | --pico-muted-color | #646b79 | Texto secundário. | ### Tamanhos responsivos da raiz | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Base | 100% | 16px se o padrão do navegador for 16px. | | ≥576px | 106.25% | 17px sob a mesma suposição. | | ≥768px | 112.5% | 18px. | | ≥1024px | 118.75% | 19px. | | ≥1280px | 125% | 20px. | | ≥1536px | 131.25% | 21px. | ### Tamanhos de título e controles da aplicação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | h1 | 2rem / 1.125 | Tamanho e altura de linha oficiais do título. | | h2 | 1.75rem / 1.15 | Título oficial de segundo nível. | | h3 | 1.5rem / 1.175 | Título oficial de terceiro nível. | | Reading measure | 48ch / 62ch / 72ch | Comprimentos máximos originais selecionáveis para as linhas. | | Sample scale | 90–125%; step 5 | Limites originais do controle deslizante, aplicados somente ao texto de exemplo. | | Composition breakpoint | 800px | Regra original de transição de duas colunas para uma pilha. | ## Pico CSS Guia completo do sistema de design 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 Pico CSS: uma pequena superfície semântica de HTML ### Uma pequena superfície semântica de HTML > O Pico aplica estilos a elementos HTML familiares, sem exigir que cada parágrafo, campo ou botão use uma longa lista de classes de componentes. Neste exemplo, article fornece o cartão de preferências, seu cabeçalho e rodapé definem os limites, e os rótulos contêm os controles nativos input/select. O elemento main usa container porque esta é a compilação padrão do Pico, não a distribuição separada sem classes. Isso torna o Pico útil para ferramentas compactas e interfaces orientadas a conteúdo, nas quais os controles nativos do navegador são suficientes. Por si só, ele não transforma um formulário em uma aplicação. O JavaScript completo controla a amostra de leitura, o resumo de revisão e o resultado local, enquanto o navegador cuida da semântica básica dos campos. Consulte a especificação de apoio ## Sistema de design Pico CSS: variáveis de tema e funções semânticas ### Variáveis de tema e funções semânticas A função primária padrão não é uma única cor aplicada indiscriminadamente. O Pico separa os valores de texto primário, plano de fundo, estado ao passar o cursor, foco e inversão. A tabela de referência lista as definições reais para o tema claro, permitindo personalizar a marca sem perder essas relações. Os rótulos da sala de leitura usam a função de texto primário; os botões herdam o tratamento completo dos componentes do Pico. O controle de aparência define data-theme em html. Um atributo explícito de tema claro ou escuro prevalece sobre a seleção automática do esquema. Se você removê-lo, o Pico poderá seguir a preferência de esquema do navegador. A demonstração usa um modo inicial explícito para manter a caixa de seleção sincronizada com a aparência visual. Ao introduzir uma paleta primária personalizada, substitua as definições dos dois esquemas; alterar apenas um valor raiz do tema claro não basta para criar um tema escuro completo. Consulte a especificação de apoio ## Sistema de design Pico CSS: a tipografia responsiva altera toda a escala ### A tipografia responsiva altera toda a escala O Pico altera o tamanho da fonte raiz em vários intervalos de largura da janela de visualização: 100% inicialmente, depois 106,25%, 112,5%, 118,75%, 125% e 131,25%. Com o padrão de 16px do navegador, esses valores correspondem a 16–21px. Como o espaçamento dos componentes usa rem, o layout confortável se expande junto com o texto. Portanto, um token descrito como um rem nem sempre equivale a dezesseis pixels. O controle deslizante do exemplo altera apenas font-size de #sample para um percentual do tamanho herdado. Ele não modifica a variável raiz do Pico nem o nível de zoom do navegador. Essa distinção mantém estáveis os controles de configuração e deixa claro o escopo local da alteração. O valor nativo exibe o percentual selecionado. Os títulos mantêm os padrões do Pico: h1 tem 2rem e h2 tem 1,75rem. Consulte a especificação de apoio ## Sistema de design Pico CSS: largura de linha e composição de leitura ### Largura de linha e composição de leitura As três larguras de linha são escolhas próprias expressas em unidades ch. Elas definem uma largura máxima, sem forçar o texto a ocupar toda a coluna. Em dispositivos móveis, o exemplo pode ficar mais estreito do que o limite máximo selecionado; esse é o resultado esperado de uma largura máxima responsiva. Não é necessário rolar horizontalmente para respeitar uma preferência por linhas mais largas. O layout de leitura personalizado tem duas colunas minmax e se reorganiza em uma coluna abaixo de 800px. Esse limite é específico desta composição, não um ponto de interrupção oficial do Pico. Os botões de revisão e redefinição usam o auxiliar de grade do Pico, enquanto o rodapé do diálogo usa uma linha flexível que permite quebra. Em telas estreitas, manter um painel de configurações legível é mais importante do que preservar o layout em duas colunas. Consulte a especificação de apoio ## Sistema de design Pico CSS: validação nativa com uma etapa útil de revisão ### Validação nativa com uma etapa útil de revisão O nome do perfil usa required e minlength, com um pequeno texto de ajuda associado. A validação nativa de restrições impede o envio de um valor vazio. O script também verifica o valor sem espaços nas extremidades, para que dois espaços não satisfaçam a regra da aplicação. Um evento invalid adiciona aria-invalid para ativar o estilo de erro do Pico; ao digitar, o erro personalizado e o atributo de inválido desatualizado são removidos. Select e range são controles normais do navegador. Eles atualizam o exemplo de leitura imediatamente, enquanto Revisar perfil captura um objeto pendente separado. Esse instantâneo é o texto exibido no diálogo e os dados usados por Aplicar localmente, para que a confirmação não descreva um conjunto de valores e aplique outro por engano. 1. Deixe o nome do perfil vazio e tente selecionar Revisar perfil. 2. Digite um nome, escolha uma largura e altere o tamanho do texto do exemplo. 3. Revise o instantâneo, cancele para continuar editando ou aplique-o ao status local. Consulte a especificação de apoio ## Sistema de design Pico CSS: um modal de verdade, não apenas uma sobreposição estilizada ### Um modal real, não apenas uma sobreposição estilizada O Pico estiliza dialog e seu conteúdo article, mas não fornece JavaScript para a aplicação. Este exemplo chama HTMLDialogElement.showModal. O navegador coloca o diálogo na camada superior, torna inerte o restante do documento e permite fechá-lo nativamente com Escape. Definir apenas o atributo open criaria um comportamento diferente, não modal, que não é usado aqui. O diálogo tem aria-labelledby apontando para o título. O botão de fechar tem um rótulo acessível explícito, enquanto Continuar editando e Aplicar localmente descrevem os dois resultados possíveis. Os dois botões de cancelamento chamam close sem alterar o status salvo. A aplicação registra o perfil pendente em um texto visível e fecha o diálogo; ela não grava em localStorage nem envia uma solicitação. Consulte a especificação de apoio ## Sistema de design Pico CSS: um disclosure nativo para explicações complementares ### Um elemento nativo de divulgação para explicações complementares O par details/summary explica quais controles afetam o exemplo e quais não afetam. Ele pode ser expandido de verdade sem JavaScript, pois esse comportamento pertence ao elemento HTML. O summary apresenta uma pergunta descritiva e continua operável pelo teclado. Como a explicação é conteúdo complementar, ela não interrompe o formulário principal com outro painel sempre aberto. Não substitua details por um título estilizado apenas porque a captura de tela no estado fechado parece semelhante. Da mesma forma, o controle de aparência mantém type=checkbox com role=switch, de modo que tem um estado binário real. O Pico aplica estilos a estruturas semânticas; essas estruturas são responsáveis por boa parte do contrato de interação. - article cria uma superfície de preferências visualmente agrupada. - details e summary oferecem um disclosure nativo. - O diálogo aberto com showModal estabelece um limite de revisão modal. Consulte a especificação de apoio ## Sistema de design Pico CSS: instale uma vez e mantenha o exemplo reproduzível ### Instale uma vez e mantenha o exemplo reproduzível O pacote padrão inclui um pico.min.css compilado. Copie-o para uma pasta local de assets, inclua-o antes das regras de layout da aplicação e carregue o app.js fornecido com defer. A marcação completa, CSS e o script são apresentados acima. Este exemplo não requer um provedor de framework, uma fonte de ícones nem um plugin de JavaScript de terceiros. Use a folha de estilos padrão de forma consistente com as classes de container e grid. A versão sem classes parte de outras premissas de layout, e a versão condicional aplica estilos em escopos diferentes; trocar essas distribuições sem verificar a marcação não é uma otimização neutra. Se adicionar o Pico a um site existente, verifique como os seletores de elementos dele interagem com os estilos já aplicados a formulários e tipografia antes de usá-lo globalmente. Consulte a especificação de apoio ## Sistema de design Pico CSS: escolha a distribuição antes de adaptar a marcação ### Escolha a distribuição antes de adaptar a marcação Este exemplo usa a distribuição padrão e seus auxiliares de container e grid. A distribuição sem classes altera as premissas de layout, enquanto a distribuição condicional limita o escopo dos estilos do Pico. Trate a escolha da distribuição como uma decisão de integração, não como uma otimização intercambiável do tamanho dos arquivos. Em um site existente, examine o alcance dos seletores de elementos sobre títulos, formulários, artigos e diálogos já existentes. O tamanho de fonte percentual do exemplo de leitura é uma substituição local e deve continuar restrito a esse escopo; alterar a escala raiz também modificaria o espaçamento e os controles do Pico baseados em rem. Ao decidir quais partes do documento herdam o tema, mantenha alinhados o atributo de aparência e os controles de preferência da aplicação. Consulte a especificação de apoio ## Sistema de design Pico CSS: exemplos de componentes ### Interface semântica completa para leitura Os rótulos envolvem os controles, article cria o cartão de configurações, details oferece um disclosure e dialog contém a revisão. ```

PICO CSS / READING ROOM

A calmer reading setup

Adjust a local reading profile. Semantic HTML does most of the work.

Reading preferences

At least two characters. Saved only for this open preview.
No profile applied yet.

A SHORT SAMPLE

Make space for attention.

The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.

A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.

What changes in this preview?

Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.

Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.

Review reading profile

 ``` Referência de código - O Pico estiliza esses elementos; as APIs do navegador fornecem o comportamento nativo. - O diálogo é aberto com showModal, não com a adição do atributo open. ### Interação original com o perfil Estilos dinâmicos, validação nativa, revisão segura do texto e comportamento local de aplicação e redefinição. ``` const $=id=>document.getElementById(id);let pending=null; function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';} for(const id of ['measure','scale','night'])$(id).addEventListener('input',update); $('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();}); $('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')}); for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close()); $('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();}); $('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update(); ``` Referência de código - O perfil nunca sai deste documento. - Nomes que contêm apenas espaços são rejeitados com setCustomValidity. ### Layout de leitura Regras explícitas da aplicação separam o painel de configurações do exemplo. ``` main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}} ``` Referência de código - O ponto de interrupção de 800px e as medidas em ch são escolhas personalizadas. ## Pico CSS Configuração do agente do sistema de design ### Ponto de partida para implementação Salve os exemplos completos acima como body, style.css e app.js. A prévia independente incorpora o mesmo CSS oficial e o código original da aplicação. Usa o suporte atual dos navegadores ao API nativo de diálogo. O invólucro HTML inclui toda a marcação do body; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo indicados aqui. ``` Reading room

PICO CSS / READING ROOM

A calmer reading setup

Adjust a local reading profile. Semantic HTML does most of the work.

Reading preferences

At least two characters. Saved only for this open preview.
No profile applied yet.

A SHORT SAMPLE

Make space for attention.

The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.

A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.

What changes in this preview?

Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.

Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.

Review reading profile

 ``` ### Um prompt para seu projeto ``` Use o exemplo de perfil de leitura do Pico 2.1.1 com a folha de estilos padrão, o elemento article semântico, o formulário nativo e o disclosure details. Restrinja ao exemplo as alterações no tamanho do texto e na largura de linha, e sincronize a caixa de seleção de aparência com data-theme. Valide o nome do perfil após remover os espaços das extremidades, capture um instantâneo para revisão e abra-o com dialog.showModal; o cancelamento não deve aplicá-lo. Aplique somente o perfil local capturado e redefina os valores após restaurar os padrões nativos do formulário. Mantenha a escala raiz responsiva do Pico em vez de substituí-la pela configuração de tamanho do texto do exemplo. ``` ## Sistema de design Pico CSS: fontes e escopo Pico CSS 2.1.1. Os tokens padrão estão separados das regras originais de layout de leitura e de perfil. Não há persistência nem serviço remoto implementados. - Variáveis CSS Definições reais de estilo e cor. - Tipografia Títulos semânticos e tipografia. - Formulários Composição de formulário nativo. - Modal Estilização do diálogo e limite do comportamento da aplicação. - Grade Auxiliar de layout responsivo. - Acordeão Disclosure de details e summary. ## Sistema de design Pico CSS: recursos relacionados ### Preline UI Um planejador de sessões nativo do Preline, com guias vinculadas, um plugin de entrada numérica com restrições, aliases de tema instalados, escalas reais do Tailwind e uma estimativa local de materiais que se atualiza conforme a sessão selecionada. ### Prime UI Uma implementação do PrimeVue com versão fixada do ecossistema Prime UI: uma árvore de documentos com tema Aura e referências reais de predefinição, expansão controlada, filtragem, seleção e fixação local. ### Pure CSS Pure CSS é uma folha de estilos modular para grades, formulários, botões, menus e tabelas, sem um runtime de widgets. Este guia mostra como o módulo opcional de grade responsiva e os elementos semânticos nativos se combinam em um catálogo de equipamentos filtrável, com ordenação e seleção implementadas explicitamente. - [Referência de implementação](https://picocss.com/docs/forms) - [Fonte](https://picocss.com/docs/css-variables) - [Consulte a especificação de apoio](https://picocss.com/docs/forms) - [Consulte a especificação de apoio](https://picocss.com/docs/css-variables) - [Consulte a especificação de apoio](https://picocss.com/docs/typography) - [Consulte a especificação de apoio](https://picocss.com/docs/grid) - [Consulte a especificação de apoio](https://picocss.com/docs/modal) - [Consulte a especificação de apoio](https://picocss.com/docs/accordion) - [Referência de código](https://picocss.com/docs/modal) - [Referência de código](https://picocss.com/docs/forms) - [Referência de código](https://picocss.com/docs/grid) - [Variáveis CSS Definições reais de estilo e cor.](https://picocss.com/docs/css-variables) - [Tipografia Títulos semânticos e tipografia.](https://picocss.com/docs/typography) - [Formulários Composição de formulário nativo.](https://picocss.com/docs/forms) - [Modal Estilização do diálogo e limite do comportamento da aplicação.](https://picocss.com/docs/modal) - [Grade Auxiliar de layout responsivo.](https://picocss.com/docs/grid) - [Acordeão Disclosure de details e summary.](https://picocss.com/docs/accordion)