Hero primitives

<div class="sc-card">
                    <h3 style="margin:0;">Smart UI</h3>
                    <p class="doc-muted" style="margin: 10px 0 0;">
                      Framework component-first com temas e modo claro/escuro. Selecione um item no menu para ver preview + snippet.
                    </p>
                    <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                      <button class="sc-btn sc-btn-primary" type="button" onclick="location.hash='#doc-start'">Começar</button>
                      <button class="sc-btn sc-btn-glass" type="button" onclick="location.hash='#doc-theme'">Theming</button>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<div class="sc-banner">
                    <div class="sc-banner-inner">
                      <div class="sc-banner-grid">
                        <div>
                          <span class="sc-badge">Hero</span>
                          <h2 class="sc-banner-title">Crie interfaces bonitas em minutos</h2>
                          <p class="sc-banner-subtitle">Tokens + componentes prontos + variações. Troque o tema no topo e valide rapidamente.</p>
                          <div class="sc-banner-actions">
                            <button class="sc-btn sc-btn-primary" type="button" onclick="location.hash='#doc-grid'">Ver Grid</button>
                            <button class="sc-btn sc-btn-outline" type="button" onclick="location.hash='#doc-banner'">Ver Banners</button>
                          </div>
                        </div>
                        <div class="sc-banner-media sc-banner-media--ratio"></div>
                      </div>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<div class="sc-banner sc-banner--center">
                    <div class="sc-banner-inner">
                      <h2 class="sc-banner-title">Documentação focada</h2>
                      <p class="sc-banner-subtitle">A sidebar mostra só o componente selecionado (sem poluição).</p>
                      <div class="sc-banner-actions" style="justify-content:center;">
                        <button class="sc-btn sc-btn-primary" type="button" onclick="location.hash='#doc-buttons'">Botões</button>
                        <button class="sc-btn sc-btn-glass" type="button" onclick="location.hash='#doc-forms'">Forms</button>
                      </div>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<div class="sc-banner sc-banner--glass">
                    <div class="sc-banner-inner">
                      <div class="sc-banner-grid">
                        <div>
                          <span class="sc-badge sc-badge-info">Glass</span>
                          <h2 class="sc-banner-title">Perfeito para temas “Glass / Aurora”</h2>
                          <p class="sc-banner-subtitle">Valide contraste e blur com modo escuro/claro.</p>
                          <div class="sc-banner-actions">
                            <button class="sc-btn sc-btn-primary" type="button" onclick="location.hash='#doc-animations'">Animações</button>
                            <button class="sc-btn sc-btn-glass" type="button" onclick="location.hash='#doc-carousel'">Carousel</button>
                          </div>
                        </div>
                        <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
                          <div class="doc-muted">Exemplo</div>
                          <div class="sc-display-2 sc-text-gradient" style="margin-top: 10px;">Smart UI</div>
                          <p class="doc-muted" style="margin: 10px 0 0;">Card dentro do hero para validar superfícies.</p>
                        </div>
                      </div>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<div class="sc-banner sc-banner--announce">
                    <div class="sc-banner-inner">
                      <div class="sc-banner-grid">
                        <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
                          <span class="sc-badge">NOVO</span>
                          <span class="doc-muted">13 temas + light/dark independente.</span>
                        </div>
                        <div class="sc-banner-actions" style="justify-content:flex-end;">
                          <button class="sc-btn sc-btn-primary sc-btn-sm" type="button" onclick="location.hash='#doc-theme'">Ver temas</button>
                        </div>
                      </div>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<div class="sc-banner sc-banner--compact">
                    <div class="sc-banner-inner">
                      <div class="sc-banner-grid">
                        <div>
                          <span class="sc-badge sc-badge-success">Pronto</span>
                          <h2 class="sc-banner-title">Component-first, sem dependências</h2>
                          <p class="sc-banner-subtitle">JS vanilla + CSS tokens. Bom para Laravel, sites estáticos ou projetos custom.</p>
                          <div class="sc-banner-actions">
                            <button class="sc-btn sc-btn-primary" type="button" onclick="location.hash='#doc-start'">Instalar</button>
                            <button class="sc-btn sc-btn-outline" type="button" onclick="location.hash='#doc-tokens'">Tokens</button>
                          </div>
                        </div>
                        <div class="sc-grid sc-cols-2 sc-gap-2">
                          <div class="sc-card sc-card-compact sc-card-hover">
                            <div class="doc-muted">Temas</div>
                            <strong style="font-size: 1.1rem;">13</strong>
                          </div>
                          <div class="sc-card sc-card-compact sc-card-hover">
                            <div class="doc-muted">Modo</div>
                            <strong style="font-size: 1.1rem;">Light/Dark</strong>
                          </div>
                          <div class="sc-card sc-card-compact sc-card-hover">
                            <div class="doc-muted">JS</div>
                            <strong style="font-size: 1.1rem;">Vanilla</strong>
                          </div>
                          <div class="sc-card sc-card-compact sc-card-hover">
                            <div class="doc-muted">A11y</div>
                            <strong style="font-size: 1.1rem;">ARIA</strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-product-stage"><header><span class="sc-badge">NORTH PLATFORM</span><h2>Transforme trabalho disperso em uma operação visível.</h2><p>Planejamento, execução e decisão no mesmo fluxo.</p><a class="sc-btn sc-btn-primary" href="/templates/saas/">Conhecer produto</a></header><figure><div class="sc-stage-window"><small>SEMANA 34</small><strong>18 entregas no ritmo</strong><i></i><i></i><i></i></div><figcaption><b>+28%</b><span>de previsibilidade</span></figcaption></figure></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-dashboard"><nav><span>OPERAÇÃO / AGOSTO</span><div><button type="button">7 dias</button><button type="button">Exportar</button></div></nav><div><small>NOVO DASHBOARD</small><h2>Decisões começam com contexto.</h2><p>Um lançamento pensado para times que precisam agir antes do relatório fechar.</p></div><aside><article><span>Receita</span><b>R$ 428 mil</b></article><article><span>Conversão</span><b>31,4%</b></article><div class="sc-mini-chart" aria-label="Crescimento constante"></div></aside></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<article class="sc-hero-editorial"><header><span>EDIÇÃO 08 / PRODUTO</span><h2>Menos ruído. Mais intenção em cada tela.</h2><footer><a href="/docs/philosophy/">Ler manifesto →</a><small>6 min de leitura</small></footer></header><figure><div aria-hidden="true">A</div><figcaption>Direção visual para produtos que precisam permanecer legíveis.</figcaption></figure></article>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-aurora"><div class="sc-aurora-field" aria-hidden="true"><i></i><i></i><i></i></div><header><span>ORBIT CLOUD</span><h2>Infraestrutura que desaparece para o produto aparecer.</h2><p>Deploy, observabilidade e escala em uma superfície única.</p><div><a class="sc-btn sc-btn-primary" href="/templates/startup/">Criar ambiente</a><a href="/docs/">Ver arquitetura</a></div></header><ul><li><b>99,99%</b> disponibilidade</li><li><b>14 regiões</b> conectadas</li></ul></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-console"><header><small>VECTOR API / V2</small><h2>Do primeiro request à produção.</h2><p>Uma API previsível, documentada e observável.</p><nav><a class="sc-btn sc-btn-primary" href="/docs/getting-started/npm/">Instalar SDK</a><a href="/docs/javascript/">Abrir documentação →</a></nav></header><pre aria-label="Exemplo de API"><code><span>import</span> { vector } <span>from</span> '@north/sdk'

