KinetoNow
Înregistrare

Ghid de brand

Mișcare, acum.

KinetoNow e o platformă de kinetoterapie la cerere din România. Ideea centrală e mișcarea care începe imediat: rapid ca o aplicație de transport, dar cald și demn de încredere ca un cabinet medical bun. Paginile de mai jos arată cum arată și cum sună asta, în practică.

02 — Culori

Culori

Bleumarinul și turcoazul din logo, o cerneală cu tentă rece în loc de negru pur și un coral folosit rar, pentru energie și semnale. Nicio neutră nu e gri pur.

turcoaz

brand

#08A6A7

Identitate: logo, suprafețe mari, accente. Nu îl folosi pentru text mic pe alb.

bleumarin

action

#0A2E57

Acțiune: butoane primare, linkuri, stări de succes. Text alb pe el trece AA.

Regula scurtă: 500 = identitate, 600 = acțiune. Dacă un element se poate apăsa, e 600.

Alb pe action (#0A2E57)

Contrast 13,6:1 — AAA. Alb pe turcoaz este 3,0:1: butoanele primare rămân la 14 px+ semibold.

Ink pe tenta turcoaz (#CFEEEC)

Contrast ≈ 14,6:1 — AAA, sigur la orice dimensiune.

Bleumarin și turcoaz

Nucleul brandului: sănătate și „go”. Identitatea stă pe 500, acțiunile pe 600.

  • brand

    #08A6A7

    Turcoazul din logo: butoane primare cu text alb, accente, rame, indicatori.

  • brand-hover

    #079596

    Hover pe suprafețe turcoaz.

  • action

    #0A2E57

    Bleumarinul din logo: butoane secundare și „Înregistrare”, text alb (13,6:1).

  • brand-text

    #067677

    Turcoaz închis pentru text pe fundal deschis: linkuri, eyebrow-uri (5,1:1).

  • action-hover

    #0B3A6E

    Hover pe butonul primar.

  • brand-deep

    #0A2E57

    Text pe tentele turcoaz, glifuri în chipuri.

  • green-300

    #6ED3D2

    Turcoaz deschis: accente și text pe fundal închis.

  • mint

    #CFEEEC

    Tentă turcoaz: chipuri, etichete, butoane secundare.

  • mint-hover

    #BDE6E3

    Hover pe tenta turcoaz.

  • mint-soft

    #EAF7F6

    Fundal pentru secțiuni subtile (banda „Despre noi”).

Accent

Coralul e energie, nu decor. Maxim un element coral pe ecran, niciodată pe suprafețe mari.

  • coral

    #FF6B4A

    Puls, badge „acum”, scala durerii, notificări.

  • coral-soft

    #FFE4DC

    Fundal calm pentru un element coral.

Neutre

Niciun gri neutru pur — toate neutrele au o tentă rece, spre bleumarin.

  • ink

    #101C2E

    Text principal.

  • ink-2

    #53627A

    Text secundar.

  • ink-3

    #8A96A8

    Placeholder, text dezactivat.

  • line

    #DCE3EA

    Borduri și separatoare.

  • page

    #F5F8FA

    Fundal de pagină.

  • surface

    #FFFFFF

    Carduri.

  • soft

    #E8EEF3

    Butoane terțiare, fundaluri neutre.

  • soft-hover

    #DDE5EC

    Hover pe suprafețe soft.

  • dark

    #0A1220

    Secțiuni închise, footer.

  • dark-2

    #121D2F

    Carduri pe secțiuni închise.

Semantice

Doar pentru stări. Nu le folosi decorativ și nu inventa nuanțe noi pentru feedback.

  • success

    #1B8A5A

    Confirmare, programare acceptată.

  • warning

    #D98A00

    Atenționare, plată în așteptare.

  • danger

    #D93A2B

    Eroare, anulare.

  • info

    #2266D6

    Informație neutră.

03 — Tipografie

Tipografie

Plus Jakarta Sans pentru titluri, Inter pentru text și interfață. Ambele cu subseturile latin și latin-ext — diacriticele românești nu sunt opționale.

Plus Jakarta Sans

display · 700–800 · tracking −2% … −4%

72 px

Mișcare, acum.

48 px

Recuperarea începe cu o programare.

28 px

Kinetoterapeuți autorizați, în toată țara.

Inter

text și UI · 400–600 · interlinie 1,5

17 px

Alegi ziua și ora, iar noi îți trimitem un kinetoterapeut autorizat CFZRO acasă sau la clinică, în funcție de ce ai nevoie.

15 px

Ședința durează 50 de minute. Primești un plan de exerciții pe care îl continui între ședințe, direct în aplicație.

13 px

Prețurile afișate sunt orientative și pot varia în funcție de oraș, de durata ședinței și de deplasarea terapeutului.

Scara

Unsprezece trepte. Dacă ai nevoie de o dimensiune care nu e aici, probabil ai nevoie de altă ierarhie.

  • 72 pxHero pe desktop
  • 60 pxTitlu de secțiune mare
  • 48 pxTitlu de secțiune
  • 36 pxTitlu de secțiune pe mobil
  • 28 pxTitlu de card mare
  • 24 pxSubtitlu
  • 20 pxTitlu de card
  • 17 pxCorp mare, intro
  • 15 pxCorp, UI
  • 13 pxNote, etichete
  • 12 pxLegende, eyebrow

Cifre tabulare

În tabele, prețuri și timere pornește tabular-nums, ca cifrele să se alinie pe coloană.

ServiciuDuratăPreț
Kinetoterapie acasă50 min180 lei
Ședință la clinică50 min150 lei
Recuperare post-operatorie60 min200 lei

Fără tabular-nums, aceleași prețuri s-ar clătina de la un rând la altul: 180 · 150 · 200.

04 — Formă

Formă

Cinci raze, patru variante de buton, nicio umbră grea. Cardurile nu au bară colorată pe stânga — accentul stă în conținut, nu în ramă.

Raze

Fiecare rază are un rol. Nu amesteca 16 și 24 în același grup de elemente.

  • chip

    8 px

    Chipuri, iconițe mici

  • button

    10 px

    Butoane, input-uri

  • card

    16 px

    Carduri

  • media

    24 px

    Media mare

  • full

    999 px

    Pastile, avatare

Butoane

Înălțime 40 sau 44, padding 20 sau 24, font 600, verbe la imperativ. Un singur buton primar pe ecran.

ProgrameazăVezi orele libereMai târziuDescarcă aplicația

Mărimi

Programează · md 40Programează · lg 44Cu iconiță

Pe fundal închis

Varianta outline există doar aici: contur alb 25%, text alb. Pe alb folosește soft, nu outline.

Devino partenerProgrameazăAflă mai mult

Pastile și badge-uri

KinetoterapiePost-operatorVerificatAcum

Un singur badge coral pe ecran — „acum” e semnal, nu decor.

Umbre: doar una, mare și moale, pe telefonul din mockup. În rest, separă cu bordură și spațiu.

05 — Iconografie

Iconografie

Lucide, stroke 1,75, la 16, 20 sau 24 px, așezate în chipuri pătrate rotunjite. Pe alb: chip turcoaz deschis cu glif bleumarin. Pe închis: chip alb 10% cu glif alb.

Set de bază · 24 px

  • Acasă
  • Clinică
  • Kineto sportivă
  • Masaj terapeutic
  • Business
  • Online
  • Evaluare
  • Post-operator

Mărimi

16 px în chip 32
20 px în chip 36
24 px în chip 40

Pe fundal închis

  • Acasă
  • Clinică
  • Kineto sportivă
  • Masaj terapeutic
  • Business
  • Online
  • Evaluare
  • Post-operator

06 — Imagini

Imagini

Fotografie de campanie: oameni reali, fotografiați în seturi construite din forme și mobilier vopsite în culorile brandului. Realismul rămâne în oameni; identitatea stă în decor.

  • Kinetoterapeut lucrând cu un pacient acasă

    hero.jpg

    Hero · 3:2

  • Ședință de kinetoterapie într-un apartament

    svc-home.jpg

    Card serviciu · 3:4

  • Sală de recuperare într-o clinică

    svc-clinic.jpg

    Card serviciu · 3:4

  • Kinetoterapeut partener KinetoNow

    earn-therapist.jpg

    Parteneri · 4:5

  • Consultație de kinetoterapie online

    feature-video.jpg

    Feature · 16:9

  • Articol din secțiunea de noutăți

    news-1.jpg

    Articol · 3:2

Lista de verificat

  • Oameni reali, decor construit din culorile brandului: piele naturală, expresii reale, haine neutre (alb, off-white, gri deschis, cel mult o piesă bleumarin).
  • Decorul este un set art-directed: mobilierul și suprafețele mari sunt forme geometrice simple, vopsite plat în bleumarin, turcoaz, aqua pal sau off-white. Fără lemn, plante, texturi sau alte culori.
  • Lumină naturală moale și direcțională, umbre blânde, profunzime mică de câmp. Niciodată blitz dur.
  • Excepție: produs (tape, bandă) pe fundal bleumarin cu lumină de accent turcoaz, pentru secțiunile închise.
  • Aspecte fixe: hero 3:2 (afișat 21:9), carduri 3:4, parteneri 4:5, feature 16:9, articole 3:2.
  • Mockup-urile de aplicație se construiesc în cod, nu se randează ca imagini.

07 — Mișcare

Mișcare

Mișcarea confirmă o acțiune, nu o decorează. O singură curbă pe tot site-ul și trei durate, atât.

Durate și curbă

  • 200 msHover, apăsare, schimbare de culoare
  • 300 msMeniuri, dropdown-uri, panouri
  • 800 msReveal la scroll

cubic-bezier(0.2, 0.6, 0.2, 1)

Pornește repede, se așază lin. Aceeași curbă peste tot, expusă ca --ease-brand.

Reveal-ul e mereu același: fade plus 28 px în sus. Nimic nu intră din lateral, nimic nu se rotește.

Demo

Apasă butonul ca să vezi reveal-ul în viteză reală.

Ședință confirmată

Marți, 14:30 — kinetoterapeut la tine acasă, în sectorul 3.

Același cod ca pe restul site-ului: clasa .reveal, 800 ms, fade + 28 px în sus. Cu prefers-reduced-motion: reduce cardul apare instant, fără translație.

08 — Voce

Voce

Vorbim cu tine, la persoana a II-a singular, cu verbe la imperativ în butoane. Direct și cald, fără promisiuni medicale și fără superlative pe care nu le putem dovedi.

Așa da

  • „Programează o ședință în 2 minute.”

    Imperativ, beneficiu concret, fără ocolișuri.

  • „Îți alegi ora, noi îți trimitem kinetoterapeutul.”

    Persoana a II-a singular, „tu”, nu „dumneavoastră”.

  • „Kinetoterapeuți autorizați CFZRO, verificați de noi.”

    Meseria numită corect și o dovadă verificabilă.

  • „Te ajutăm să te miști mai ușor după operație.”

    Ajutor, nu vindecare. Fără promisiune medicală.

  • „Masajul terapeutic e făcut de maseuri, recuperarea de kinetoterapeuți.”

    Nu amestecăm cele două meserii.

Așa nu

  • „Clienții pot beneficia de o gamă largă de servicii.”

    Persoana a III-a și pasiv. Vorbește cu omul, nu despre el.

  • „Îți vindecăm durerea de spate.”

    Promisiune medicală. Nu vindecăm nimic.

  • „Rezultate garantate din prima ședință.”

    Garanție imposibil de susținut.

  • „Cei mai buni terapeuți din România.”

    Superlativ nedovedit.

  • „Maseurii noștri kinetoterapeuți vin la tine.”

    Amestecă meseriile. Alege una și numește-o corect.

Meseriile nu se amestecă. Terapeuții care fac recuperare sunt kinetoterapeuți sau fizioterapeuți, autorizați CFZRO. Cei care fac masaj sunt maseuri. Într-un text apare una sau alta, niciodată amândouă lipite.

09 — Descărcări

Descărcări

Toate fișierele de marcă, în SVG, exact așa cum trebuie folosite. Nu le redesena și nu le exporta din alte surse.

  • mark.svg

    Marca principală, fără pătrat: K bleumarin și turcoaz, săgeți cu gradient spre turcoaz.

    Descarcă SVG

  • mark-mono-black.svg

    O singură culoare, ink #101C2E, fără pătrat.

    Descarcă SVG

  • mark-mono-white.svg

    O singură culoare, alb. Pentru suprafețe închise.

    Descarcă SVG

  • mark-outline.svg

    Gliful în currentColor, pentru UI inline.

    Descarcă SVG

  • favicon.svg

    Marca simplificată: K + o singură săgeată, sub 32 px. Oglindită în app/icon.svg.

    Descarcă SVG

  • app-icon.svg

    Iconița iOS/Android: K și săgeți turcoaz pe pătrat bleumarin, 1024×1024. Pentru iOS exportă pătratul plin, sistemul rotunjește colțurile.

    Descarcă SVG

  • logo-horizontal.svg

    Lockup orizontal: „Kineto” bleumarin, „Now” turcoaz.

    Descarcă SVG

  • logo-horizontal-white.svg

    Lockup orizontal alb, fără pătrat. Fundaluri închise.

    Descarcă SVG

  • logo-horizontal-mono.svg

    Lockup orizontal într-o singură culoare. Tipar.

    Descarcă SVG

  • logo-stacked.svg

    Marcă deasupra wordmark-ului centrat. Social, app store.

    Descarcă SVG

  • logo-stacked-white.svg

    Lockup vertical alb.

    Descarcă SVG

Rasterele

PNG-urile derivate stau în afara folderului de brand: /logo-mark.png (512×512), randat din mark.svg, și /apple-icon.png (180×180), randat din app-icon.svg. Ambele au fundal transparent în afara pătratului rotunjit; pentru App Store folosește brand/app-icon-1024.png, pătrat plin. Pentru orice altceva folosește SVG-ul — se scalează fără pierdere.

logo-mark.pngapple-icon.png