Crie páginas editoriais acadêmicas com a predefinição Tailwind de Decanter, uma escala tipográfica responsiva e bordas de tela fluidas. Explore cartões originais de eventos com filtros de tema funcionais e resumos expansíveis.
Interpretação original de Decanter v7 em HTML/CSS, com tipografia modular, margens de tela e funções das cores; não é um ambiente de execução de preset compilado. · Referência de implementação
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
Fixe a versão de Decanter e a versão principal compatível do Tailwind.
Registre o preset e analise o diretório de origem real.
Compile as três camadas de diretivas do Tailwind.
Verifique a fonte base escolhida, as margens da tela e as ações dos cartões nos pontos de interrupção documentados.
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>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</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
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://.
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.
05
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.
