Risorse del marchio

Le risorse del marchio Kata.

L’identità, pronta all’uso. Otto punti, un cuore, sette colori d’area, un carattere. Prendi il pacchetto, oppure i singoli file qui sotto.

Il marchio

Otto punti, un cuore.

La salute non è mai una cosa sola. Allenamento, cibo, acqua, sonno, recupero, la testa, i numeri e il coach che li legge. Ogni parte è reale per conto suo. Nessuna funziona da sola.

Per questo il marchio non è una forma sola. Sono otto punti, messi in relazione fra loro, e il cuore è ciò che formano insieme. Le parti di una persona, tenute in un unico sistema.

Kata è la parola giapponese per una forma che si pratica finché smette di essere fatica e diventa te. Molte ripetizioni, una forma. I punti sono quelle ripetizioni: il giorno che hai registrato, la serie che hai chiuso, la notte che hai dormito. Ognuno è piccolo. Insieme sono la pratica, e la pratica diventa la persona.

Il gradiente vivo

Un marchio. Ogni colore.

Qui il colore non è decorazione. Ti dice dove sei. Ogni area di Kata ha un gradiente, e il marchio prende il colore dell’area in cui ti trovi.

Lasciato andare, il marchio percorre tutto il sistema: 36 secondi, un colore dentro il successivo, l’estremità chiara sempre in alto perché la luce cade dall’alto. Lockup, simbolo e pulsante primario leggono lo stesso orologio, quindi l’identità non va mai fuori fase con sé stessa.

Il lockup e il simbolo, dal vivo sul ciclo di 36 secondi.

Che cosa dice ogni colore.

AttivitàVerde

Movimento, sessioni, quello che costruisci. Il verde: la crescita, sessione dopo sessione.

FocusBlu acciaio

Quello su cui stai lavorando, più acqua e dati. Limpido, misurato, concreto.

SleepViola

La notte. Il riposo ha un colore suo.

NutritionMalva

Prugna e frutti di bosco. Ciò che nutre il corpo, integratori inclusi.

TodayAlbicocca

La giornata davanti a te. L’alba, l’energia e la prima ora.

MenteAcquamarina

Come stai. Acqua fresca, in disparte dal resto.

CoachMineral Black

Da qui parla il coach. Inchiostro, mai decorazione.

Logo

Il lockup.

Il cuore di otto punti e il wordmark, uniti. Lasciagli su ogni lato uno spazio libero pari all’altezza del cuore. Non ridisegnarlo, non ricolorarlo, non deformarlo.

PrimarioMarchio con gradiente sage, lettere Mineral Black. Il default, su fondi chiari.
Su scuroMarchio con gradiente sage, lettere bianche. Per fondi scuri.
Monocromo biancoUn solo colore. Per la fotografia e i fondi affollati.
Monocromo neroMineral Black ovunque. Per la stampa e il rilievo.

Simbolo

Il cuore.

Otto punti formano un cuore. Sta per Kata da solo: icone dell’app, avatar, favicon, ovunque il wordmark non entri. I punti sono pieni, mai in contorno.

Kata symbol, Primario
PrimarioIl gradiente sage, su chiaro.
Kata symbol, Su scuro
Su scuroLo stesso gradiente regge un fondo scuro.
Kata symbol, Monocromo bianco
Monocromo biancoUn solo colore, bianco.
Kata symbol, Monocromo nero
Monocromo neroMineral Black.

Wordmark

Il nome.

Articulat CF, disegnato in tracciati, così non aspetta mai il caricamento di un font. Usalo dove il cuore è già lì accanto.

Kata wordmark, Mineral Black
Mineral BlackPer fondi chiari.
Kata wordmark, Bianco
BiancoPer fondi scuri.

Colore

Il sistema di colore.

Due gradienti di marchio e sei coppie d’area. Ogni area dell’app ne possiede una, così sai sempre dove sei dalla luce che ti circonda.

I due gradienti del marchio.

Kata sage

Il gradiente del marchio. Porta il simbolo, i fondi sfumati e ogni superficie di brand.

#96A48D · #DAE3CF
Mineral Black

Inchiostro, superfici scure e pulsanti primari. Il testo deriva da #2d3233, mai dal nero puro.

#000000 · #2D3233

Una regola vale ovunque: l’estremità forte sta in basso, la chiara è raggiunta del tutto al 72 per cento e tiene fino in cima. La luce cade dall’alto. Anche i pulsanti la seguono: la stessa coppia, la stessa caduta, un’etichetta bianca.

Le coppie d’area.

kataBrand

Il sage su cui poggia tutto il sistema.

#96A48D · #DAE3CFSVG
trainAttività

Movimento e crescita. Il verde, sessione dopo sessione.

#87A266 · #C5DBA5SVG
waterFocus

Quello su cui stai lavorando, più idratazione e dati. Blu acciaio, limpido e misurato.

