Foundation

Tipografia & Icones

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

Famlias de Fontes (Matriz Y2)

As 6 familias principais integradas para oferecer maxima flexibilidade e elegancia ao framework.

.font1 - Poppins

100-900

Aa

The quick brown fox jumps over the lazy dog.

Base UI

.font2 - Roboto

100-900

Aa

The quick brown fox jumps over the lazy dog.

Secondary

.font3 - Alumni

Narrow

Aa

The quick brown fox jumps over the lazy dog.

Display

.font4 - Meow

Script

Aa

The quick brown fox jumps over the lazy dog.

Decorative

.font5 - Dancing

Script

Aa

The quick brown fox jumps over the lazy dog.

Elegant

.font6 - Playwrite

Hand

Aa

The quick brown fox jumps over the lazy dog.

Modern Script

Utilitarios de Atalho (Nativos)

O Y2 oferece atalhos rapidos para alinhamento, pesos e transformaes, otimizando o fluxo de desenvolvimento.

Alinhamento & Transformao

.C / .D / .E / .J

Padrao Y2 de Alinhamento (Centralizado .C)

.U / .W / .P uppercase (.U) / lowercase (.W) / capitalize (.P)

Pesos Numéricos

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

.fwb / .fwn Exemplo .fwb (Bold)

Escala de Tamanhos

Escala PP→XXG (1rem = 10px). Use .t-{tamanho}.

.t-pp 1.2rem = 12px O rato roeu a roupa do rei de Roma - Extra Pequeno

.t-p 1.4rem = 14px O rato roeu a roupa do rei de Roma - Pequeno

.t-m 1.6rem = 16px O rato roeu a roupa do rei de Roma - Base

.t-g 2.0rem = 20px O rato roeu a roupa - Grande

.t-gg 3.2rem = 32px Muito Grande

.t-xg 4.8rem = 48px Extra Grande

.t-xxg 6.4rem = 64px Display

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 2.2r + 1.5vw

Heading Um

h2 / .t-h2 2.2r + 0.9vw

Heading Dois

h3 / .t-h3 2.0r + 0.6vw

Heading Três

h4 / .t-h4 2.0r + 0.3vw

Heading Quatro

h5 / .t-h5 2.0rem = 20px

Heading Cinco

h6 / .t-h6 1.6rem = 16px

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}`);