# Sistema de design Decanter ## Prévia da interface do sistema de design Decanter Filtre os cartões originais de eventos, abra um resumo e recupere-se de uma busca sem resultados para determinado tema. ## Referência de design do sistema de design Decanter Pacote Decanter 7.5.3 e instalação/convenções oficiais da v7. As descontinuações da v8 são tratadas como notas de migração. A prévia é uma interpretação identificada como tal de HTML/CSS, usa fontes locais alternativas e não inclui marcas da universidade. ### Configuração tipográfica | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Primary sans / serif | Source Sans 3 / Source Serif 4 | As fontes alternativas são Helvetica/Arial e Georgia/Times. | | Long-form line height | 1.4–1.5em | Intervalo de leitura recomendado. | | Short text / headings | 1.2–1.3em | Grupos mais compactos. | ### Configurações modulares selecionadas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Scale mobile / tablet / desktop | 1.15 / 1.2 / 1.25 | Proporção entre níveis type-*. | | basefont-23 selection | 18px XS–SM; 21px MD–XL; 23px 2XL | Configuração explícita usada no exemplo. | | Breakpoints SM / MD / LG / XL / 2XL | 576 / 768 / 992 / 1200 / 1500px | Limites responsivos. | | cc maximum | 1500px at 1700px viewport | Contêiner de conteúdo fluido com margens nas extremidades da tela. | | Screen edge XS / SM / MD / LG / XL | 20 / 30 / 50 / 80 / 100px | Curado, não uma escala matemática. | ### Cores de identidade e de ação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Cardinal red | #8c1515 | Cor primária de identidade. | | Black / cool grey | #2e2d29 / #53565a | Paleta neutra primária. | ### Paleta interativa para a Web | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Digital red / dark | #b1040e / #820000 | Tratamento interativo; não substitui a cor do logotipo. | | Digital blue / dark | #006cb8 / #00548f | Tratamento dos links. | ## Guia completo do sistema de design Decanter 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 Decanter: um preset Tailwind, não um SDK ### Fixe a rota de geração documentada > O pacote Decanter verificado é a versão 7.5.3 e declara Tailwind CSS ^3.4.17. Sua entrada pública é um preset de configuração do Tailwind. Adicione require("decanter") a presets, indique em content os arquivos de origem reais e compile a folha de estilos com as utilidades. Não há um provedor React de Decanter para importar. A documentação inclui remoções previstas para a v8, embora ainda identifique a rota de instalação como v7. Esta referência fixa a versão v7.5.3 e evita as utilidades descontinuadas foggy, slab e as versões mais antigas dos utilitários modulares de texto. A prévia independente é uma interpretação claramente identificada das regras de layout, não uma suposta compilação do Tailwind. Consulte a especificação de apoio ## Sistema de design Decanter: tipografia modular responsiva ### A escala depende do valor base Source Sans 3 e Source Serif 4 são as famílias sans-serif e serif primárias, com Helvetica/Arial e Georgia/Times como alternativas. Os utilitários type-* definem funções proporcionais, não títulos com tamanho fixo em pixels. O multiplicador da escala é 1.15 em dispositivos móveis, 1.2 em tablets e 1.25 em computadores. O exemplo usa a configuração documentada basefont-23: 18px em XS–SM, 21px em MD–XL e 23px em 2XL. O título tem tamanho type-3 para manter a proporção da apresentação em um exemplo incorporado compacto. Um projeto que escolha outro valor base deve recalcular os tamanhos resultantes, em vez de copiar os valores em pixels desta prévia. Consulte a especificação de apoio ## Sistema de design Decanter: contêiner e grade fluidos ### A margem da tela faz parte do layout O contêiner cc usa espaçamentos curados nas extremidades: 20px em XS, 30px em SM, 50px em MD, 80px em LG e 100px em XL. Ele se expande até atingir um limite de conteúdo de 1500px em uma viewport de 1700px. É um sistema fluido com regras explícitas para as margens, não simplesmente um contêiner fixo de 1200px. O exemplo segue essas margens e transforma os dois cartões editoriais em uma única coluna abaixo de MD. O conteúdo dos cartões mantém a ordem normal do documento, então a navegação pelo teclado segue a mesma sequência de leitura quando o layout passa a uma coluna. Consulte a especificação de apoio ## Sistema de design Decanter: espaçamento responsivo ### Use utilitários responsivos com intenção Decanter fornece as famílias rs-m-* e rs-p-* para margens e preenchimentos responsivos. Um nível selecionado muda nos intervalos documentados; não é um alias para o espaçamento fixo do Tailwind. O código de exemplo usa rs-p-1 ao redor de um cartão e preenchimento fixo comum na ação. Para que a referência independente seja reproduzível, a interpretação identifica cada ajuste de CSS como código da aplicação. Em uma compilação nativa, use o utilitário gerado pelo preset em vez de definir uma segunda regra concorrente com o mesmo nome. Evite fragmentos dinâmicos como "rs-p-" + size quando o analisador da compilação não conseguir detectar a classe completa. Consulte a especificação de apoio ## Sistema de design Decanter: cores de identidade e interativas ### Cardinal e vermelho digital têm funções diferentes O vermelho Cardinal primário de Stanford é #8c1515. O vermelho digital #b1040e é uma cor interativa/de destaque e não substitui o Cardinal na identidade da universidade. O azul digital #006cb8 é usado nos links, com #00548f como estado de interação mais escuro. O exemplo usa vermelho digital na ação que expande os detalhes e superfícies neutras discretas. Não inclui logotipo, selo ou barra de identidade oficial de Stanford. Uma implementação institucional deve usar recursos de identidade autorizados e seguir as regras de marca da universidade; uma referência técnica não implica endosso. Consulte a especificação de apoio ## Sistema de design Decanter: cartões editoriais com ações ### Componha o conteúdo em vez de adivinhar um componente API Os exemplos oficiais de cartões são elementos HTML semânticos, com utilitários para espaçamento, tipografia, superfícies e ações. Nossa composição mantém a categoria do evento separada do título, exibe a data e o local em texto e usa um botão real para revelar o resumo no próprio lugar. Ela não inventa uma API de propriedade Card em Decanter. Um título com link seria apropriado se o resultado esperado fosse navegar para outra página. Aqui, o resultado é a expansão local, portanto um botão com aria-expanded e aria-controls comunica esse comportamento. A prévia usa nomes e resumos originais de eventos, em vez de copiar notícias da universidade. - Use o título do evento como cabeçalho do cartão. - Mantenha o horário e o local visíveis antes da expansão. - Use um botão para revelar conteúdo e um link apenas para navegação real. Consulte a especificação de apoio ## Sistema de design Decanter: filtros e divulgação de conteúdo ### Mantenha o conteúdo disponível em todos os layouts O seletor de temas filtra os dois cartões originais de eventos de pesquisa e atualiza um contador de resultados visível. A opção sem correspondências demonstra intencionalmente um estado vazio e uma forma de redefinir o filtro. O filtro não altera a hierarquia dos cabeçalhos nem transforma os cartões em opções selecionáveis de formulário. Cada resumo tem seu próprio estado de botão. Ao fechar um cartão, o foco permanece no mesmo acionador. Ao mudar o filtro, os resumos ocultos são fechados para que, ao voltar a um tema, a visualização comece em um estado consistente. Os controles são comportamentos da aplicação adicionados a uma abordagem de design baseada em utilitários, não um JavaScript Decanter incluído no pacote. Consulte a especificação de apoio ## Sistema de design Decanter: compile e valide o resultado ### As classes geradas exigem arquivos de origem analisados A configuração fornecida é voltada ao Tailwind 3 e ao preset Decanter 7.5.3 verificado. Ela inclui as diretivas de entrada, o padrão de busca dos arquivos de conteúdo, o comando de saída e uma composição original de cartão. Vincule a folha de estilos resultante no cabeçalho do documento. Carregue separadamente os arquivos de fontes aprovados ou mantenha intencionalmente as fontes alternativas documentadas. A prévia não foi criada com essa cadeia de ferramentas, conforme indicado no rótulo de implementação. Uma adoção em produção deve compilar o conjunto completo de classes e inspecionar o resultado gerado, especialmente após uma atualização de versão principal que altere utilitários descontinuados. 1. Fixe a versão de Decanter e a versão principal compatível do Tailwind. 2. Registre o preset e analise o diretório de origem real. 3. Compile as três camadas de diretivas do Tailwind. 4. Verifique a fonte base escolhida, as margens da tela e as ações dos cartões nos pontos de interrupção documentados. Consulte a especificação de apoio ## Sistema de design Decanter: exemplos de componentes ### Cartão editorial original Elemento semântico HTML composto com famílias de utilitários verificadas e um botão de divulgação controlado pela aplicação. ```

