Diretrizes da Marca
Tudo o que precisa para representar a Spoki de forma coerente.
Paleta de cores
A nossa paleta é construída em torno do verde Spoki e de um conjunto limpo de tons de apoio. Clique numa amostra para copiar o seu código hex — a mesma fonte de verdade usada em todo o produto.
Clique numa amostra para copiar o código hex
Cores primárias
Estas são as principais cores neutras, de marca e semânticas que compõem a maioria das cores usadas no design system e nos componentes.
Spoki Green
Texto preto sobre Verde
White
Texto preto sobre Branco
Black
Texto branco sobre Preto
Off-white
Texto preto sobre Off-white
Light Green
Texto preto sobre Verde claro
Tons
As escalas tonais completas para o verde de marca e o cinza neutro, do tom mais escuro ao mais claro. Clique numa amostra para copiar o seu código hex.
Cinza neutro
Pode ser trocado pela cor neutra padrão.
Marca
Paleta de cores primária
Gradientes
Três gradientes aprovados para fundos, ilustrações e superfícies com temática de IA. Clique numa amostra para copiar o seu CSS.
Cores secundárias
Uma paleta de cores secundárias valoriza as cores primárias num design system, acrescentando variedade e profundidade. Estas cores servem como acentos, fundos ou realces, mantendo um design coeso e incentivando a expressão criativa.
Roxo
Paleta de cores secundária
Verde Menta
Paleta de cores secundária
Amarelo
Paleta de cores secundária
Azul
Paleta de cores secundária
Turquesa
Paleta de cores secundária
Vermelho
Paleta de cores secundária
Paleta de cores dos canais
Cada canal Spoki tem a sua própria cor distintiva. Usa-as como acentos para emblemas, etiquetas e ícones de canal — nunca como superfícies primárias.
Canais
Uso dos canais
Ícone preto sobre Verde
Ícone preto sobre Branco