Foundation

Tipografia & Icones

Sistema tipografico completo - familias, escala de tamanhos, pesos, line-height, espaçamento e decoracao.

Famílias de Fontes (Matriz SW)

As 6 famílias integradas via Google Fonts, ao lado de Outfit (headings) e JetBrains Mono (código). Poppins é a fonte padrão do framework (--sw-f-san).

.sw-f1 — Poppins

100-900

Aa

The quick brown fox jumps over the lazy dog.

Base UI

.sw-f2 — Roboto

100-900

Aa

The quick brown fox jumps over the lazy dog.

Secondary

.sw-f3 — Alumni

Narrow

Aa

The quick brown fox jumps over the lazy dog.

Display

.sw-f4 — Meow

Script

Aa

The quick brown fox jumps over the lazy dog.

Decorative

.sw-f5 — Dancing

Script

Aa

The quick brown fox jumps over the lazy dog.

Elegant

.sw-f6 — Playwrite

Hand

Aa

The quick brown fox jumps over the lazy dog.

Modern Script

Utilitários de Atalho (Nativos)

O SW oferece atalhos rápidos para alinhamento, pesos e transformações, otimizando o fluxo de desenvolvimento.

Alinhamento & Transformação

.t-ct / .t-le / .t-ri / .t-ju

Padrão SW de Alinhamento (Centralizado .t-ct)

.t-upp / .t-low / .t-cap uppercase (.t-upp) / lowercase (.t-low) / capitalize (.t-cap)

Pesos Numéricos

.fw1 até .fw9 Exemplo .fw7 (700)

.fwb / .fwn Exemplo .fwb (bold, atalho de fw7)

Escala de Tamanhos

Escala PP→XXG (1rem = 10px), degrau real — cada tamanho é maior que o anterior. É tamanho puro: combine com .f-lt/.f-bd/.f-bk pra escolher o peso. Use .t-{tamanho}.

.t-pp 1.2rem = 12px Extra Pequeno Extra Pequeno (negrito)

.t-p 1.4rem = 14px Pequeno Pequeno (negrito)

.t-m 1.6rem = 16px Base Base (negrito)

.t-g 1.8rem = 18px Grande Grande (negrito)

.t-gg 2.0rem = 20px Muito Grande Muito Grande (negrito)

.t-xg 3.2rem = 32px Extra Extra (negrito)

.t-xxg 4.8rem = 48px Display Display (negrito)

Headings H1-H6

Todos os headings são fluidos com calc(rem + vw). Use .t-h{n} para aplicar o tamanho em qualquer elemento.

h1 / .t-h1 clamp(2.4–4.8rem)

Heading Um

h2 / .t-h2 clamp(2.0–3.6rem)

Heading Dois

h3 / .t-h3 clamp(1.8–3.0rem)

Heading Três

h4 / .t-h4 clamp(1.6–2.4rem)

Heading Quatro

h5 / .t-h5 1.8rem = 18px

Heading Cinco

h6 / .t-h6 1.4rem = 14px

Heading Seis

Fonte Mono `.f-mon`

JetBrains Mono - ideal para código, tokens, labels técnicos.

const framework = 'y2';
const version = '1.2.0-Framework';
const colors = 24; // famílias cromáticas

console.log(`${framework} v${version}`);