Recursos de marca

Recursos de marca de Kata.

La identidad, lista para usar. Ocho puntos, un corazón, siete colores de área, una tipografía. Llévate el paquete, o archivos sueltos más abajo.

La marca

Ocho puntos, un corazón.

La salud nunca es una sola cosa. Entrenamiento, comida, agua, sueño, recuperación, la cabeza, los números y el coach que los lee. Cada parte es real por sí misma. Ninguna funciona por su cuenta.

Por eso la marca no es una forma única. Son ocho puntos, puestos en relación unos con otros, y el corazón es lo que forman juntos. Las partes de una persona, sostenidas en un solo sistema.

Kata es la palabra japonesa para una forma que se practica hasta que deja de ser esfuerzo y pasa a ser uno mismo. Muchas repeticiones, una forma. Los puntos son esas repeticiones: el día que registraste, la serie que terminaste, la noche que dormiste. Cada uno es pequeño. Juntos son la práctica, y la práctica se convierte en la persona.

El degradado vivo

Una marca. Todos los colores.

Aquí el color no es decoración. Te dice dónde estás. Cada área de Kata tiene un degradado, y la marca toma el color del área en la que estás.

A su aire, la marca recorre todo el sistema: 36 segundos, un color dentro del siguiente, el extremo claro siempre arriba porque la luz cae desde arriba. El lockup, el símbolo y el botón principal leen el mismo reloj, así que la identidad nunca se desfasa consigo misma.

El lockup y el símbolo, en vivo sobre el ciclo de 36 segundos.

Qué dice cada color.

ActividadVerde

Movimiento, sesiones, lo que construyes. El verde: el crecimiento, sesión a sesión.

FocoAzul acero

En lo que trabajas, más agua y datos. Limpio, medido, factual.

SueñoVioleta

La noche. El descanso tiene color propio.

NutriciónMalva

Ciruela y baya. Lo que alimenta el cuerpo, suplementos incluidos.

HoyAlbaricoque

El día que tienes delante. El amanecer, la energía y la primera hora.

MenteAguamarina

Cómo estás. Agua fresca, aparte del resto.

CoachMineral Black

Desde aquí habla el coach. Tinta, nunca decoración.

Logo

El lockup.

El corazón de ocho puntos y el logotipo, unidos. Déjale la altura de un corazón de espacio libre por cada lado. Nunca lo redibujes, lo recolorees ni lo estires.

PrimarioMarca en degradado sage, letras en Mineral Black. El uso por defecto, sobre fondos claros.
Sobre oscuroMarca en degradado sage, letras blancas. Para fondos oscuros.
Monocromo blancoUn solo color. Para fotografía y fondos cargados.
Monocromo negroMineral Black en todo. Para impresión y relieve.

Símbolo

El corazón.

Ocho puntos forman un corazón. Representa a Kata por sí solo: iconos de app, avatares, favicons y allí donde el logotipo no cabe. Los puntos son sólidos, nunca de contorno.

Kata symbol, Primario
PrimarioEl degradado sage, sobre claro.
Kata symbol, Sobre oscuro
Sobre oscuroEl mismo degradado sostiene un fondo oscuro.
Kata symbol, Monocromo blanco
Monocromo blancoUn solo color, blanco.
Kata symbol, Monocromo negro
Monocromo negroMineral Black.

Logotipo

El nombre.

Articulat CF, trazado en contornos para que nunca espere a que cargue una fuente. Úsalo donde el corazón ya esté cerca.

Kata wordmark, Mineral Black
Mineral BlackPara fondos claros.
Kata wordmark, Blanco
BlancoPara fondos oscuros.

Color

El sistema de color.

Dos degradados de marca y seis pares de área. Cada área de la app tiene el suyo, así que siempre sabes dónde estás por la luz que te rodea.

Los dos degradados de marca.

Kata sage

El degradado de marca. Sostiene el símbolo, los fondos y cada superficie de marca.

#96A48D · #DAE3CF
Mineral Black

Tinta, superficies oscuras y botones primarios. La tipografía deriva de #2d3233, nunca del negro puro.

#000000 · #2D3233

Una regla vale en todas partes: el extremo fuerte va abajo, el claro queda del todo alcanzado al 72 por ciento y se mantiene hasta arriba. La luz cae desde arriba. Los botones también la siguen: el mismo par, la misma caída, una etiqueta blanca.

Los pares de área.

kataMarca

El sage sobre el que descansa todo el sistema.

#96A48D · #DAE3CFSVG
trainActividad

Movimiento y crecimiento. El verde, sesión a sesión.

#87A266 · #C5DBA5SVG
waterFoco

En lo que trabajas, más hidratación y datos. Azul acero, limpio y medido.

