Saltar al contenido

Cómo se usa la marca de Frank.

Los archivos del logo, la paleta con sus códigos, la tipografía por rol y las cosas que no se hacen con ninguno de los tres. Si tu caso no está aquí, escríbenos y lo resolvemos en el día.

El nombre.

Es corto y se escribe de una sola forma. Estas tres reglas cubren casi todo lo que aparece en una nota o en una presentación.

  • Se escribe Frank, con mayúscula inicial. Nunca FRANK ni frank.
  • No lleva sufijo. No es Frank AI, ni Frank App, ni Frank.io. El dominio es tryfrank.app, pero el producto se llama Frank.
  • En una frase va como nombre propio: “Frank entrena conversaciones difíciles”, no “el Frank” ni “la plataforma Frank”.

Lo que no se hace con el logo.

Seis cosas que rompen la marca. Si dudas de una séptima, la respuesta probablemente también sea no.

No lo recolorees
El símbolo es naranja con la onda en blanco, siempre. El wordmark solo tiene dos estados: Ink sobre claro, blanco sobre oscuro.
No lo deformes
Escálalo proporcionalmente. Nada de estirarlo a lo ancho para llenar una caja.
No lo rotes
Va horizontal. Un logo en diagonal deja de ser una firma y pasa a ser un adorno.
No le pongas sombra ni resplandor
Sin drop shadow, sin glow, sin contorno. La marca no usa ninguno de los tres en ninguna parte.
No uses solo el contorno
El símbolo es una forma sólida. Vaciado pierde la onda, que es lo único que lo distingue.
No pongas el wordmark oscuro sobre naranja
Ink sobre Frank Orange no llega al contraste mínimo. Sobre naranja va la versión blanca.

El color.

La marca tiene un solo acento. Todo lo demás son neutros cálidos que existen para dejarlo respirar. Los códigos de abajo son los que usa el sitio: si los copias, obtienes exactamente lo que ves.

  • Frank Orange

    #DE5A24

    El acento. Botones, enlaces, la onda y el dato que importa.

  • Deep Orange

    #C94D18

    Hover y enlaces sobre fondo claro, donde el acento no alcanza el contraste.

  • Clay

    #D47A4A

    La onda del logo. Es el único color que no cambia entre modo claro y oscuro.

  • Ink

    #181614

    Texto principal y fondo de las bandas oscuras.

  • Warm White

    #F7F2EB

    Texto sobre fondo oscuro.

  • Bone

    #E7DFD1

    Superficies cálidas y elementos de gráfico.

  • Warm Gray

    #7A736C

    Texto secundario y marcas de gráfico.

  • Blanco

    #FFFFFF

    La superficie principal del sitio.

Dónde va el naranja

En cuatro sitios y en ninguno más: la onda de acento bajo una palabra del titular, los botones, los enlaces y el dato destacado. Nunca como fondo de una sección completa, y nunca como color de una palabra del titular: la palabra va en color de texto y lleva la onda debajo.

No hay verdes, ni rojos, ni azules de marca. Los colores de estado existen dentro del producto y no se usan en comunicación.

La tipografía.

Tres familias, y cada una tiene un trabajo. La familia se elige por rol, no por tamaño.

TitularSora

Que la primera vez nunca sea la vez real

Solo en titulares y subtítulos. Nada por debajo de 20 px usa Sora: si parece un título y mide menos, es una etiqueta.

TextoSatoshi

Tu equipo practica la conversación difícil antes de tenerla.

Cuerpo, etiquetas e interfaz. Las etiquetas van en sentence case, sin tracking y sin mayúsculas sostenidas.

DatoJetBrains Mono

02:45 / .99 / #DE5A24

Solo datos: timestamps, cifras con fuente, códigos, pesos de archivo. La pregunta no es si es un número, es si lo produjo el sistema.

Sora y JetBrains Mono están en Google Fonts. Satoshi es de Fontshare. Si no puedes cargar Satoshi, Hanken Grotesk es el sustituto que usamos.

¿Tu caso no está aquí?

Escríbenos y te respondemos con el archivo o la respuesta que necesites. Si lo que buscas es material para una nota, el kit de prensa tiene el boilerplate y los hechos verificables.

Hablemos, y que sea con una persona.

Escuchar a Frank

Cuando pides una demo hablas con quien construye Frank, no con un formulario que reparte a un SDR.