Design System
Referência interna dos componentes visuais, cores, tipografia e padrões utilizados no Têxteis.com.br.
Cores
Primary (Verde)
50
#f0f7f3
100
#d9ebe0
200
#b3d7c1
300
#80b898
400
#4d9a70
500
#1a5632
600
#154828
700
#103a1f
800
#0b2c16
900
#061e0d
Secondary (Marrom)
50
#fdf8ed
100
#f9ecd3
200
#f0d5a0
300
#e4b862
400
#d49b30
500
#8B6914
600
#735710
700
#5b450d
800
#43330a
900
#2b2106
Accent (Coral)
50
#fdf3f0
100
#f9e2db
200
#f0c2b5
300
#e49a87
400
#d4876f
500
#C4745A
600
#a3604a
700
#824c3b
800
#61392c
900
#40261d
Tipografia
Inter Variable
Corpo (font-sans)Usada em textos de corpo, navegação, botões e elementos de interface.
Inter Bold — Aa Bb Cc 123
Inter Semibold — O tecido perfeito existe
Inter Regular — A escolha do tecido certo faz toda a diferença no resultado final de qualquer projeto de costura ou confecção.
Inter Small — Texto auxiliar e legendas com Inter em tamanho reduzido.
Merriweather
Prosa (font-serif)Usada em conteúdo de artigos (prose), blocos de citação e textos longos.
Merriweather Bold — Aa Bb Cc 123
Merriweather Regular — O algodão é a fibra natural mais utilizada no mundo, presente em mais de 40% de todas as peças de vestuário produzidas globalmente.
Playfair Display Variable
Display (font-display)Usada em títulos de destaque, hero sections e headings de seções importantes.
Playfair Display
Tudo sobre tecidos, fibras e costura
Manual Completo de Tecidos — Guia Definitivo
Botões
Primary
Secondary
Outline
Ghost
Badges
Categorias
Status
Preço
Cards
Blog Card
Guia Completo do Algodão: Tipos, Usos e Cuidados
Descubra tudo sobre o algodão: do campo ao tecido, conheça suas variações e aprenda a cuidar corretamente.
Tendências Têxteis para 2026
As principais tendências em tecidos, cores e texturas que vão dominar a moda e a decoração neste ano.
Event Card
Feira Têxtil Brasil 2026
São Paulo, SP
A maior feira de tecidos e insumos têxteis da América Latina.
Tool Card
Calculadora de Metragem
Calcule a quantidade exata de tecido para seu projeto.
GratuitaFormulários
Ícones
Utilizamos a biblioteca Lucide para ícones em todo o projeto, com dois pacotes:
- lucide-astro Para componentes Astro (.astro) — renderizados em build time, sem JavaScript no cliente.
- lucide-svelte Para componentes Svelte (.svelte) — usados em componentes interativos no cliente.
Exemplos de uso
Catálogo completo: lucide.dev/icons
Dark Mode
Estratégia
O dark mode utiliza a classe .dark no elemento <html>,
controlada via JavaScript. A preferência do usuário é salva no localStorage.
Detecção automática
Na primeira visita, o sistema respeita a preferência do sistema operacional via prefers-color-scheme: dark.
Um script inline no <head> aplica a classe antes do render para evitar flash de conteúdo branco (FOUC).
Como usar no Tailwind
Utilize o prefixo dark: em qualquer classe Tailwind para definir o estilo no modo escuro.
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
Demonstração
Modo claro
Fundo branco, texto escuro, bordas claras.
Modo escuro
Fundo escuro, texto claro, bordas sutis.