Brand kit
Kit de marca Galgo Soluções
Referência única para paleta, tipografia, iconografia e padrões de superfície. Use sempre os tokens semânticos — nunca cores fixas — para manter consistência em novos componentes.
01 · Marca
Monograma e assinatura
O símbolo do galgo acompanha o wordmark Galgo Soluções. Em espaços reduzidos, use apenas o símbolo.
Componente: <BrandMark size="sm|md|lg" showWordmark />
02 · Paleta
Cores e tokens
Todas as cores vivem em src/styles.css no formato oklch e são expostas como utilitários Tailwind.
Verde Oliva
#2F3E2B
--olive / bg-olive
Areia
#F5F2EB
--sand / bg-sand
Pearl Light Gold
#DCBC81
--champagne / bg-champagne
Grafite
#2B2B2B
--graphite / text-foreground
Oliva Suave
#A8A98F
--olive-soft / bg-olive-soft
Card
#FCFBF7
--card / bg-card
Muted
#EDEAE1
--muted / bg-muted
Destructive
#A3231B
--destructive
Verde Oliva
var(--gradient-olive) · usado em títulos com text-gold
Fundo Areia
var(--sand) · fundo global do site
03 · Tipografia
Playfair Display e Montserrat
Playfair Display para títulos e assinatura de marca; Montserrat para texto corrido, rótulos e interface.
Display · Playfair Display
Concierge global
Private Life Operating System
Parceiros homologados
font-display · h1–h3 já aplicam automaticamente
Sans · Montserrat
Texto de corpo em 16px para leitura confortável em painéis e formulários.
Texto secundário em 14px com text-muted-foreground.
Eyebrow · rótulo de seção
font-sans · eyebrow para rótulos em caixa alta
04 · Iconografia
Um ícone por vertical
Ícones Lucide com traço 1.4, sempre em badge circular dourado. Use VerticalIcon / VerticalIconBadge.
Componentes: <VerticalIcon icon="plane" /> e <VerticalIconBadge icon="plane" size="sm|md" />
05 · Superfícies e utilitários
Painéis, filetes e rótulos
Utilitários definidos em src/styles.css para manter profundidade e acabamento consistentes.
surface-panel
Card translúcido com blur, borda hairline e sombra elevada.
border-border + bg-card
Card sólido para tabelas e listas densas.
hairline-gold
Filete dourado para separar blocos.
06 · Componentes
Exemplos de uso
Combinações aprovadas de botões, badges e cabeçalhos de card.
Botões
Badges de status
Travel & Private Aviation
Cabeçalho de card do catálogo
Padrão: badge de ícone + eyebrow da vertical + título em Playfair Display + descrição em Montserrat 14px.
07 · Regras
Do & Don't
Checklist rápido antes de subir um componente novo.
Faça
- Usar tokens semânticos: bg-card, text-muted-foreground, border-border.
- Reservar o dourado champagne para detalhes, títulos e estados ativos.
- Manter títulos em Playfair Display e interface em Montserrat.
- Aplicar surface-panel em blocos flutuantes.
Evite
- Classes fixas como text-white, bg-black ou hex inline.
- Grandes áreas chapadas de dourado ou gradientes saturados.
- Novas famílias tipográficas fora de Playfair Display e Montserrat.
- Ícones de outra biblioteca fora do set Lucide das verticais.