Identidad visual · Sedes y diseñadores

Manual de marca

Todo lo que necesitás para comunicar Clickatón con coherencia: logos oficiales, colores, tipografías y reglas de uso. Descargá los archivos y usalos libremente en piezas de sedes, sponsors y comunidad.

01 · Marca

Logos principales

Tres variantes oficiales con fondo transparente. El preview usa damero solo en pantalla; al descargar recibís el PNG original sin modificar.

Logo principal — color V3

Versión sticker a color (CLICK en amarillo). PNG con fondo transparente.

Descargar PNG

Logo principal — color V2

Versión sticker a color (ATÓN! en amarillo). PNG con fondo transparente.

Descargar PNG

Logo principal — mono

Versión sticker monocromática. PNG con fondo transparente.

Descargar PNG

Descargar pack de logos (ZIP)

02 · Paleta

Colores de marca

Copiá el código hex con un clic. El amarillo es acento — nunca el fondo dominante.

Core

Negro profundo

Fondo principal de la web y piezas editoriales

#111111

--ck-core-black

Gris oscuro

Superficies, cards y paneles

#1B1B1B

--ck-core-gray-dark

Gris medio

Elevaciones y hovers

#2A2A2A

--ck-core-gray-mid

Blanco

Texto primario y contraste

#FFFFFF

--ck-core-white

Texto secundario

Body, descripciones y ayudas

#B9B9B9

--ck-core-text-secondary

Amarillo Clickatón

Acento de marca — CTA, links, líneas, íconos

#FFC400

--ck-core-brand

Apoyo / estados

Violeta comunidad

Comunidad y acentos secundarios

#6C53FF

--ck-brand-violet

Azul tecnología

Estados info / tech

#00AEEF

--ck-brand-blue

Verde éxito

Confirmaciones

#4CAF50

--ck-brand-green

Peligro

Errores y alertas

#FF5C5C

--ck-danger

03 · Tipografía

Familias tipográficas

Las mismas fuentes de la web. Descargá cada una o el pack completo. El wordmark del logo no se tipografía.

Bebas Neue

Display / títulos

SALÍ A BUSCAR EL INSTANTE

Titulares, hero y headings en mayúsculas. No usar para simular el wordmark del logo.

Descargar Google Fonts

Montserrat

UI / cuerpo

Una experiencia fotográfica que combina creatividad, desafío y comunidad.

Textos de interfaz, párrafos, botones y formularios.

Descargar Google Fonts

Caveat

Acento editorial

Salí. Encontrá. Compartí.

Frases cortas, firmas editoriales. Usar con moderación.

Descargar Google Fonts

Descargar tipografías (ZIP)

04 · Reglas

Uso correcto

Para que sedes y diseñadores mantengan la misma energía visual en todo el ecosistema.

Sí

Usá siempre los PNG oficiales descargables (no redibujar ni tipografiar el logo).
Respetá el área libre alrededor del logo (como mínimo la altura de la cámara).
Los tres logos principales tienen fondo transparente: usalos sobre oscuro o claro según contraste.
El amarillo `#FFC400` es un golpe visual: CTAs, links, líneas e íconos — nunca el fondo de página.
Tipografía de piezas: Bebas Neue + Montserrat + Caveat según el rol indicado.

No

No distorsionar, rotar, cambiar colores ni agregar sombras/glow al logo.
No reconstruir “CLICKATÓN!” con Bebas Neue u otra fuente: el wordmark es asset gráfico.
No aplastar ni recortar el contorno blanco del sticker.
No llenar héroes o fondos enteros de amarillo.
No mezclar con paletas ajenas (terracota, púrpura SaaS genérico, etc.).

05 · Descargas

Packs completos

Todo en un ZIP para armar piezas rápido.

Descargar pack de logos (ZIP)Descargar tipografías (ZIP)Ver Design System (interno)

Licencia tipográfica: SIL Open Font License (OFL) vía Google Fonts / Fontsource. Los logos son propiedad de Clickatón — usalos para comunicar la marca; no los alteres ni los registres como propios.