const result = await vector.run({
  workflow: 'onboarding',
  customer: 'acme'
})</code></pre><footer><span>Node</span><span>PHP</span><span>Python</span><span>REST</span></footer></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-ai"><header><span>ASSISTENTE DE OPERAÇÃO</span><h2>Pergunte ao trabalho. Receba uma próxima ação.</h2><form><label class="sc-visually-hidden" for="ai-question">Pergunta</label><input id="ai-question" class="sc-input" value="Quais projetos exigem atenção hoje?"><button class="sc-btn sc-btn-primary" type="button">Analisar</button></form></header><div class="sc-ai-answer"><small>RESUMO GERADO</small><p>Três entregas dependem de aprovação. O projeto Atlas concentra o maior risco de prazo.</p><ol><li>Confirmar conteúdo com o cliente</li><li>Redistribuir revisão de QA</li><li>Atualizar marco de entrega</li></ol></div><aside><span>Fontes verificadas</span><b>Projetos</b><b>Tarefas</b><b>Conversas</b></aside></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-commerce"><figure><div class="sc-product-art" aria-hidden="true"></div><figcaption>Coleção Terra · edição 02</figcaption></figure><article><small>DESIGN PARA O DIA A DIA</small><h2>Luz quente, forma essencial.</h2><p>Luminária Alba em alumínio reciclado e acabamento mineral.</p><div class="sc-product-options"><button type="button" aria-label="Cor areia"></button><button type="button" aria-label="Cor terracota"></button><button type="button" aria-label="Cor grafite"></button></div><footer><b>R$ 790</b><button class="sc-btn sc-btn-primary" type="button">Adicionar à sacola</button></footer></article></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-mobile"><article><span>APP NORTH</span><h2>Sua operação cabe no intervalo entre duas reuniões.</h2><p>Acompanhe, aprove e responda sem perder o contexto do projeto.</p><ol><li><b>01</b> Alertas acionáveis</li><li><b>02</b> Aprovação com histórico</li><li><b>03</b> Conversas no contexto</li></ol><a class="sc-btn sc-btn-primary" href="/templates/dashboard/">Conhecer o app</a></article><div class="sc-phone-frame"><header>9:41 <span>•••</span></header><main><small>HOJE</small><strong>Bom dia, Marina.</strong><div>3 itens precisam de você</div><button type="button">Revisar agora</button></main><footer><span>⌂</span><span>◇</span><span>＋</span><span>○</span></footer></div></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-security"><div class="sc-security-mark" aria-hidden="true"><i></i><span>✓</span></div><header><small>SEGURANÇA CONTÍNUA</small><h2>Confiança não deve depender de uma tela escondida.</h2><p>Identidade, políticas e auditoria tratadas como parte do produto.</p><a class="sc-btn sc-btn-primary" href="/docs/accessibility/">Ver controles</a></header><dl><div><dt>Sessões verificadas</dt><dd>2.418</dd></div><div><dt>Políticas ativas</dt><dd>36</dd></div><div><dt>Tempo de resposta</dt><dd>42 ms</dd></div></dl></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-data"><header><span>RELATÓRIO / Q3</span><h2>O crescimento veio de menos canais, melhor escolhidos.</h2><p>A leitura conecta comportamento, receita e decisão em uma narrativa única.</p></header><figure><div class="sc-data-bars" aria-label="Receita crescente em seis períodos"><i></i><i></i><i></i><i></i><i></i><i></i></div><figcaption><b>+42%</b><span>receita qualificada</span></figcaption></figure><aside><p><b>01</b> Busca orgânica ganhou eficiência.</p><p><b>02</b> Indicação elevou ticket médio.</p></aside></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-community"><div class="sc-community-orbit" aria-hidden="true"><span>AM</span><span>RF</span><span>LS</span><span>CN</span><span>JB</span></div><header><small>8.400 PESSOAS CONSTRUINDO</small><h2>Conhecimento cresce quando circula.</h2><p>Uma comunidade para compartilhar padrões, decisões e experiências reais de produto.</p><div><a class="sc-btn sc-btn-primary" href="/docs/">Participar da comunidade</a><span>Aberta e gratuita</span></div></header><blockquote>“Encontrei a resposta e também quem já viveu o problema.”</blockquote></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-case"><header><nav><span>CASE / ATLAS HEALTH</span><span>12 semanas</span></nav><h2>Um cuidado digital que reduziu espera sem perder humanidade.</h2><a href="/templates/agency/">Ler estudo completo →</a></header><div class="sc-case-metrics"><article><b>−38%</b><span>tempo de triagem</span></article><article><b>+22%</b><span>adesão ao cuidado</span></article><article><b>4,8/5</b><span>satisfação</span></article></div><footer><p>Pesquisa, estratégia, produto e implantação.</p><span>2026</span></footer></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<section class="sc-hero-interactive"><header><span>MONTE SUA EXPERIÊNCIA</span><h2>Veja a interface responder às escolhas.</h2><div role="tablist"><button class="is-active" role="tab" aria-selected="true">Produto</button><button role="tab" aria-selected="false">Operação</button><button role="tab" aria-selected="false">Dados</button></div></header><div class="sc-interactive-canvas"><aside><button class="is-active" type="button">Visão geral</button><button type="button">Atividade</button><button type="button">Equipe</button></aside><main><small>VISÃO GERAL</small><strong>Produto em movimento</strong><div class="sc-mini-chart"></div></main></div><footer><a class="sc-btn sc-btn-primary" href="/playground/">Abrir playground</a><span>Nenhum cadastro necessário</span></footer></section>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

<header class="sc-hero-statement"><span>DESIGN SYSTEM / 2026</span><h2>Clareza é uma tecnologia.</h2><p>Componentes para construir rápido sem transformar todos os produtos na mesma interface.</p><footer><a href="/components/">Explorar biblioteca ↗</a><small>HTML · CSS · JavaScript</small></footer></header>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Mantém contraste de texto e foco visível.
• Conteúdo e ações permanecem disponíveis sem animação.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.