Directrices de Marca

Todo lo que necesitas para representar a Spoki de forma coherente.

Paleta de colores

Nuestra paleta se construye en torno al verde Spoki y un conjunto limpio de tonos de apoyo. Haz clic en cualquier muestra para copiar su código hex — la misma fuente de verdad usada en todo el producto.

Haz clic en una muestra para copiar su código hex

Colores primarios

Estos son los principales colores neutros, de marca y semánticos que componen la mayoría de los colores usados en el design system y los componentes.

Spoki Green

Texto negro sobre Verde

White

Texto negro sobre Blanco

Black

Texto blanco sobre Negro

Off-white

Texto negro sobre Off-white

Light Green

Texto negro sobre Verde claro

Tonos

Las escalas tonales completas para el verde de marca y el gris neutro, desde el tono más oscuro hasta el más claro. Haz clic en una muestra para copiar su código hex.

Gris neutro

Puede intercambiarse con el color neutro por defecto.

Marca

Paleta de colores primaria

Degradados

Tres degradados aprobados para fondos, ilustraciones y superficies con temática de IA. Haz clic en una muestra para copiar su CSS.

Colores secundarios

Una paleta de colores secundarios realza los colores primarios en un design system, añadiendo variedad y profundidad. Estos colores sirven como acentos, fondos o resaltados, manteniendo un diseño cohesivo y fomentando la expresión creativa.

Morado

Paleta de colores secundaria

Verde Menta

Paleta de colores secundaria

Amarillo

Paleta de colores secundaria

Azul

Paleta de colores secundaria

Turquesa

Paleta de colores secundaria

Rojo

Paleta de colores secundaria

Paleta de colores de canales

Cada canal de Spoki tiene su propio color distintivo. Úsalos como acentos para insignias, etiquetas e iconos de canal — nunca como superficies primarias.

Canales

Uso de canales

Icono negro sobre Verde

VoiceVoice
WhatsAppWhatsApp
SMS (One-Way)SMS (One-Way)
SMS (Two-Way)SMS (Two-Way)
MailMail
RCSRCS

Icono negro sobre Blanco

VoiceVoice
WhatsAppWhatsApp
SMS (One-Way)SMS (One-Way)
SMS (Two-Way)SMS (Two-Way)
MailMail
RCSRCS

Icono lineal (sin fondo)

VoiceVoice
WhatsAppWhatsApp
SMS (One-Way)SMS (One-Way)
SMS (Two-Way)SMS (Two-Way)
MailMail
RCSRCS