Esta página ajuda designers e desenvolvedores a gerar um style guide para seus
projetos. Abra o painel no ícone flutuante e ajuste as variáveis de topo — cores, tipografia, espaçamento e botões:
cada componente abaixo reage na hora, porque todos referenciam os mesmos tokens (nada de valor fixo).
Quando estiver do seu jeito, exporte um index.html pronto, com o CSS e o JS básico dos
componentes já embutidos.
Parágrafo padrão (--fs-base): a fonte e a cor vêm do body. Um link inline, texto em negrito, em itálico e um trecho de código. Atalho: Ctrl + K.
Texto secundário / muted.
Mono — Noto Sans Mono.
Citação em bloco — recuada, com borda no accent e cor muted.
Lista não ordenada — item um
Item dois
Sub-item aninhado
Lista ordenada — passo um
Passo dois
Termo
Definição correspondente.
Outro
Outra definição.
function soma(a, b) {
return a + b; // 4 espaços de indentação
}
Texto corrido
Título do artigo
Este é um bloco de texto corrido para verificar o ritmo vertical entre elementos: parágrafos, títulos e listas fluindo em sequência. O espaçamento entre blocos vem de --space-3, e a medida de linha é limitada a 68ch para leitura confortável.
Um segundo parágrafo mostra como dois blocos de texto se separam. Ele pode conter um link inline, texto em itálico e trechos em monoespaçado sem quebrar o fluxo.
Subtítulo de seção
Depois de um subtítulo, o parágrafo continua. Abaixo, uma lista não ordenada com um nível de aninhamento:
Primeiro item da lista
Segundo item, com sub-itens:
Sub-item A
Sub-item B
Terceiro item
E uma lista ordenada para passos em sequência:
Primeiro passo do processo
Segundo passo
Terceiro passo
Rótulo menor (h4)
Fechando o bloco, uma citação destacada:
“O conteúdo primeiro; o estilo depois. Mas os dois governados pelos mesmos tokens.”
Utilitários responsivos no @layer utilities. .grid preenche por largura mínima (--grid-min), sem media query. .grid-2/3/4 = colunas fixas que colapsam em telas estreitas.
