Foundations
Tokens de cor, tipografia, espacamento e componentes visuais extraidos dos 3 sites ativos das Empresas ICON.
CORES PRIMARIAS
Cada marca do grupo ICON possui uma cor primaria distinta, todas na mesma faixa quente do espectro (laranja → vermelho → dourado), criando uma familia cromatica industrial coerente.
Brand Colors — Uma por marca
Espectro de marca
As tres cores primarias formam um gradiente quente que reflete a identidade industrial do grupo. Hover para expandir cada cor.
PALETA ESCURA
Base escura compartilhada entre todas as marcas. O tom #27272E e a fundacao visual de todos os sites, criando consistencia no ecossistema digital.
Dark Backgrounds — Compartilhados
TEXTO
Hierarquia de texto com 6 niveis de contraste, do texto principal ao auxiliar.
SUPORTE
Backgrounds e bordas
TIPOGRAFIA
3 familias tipograficas: Sequel 100 Black para headings de impacto, Clarika Grotesque para corpo de texto, e fontes de icones para interface. Todas self-hosted para performance.
Sequel 100 Black — Headings
ICON
Construindo a industria
50+ anos de solucoes industriais
⚠ Inconsistencia: IconMaq usa New Grotesk Square em vez de Sequel 100 Black. Recomendacao: unificar para Sequel 100 Black em todas as marcas.
Clarika Grotesque — Body
Light 300 — A historia das Empresas Icon comecou oficialmente no ano de 1972.
Regular 400 — Unindo tradicao, tecnologia e inovacao em 50 anos de historia.
Medium 500 — Lider na America Latina em matrizes e moldes ceramicos.
Bold 700 — Solucoes industriais inovadoras que transformam setores.
Escala tipografica
ESPACAMENTO
Grid Bootstrap 4 com breakpoints padrao e customizados.
Breakpoints
SOMBRAS E RAIOS DE BORDA
Sombras
Subtle
rgba(0,0,0,0.1) 0px 4px 4px
Cards padrao
Elevated
rgba(0,0,0,0.2) 0px 4px 16px
Cards hover, CTAs
Dramatic
rgba(0,0,0,0.8) 0px 0px 30px
Overlays, modals
Border Radius
3px
5px
12px
24px
50px
50%