#4E6391 · #A1B1CESVG
sleepSueño

La noche. El violeta es del descanso.

#9E79D3 · #BBA6DDSVG
fuelNutrición

Ciruela y baya. Lo que alimenta el cuerpo, suplementos incluidos.

#9E6A7F · #CCAEBESVG
todayHoy

El día que tienes delante. El albaricoque: el amanecer, la energía y la primera hora.

#E2845A · #F2DAC9SVG
mindMente

Aguamarina. Agua fresca, aparte del resto.

#4B8599 · #A3C5CESVG
coachCoach

Mineral Black. Desde aquí habla el coach.

#000000 · #2D3233SVG
alertAlerta

Terracota. Reservado para lo que resta. Nunca decoración.

#CD7966 · #F3D5C9SVG

Los botones, el propio par.

Marca#96A48D · #DAE3CF1.60
Actividad#87A266 · #C5DBA51.79
Foco#4E6391 · #A1B1CE2.87
Sueño#9E79D3 · #BBA6DD2.50
Nutrición#9E6A7F · #CCAEBE2.52
Hoy#E2845A · #F2DAC91.65
Mente#4B8599 · #A3C5CE2.31
Coach#000000 · #2D323315.87
Alerta#CD7966 · #F3D5C91.76

Lo único que una pantalla te pide pulsar. Un botón relleno lleva su propio par de área: el extremo fuerte en el pie, el claro del todo alcanzado al 72 por ciento, y la etiqueta es blanca, nunca negra. El número de la derecha es el blanco contra el punto medio de esa caída, donde la etiqueta se apoya de verdad. Dicho con honestidad: solo Mineral Black alcanza 4.5, y por eso el botón por defecto es en todas partes el par negro. Una página que posee un color lleva su propio par y acepta un número más suave.

Etiquetas y selección, aún más claras.

Marca#EEF2E9 · #626F594.70
Actividad#E5EFD7 · #5B6E434.70
Foco#D5DCE9 · #4A5E8A4.68
Sueño#E0D7F0 · #743FC04.71
Nutrición#E8DBE2 · #8154664.62
Hoy#F9EEE7 · #B24C1F4.67
Mente#D6E5E9 · #3B69784.67
Alerta#FAECE7 · #A5503A4.78

Una etiqueta de antetítulo no es un botón, ni tampoco un control segmentado o una píldora de idioma. Todo lo que indica un estado toma un velado claro del extremo claro de su familia y escribe encima con la tinta de esa misma familia. El número de la derecha es esa tinta sobre ese velado. Solo lo que pulsas va saturado.

Neutros.

PaperEl único fondo continuo.#FAFAF8
PanelSuperficies elevadas.#FFFFFF
Panel 2Rellenos tenues, un soplo de sage.#F2F4F0
HairlineBordes.#E7EAE4
InkTexto de cuerpo y letras.#2D3233
Ink dimTexto secundario.#5C6360
Ink faintEtiquetas y texto terciario.#8A918C
PositiveDatos buenos. Los datos negativos usan terracota.#87A266

Tipografía

Articulat CF.

Una familia, tres papeles. Nada más.

Medium 500

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Cuéntale tu día a Kata.

Títulos. Muy ajustados: -0.032em en tamaño hero, hasta -0.012em a 18px.

Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Cuéntale tu día a Kata.

Cuerpo e interfaz.

DemiBold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Cuéntale tu día a Kata.

Énfasis, cifras y etiquetas de botón.

Uso

Cómo usarlo.

La luz viene de arriba

El extremo más claro de un degradado va arriba o a un lado. Los botones lo mantienen: dos tonos planos, cabeza más clara, pie más profundo, y ningún brillo en ninguna parte.

Mineral Black, no negro

La tinta es #2d3233. El negro puro solo aparece dentro de la rampa de superficies oscuras.

La física de los botones

El primario es una píldora Mineral Black con etiqueta blanca. El secundario es una píldora gris clara con etiqueta gris. Los dos con radio de píldora completo.

Espacio libre

La altura de un corazón alrededor del lockup. El lockup nunca baja de 88px en pantalla ni de 22mm en impresión.

Nunca.

  • Escribir KATA. La marca es Kata.
  • Recolorear el símbolo, ponerle contorno o añadirle efectos.
  • Estirar, rotar o recortar el lockup.
  • Invertir un degradado para que el extremo profundo quede arriba.
  • Componer títulos con algo que no sea Articulat CF Medium.
  • Usar el símbolo para sugerir un respaldo o una alianza.

Llévate el kit entero.

El paquete trae cada variante de logo, símbolo y logotipo en SVG y PNG, los nueve degradados, una hoja de colores y un readme.

Descargar el paquete completo