Design System
Referência de cores, tipografia, espaçamentos e componentes que compõem a linguagem visual da GLLA Solutions.
Cores
Brand Black
Cor primária. Fundos dark, textos principais.
var(--brand-black)#111111oklch(0.08 0 0)Brand Orange
Cor de destaque. CTAs, ícones, acentos.
var(--brand-orange)#DC6E14oklch(0.68 0.19 44)Brand Orange Light
Variação suave do laranja para hover e gradientes.
var(--brand-orange-light)#E8924Aoklch(0.78 0.16 50)Brand White
Fundos light, textos sobre dark.
var(--brand-white)#FFFFFFoklch(1 0 0)Brand Gray
Fundos de seções alternadas, cards neutros.
var(--brand-gray)#F5F5F5oklch(0.96 0 0)Brand Gray Mid
Textos secundários, labels, metadados.
var(--brand-gray-mid)#B8B8B8oklch(0.72 0 0)Tipografia
Fonte Serif (Headings)
JetBrains Mono
var(--font-jetbrains) · Monospace com personalidade
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Fonte Sans (Body)
Inter
var(--font-inter) · Legibilidade máxima
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Comunicação que move mercados.
Uso: Hero headline principal
Resultados que falam por si.
Uso: Títulos de página interna
Tecnologia a serviço da sua comunicação.
Uso: Títulos de seção
Desenvolvimento de Software
Uso: Títulos de card
A GLLA Solutions une estratégia, tecnologia e criatividade para transformar marcas em referência.
Uso: Parágrafos de destaque, subtítulos
Cada solução foi desenhada para resolver desafios reais de marcas que querem crescer com consistência.
Uso: Texto corrido, descrições
Apoio e informações secundárias, legendas e metadados de conteúdo.
Uso: Labels, rodapés, metadados
NOSSAS SOLUÇÕES
Uso: Tags, labels uppercase, badges
Espaçamento
Base de 4px. Todos os espaçamentos são múltiplos desta unidade, seguindo a escala padrão do Tailwind CSS.
Bordas
lg
10px
xl
14px
2xl
16px
3xl
24px
full
9999px
Elevação
Nenhuma
shadow-none
Suave
shadow-sm
Média
shadow-md
Grande
shadow-lg
Extra Grande
shadow-xl
Componentes
Badges & Tags
Cards
Título do card
Descrição curta do conteúdo do card.
Título do card
Descrição curta do conteúdo do card.
Título do card
Descrição curta do conteúdo do card.
Botão ícone circular
Separadores
Princípios
Preto profundo e laranja vibrante criam tensão visual que prende atenção. Nunca meios-termos.
JetBrains Mono não é apenas fonte — é identidade. Monospace confere tecnicidade e distinção.
Padding e margins generosos transmitem confiança e qualidade. Menos é mais densidade de sentido.
Layouts 7/5 e composições irregulares criam dinamismo sem perder alinhamento e coerência.
Animações apenas onde orientam o olhar — fade-in-up no hero, scroll infinito nos parceiros.
Cada componente nasce no mobile e escala para desktop, garantindo experiência consistente.