Guía de estilo
Sistema de diseño de Caiman. Página interna, no indexada.
Tipografía
Cambia el par tipográfico y mira el efecto en los componentes reales de abajo, no en un espécimen. Cada opción trae su contra.
Toma el control de tu marca
Toma el control de tu marca
Toma el control de tu marca
Toma el control de tu marca
Lead · 1.25rem. Escribe el nombre y recibe un veredicto claro en minutos.
Body · 1rem. Caiman lee el registro del IMPI como lo leería un abogado de marcas, y te entrega la conclusión con la evidencia debajo.
Small · 0.875rem. Texto de interfaz.
Data · 0.8125rem tabular. Exp. 2481006 · Clase 30 · 12 ago 2031
Eyebrow · micro, 600, 0.08em
Color
Todo en OKLCH. Los neutros no son grises: van teñidos hacia el verde de la marca (tono 150) con croma 0.002–0.012. Leen como monocromo, pero toda la página vive en la familia del logo.
Ink · neutros teñidos
050100150200300400500600700800900950Green · marca y acción
50100200300400500600700800900Rojo de marca y acentos ilustrativos
El rojo sale del ojo del logo. Es el único elemento no verde de la marca, y el set de iconos lo repite como un punto. Nunca para texto corrido ni rellenos grandes.
brand-redamber-500sky-500clay-500Roles semánticos
Los únicos tokens que cambian entre claro y oscuro. Prueba el interruptor del header del sitio para verlos girar.
--bg--bg-subtle--bg-elevated--bg-inverse--text-primary--text-secondary--text-muted--border--accent--accent-hover--accent-subtle--surface-tintTaxonomía de estatus
Una forma, cinco tonos. Se aprende una vez y después se lee de un vistazo en una columna.
La hoja de marca que te pasaron trae los hex desalineados con sus propias muestras: #004656 es un teal azulado, no el verde oscuro que se ve, y #6C809F es un gris azul, no el verde claro de la muestra. Los valores de arriba están muestreados del logo real (cuerpo #7D9855, ojo #E82F34), que es la fuente confiable.
Iconos
Set propio. Una sola regla, tomada del logo: glifo sólido en currentColor más exactamente un punto rojo. El punto es el ojo del caimán, repetido, y cae donde está la atención del icono: el lente de la lupa, la cabeza del pin, la esquina de aviso de la campana. Sólidos y no de línea porque a 16–20px una línea se deshace.
Las marcas de terceros (Instagram, Facebook, X) se quedan en Phosphor. No se redibuja el logo de alguien más.
Componentes
Cada control tiene reposo, hover, foco y deshabilitado. El botón secundario es anillo, nunca relleno gris: junto a uno lleno, un gris plano se lee como deshabilitado.
Botones
Campos
Segmentado
Fila de datos
- 2481006CAIMAN COFFEE ROASTERSRegistrada
- 2503914KAYMAN BEANSEn trámite
Superficie de producto
El componente que aparece en el hero y en el recorrido. Un solo componente para que la página de marketing y la app no puedan mostrar dos productos distintos.
Veredicto
Con obstáculosRegistrable en clase 30 con una estrategia de distintividad.
- Tostadores del Golfo S.A. de C.V.86%CAIMAN COFFEE ROASTERSRegistrada
Exp. 2481006 · Clase 30 · Fonética
- Alimentos Kayman S. de R.L.71%KAYMAN BEANSEn trámite
Exp. 2503914 · Clase 30 · Fonética
- Grupo Restaurantero Veracruz94%CAFÉ CAIMÁNRegistrada
Exp. 2377180 · Clase 43 · Idéntica
Elevación y radios
La elevación es un anillo de 1px más una sombra corta, nunca un desenfoque suave. El anillo es lo que se lee como borde a cualquier tamaño; la sombra solo despega la superficie.
ringring + xsring + smring + mdring + lgglow--r-xs--r-sm--r-md--r-lg--r-xl--r-2xl