Que esta cambiando (y que no)
OKIO esta evolucionando su sistema visual. No es un rebrand — es una maduracion.
Conservamos
- ● El nombre OKIO
- ● El logotipo y la marca grafica (el "!" como ojo)
- ● La promesa raiz: "Verte bien, ver bien."
Evoluciona
- → "OKIO para todos" pasa a ser ethos, no nombre
- → Cliente nucleo: Maria, profesional emergente LATAM
- → Atributos: Honesto, Moderno, Inclusivo, Editorial
- → Paleta: terracota + neutros calidos + acentos tierra
- → Tono: optica con gusto que cree en ti
Con 4 tiendas y 1 año, el equity del azul es bajo. A 100 tiendas, ser la optica terracota en un mar de azules es un asset estrategico.
Manifiesto
Creemos que ver bien es un derecho, no un lujo.
Que verse bien no deberia costar lo que cuesta hoy.
Que una optica puede tener gusto sin tener pretensiones.
Somos latinoamericanos.
Disenamos para caras latinas, bolsillos reales, vidas reales.
Examen, montura, lentes. En una hora. A precio justo. Sin asteriscos.
Eso es OKIO. Verte bien, ver bien.
Proposito, Vision, Mision
Proposito — Por que existimos
Hacer del ver bien — y del verse bien — algo que nadie en Latinoamerica tenga que posponer.
Vision — A donde vamos
Ser la red de opticas mas querida de Latinoamerica. No la mas grande, la mas querida.
Mision — Que hacemos cada dia
Disenamos, armamos y entregamos gafas con gusto, precio justo y velocidad. En nuestras tiendas, con nuestro laboratorio, sin intermediarios.
Posicionamiento
Para la persona que cree que ver bien y verse bien no deberia exigir renunciar a ninguna de las dos cosas, OKIO es la optica latinoamericana que combina estilo curado, examen visual de verdad y entrega en una hora — a precios que no dejan a nadie afuera — porque creemos que una vida con vision clara es un derecho, no un lujo.
Tagline
Verte bien, ver bien.
Se conserva. Es corto, memorable, funciona en cualquier soporte y ya tiene equity construido.
Tagline de apoyo
OKIO. Optica con gusto, para todos.
Lo que NO somos
No somos una optica de cadena tradicional (lenta, cara, aseptica).
No somos una tienda online barata (sin cuerpo, sin examen, sin confianza).
No somos una boutique de diseno (para pocos, inaccesible).
No somos un "disruptor" gringo copiado a LATAM. Somos latinoamericanos desde el dia 1.
Cliente Nucleo: Maria
34 anos. Medellin. Coordinadora de operaciones en una pyme. Gana $1.100 USD/mes. Es la primera en su familia que se siente clase media. Compra ropa en Arkitect o Koaj. Come en Crepes & Waffles los viernes.
Necesita gafas desde los 22. Las ultimas las compro en una optica del centro por $300.000 COP y salio sintiendose igual que todas las demas. Sabe que podria pagar menos online, pero no confia. El mercado no la ve. Le ofrece dos opciones: $300K en el venteo del centro — accesible, pero con verguenza, una hora de viaje, sin historia que contar — o $800K en el centro comercial — demasiado para lo que entrega, marca generica, trato indiferente. Ninguna la trata como alguien con gusto propio.
Maria no quiere parecer rica. Quiere parecer coherente. Quiere que lo que usa refleje quien ya es: una mujer que se gano su lugar, que toma decisiones con criterio, y que no tiene que disculparse por lo que elige.
Lo que le ofrece OKIO: una optica que se ve como deberia verse una marca en 2026 — con gusto, sin pretensiones — donde sale con sus gafas en una hora, con precio claro, y se siente profesional. $290K–$540K COP. Por lo que ya iba a gastar, merece mas.
No la elige porque sea barata. No la elige porque sea lujosa. La elige porque es exactamente lo que buscaba — y nunca supo que existia.
Price point: Tres puntos principales — $70, $100 y $130 USD ($290K–$540K COP). La marca comunica aspiracional accesible desde estos tres anclas.
Los 4 atributos de personalidad
Cada atributo define como se siente interactuar con OKIO. Los 4 trabajan juntos, nunca aislados.
Honesto
Precio claro. Proceso claro. Promesa clara. Nunca letra chica, nunca upsell forzado, nunca "desde $X" con asterisco.
Manifestacion: precios siempre en total (montura + lentes + examen). "Lo que ves es lo que pagas."
Moderno
Diseno actual. Tecnologia al servicio de la persona. Laboratorio propio, sistema digital, examen con equipo nuevo. La optica que ya deberia existir en 2026.
Manifestacion: tiendas que se sienten de esta decada, app sencilla, IA que ayuda a elegir montura.
Inclusivo
Todos los rostros, todas las recetas, todos los presupuestos dentro del rango. Modelos reales. Rangos de talla de puente. Multiples alturas de pupila.
Manifestacion: catalogo con ajustes asiaticos, puentes bajos, opciones para ninos. Nadie sale diciendo "no tenian mi talla".
Editorial
Curaduria, no abundancia. 200 SKUs escogidos con criterio — no 2.000 al azar. Cada montura tiene una razon de estar ahi. Fotografiamos como revista.
Manifestacion: colecciones estacionales con tema, capsulas con artistas LATAM, tienda con menos producto mejor exhibido.
"Rapido" (entrega en 1 hora) NO es un atributo — es una promesa funcional que soporta "Moderno". Esta en nuestro contrato con el cliente, no en nuestra personalidad.
Arquetipo de Marca
El Amigo con Gusto
El que te dice "esas te quedan divinas, pero las otras te van mejor con tu cara" y no te vende la mas cara. El que sabe de optica porque es su oficio, pero te habla como persona. El que tiene buen ojo sin hacerte sentir que tu no.
Mezcla arquetipica: 80% Everyman (cercano, inclusivo) + 20% Creator (gusto, curaduria).
No somos
Tono de Voz
Como suena OKIO: habla "tu", nunca "usted". Frases cortas. Calidez sin diminutivos. Confianza sin arrogancia. Humor tranquilo.
- "Listas en una hora. Si, en serio."
- "Todos los precios incluyen montura, lentes y examen. Todo."
- "Escoge las que te hagan sentir tu. Nosotros las armamos."
- "La formula mas comun se entrega hoy. Formulas raras, manana."
- "Si no te van, te cambiamos. 30 dias, sin preguntas."
- "Anteojos a precio de locura"
- "La optica #1 de Colombia"
- "Corra, oferta limitada"
- "Hacemos tus suenos visuales realidad"
- "Disrumpimos el mercado optico"
Vocabulario
| Usamos | No usamos |
|---|---|
| Gafas, lentes, anteojos | Montura de disenador |
| Graduacion, formula | Prescripcion optica |
| Examen visual | Consulta oftalmica |
| Precio total | "Desde" |
| Tu tienda OKIO | Nuestro punto de venta |
| Una hora | "Rapida entrega" |
Logo e Identificador Visual
El logotipo OKIO se conserva intacto. La tipografia redondeada con el "!" como ojo es nuestro ADN grafico. Lo que cambia es el color de aplicacion.
Logotipo principal
La forma del logo no se modifica. El "!" separado entre la barra vertical y el punto circular es el identificador — simula un ojo, reforzando "optica" sin decirlo.
Reglas del logotipo
- Terracota #B5523A sobre fondo claro (uso principal v2)
- Noche Calida #2A2420 sobre fondo claro
- Blanco sobre Terracota, Noche Calida, o foto oscura
- Tamano minimo: 24px de alto en digital, 8mm en impreso
- Espacio de respeto: minimo 1/2 de la altura del logo alrededor
- Sobre foto: solo si hay suficiente contraste o con overlay
- Cambiar las proporciones o estirar el logo
- Usar el azul antiguo #001CA7 en nuevas aplicaciones
- Rotar, inclinar o aplicar efectos (sombra, brillo, 3D)
- Usar sobre fondos que no den suficiente contraste
- Reemplazar la tipografia del logo por otra fuente
- Separar el "!" del resto del logotipo
Identificador visual
El monograma OKIO es la version compacta de la marca. Se usa como icono para redes sociales, favicon, avatar de apps y marca de agua.
Nota de transicion: El logo original fue creado en azul #273F90. A medida que se migra al sistema v2, todas las nuevas aplicaciones usan Terracota #B5523A. El azul no se reproduce mas en nuevos materiales.
Paleta de Colores
Sistema "Tierra + Pastel". Regla de oro: maximo 4 colores por composicion. Haz clic en cualquier color para copiar su hex.
Acentos con valentia: El 20-25% de acentos incluye Salvia, Petroleo, Coral y Blush como fondos completos de bloques, no solo bordes. Cada uno tiene un codigo de proposito (ver tabla abajo).
Acento vs. Profundidad — cual es la diferencia?
Un acento llama la atencion. Es el color que el ojo busca primero — el fondo de un card de coleccion, el header de una estanteria, el bloque de color que dice "mirame". Los acentos (Coral, Blush, Salvia) pueden ser protagonistas: fondos completos, bloques grandes, zonas enteras de tienda. Son los que dan personalidad a cada pieza.
La profundidad sostiene sin competir. Es lo que ancla la composicion — el hover sutil, el texto secundario, la sombra que da volumen. Los colores de profundidad (Noche Terracota, Petroleo, Piedra, Nuez) nunca son protagonistas: son detalles, micro-interacciones, textos de apoyo. Si los quitas, la pieza pierde matiz; si los exageras, pierde claridad.
Regla simple: si el color quiere que lo veas, es acento. Si el color quiere que veas otra cosa mejor, es profundidad.
Codigo de color por proposito
| Color | Rol | Codigo | Donde se usa |
|---|---|---|---|
| Terracota | ADN | Marca / Identidad | Logo, CTAs, fachadas, hero headers |
| Coral Tierra | Acento | Promo / Urgencia | Tags de oferta, banners promo, cards Black Friday |
| Blush | Acento | Editorial / Lifestyle | Fondos fotograficos, stories, campanas de marca |
| Salvia | Acento | Outdoor / Sol | Headers de sol, cards verano, zona outdoor tienda |
| Noche Terracota | Profundidad | Detalle calido | Hover states, sombras, texto sobre Blush |
| Petroleo | Profundidad | Contrapunto frio | Fondos nocturnos, eventos especiales, premium |
| Piedra | Profundidad | Texto secundario | Captions, metadata, subtitulos |
| Nuez | Profundidad | Detalle | Iconos, divisores, badges |
Regla clave: cada acento puede ser fondo completo de un card, header de estanteria o zona de tienda. No son solo para bordes — son para bloques intencionales de color. La valentia esta en la escala, no en la cantidad.
Migracion v1 → v2
| Color v1 | → | Color v2 |
|---|---|---|
| Azul #001CA7 | → | Terracota #B5523A (ADN) |
| Coral #E5664A | → | Coral Tierra #D4714E (-15% sat) |
| Celeste #9FD9E7 | → | Petroleo #3D5A6A (mas adulto) |
| Amarillo #F5D547 | → | Arena #EDE4D8 + Coral Tierra |
| Magenta #E91E8C | → | Blush #E8C4B0 |
| Turquesa #00C2B5 | → | Salvia #8A9A7B |
Paleta en accion: composiciones de ejemplo
Cada ejemplo muestra como aplicar la regla 60/25/10/5. Observa donde va cada rol de color.
Post Instagram — Claim
✓ Solo 3 colores activos. El terracota atrae la mirada al CTA.
Card de producto — Web/App
✓ 4 colores. El ojo va directo al precio en terracota.
Email transaccional — Confirmacion de cita
✓ El header terracota enmarca. El footer noche ancla. Hueso respira.
Story Instagram — Lanzamiento
✓ Blush da calidez editorial. Noche Terracota agrega sofisticacion.
Banner tienda / Display digital
✓ Salvia = salud/frescura. Perfecto para mensajes de servicio medico.
Packaging — Bolsa + caja
✓ Minimalismo. El terracota solo aparece en logo y franja. El material habla.
Guia rapida: cuando usar cada acento y profundidad
| Color | Rol | Cuando usarlo | Cuando NO usarlo |
|---|---|---|---|
| Coral Tierra | Acento calido | CTAs secundarios, highlights, badges de oferta | Nunca como fondo completo. Max 1 de cada 3 piezas. |
| Blush | Acento editorial | Fondos fotograficos, stories, lanzamientos, campanas femeninas | No para señaletica ni texto sobre Blush (poco contraste) |
| Salvia | Acento fresco | Servicios medicos, testimonios, eco/sustentabilidad, bienestar | Nunca dominante. No combinar con Coral Tierra (choque). |
| Noche Terracota | Profundidad calida | Hover states, sombras, texto sobre Blush, tags premium | No como fondo principal. Solo detalles y micro-interacciones. |
| Petroleo | Contrapunto frio | Fondos nocturnos, eventos especiales, contraste premium | Maximo 1 pieza de cada 5. El sistema es calido, no frio. |
| Piedra | Texto secundario | Captions, metadata, subtitulos, textos legales | No para titulares ni CTAs (demasiado sutil). |
| Nuez | Detalle | Iconos, divisores, badges, texto sobre Arena | No como color principal de texto extenso. |
Combinaciones aprobadas
Estas son las 5 paletas de trabajo mas comunes. Cualquier composicion debe caer dentro de una de estas combinaciones.
Tipografia
Fraunces para titulares y momentos editoriales. Inter para todo lo demas.
Optica con gusto, para todos.
Disenamos, armamos y entregamos gafas con gusto, precio justo y velocidad. En nuestras tiendas, con nuestro laboratorio, sin intermediarios. Todos los precios incluyen montura, lentes y examen.
Jerarquia
| Nivel | Fuente | Peso | Uso |
|---|---|---|---|
| H1 / Hero | Fraunces | Bold, 42-60px | Titulos de pagina, claims |
| H2 / Seccion | Fraunces | SemiBold, 28-32px | Secciones principales |
| H3 / Sub | Fraunces | SemiBold, 20px | Subsecciones |
| Body | Inter | Regular, 15-16px | Texto corrido |
| Caption | Inter | Medium, 12-13px | Labels, metadata |
| Micro | Inter | SemiBold, 10-11px | Tags, badges, legales |
El logotipo conserva su tipografia actual (no se cambia).
Sistema Grafico
Capsulas rediseñadas
Las capsulas del sistema actual se conservan pero se redisenan con nueva intencion: ya no son textura decorativa. Ahora son soportes de informacion — contienen precio, claim, o una palabra clave. Se usan con moderacion.
Recursos nuevos
Marca de cita editorial
Comillas tipograficas grandes en Fraunces para testimonios y claims.
Fotografia central
Humanos reales, no stock. Estilo editorial calido tipo Jimmy Fairly + Zerezes.
Regla de 4 colores
Maximo 4 colores por composicion: 1 base + 1 acento + Terracota ADN + 1 profundidad.
Direccion Fotografica
Sujetos
Personas reales, diversas en edad (18-65), tipo de piel, tipo de rostro, genero. Nunca solo modelos "perfectos". Maria es protagonista.
Luz
Natural, calida, dorada. Nada de flash duro o fondo blanco de catalogo.
Locacion
Espacios reales de LATAM — panaderia de barrio, oficina luminosa, calle con luz de tarde, mercado. Nunca estudio esteril.
Composicion
Medium shots y close-ups. Gente mirandose, riendose, leyendo. No poses tiesas.
Producto
Fotografiado como en revista — sobre superficie natural (madera, linen, piedra), con luz lateral. Zerezes es la referencia.
Referencia
Jimmy Fairly (Paris), Zerezes (Sao Paulo), Ace & Tate (Amsterdam) — calidez sin perder profesionalismo.
Aplicaciones en Tienda
Las tiendas son el principal punto de contacto con Maria. Cada una debe sentirse intencionada, calida, y clara.
5 zonas interiores
Paredes
60-70% Hueso/Arena. UNA accent wall en Blush o Salvia, rotativa por coleccion.
Mostrador
Frente en Terracota OKIO. Superficie en madera clara o piedra natural.
Zona examen
Fondo Hueso, equipo en Noche Calida. Calma, profesionalismo.
Zona espera
Banco tapizado Arena/Blush. Plantas tropicales reales. Revistas/libros.
Vitrina
Fondo Hueso o Arena. Producto sobre soportes de madera. Iluminacion dirigida 3000K.
Materiales permitidos
Si
Madera clara (roble, pino, ash), piedra terracota natural, metal blanco calido (polvo), linen/algodon en Hueso/Arena, vidrio transparente, concreto pulido claro, plantas tropicales reales.
No
Acero inoxidable expuesto, plastico brillante, melamina blanca, neon de colores, alfombra, vinil decorativo generico.
Señaletica obligatoria
1. Letrero fachada
Letras corporeas blanco calido retroiluminado sobre terracota. Nunca neon.
2. Panel de proceso
Cerca de entrada. 3 pasos con iconos. Fondo Hueso.
3. Senal de precio
Visible desde pasillo. Cifra grande en Terracota. Siempre total.
4. Testimonial wall
Cita real en Fraunces italic. Fondo Arena/Blush. Cambia cada trimestre.
Diagnostico de tiendas actuales
Albrook Mall
Fachada en piedra terracota con vidrio — la mejor base. Pendiente: letrero de azul a blanco calido retroiluminado. La piedra se queda, habla sola.
70% listoBrisas Capital Mall
Fachada completa en piedra terracota con celosia — la MAS cercana al sistema v2. Solo cambiar logo iluminado de azul a blanco. Interior necesita tratamiento calido.
75% listoCosta del Este
Fachada exterior coral/salmon con logo blanco — ya en la familia cromatica. Ajuste: profundizar tono a Terracota #B5523A y evolucionar logo.
60% listoPlaza New York
Interior azul con acentos celeste — la que MAS necesita evolucionar. Paredes a Hueso, acentos Blush, mobiliario tierra. Interior completo requiere intervencion.
30% listoDe las 4 tiendas, 3 ya tienen elementos terracota en fachada. No estamos inventando — estamos formalizando algo que intuitivamente ya se eligio. La piedra se queda, el azul se va.
3 tipos de fachada
Tipo A — Mall cerrado
Vitrina de vidrio con fascia superior en Terracota, logo blanco. Marcos laterales en piedra terracota. El interior vende a traves del vidrio.
Tipo B — Calle / Standalone
Toda la fachada en ladrillo/piedra terracota. Logo en letras corporeas blanco retroiluminado. Entrada con arco. Vegetacion tropical. La fachada soñada.
Tipo C — Mall abierto / Plaza
Marco perimetral completo en Terracota con logo blanco en dintel. El cristal deja ver el interior. Un "cuadro" terracota alrededor de la vitrina.
El recorrido de Maria
Los 5 momentos que vive nuestra cliente nucleo al visitar una tienda OKIO.
Ve la fachada
Piedra terracota + logo blanco. Desde 20 metros reconoce que es OKIO. La piedra transmite confianza sin palabras.
Entra y respira
Paredes Hueso, luz 3000K. Panel de proceso explica los 3 pasos del servicio. Se siente bienvenida, no abrumada.
Explora y se prueba
Estanteria blanca con gafas organizadas. Espejo ovalado LED. Mesa central con max 8-10 monturas curadas. "Tomate tu tiempo."
Examen visual
Consultorio en Noche Calida (oscuro, necesario). Profesional y comodo. Silla en cuero terracota. 15 minutos, tiene su formula.
Paga y espera
Mostrador terracota. Precio total visible, sin sorpresas. "En 1 hora estan listas." Se va a comer y regresa. Sale sintiendose digna.
Do / Don't de tienda
- Piedra o pintura terracota en fachada (piedra = preferida)
- Logo blanco calido retroiluminado sobre terracota
- Interior 60-70% Hueso/Arena, UNA accent wall rotativa
- Plantas tropicales REALES — minimo 3 por tienda
- Luz calida 3000K en exhibicion y prueba
- Espejo ovalado con marco LED calido
- Mostrador en Terracota como pieza central
- Precio total visible desde el pasillo
- Musica ambient lounge entre 68-75 BPM
- Paredes azules, celestes o en colores frios
- Neon de colores (ni azul, ni rosa, ninguno)
- Iluminacion blanca fria (mayor a 4000K)
- Mas de 4 colores de la paleta en un mismo espacio
- Plantas artificiales
- Pisos oscuros o alfombrados
- Stickers de ofertas pegados en vidrieras
- Musica pop/reggaeton a volumen alto
- TV con loop publicitario (solo contenido editorial)
Plan de transicion
Fase inmediata
Señaletica + mostrador. Cambiar letreros, pintar mostradores en Terracota, añadir panel de proceso.
3-6 meses
Interior calido. Repintar paredes a Hueso, cambiar iluminacion a 3000K, añadir plantas, tapizar bancos.
Renovacion
Fachada completa. Piedra terracota (Albrook y Brisas ya la tienen). Plaza NY y Costa del Este son prioridad.
Acentos de color en tienda
Lo que hace especiales a marcas como Zerezes es que el espacio es mayormente neutro pero tiene bloques intencionales de color que dan personalidad sin caos. Asi se aplica en OKIO:
Accent wall: Blush (default)
UNA pared en Blush #E8C4B0 con claim en Fraunces italic. El resto respira en Hueso. Mostrador en Noche Calida, logo Terracota. Fondo neutro + bloque de color intencional + claim tipografico — la formula Zerezes.
Usar para: look default, lanzamientos, coleccion principal
Acento Salvia: zona espera + salud
Banco tapizado en Salvia #8A9A7B — acento en mueble, no en pared. Plantas refuerzan el tono. Señaletica de servicio medico usa Salvia como color de categoria. Salvia = bienestar, frescura, confianza medica.
Usar para: zona espera, servicios medicos, testimonios
Accent wall: Petroleo (premium/eventos)
Petroleo #3D5A6A se reserva para momentos premium — lanzamiento, colaboracion, Navidad. Es el contrapunto frio que eleva la percepcion de valor. Texto Hueso, precio Terracota. Maximo 1 de cada 5 tiendas lo usa a la vez.
Usar para: lanzamientos, premium, eventos, fin de año
Coral Tierra: promociones puntuales
Coral Tierra #D4714E es urgencia controlada — promos, back-to-school, Black Friday. Solo en banners y tags, nunca como pared completa. Fondo Hueso, precios Terracota, Coral enmarca el mensaje. Panel lateral Noche Calida da contraste.
Usar para: promos estacionales, 2x1, ofertas limitadas
Regla de rotacion de acentos
Cada tienda tiene exactamente UNA accent wall, que rota cada trimestre o por coleccion. Los 4 acentos aprobados:
Nunca dos accent walls en la misma tienda. Nunca Coral Tierra como pared. El 70% del espacio debe seguir neutro — Hueso, Arena, Blanco.
Toda tienda nueva (#5 en adelante) abre con el sistema completo desde el dia 1.
Estanteria Modular
El pegboard modular de metal es uno de los assets mas valiosos de OKIO. Se conserva la estructura blanca; se actualizan los elementos insertables.
Anatomia del sistema
Panel base (pegboard)
Lamina metalica blanca perforada. Se mantiene en Blanco #FFFFFF. Lienzo neutro.
Entrepano
Bandeja metalica removible. Blanco #FFFFFF. 3-4 monturas por nivel.
Dot de color (peg)
De Azul #001CA7 a Terracota #B5523A. Unico elemento estructural que cambia de color.
Panel tapa
Cubre secciones del pegboard. Respiro visual o zona de comunicacion. Blanco o Hueso.
Header de seccion
Fondo en acento codificado (Terracota=nuevo, Salvia=sol, Petroleo=clasicos). Texto blanco en Fraunces.
Edit
Card de comunicacion
Se inserta en lugar de entrepaños. Solo colores v2. Maximo 2 por pared.
Label de modelo
Fraunces Semibold en Noche Calida sobre fondo blanco.
Tag de precio
Numero en Fraunces Bold Terracota. Siempre precio total.
3 configuraciones del pegboard
A. Producto completo
Todos los entrepaños activos. Maxima exhibicion.
2026
B. Producto + comunicacion
Entrepaños de un lado, paneles de comunicacion del otro.
C. Comunicacion editorial
Panel grande arriba, producto curado abajo.
Cards de comunicacion aprobadas
Cada card usa un acento codificado como fondo completo. Texto siempre en blanco o Noche Calida segun contraste.
Coleccion
Coleccion
Reglas del sistema modular
- Estructura del pegboard blanca — las cards y headers llevan el color codificado
- Dots solo en Terracota #B5523A
- Maximo 2 cards de comunicacion por pared
- Entrepaños vacios son validos — comunican curaduria
- Un espejo arco cada 2-3 modulos
- Variar configuracion por temporada
- Pintar paneles o entrepaños de ningun color
- Cards con colores fuera de la paleta v2 o sin codigo asignado
- Mas de 4 monturas por entrepano
- Mezclar dots azules viejos con terracota nuevos
- Usar tipografia que no sea Fraunces/Inter
- Precios con "desde" o asteriscos
Antes vs. Despues: v1 a v2
Se conserva: panel base blanco, entrepaños blancos, perforaciones ovaladas, espejos con arco LED, modularidad total. Cambia: dots, headers, cards promo, labels, tags de precio.
Plan de transicion semanal
Dots de color
Reemplazar todos los dots/pegs azules por Terracota #B5523A. Es el cambio mas visible e inmediato. Costo minimo.
Comunicacion impresa
Reimprimir cards, headers y labels con colores v2. Eliminar cualquier pieza con azul, amarillo o rojo puro.
Reconfiguracion + capacitacion
Store managers aprenden el nuevo sistema de configuraciones. Practica de montaje y desmontaje. Guia impresa en cada tienda.
El pegboard blanco es la decision correcta a escala. Warby Parker, Zerezes, Ace & Tate — todas usan estructura neutra + comunicacion intercambiable. La estanteria no compite con el producto, lo presenta.
Digital y Packaging
Web
Fondo principal: Hueso (nunca blanco frio). CTAs primarios: Terracota. Cards de producto: fondo blanco, borde Arcilla. Secciones tematicas usan acento codificado como fondo de hero: Salvia para sol/outdoor, Petroleo para clasicos, Coral para promos. Hover: Noche Terracota.
Redes sociales
Grid Instagram: alternar Hueso, Arena, y fondos de acento codificado (Salvia, Petroleo, Coral, Blush) a sangre. Stories: marcos en el acento de la campana. Reels: subtitulos Inter, caja en color codificado. Nunca publicar sin al menos 1 color de la paleta.
Header: barra en acento codificado de la campana (Terracota para marca, Salvia para verano, Coral para promo). Cuerpo: fondo Hueso. CTAs: Terracota. Footer: Noche Calida. Maximo 2 CTAs por email.
Packaging
Caja: blanca, logo Terracota, franja inferior en acento de la coleccion (Terracota estandar, Salvia para Sol, Petroleo para premium), interior Arena.
Funda de tela: Arcilla #DDD0C0, logo en Nuez, textura linen.
Paño limpiador: Hueso con logo sutil en Arcilla.
Bolsa de tienda: kraft natural con logo Terracota, asas de algodon.
Uniformes
Polo/camisa: Hueso con logo bordado Terracota. Delantal laboratorio: Arena con broche terracota. Nunca logos grandes, colores neon, o negro completo.
Design Tokens CSS
Copiar este bloque en cualquier proyecto web OKIO. Define toda la identidad visual como variables reutilizables.
/* OKIO Design Tokens v2 */ :root { /* ADN */ --okio-terracota: #B5523A; --okio-noche-calida: #2A2420; /* Bases calidas (60-70%) */ --okio-hueso: #F5F1EA; --okio-arena: #EDE4D8; --okio-arcilla: #DDD0C0; --okio-blanco: #FFFFFF; /* Acentos (20-25%) */ --okio-coral-tierra: #D4714E; --okio-blush: #E8C4B0; --okio-salvia: #8A9A7B; /* Profundidad (5-10%) */ --okio-noche-terracota: #7A3628; --okio-petroleo: #3D5A6A; --okio-piedra: #A09080; --okio-nuez: #6B5D50; /* Tipografia */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', sans-serif; /* Escala tipografica */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; /* Espaciado */ --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Radios, sombras, transiciones */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(42,36,32,0.06); --shadow-md: 0 4px 12px rgba(42,36,32,0.08); --shadow-lg: 0 8px 24px rgba(42,36,32,0.12); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 150ms; --duration-base: 250ms; }
Componentes UI
Referencia visual para diseñadores y desarrolladores. Todos los componentes usan los tokens de arriba.
Escala tipografica
Componentes de pagina
Mockups de referencia para web. Cada componente usa los tokens y colores del sistema.
Heroes de categoria — acento codificado a escala
Cada seccion de la web usa su acento asignado como fondo de hero. El color ocupa espacio con valentia.
Email con acento de campana
El header del email toma el color de la campana — no siempre Terracota.
La Promesa Funcional
El contrato con cada cliente. Siempre, en cada tienda, sin excepciones.
Examen visual gratuito
Con optometra certificado.
Precio total
Sin sorpresas, sin asteriscos. Montura + lentes + examen.
Gafas en 1 hora
Para formulas estandar (80% de casos).
Garantia de 30 dias
Si no te van, te cambiamos sin preguntar.
Ajuste vitalicio
Vuelve cuantas veces quieras a que las ajustemos.
Lo que NO debe hacerse
Para que la tienda #100 se sienta igual de intencionada que la #5.
- ✗ Usar el antiguo Azul #001CA7 en nuevas piezas
- ✗ Mezclar mas de 4 colores en una composicion
- ✗ Fondos grises frios o blancos azulados
- ✗ Neon de cualquier color en tiendas
- ✗ Fotos de stock genericas
- ✗ "Desde $X" en comunicacion de precios
- ✗ Diminutivos ("gafitas", "preciecito")
- ✗ Logos grandes en toda la superficie de packaging
- ✗ Copiar visualmente a Warby Parker o Lenskart
- ✗ Musica alta o publicidad en pantallas en tienda
- ✗ Stickers de "OFERTA" / "LIQUIDACION"
- ✗ Acentos fuera de su codigo asignado (ej: Salvia en promo, Coral en editorial)
- ✗ Iluminacion fria (>4000K) en zona de exhibicion
- ✗ Publicar en redes sin colores de la paleta
Si tienes duda, pregunta antes de producir. Es mas barato corregir un brief que reimprimir 10,000 cajas.
