Typography Playground

TLX DIGITAL//Playground//v2.0

Typography

Teste combinacoes de fontes, pesos, tamanhos e line-heights com tokens TLX em tempo real.

01PLAYGROUND

Font Family

Weight

Size

Line Height

--font-display5001remlh: 1.5

font-family: --font-display;
font-weight: 500;
font-size: --text-body;  /* 1rem */
line-height: 1.5;

02TYPE SCALE

Escala tipografica completa com todos os tokens de tamanho.

--text-caption0.75remTLX Digital

--text-body-sm0.875remTLX Digital

--text-body1remTLX Digital

--text-body-lg1.125remTLX Digital

--text-heading-md1.25remTLX Digital

--text-heading-lg1.5remTLX Digital

--text-display-md2remTLX Digital

--text-display-lg2.75remTLX Digital

--text-display-xl3.5remTLX Digital

03PAIRINGS

Combinacoes recomendadas de fontes para cada contexto.

Landing Pages

Hero & Headlines

Inteligencia de mercado para marcas ambiciosas

Construimos marcas que vendem enquanto voce dorme. Diagnostico gratuito, sem compromisso.

agenciatlx.com · Florianopolis, SC

--font-display--text-display-md--font-body--text-body--font-mono--text-caption

Brandbook & Guides

Documentation

Design Foundations

Tokens semanticos com 3 temas: Cosmic Orange para o digital, Light para apresentacoes, Gold para material premium.

--color-accent: #E8722A;

--font-display--text-heading-lg--font-body--text-body-lg--font-mono

Dashboards

Data & Metrics

R$ 847.200

Receita acumulada no trimestre. +23% vs periodo anterior.

--font-mono--text-heading-lg--font-body--text-body-sm

App Interface

UI Components

Configuracoes da conta

Gerencie suas preferencias de notificacao, tema e integrações.

Ultima atualizacao: 2026-03-29

--font-body--text-body-lg--text-body--font-mono--text-caption

04TOKENS