Kaô Studio
A casa da própria marca. Troque a marca ativa no topo — todos os componentes reagem, trocando só a camada semântica de cor de identidade. Movimento gera movimento.
Cores
Texto utilitário (bordô/creme) circula sobre qualquer fundo. Identidade por braço nunca é exclusiva — é âncora semiótica (§5).
Bordô #3E0001 · text.on-light / divider
Creme #FFEDBD · text.on-dark
Laranja chama #F23000 · identity.marketing / highlight-2
Laranja âmbar #FF8500 · identity.produtora / highlight-1
Coxia #191919 · identity.kultura
Verde #002B17 · identity.aprenda
Azul #0031FF · RESERVADA (§5.4)
Identidade ativa --color-identity (data-brand)
Tipografia
Clash Display · títulos grandes, uso pontual
Movimento gera movimento
Clash Grotesk · títulos menores + corpo + toda a UI (default)
A fonte de trabalho do sistema inteiro
Da primeira reunião até o brinde, a gente está junto. Isso é como a gente trabalha.
DRUZHOK · só wordmarks das marcas com logo próprio — nunca texto corrido
Kaô · Kultura · Aprenda Olhar
Espaçamento
4812162432486496128A pétala
Raio assimétrico na diagonal: dois cantos opostos arredondados, dois retos. Orientação alterna por ordem de leitura. Em clicáveis, gira no hover (passe o mouse).
petala--a
petala--b
raio xl
Grão de fundo
Vive só na camada de fundo: cor sólida → grão → texto limpo por cima. Mesma intensidade em todo braço. Todo bloco .surface já carrega o grão.
bordô + grão
verde + grão
âmbar + grão
Botões
Cards de braço (multimarca)
Mesmo markup, muda só data-brand.
Âmbar
Coxia
Verde
Brasão & área de proteção
Nunca espelhar, inverter ou fragmentar. A margem mínima = altura da ponta da estrela, repetida em todos os lados. A moldura tracejada abaixo demarca essa zona.
