Guía de Marca Oficial · 2026

El lenguaje visual de Kioskito

Tipografías, colores, gradientes, sombras y componentes para diseñadores que crean piezas para redes sociales.

01 · Tipografía

Sistema tipográfico

Tres familias con roles claros. Cada pieza gráfica debe respetar estas asignaciones.

Display / Headlines

Fraunces

Kioskito vive aquí

Una comunidad única

300 300i 700 700i 900 900i

Uso: Títulos hero, encabezados de sección

Body / UI

Sora

Sora Bold — Botones
Sora SemiBold — Labels y navegación
Sora Regular — Texto de cuerpo y descripción en tarjetas.
300 400 500 600 700 800

Uso: Todo texto de interfaz, botones, labels

Monospace / Técnico

DM Mono

--k-violet-600: #7C3AED;
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
border-radius: 16px;
400 500

Uso: Código, tokens, datos técnicos

Escala de tamaños clave

Tamaños de referencia para redes sociales y piezas digitales.

Hero título Título héroe clamp(2.4rem, 5.5vw, 4.5rem)
H2 secciones Sección 2.2rem → 3.8rem
Body Texto de cuerpo general para descripciones 0.82rem – 1rem
Labels / meta ETIQUETA · CATEGORÍA 0.68rem – 0.78rem

02 · Paleta

Colores de marca

Haz clic en cualquier swatch para copiar el hex al portapapeles.

Violeta — Identidad principal

violet-50#F5F3FFFondos tenues
¡Copiado!
violet-100#EDE9FEBackgrounds suaves
¡Copiado!
violet-200#DDD6FEBordes badge soft
¡Copiado!
violet-300#C4B5FDAcentos suaves
¡Copiado!
violet-400#A78BFAHover states
¡Copiado!
violet-500#8B5CF6Focus ring
¡Copiado!
violet-600 ★#7C3AEDPrimario de marca
¡Copiado!
violet-700#6D28D9Hover primario
¡Copiado!
violet-800#5B21B6Texto badges
¡Copiado!
violet-900#2E1065Fondos oscuros
¡Copiado!
violet-deep#12072AFondo más oscuro
¡Copiado!

Terracota — Calidez / comunidad

terra-50#FFF7F0Fondo cálido sutil
¡Copiado!
terra-100#FFE8D6Background warm
¡Copiado!
terra-200#FFCBA4Acentos
¡Copiado!
terra-400#FF8A47Highlights
¡Copiado!
terra-500 ★#F97316Secundario cálido
¡Copiado!
terra-700#C2570ABordes terracota
¡Copiado!

Neutros (Slate)

slate-50#F8FAFCFondo página
¡Copiado!
slate-100#F1F5F9Fondo sutil
¡Copiado!
slate-200#E2E8F0Bordes estándar
¡Copiado!
slate-400#94A3B8Texto terciario
¡Copiado!
slate-500#64748BTexto muted
¡Copiado!
slate-600#475569Texto secundario
¡Copiado!
slate-700#334155Texto navegación
¡Copiado!
slate-900#0F172ATexto principal
¡Copiado!

Semánticos

Success — Emerald#10B981 / #059669
Warning — Amber#F59E0B
Error — Rose#F43F5E / #E11D48
Info — Blue#3B82F6

03 · Gradientes

Sistema de gradientes

Los gradientes definen el carácter de Kioskito. Úsalos con intención.

Brand
135deg · #7C3AED → #4F46E5
Botones CTA, elementos primarios
Hero BG
135deg · Índigo → Violeta → Terracota oscuro
Sección CTA final oscura
Hero Light
160deg · Violeta tenue → Blanco → Cálido
Fondo hero principal
Warm
135deg · #F97316 → #EA6C0A
Acentos terracota
Community
135deg · Violeta → Terracota
Violeta → terracota, comunidad
Success
135deg · #059669 → #10B981
Elementos de éxito

04 · Sombras

Sistema de elevación

El color base de todas las sombras neutras es rgba(15, 7, 42, …) — un violeta muy oscuro, no negro puro.

shadow-sm

0 1px 3px rgba(15,7,42,0.08)

Elementos sutiles
shadow-md

0 4px 16px rgba(15,7,42,0.10)

Cards base
shadow-lg

0 8px 32px rgba(15,7,42,0.12)

Elevación media
shadow-xl

0 20px 64px rgba(15,7,42,0.15)

Elevación alta
shadow-violet

0 8px 32px rgba(124,58,237,0.30)

Botones violeta
shadow-violet-lg

0 20px 60px rgba(124,58,237,0.25)

Hover botones CTA
shadow-terra

0 8px 32px rgba(249,115,22,0.22)

Elementos cálidos
shadow-green

0 8px 24px rgba(16,185,129,0.25)

Éxito

05 · Border Radius

Sistema de esquinas

De badges puntiagudos a píldoras completamente redondas.

sm
6px · Badges, botones pequeños
md
10px · Inputs, dropdowns
lg
16px · Cards estándar
xl
24px · Cards grandes, FAQ
2xl
32px · Hero sections
full
9999px · Pills, botones

06 · Botones

Componentes de acción

Tres variantes. Pasa el cursor para ver el estado hover.

Primario (CTA)
Backgroundbrand gradient
Color#FFFFFF / 700
Padding14px 32px
Radius9999px (pill)
Shadowshadow-violet
Hoverbrightness(1.08) + translateY(-1px)
Secundario (borde)
Backgroundwhite
Border1px rgba(124,58,237,0.25)
Color#7C3AED / 600
Padding14px 32px
Hoverbg violet-50 + border visible
Terracota (warm)
Backgroundwarm gradient
Color#FFFFFF / 700
Padding14px 32px
Shadowshadow-terra
Hoverbrightness(1.08) + translateY(-1px)

