Compaytence
Fundamentos de la marca
Lo que necesita para crear una página de destino que se parezca a la nuestra: un acento, una base, dos tipografías. Haga clic en cualquier color para copiarlo. Cuando esta hoja no cubra una decisión, elija la opción más sencilla.
Un azul, cuatro funciones
Compaytence tiene un único color de acento. Es el azul del logotipo y todo lo demás en la página es neutro.
El azul aparece en cuatro intensidades, y cuál usar depende de la función, no del gusto. La razón es el contraste: el azul de la marca es brillante, por lo que se lee muy bien como botón relleno y mal como una línea de texto.
No use texto en #33A9FF sobre un fondo claro. Allí mide 2.42:1, muy por debajo del mínimo de 4.5:1, y es el error más habitual que vemos en las páginas de socios. En claro, ese azul es un relleno: fondos de botones, formas de iconos, el logotipo. Cuando necesite una palabra azul, use #0077BD. Sobre la base oscura, ese mismo azul funciona bien como texto, porque allí mide 7.51:1.
La escalera completa está abajo si necesita un tono para un estado al pasar el cursor o un fondo discreto. Cada paso tiene el mismo tono con una luminosidad distinta, por eso nunca chocan. Nunca introduzca un segundo color de acento: ni morado, ni verde azulado, ni ámbar. Si algo debe destacar, cambie su peso o tamaño, no su tono.
Una base cálida
Nuestros grises no son grises. Tienen una pequeña dosis de calidez, que mantiene el azul con un aspecto frío a su lado.
Use estos exactamente. Un gris estándar, una página de #FFFFFF puro o un encabezado negro puro parecerán una marca distinta junto a nuestro sitio, aunque la diferencia sea de unos pocos puntos de saturación.
Para bordes y divisores, no use un gris. Use el color de tinta con baja opacidad, que mantiene los bordes en la misma familia que el texto que tienen encima: rgba(31, 27, 22, 0.12) en claro, rgba(233, 230, 225, 0.12) en oscuro. Las sombras siguen la misma lógica y son cálidas, nunca negro neutro.
Dos tipografías, funciones fijas
Instrument Serif para elementos de exhibición y para cada cifra. Archivo para todo lo que se lee. Ambas son gratuitas en Google Fonts.
Las cifras son la parte que vale la pena acertar, porque son lo más reconocible que hacemos. Cada cifra va en serif, en azul, con números tabulares para que las columnas queden alineadas:
Configure con font-variant-numeric: tabular-nums lining-nums. En texto corrido, una cifra como 2.4x se coloca ligeramente más grande que las palabras a su alrededor, para atraer la mirada sin usar negrita.
Cárguelas así:
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
- Texto de cuerpo de unos 17px, con altura de línea generosa.
- Titulares en serif, con peso 400.
- Serif en cursiva para una línea entera, nunca una palabra dentro de un titular.
- Inter, Geist, Roboto, Arial ni una pila de fuentes del sistema.
- Una tipografía monoespaciada para antetítulos, etiquetas o encabezados.
- Un degradado que rellene cualquier elemento tipográfico.
El logotipo
Dos variantes, una para cada base. No son intercambiables.
- Mantenga espacio libre alrededor de la marca de al menos la altura de la C en cada lado.
- Altura mínima de 24px en pantalla. Por debajo de ese tamaño, el logotipo deja de ser legible.
- No cambie su color, no lo delinee, no añada una sombra, no lo rote ni lo coloque sobre una fotografía recargada.
- No lo reconstruya como texto vivo ni ajuste su espaciado entre letras o lo condense para que encaje en un espacio.
Escriba a trevor@compaytence.com para obtener SVG y PNG en resolución completa. Las dos imágenes anteriores están incrustadas en este archivo, así que puede hacer clic derecho y guardar cualquiera de ellas para una maqueta rápida, pero use los archivos reales para cualquier cosa que publique.
Forma, espacio y movimiento
Dos radios de esquina, un ritmo de espaciado y moderación en el movimiento.
- 14px en contenedores: tarjetas, paneles, imágenes, modales.
- 8px en controles: botones, campos, etiquetas, chips pequeños.
- Nada más. Sin píldoras, sin esquinas cuadradas, sin un tercer valor.
- Un borde fino en reposo, sin sombra.
- Elevación y sombra solo al pasar el cursor.
- No todo es una tarjeta. Una página de solo tarjetas se lee como ruido.
El espaciado parte de una línea base de 30px. Use pasos completos entre bloques y los pasos más pequeños dentro de un componente. Todo lo que no esté en esta escala se verá ligeramente fuera de lugar junto a nuestras páginas, de una manera difícil de nombrar y fácil de ver.
Sobre el movimiento: fundidos y ascensos breves cuando entra una sección, alrededor de medio segundo, y nada más. Sin parallax, sin contadores que se animen, sin carruseles que se muevan solos. Respete prefers-reduced-motion y nunca haga que el contenido dependa de que se ejecute una animación: si el script falla, todo debe seguir estando en la página.
Antes de enviárnoslo
- El texto de cuerpo alcanza 4.5:1 frente a su fondo, en ambos temas si creó los dos.
- Ningún texto en #33A9FF sobre un fondo claro.
- Cada cifra está en Instrument Serif, en azul y en formato tabular.
- Un color de acento en la página. Cuéntelos.
- La variante del logotipo coincide con su base, mide 24px o más y tiene espacio libre.
- El foco del teclado es visible en cada enlace, botón y campo.
- Los objetivos táctiles tienen al menos 44px.
- Funciona a 375px de ancho sin desplazamiento horizontal.
Envíe un enlace de prueba en lugar de capturas de pantalla. Lo revisaremos sobre ambas bases y al ancho de un teléfono, y responderemos en un día.