Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogotypography · stable

Tipografia

Escala tipográfica e hierarquia para marketing e aplicações. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Tipografia quando a interface precisar de escala tipográfica e hierarquia para marketing e aplicações.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

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

Ver prévias
CONTAINER · stable

Headings + display

Headings + display, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <div class="sc-display-2" style="margin:0 0 8px;">Título (Display)</div>
                    <h2 style="margin: 0 0 6px;">Subtítulo H2</h2>
                    <h3 style="margin: 0 0 8px;">Seção H3</h3>
                    <p class="doc-muted" style="margin:0;">Parágrafo de apoio para validar hierarquia, contraste e ritmo.</p>
                  </div>
Classes, JavaScript e API
sc-cardsc-display-2

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

CONTAINER · stable

Tamanhos + pesos + espaçamento

Tamanhos + pesos + espaçamento, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <div class="sc-text-xs sc-font-medium sc-tracking-wide">XS • medium • tracking-wide</div>
                    <div class="sc-text-sm sc-font-normal" style="margin-top: 6px;">SM • normal</div>
                    <div class="sc-text-lg sc-font-semibold sc-leading-tight" style="margin-top: 6px;">LG • semibold • leading-tight</div>
                    <div class="sc-text-2xl sc-font-black" style="margin-top: 6px;">2XL • black</div>
                    <div class="doc-muted" style="margin-top: 10px;">Use as utilitárias de tipografia para consistência sem “inline hacks”.</div>
                  </div>
Classes, JavaScript e API
sc-cardsc-text-xssc-font-mediumsc-tracking-widesc-text-smsc-font-normalsc-text-lgsc-font-semiboldsc-leading-tightsc-text-2xlsc-font-black

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

CONTAINER · stable

Lead + destaque + muted

Lead + destaque + muted, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <p class="sc-text-lead" style="margin-top:0;">Texto lead para abrir uma seção com bom ritmo.</p>
                    <p style="margin: 10px 0 0;">Texto normal com <span class="sc-text-highlight">highlight</span> e leitura confortável.</p>
                    <p class="doc-muted" style="margin: 10px 0 0;">Use <code>doc-muted</code> para metadados e texto de apoio.</p>
                  </div>
Classes, JavaScript e API
sc-cardsc-text-leadsc-text-highlight

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

CONTAINER · stable

Branding (gradiente)

Branding (gradiente), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <div class="sc-display-2 sc-text-gradient">VATSE UI em movimento</div>
                    <p class="doc-muted" style="margin: 10px 0 0;">Gradiente de marca com contraste preservado em cada tema.</p>
                  </div>
Classes, JavaScript e API
sc-cardsc-display-2sc-text-gradient

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

CONTAINER · stable

Listas (UL/OL)

Listas (UL/OL), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <div class="sc-grid sc-cols-2 sc-gap-3">
                      <div>
                        <div class="doc-muted" style="margin-bottom: 8px;">Lista (UL)</div>
                        <ul style="padding-left: 18px; margin: 0;">
                          <li>Item 1</li>
                          <li>Item 2</li>
                          <li>Item 3</li>
                        </ul>
                      </div>
                      <div>
                        <div class="doc-muted" style="margin-bottom: 8px;">Lista (OL)</div>
                        <ol style="padding-left: 18px; margin: 0;">
                          <li>Passo 1</li>
                          <li>Passo 2</li>
                          <li>Passo 3</li>
                        </ol>
                      </div>
                    </div>
                  </div>
Classes, JavaScript e API
sc-cardsc-gridsc-cols-2sc-gap-3

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

CONTAINER · stable

Texto longo (prose) + citação

Texto longo (prose) + citação, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <h3 style="margin:0 0 8px;">Título de artigo</h3>
                    <p style="margin: 0 0 10px;">
                      Um parágrafo com texto mais longo para validar leitura, espaçamento e contraste. Use <a href="#doc-tokens">tokens</a>
                      para manter consistência entre temas.
                    </p>
                    <blockquote style="margin: 0; padding-left: 14px; border-left: 3px solid var(--sc-border); color: var(--sc-text-muted);">
                      “Uma citação curta para validar estilo e hierarquia visual.”
                    </blockquote>
                  </div>
Classes, JavaScript e API
sc-card

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

CONTAINER · stable

Código (bloco) + snippet

Código (bloco) + snippet, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card">
                    <p class="doc-muted" style="margin-top:0;">Use <code>&lt;pre&gt;&lt;code&gt;</code> para trechos longos (ex.: docs).</p>
                    <div class="sc-text-sm" style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;">
                      const root = document.documentElement;
                    </div>
                  </div>
Classes, JavaScript e API
sc-cardsc-text-sm

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

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • 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.

Temas e responsividade

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.

Componentes relacionados