07 · Animaciones

Timing y movimiento

Variables de transición y animaciones clave del sistema.

fast
150ms ease
base
250ms cubic-bezier(0.4,0,0.2,1)
slow
400ms cubic-bezier(0.4,0,0.2,1)
phoneFloat
6s ease-in-out infinite
heroFadeUp
slide up + opacity
float-orb
12s loop · fondo hero

08 · Breakpoints

Sistema responsivo

Tres puntos de quiebre para adaptar los diseños a cualquier pantalla.

NombreAnchoAjustes principales
Desktop> 960pxLayout completo, todas las columnas activas
Tablet≤ 960pxPadding reduce, grids colapsan a 2 columnas
Mobile≤ 640pxColumna única, navegación hamburguesa

09 · Voz de marca

Tono y copy

Kioskito habla de tú a tú. Latinoamericano, directo, cálido. Sin tecnicismos. Siempre beneficios, nunca features.

Tagline principal

Para emprendedores

"El orden que le faltaba a tu negocio."

Subtítulo hero

"Kioskito convierte el caos de vender por WhatsApp en una tienda organizada — sin que abandones el canal que ya funciona."

Tono de marca

✓ Sí decimos

✓"Sin buscar en chats"
✓"Listo para coordinar entrega"
✓"El pedido llega organizado"
✓"En 3 minutos ya tienes tu tienda"
✓Usar "tú" siempre
✓Hablar de beneficios concretos

✕ No decimos

✕"Solución omnicanal integrada"
✕"Plataforma SaaS escalable"
✕"Optimiza tu pipeline"
✕Usar "usted"
✕Tecnicismos sin contexto
✕Oraciones largas y complejas
Palabras clave de marca
Kioskito kiosco ordenar organizar WhatsApp sin comisiones 3 minutos desde $5 emprendedor sin buscar en chats
Emojis como iconos de features

La marca usa emojis nativos como iconos. Siempre sobre fondo blanco. Nunca sobre gradientes oscuros.

📋
Catálogo
Gestión de productos
📦
Pedidos
Control de órdenes
📊
Reportes
Estadísticas y datos
🔄
Sincronización
WhatsApp integrado
🎨
Personalización
Diseño de tienda
📈
Crecimiento
Ventas y analytics

10 · Componentes

Patrones de UI

Cards y elementos recurrentes que definen la interfaz de Kioskito. Úsalos como referencia para redes sociales.

Feature Cards

📋

Catálogo organizado

Tu menú o catálogo siempre actualizado. Sin buscar en chats ni reenviar fotos.

📦

Pedidos en orden

Cada pedido llega organizado y listo para coordinar la entrega desde el mismo lugar.

📈

Reportes claros

Ve cuánto vendes, qué vola más y cuándo. Todo en una pantalla, sin Excel.

Step Cards

01 / PASO

🔄

Conecta tu WhatsApp

Vincula tu número en 2 minutos. Sin cambiar de app, sin perder tus contactos.

02 / PASO

🎨

Arma tu tienda

Agrega tus productos con foto, precio y descripción. Listo en 3 minutos.

03 / PASO

📊

Empieza a vender

Comparte tu link y recibe pedidos organizados directo en tu panel.

Testimonial Cards

"

Antes perdía pedidos porque no encontraba los chats. Ahora todo llega ordenado y mis clientes están felices.

M
Mariana López
Pastelería · Ciudad de México
"

En 3 minutos armé mi tienda y ese mismo día recibí 5 pedidos nuevos. No puedo creer que no lo usaba antes.

R
Rodrigo Fernández
Ropa · Guadalajara
"

Mis clientes ya no me preguntan "¿qué tienes?". Comparten el link ellos solos. Eso solo ya valió.

C
Carolina Reyes
Comida · Bogotá

Antes / Después (Pain → Solve)

😓 Antes de Kioskito

✕Pierdes pedidos entre cientos de mensajes de WhatsApp
✕Tus clientes no saben qué tienes disponible hoy
✕No sabes cuánto vendiste esta semana sin sacar la calculadora

🚀 Con Kioskito

✓Cada pedido llega organizado y listo para entregar
✓Tu catálogo siempre actualizado con un solo clic
✓Reportes claros de ventas en tiempo real, sin Excel

FAQ Items

¿Kioskito reemplaza mi WhatsApp?+
No. Kioskito funciona junto a tu WhatsApp. Tus clientes siguen escribiéndote ahí, pero tú recibes los pedidos organizados en tu panel. Lo mejor de ambos mundos.
¿Cuánto tiempo toma configurarlo?+
Menos de 3 minutos. Creas tu cuenta, subes tus productos y compartes tu link. Sin tutoriales, sin configuraciones raras.
¿Cobran comisión por cada venta?+
No. Lo que vendas es tuyo. Kioskito cobra una suscripción fija mensual desde $5, sin comisiones ni cobros ocultos.

11 · Social / Meta

Redes y metadatos

Especificaciones para OG images, favicons, theme color y uso de colores en publicaciones.

OG Image Preview — 1200×630px

K
Kioskito

El orden que le faltaba
a tu negocio.

kioskito.app · Gratis · Sin comisiones

1200×630px · grad-hero-bg · logo centrado · tagline en Fraunces 700

Colores en publicaciones

violet-600 · Principal
Posts, fondos, elementos de marca
terra-500 · Acento
CTAs, highlights, texto en "ito"
grad-community
Degradados en piezas hero
slate-50 · Neutro
Fondos de posts limpios

Diseñar con Kioskito es crear comunidad

Usa esta guía como referencia viva. Cada pieza refuerza la identidad.