#4E6391 · #A1B1CESVG
sleepSleep

La notte. Il viola possiede il riposo.

#9E79D3 · #BBA6DDSVG
fuelNutrition

Prugna e frutti di bosco. Ciò che nutre il corpo, integratori inclusi.

#9E6A7F · #CCAEBESVG
todayToday

La giornata davanti a te. L’albicocca: l’alba, l’energia e la prima ora.

#E2845A · #F2DAC9SVG
mindMente

Acquamarina. Acqua fresca, in disparte dal resto.

#4B8599 · #A3C5CESVG
coachCoach

Mineral Black. Il coach parla da qui.

#000000 · #2D3233SVG
alertAlert

Terracotta. Riservato a ciò che toglie. Mai decorazione.

#CD7966 · #F3D5C9SVG

I pulsanti, la coppia stessa.

Brand#96A48D · #DAE3CF1.60
Attività#87A266 · #C5DBA51.79
Focus#4E6391 · #A1B1CE2.87
Sleep#9E79D3 · #BBA6DD2.50
Nutrition#9E6A7F · #CCAEBE2.52
Today#E2845A · #F2DAC91.65
Mente#4B8599 · #A3C5CE2.31
Coach#000000 · #2D323315.87
Alert#CD7966 · #F3D5C91.76

L’unica cosa che uno schermo ti chiede di premere. Un pulsante pieno porta la sua coppia d’area: l’estremità forte al piede, la chiara raggiunta del tutto al 72 per cento, e l’etichetta è bianca, mai nera. Il numero a destra è il bianco contro il punto medio di quella caduta, dove l’etichetta si posa davvero. Detto onestamente: solo Mineral Black supera 4.5, ed è per questo che il pulsante predefinito è ovunque la coppia nera. Una pagina che possiede un colore porta la sua coppia e accetta un numero più morbido.

Tag e selezione, ancora più chiari.

Brand#EEF2E9 · #626F594.70
Attività#E5EFD7 · #5B6E434.70
Focus#D5DCE9 · #4A5E8A4.68
Sleep#E0D7F0 · #743FC04.71
Nutrition#E8DBE2 · #8154664.62
Today#F9EEE7 · #B24C1F4.67
Mente#D6E5E9 · #3B69784.67
Alert#FAECE7 · #A5503A4.78

Un tag di soprattitolo non è un pulsante, e nemmeno un controllo segmentato o una pillola della lingua. Tutto ciò che riporta uno stato prende una velatura chiara dell’estremità chiara della sua famiglia e ci scrive sopra con l’inchiostro della stessa famiglia. Il numero a destra è quell’inchiostro su quella velatura. È saturo solo ciò che premi.

I neutri.

PaperL’unico fondo continuo.#FAFAF8
PanelSuperfici in rilievo.#FFFFFF
Panel 2Riempimenti morbidi, un soffio di sage.#F2F4F0
HairlineBordi.#E7EAE4
InkTesto corrente e lettere.#2D3233
Ink dimTesto secondario.#5C6360
Ink faintEtichette e testo terziario.#8A918C
PositiveDati buoni. Per i dati negativi si usa il terracotta.#87A266

Carattere

Articulat CF.

Una famiglia, tre ruoli. Nient’altro.

Medium 500

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Racconta la tua giornata a Kata.

Titoli. Spaziatura stretta: -0.032em alla misura hero, fino a -0.012em a 18px.

Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Racconta la tua giornata a Kata.

Testo corrente e interfaccia.

DemiBold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Racconta la tua giornata a Kata.

Enfasi, cifre ed etichette dei pulsanti.

Uso

Come si usa.

La luce viene dall’alto

L’estremità più chiara di un gradiente sta in alto o di lato. I pulsanti la tengono: due toni piatti, testa più chiara, fondo più profondo, e nessun riflesso da nessuna parte.

Mineral Black, non nero

L’inchiostro è #2d3233. Il nero puro compare solo nella scala delle superfici scure.

Fisica dei pulsanti

Il primario è una pillola Mineral Black con etichetta bianca. Il secondario è una pillola grigio chiaro con etichetta grigia. Entrambi con raggio pieno.

Spazio libero

Un’altezza del cuore attorno al lockup. Il lockup non scende mai sotto 88px a schermo o 22mm in stampa.

Da non fare.

  • Scrivere KATA. Il marchio è Kata.
  • Ricolorare il marchio, metterlo in contorno o aggiungere effetti.
  • Allungare, ruotare o tagliare il lockup.
  • Ribaltare un gradiente mettendo in alto l’estremità profonda.
  • Comporre i titoli con qualcosa che non sia Articulat CF Medium.
  • Usare il marchio per suggerire un endorsement o una partnership.

Prendi tutto il kit.

Il pacchetto contiene ogni variante di logo, simbolo e wordmark in SVG e PNG, i nove gradienti, una scheda colori e un readme.

Scarica il pacchetto completo