Research conversation

Reading the changing coast

An original example event about field observations.

``` Referência de código ### Configuração do preset Configuração mínima completa para a rota definida do Tailwind 3. ``` module.exports = { presets: [require('decanter')], content: ['./src/**/*.{html,js}'] }; ``` 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. ``` Decanter editorial composition

RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES

Ideas take shape in conversation.

A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.

2 example events

ENVIRONMENT

Reading the changing coast

How field notes reveal changes that a single measurement cannot capture.

ARCHIVES

The stories between records

Exploring how context connects objects in a community archive.

Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.
``` 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 do sistema de design Decanter ### Ponto de partida para implementação Ponto de entrada de compilação do preset verificado nas fontes; não foi executado para a prévia independente interpretada. Vincule dist/styles.css no cabeçalho do documento. As fontes e os recursos de identidade institucional são decisões separadas. O ZIP do exemplo funcional completo, disponível em Fontes, também fornece as dependências exatas da prévia e o documento completo. Extraia-o, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/stanford-decanter.html. Não abra exemplos baseados em módulos por meio de file://. ``` npm install --save-dev decanter@7.5.3 tailwindcss@3.4.17 # tailwind.config.cjs # module.exports = { # presets: [require('decanter')], # content: ['./src/**/*.{html,js}'] # }; # src/input.css # @tailwind base; # @tailwind components; # @tailwind utilities; npx tailwindcss -c tailwind.config.cjs -i ./src/input.css -o ./dist/styles.css ``` ### Um prompt para seu projeto ``` Crie uma página editorial de eventos com Decanter 7.5.3/Tailwind 3. Use o preset, escolha explicitamente basefont, aplique a escala type-* e as margens de tela cc. Mantenha tema, título, horário e local separados em cartões semânticos. Implemente a filtragem local por tema e os controles de resumo com aria-expanded. Evite utilitários foggy/slab descontinuados, notícias da universidade copiadas e marcas de identidade. Identifique qualquer prévia interpretada manualmente, separadamente de uma compilação de Decanter. ``` ## Fontes e escopo do sistema de design Decanter Composição educacional independente de OpenDesign, não é uma página oficial de evento da universidade. Conteúdo original, sem marcas de Stanford. A adoção do código e o uso da identidade autorizado pela marca são questões distintas. - visão geral de Decanter Objetivo oficial, públicos e pontos de acesso aos recursos. - Instalação para desenvolvedores Orientações de implementação e configuração específicas da versão. - Criação no Figma Entrada oficial da biblioteca de design. - 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 Decanter ### Suomi.fi sistema de design Crie formulários legíveis para serviços públicos finlandeses com Source Sans 3, tokens de espaçamento explícitos e um padrão recuperável de seleção de documentos. ### UNDP sistema de design Explore os tokens públicos de cor e espaçamento da UNDP, abas nativas operáveis pelo teclado e um exemplo completo de leitura de oficina com progresso de revisão local. ### USWDS Combine os tokens de espaçamento de USWDS, os papéis do tema, tabelas semânticas e accordions nativos em uma comparação de oportunidades pesquisável. - [Referência de implementação](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Fonte](https://decanter.stanford.edu/for-designers/type-grids-and-color) - [Fonte](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Fonte](https://identity.stanford.edu/design-elements/color/primary-colors/) - [Fonte](https://identity.stanford.edu/design-elements/color/web/) - [Consulte a especificação de apoio](https://decanter.stanford.edu/for-developers/installation) - [Consulte a especificação de apoio](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Consulte a especificação de apoio](https://identity.stanford.edu/design-elements/color/web/) - [Consulte a especificação de apoio](https://decanter.stanford.edu/examples/cards) - [Referência de código](https://decanter.stanford.edu/examples/cards) - [Referência de código](https://decanter.stanford.edu/for-developers/installation) - [Referência de código](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [visão geral de Decanter Objetivo oficial, públicos e pontos de acesso aos recursos.](https://decanter.stanford.edu/) - [Instalação para desenvolvedores Orientações de implementação e configuração específicas da versão.](https://decanter.stanford.edu/for-developers/installation) - [Criação no Figma Entrada oficial da biblioteca de design.](https://decanter.stanford.edu/for-designers/figma)