Instalação Y2 Framework
Integre o Y2 em segundos via CDN ou faça o download dos arquivos de distribuição. Zero dependências, zero build tools.
~82kb total (gzip) · Zero dependências · CSS 58kb + JS 24kb · Ícones via wficons
Via CDN (recomendado)
Cole no <head> do seu HTML. Sem instalação, sem npm, sem build.
Via Download (self-hosted)
Baixe os arquivos, coloque a pasta fonts/ no mesmo nível do CSS e hospede no seu servidor.
A pasta fonts/ deve estar no mesmo diretório que o y2.min.css. Os ícones não carregam sem ela.
Compatibilidade
y2.config.css
Personalize cores, fontes e bordas sem tocar no código-fonte do Y2. 100% compatível com o Y2Day (dark / light).
Criar e carregar o arquivo
Crie o y2.config.css na raiz do seu projeto e carregue depois do Y2.
Estrutura de arquivos recomendada:
No HTML, a ordem importa:
O arquivo de configuração deve ser carregado depois do y2.min.css para que a cascata CSS funcione corretamente.
Cores — Personalização Total
O Y2 oferece três caminhos para mudar sua identidade visual.
A. Sobrescrita Direta (HEX / RGB)
Se você já tem uma cor exata em HEX ou RGB, pode forçá-la diretamente. Útil para marcas com manuais de identidade rigorosos.
B. Sistema Inteligente (Hues)
Recomendado. Altera apenas o ângulo da matiz (Hue) e o framework gera automaticamente 7 tons harmoniosos, além de estados de hover e focus.
Arraste o slider para ver a cascata em tempo real:
Shades derivados automaticamente:
Código gerado no seu y2.config.css:
Referência de ângulos de matiz
C. Cores do Navbar Premium
O componente .y2nav-prm possui tokens próprios para controle fino do Glassmorphism e do estado sólido ao scrollar.
Tipografia
Troque a fonte principal ou mono sem alterar nenhum componente.
Fonte atual do framework:
Aa Bb Cc — Outfit
O rato roeu a roupa do rei de Roma
Fonte mono (código):
Aa Bb Cc — Mono
const x = "y2";
Arredondamento
Defina a personalidade visual: sharp, suave ou ultra-arredondado.
Escolha um preset para visualizar:
Y2Day — Temas Claro & Escuro
Defina valores diferentes para cada tema sem conflito.
Referência de Tokens
Todos os tokens que podem ser sobrescritos no config.
| Token | Padrão | Descrição | Afeta |
|---|---|---|---|
| CORES | |||
--y2-h-pri |
210 |
Matiz da cor primária (0–360) | Botões, links, acentos, sombras |
--y2-h-sec |
275 |
Matiz da cor secundária | Badges, variantes secundárias |
--y2-h-suc |
140 |
Matiz da cor de sucesso | Alertas ok, validação positiva |
--y2-h-per |
0 |
Matiz de perigo / erro | Alertas err, validação negativa |
--y2-h-ale |
45 |
Matiz de alerta | Alertas ale, warnings |
--y2-pri |
hsl(210, 100%, 40%) |
Cor primária direta (override total) | Tudo que usa var(--y2-pri) |
| TIPOGRAFIA | |||
--y2-f-san |
'Outfit', 'Poppins', … |
Fonte principal sans-serif | Todo o texto do framework |
--y2-f-mon |
'JetBrains Mono' |
Fonte monospace | Código, Y2Code, tokens |
--y2-f-base |
1.6rem (16px) |
Tamanho base do texto | Parágrafos, body |
| ARREDONDAMENTO | |||
--y2-r-m |
0.8rem |
Radius médio — botões, inputs | Componentes interativos |
--y2-r-g |
1.2rem |
Radius grande — cards | Cards, dropdowns, painéis |
--y2-r-gg |
1.6rem |
Radius extra — modais | Modais, overlays |
| TEMA (YDDAY) | |||
--y2-bg-bas |
dark/light automático |
Fundo da página | Background do body |
--y2-bg-sur |
dark/light automático |
Superfícies (cards, sidebar) | Cards, modais, sidebar |
--y2-txt-bas |
dark/light automático |
Cor principal do texto | Headings, parágrafos |
--y2-bor |
dark/light automático |
Cor das bordas | Cards, inputs, dividers |
Template Completo
Copie, cole no seu projeto e personalize.
Presets Prontos
Clique para aplicar e ver ao vivo. Copie o código abaixo.