064 94 35 147 Zakažite procenu
naš vizuelni jezik

Dizajn sistem

Živi pregled vizuelnog jezika Pričalice: boje, tipografija, pečati, nalepnice i sve komponente sajta. Svaki primer na ovoj strani je pravi kod sajta, pa se strana menja zajedno sa njim.

  • Verzija 1.0
  • Izvor: Brand Guidelines, mart 2026.
  • Statički sajt i WordPress tema

Deo 01

od čega gradimo

Osnove

Boje, teme, tipografija i prostor. Sve vrednosti su tokeni iz tokens.css, pa se menjaju na jednom mestu, i na sajtu i u WordPress temi.

Boje

Šest boja iz brend knjige i tri tonske ekstenzije, dodate samo zbog čitljivosti teksta. Boje van palete se ne koriste.

tokens.css

Brend paleta

  • Opium

    #8E6869

    --c-opium

    PANTONE 7615 C
    RGB 142, 104, 105

    Primarna: logo, naslovi, primarno dugme.

    4.10:1 na Dawn Pink, samo za naslove i krupan tekst.

  • Warm Quartz

    #DDBAB5

    --c-quartz

    PANTONE 7605 C
    RGB 221, 186, 181

    Primarna površina: slabovi, pečati.

    Tekst na njoj: Ink strong, 6.10:1.

  • Pale Skin

    #EED9D7

    --c-pale

    PANTONE 698 C
    RGB 238, 217, 215

    Meka površina: kartice, tabla.

    Tekst na njoj: Ink, 6.51:1.

  • Dawn Pink

    #F5EAE3

    --c-dawn

    PANTONE 11-0103 TCX
    RGB 245, 234, 227

    Platno: pozadina cele strane.

    Tekst na njoj: Ink, 7.44:1.

  • Pastel Sand

    #D0CDA0

    --c-sand

    PANTONE 5875 C
    RGB 208, 205, 160

    Akcent površina, umereno.

    Tekst na njoj: Ink strong, 6.70:1.

  • Pumpkin Seed

    #A5A580

    --c-pumpkin

    PANTONE 5783 C
    RGB 165, 165, 128

    Akcent: samo dekor (pečati, nalepnice).

    Nikad za tekst (2.14:1 na Dawn Pink).

Proporcija

Opium i Warm Quartz dominiraju. Pale Skin i Dawn Pink su baza, a Pastel Sand i Pumpkin Seed akcenti koji nikad ne preuzimaju glavnu ulogu (brend knjiga, str. 16).

Tonske ekstenzije

  • Ink ekstenzija

    #5E4445 · --c-ink

    Osnovni tekst. 7.44:1 na Dawn Pink.

  • Ink strong ekstenzija

    #4E3738 · --c-ink-strong

    Tekst na Quartz i Sand, sitan tekst. 9.21:1 na Dawn Pink.

  • Milk ekstenzija

    #FFFBF8 · --c-milk

    Polja forme, najsvetlija kartica, tekst na Opium (4.71:1).

Ekstenzije nisu deo brend knjige. To su produbljene i posvetljene nijanse boja Opium i Dawn Pink, uvedene samo da bi sitan tekst bio čitljiv.

Kontrast (WCAG 2.1)

  • Ink strong na Dawn PinkSitan tekst, labele, polja forme

    9.21:1

    AAA

  • Ink na Dawn PinkOsnovni tekst na platnu

    7.44:1

    AAA

  • Ink strong na Pastel SandTekst u Sand slabu

    6.70:1

    AA

  • Ink na Pale SkinTekst u Pale slabu i karticama

    6.51:1

    AA

  • Ink strong na Warm QuartzTekst i naslovi u Quartz slabu

    6.10:1

    AA

  • Milk na OpiumTekst u Opium slabu, primarno dugme

    4.71:1

    AA

  • Opium na Dawn PinkSamo naslovi i tekst od 24px naviše

    4.10:1

    Krupno

  • Dawn Pink na OpiumNaslovi u Opium slabu

    4.10:1

    Krupno

  • Opium na Pale SkinSamo naslovi

    3.59:1

    Krupno

  • Warm Quartz na OpiumSamo script podnaslov, uvek uz naslov

    2.71:1

    Dekor

  • Milk na Warm QuartzSamo script podnaslov, uvek uz naslov

    1.73:1

    Dekor

  • Pumpkin Seed na Dawn PinkNikad za tekst

    2.14:1

    Ne

AAA i AA važe za tekst svih veličina. „Krupno“ znači tekst od 24px naviše ili podebljan od 19px naviše. Script podnaslovi su ukras: značenje uvek nosi naslov ispod njih.

Teme površina

Atribut data-theme na sekciji, slabu ili kartici menja pozadinu, tekst, naslov, script i dugme u proverenim kombinacijama. Pumpkin Seed nije tema.

tokens.css

  • dawn

    dobro došli

    Platno

    Osnova strane i sekcije bez slaba. Podrazumevana tema.

    O nama
    pozadina
    dawn
    tekst
    ink
    naslov
    opium
    script
    opium

  • pale

    male pobede

    Meka površina

    Tabla nalepnica i mirnije sekcije.

    Za roditelje
    pozadina
    pale
    tekst
    ink
    naslov
    opium
    script
    opium

  • quartz

    kako pomažemo

    Glavni slab

    Usluge i najvažniji blokovi strane.

    Usluge
    pozadina
    quartz
    tekst
    ink-strong
    naslov
    ink-strong
    script
    milk

  • sand

    znanje koje raste

    Akcent slab

    Stručnost i naglasci, jednom po strani.

    Vesti
    pozadina
    sand
    tekst
    ink-strong
    naslov
    ink-strong
    script
    opium

  • opium

    prvi korak

    Poziv na akciju

    Završni poziv i footer. Najjači naglasak na strani.

    Kontakt
    pozadina
    opium
    tekst
    milk
    naslov
    dawn
    script
    quartz

Slab (.slab) je zaobljen blok uvučen od ivica ekrana, kome tema daje boju. Dva slaba iste teme ne idu jedan za drugim.

Tipografija

Montserrat za naslove i tekst, Sacramento za kratke podnaslove. Veličine su fluidne: rastu zajedno sa ekranom, od telefona do velikog monitora.

components/type.css

Montserrat

Naslovi 700, tekst i interfejs 400 / 500 / 600. Razmak između slova 0.

  • Regular 400
  • Medium 500
  • SemiBold 600
  • Bold 700

AaBbCcČčĆćDdĐđEeFfGg ŠšŽž 0123456789 „…“ ?!

Sacramento

Samo podnaslovi: krupno (od 1.7rem), kratke fraze, malim slovima. Nikad za duže tekstove.

od prve reči do prvog slova

Skala

  • .display2.55 → 5.4rem · 700 · 1.02

    Svako dete

  • h12.2 → 4.1rem · 700 · 1.1

    Logopedski tretmani

  • h21.85 → 3.1rem · 700 · 1.1

    Reč po reč, korak po korak

  • h31.25 → 1.6rem · 700 · 1.3

    Plan za svako dete

  • h41.08 → 1.22rem · 700 · 1.3

    Učenje kroz igru

  • .lead1.1 → 1.3rem · 400 · 1.65

    Radimo kroz igru, strpljivo i po planu napravljenom baš za vaše dete.

  • body1.0625rem · 400 · 1.72

    Dete najviše napreduje kada se oseća sigurno i radosno, zato vežbe pretvaramo u igru.

  • small0.9rem · 400

    Ovo nije dijagnostička lista, već orijentir.

  • .label0.75rem · 600 · razmak 0.22em

    Logopedski centar

  • .script2 → 3.25rem · Sacramento

    od prve reči do prvog slova

  • .script--sm1.7 → 2.2rem · Sacramento

    Višnjička banja

Podnaslov i naslov

primer podnaslova

Naslov sekcije

Tipografski potpis brenda: script se naslanja preko naslova, rotiran za −3°. .title-block > .script + h2

kako počinjemo

Centrirana varijanta

Centriranje samo za kratke naslove i najviše tri reda teksta. .title-block--center

Lista sa pečatima

  • Stimulacija progovaranja kod kasnijeg razvoja govora
  • Korekcija izgovora glasova (artikulacija)
  • Razvoj rečnika, rečenice i gramatike

.seal-list: marker menja boju prema temi.

Pravila

  • Blokovi teksta poravnati levo, širina do 62 znaka (.measure).
  • Naslovi u formi rečenice: samo prvo slovo veliko.
  • Verzal samo za .label, nikad za tekst.
  • Script nikad za duže tekstove ni za dugmad.

Prostor i oblik

Fluidni razmaci, meki zaobljeni oblici i tople senke sa tonom Opium boje. Logo nikad nema senku.

tokens.css · layout.css

Razmaci

  • --space-3xs0.25rem
  • --space-2xs0.5rem
  • --space-xs0.75rem
  • --space-s1rem
  • --space-m1.5rem
  • --space-l1.75 → 2.5rem
  • --space-xl2.5 → 4rem
  • --space-2xl3.5 → 6.5rem
  • --space-3xl4.5 → 9rem

Raspored

--container
1240px · širina sadržaja
--gutter
1 → 2.5rem · bočni razmak
--slab-inset
0.5 → 1.25rem · uvlačenje slaba
--section-pad
4.5 → 9rem · razmak iznad i ispod sekcije
.measure
62ch · najveća širina teksta

Zaobljenja

  • --r-xs8px
  • --r-sm14px · polja
  • --r-md22px
  • --r-lg32px · kartice
  • --r-xl28–56px · slabovi
  • --r-pilldugmad, čipovi

Senke

  • --shadow-xs
  • --shadow-smhover dugmeta
  • --shadow-mdmeni, kartica na hover
  • --shadow-liftpodignut element
  • --shadow-stickernalepnice

Deo 02

naš potpis

Brend elementi

Logo, pečat, životinje, nalepnice i paterni su elementi po kojima se Pričalica prepoznaje na prvi pogled.

Pečati i životinje

Talasasti oblik iz logo marka je jedini dekorativni oblik sistema: okvir za životinje, broj koraka, marker liste, rotirajući poziv na akciju. Životinje su uvek u jednoj boji.

components/seal.css

Varijante × životinje

  • .seal Warm Quartz

  • .seal--pale Pale Skin

  • .seal--dawn Dawn Pink

  • .seal--sand Pastel Sand

  • .seal--pumpkin Pumpkin Seed

  • .seal--opium Opium

Životinja za svaku uslugu

  • JežMaskota i brendanimals/jez.svg

  • ZekaLogopedski tretmanianimals/zeka.svg

  • LavDefektološki tretmanianimals/lav.svg

  • MačeRana stimulacijaanimals/mace.svg

  • LisicaPriprema za školu („L kao lisica“)animals/lisica.svg

  • KucaSavetovanje roditeljaanimals/kuca.svg

Veličine

  • 2.4rem
  • 4rem
  • 6.5rem
  • 9rem

Veličina preko --seal-size; proporcija oblika je fiksna (--seal-ratio).

Pečat sa unutrašnjom linijom

.seal-frame + shapes/seal-badge.svg: tačna konstrukcija bedža; boje preko --seal-bg, --seal-line i --seal-fg.

Nalepnice

Devet originalnih bedževa koristi se kao nalepnice-nagrade za male pobede. Uvek kao slika, u originalnim bojama, lagano zarotirani.

svg/badges/

  • Bravo pričalice (zeka)

  • Bravo pričalice (kuca)

  • Pričalice, odlično ti ide!

  • I ja sam pričalica (Opium)

  • I ja sam pričalica (zelena)

  • L kao lisica

  • Naučio sam slovo R

  • Naučila sam slovo R

  • Od danas više ne šuškam

  • .sticker + --rot i --sticker-size; uz data-stamp se „lupi“ na stranu.
  • Ne razvlačiti, ne prebojavati i ne smanjivati ispod 5rem.
  • Ne stavljati na podlogu iste boje kao bedž.

Paterni

Šahovska tabla i patern sa životinjama daju ritam između sekcija. Tekst nikad ne ide direktno preko paterna, a patern ne ide preko paterna.

components/surfaces.css

  • .checkerPale Skin × Dawn Pink

  • .checker--quartzWarm Quartz × Pale Skin

  • .patternOpium životinje na Warm Quartz

  • .pattern--on-opiumQuartz životinje na Opium

  • .pattern--on-paleQuartz životinje na Pale Skin

  • .pattern--on-dawnQuartz životinje na Dawn Pink

.pattern-band je traka paterna između sekcija koja polako klizi; uz smanjeno kretanje miruje.

Deo 03

kockice za slaganje

Komponente

Gotovi delovi od kojih se slažu stranice. Isti HTML i iste klase koriste se u statičkoj verziji i u WordPress temi.

Dugmad i linkovi

Jedno primarno dugme po bloku. Soft i ghost su za sporedne radnje. Pređite mišem preko dugmadi da vidite hover.

components/buttons.css

  • .btnPrimarno

  • .btn--softSporedno

  • .btn--ghostObris

  • Sa ikonicom

    Zakažite procenu 064 94 35 147

  • Fokus sa tastature

Na Opium pozadini

Pogledajte usluge

Na tamnoj pozadini primarno dugme postaje svetlo (Dawn Pink). Za sporednu radnju ovde koristite ghost, jer bi soft dugme izgledalo isto kao primarno.

Linkovi

Upoznajte centar .link-arrow

Otvorite mapu spoljni link

Link u tekstu je podvučen, kao saveti za roditelje.

.btn--block: puna širina, za uske kolone i telefon.

Rotirajući pečat-poziv

.seal-cta: prsten sa tekstom se polako okreće, a na hover se ubrzava. Jedan po strani, uz završni poziv.

Čipovi

Kratke etikete: lokacije, oblasti rada, sertifikati. Čip koji je link se blago podiže na hover.

components/buttons.css

  • Rana stimulacija.chip
  • Marte Meo.chip--outline
  • Logopedski tretmani.chip--quartz
  • VB-MAPP.chip--sand
  • Novo.chip--opium
  • Mirijevo.chip .icon
  • Priprema za školua.chip

Ikonice

Linijske ikonice iz SVG sprajta, uvek u boji okolnog teksta. Dekorativne ikonice imaju aria-hidden="true".

partials/icons.html

<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg>

  • i-arrow
  • i-phone
  • i-mail
  • i-pin
  • i-chevron
  • i-check
  • i-alert
  • i-external
  • i-calendar
  • i-spark
  • i-hand

Kartice

Kartica preuzima površinu teme ili dobija svoju varijantu. Svetle kartice idu na Quartz ili Pale slab, a obojene na platno.

components/surfaces.css

Svetle kartice na Quartz slabu

  • Plan za svako dete

    Ciljeve postavljamo prema potrebama, tempu i interesovanjima deteta.

    .card--milk

  • Učenje kroz igru

    Dete najviše napreduje kada se oseća sigurno i radosno.

    .card--dawn

  • Roditelji su deo tima

    Smernice i materijali za rad kod kuće, da napredak ne staje.

    .card--pale

Obojene kartice na platnu

  • Radionice za roditelje

    Predavanja o ranoj stimulaciji govora i senzornom razvoju.

    .card--quartz

  • Materijali za rad kod kuće

    Autorski razvojni materijali i kartice za podsticanje govora kroz igru.

    .card--sand

  • Stručna usavršavanja

    Redovne edukacije, kako bi svako dete dobilo proverenu podršku.

    .card--opium

Kartica-link: cela površina je klikabilna

Forme

Forma za zakazivanje procene: jasne oznake iznad polja, velika polja za dodir i poruke o grešci koje kažu šta tačno treba ispraviti.

components/forms.css

Osnovno stanje

Fokus

Greška

Proverite e-mail adresu: nedostaje @ ili domen.

Padajući meni

Razlog javljanja / usluga

Izbor sa više odgovora (checkbox), kao na formi za zakazivanje.

Primer: jedan odgovor

Ista komponenta sa radio dugmadima. Na formi za zakazivanje se trenutno ne koristi.

Kratka napomena uz dugme: .form__note

Hvala, upit je poslat

Stanje posle slanja forme: nalepnica, kratka potvrda i jasan sledeći korak. .form-success

Nazad na početnu

Tabovi

Pristupačni tabovi po WAI-ARIA obrascu. Na tastaturi: strelice levo i desno, Home i End.

data-tabs · components/interactive.css

  • Stimulacija i progovaranje kod dece sa kasnijim razvojem govora
  • Korekcija artikulacije
  • Tretmani za mucanje i poremećaje tečnosti govora

Harmonika

Nativni <details> sa glatkim otvaranjem, za česta pitanja. Radi i bez JavaScript-a.

.accordion · components/interactive.css

Kako izgleda prva procena?

Kroz igru i razgovor upoznajemo dete i procenjujemo govor, jezik i ostale razvojne oblasti. Posle toga vam objašnjavamo nalaz i zajedno postavljamo ciljeve.

U kojim delovima Beograda radite?

Imamo tri centra: u Mirijevu (Rableova 19/16), na Dorćolu (Gospodar Jovanova 32b/1) i u Višnjičkoj banji (Mirka Milojkovića 36/4, Sunnyville).

Kako mogu da pomognem detetu kod kuće?

Dobijate jasne smernice i autorske materijale i kartice za podsticanje govora kroz igru, da napredak ne staje posle tretmana.

Koraci

Numerisan niz u pečatima, samo za proces koji zaista ima redosled.

.steps · components/interactive.css

  1. Javite nam se

    Pozovite nas ili popunite formu.

  2. Procena

    Kroz igru upoznajemo dete.

  3. Individualni plan

    Zajedno postavljamo ciljeve.

  4. Tretmani i rad kod kuće

    Uz savete i materijale za kuću.

Putanja i info redovi

Putanja (breadcrumbs) na vrhu unutrašnjih strana i redovi sa ikonicom za kontakt podatke.

.breadcrumbs · .info-row

Putanja

Info redovi

U Opium kartici

  • Gospodar Jovanova 32b/1, Dorćol
  • Mirka Milojkovića 36/4, Sunnyville, Višnjička banja
  • Zakažite procenu

Deo 04

mirno, ali živo

Pokret

Animacije su tihe i kratke i ne smetaju čitanju. Ako je na uređaju uključeno „smanjeno kretanje“, nema glatkog skrola ni animacija, pa je sve odmah vidljivo.

Data-atributi

JavaScript sam pronalazi elemente sa ovim atributima, pa stranici nije potreban dodatni kod. Pokret: Lenis (glatki skrol) i Motion.

assets/js/modules/

data-split
Naslov: reči izranjaju iz maske, jedna za drugom.
data-write
Script podnaslov se „ispisuje“ sleva nadesno.
data-reveal
Blago podizanje i pojavljivanje (fade-up).
data-reveal-stagger
Deca elementa ulaze jedno za drugim.
data-stamp
Nalepnica ili pečat se „lupi“ na stranu (spring), uz ugao iz --rot.
data-parallax="-0.08"
Blagi parallax pri skrolovanju.
data-magnetic
Primarno dugme se blago naginje ka kursoru.
data-tabs
Pristupačni tabovi (role tablist, tab, tabpanel).
.accordion details
Glatko otvaranje i zatvaranje harmonike.
data-board + data-sticker
Tabla sa nalepnicama koje se prevlače.
data-walk + data-walker
Jež šeta po isprekidanoj liniji dok skrolujete.
data-booking-form
Provera forme i popunjavanje iz adrese (?uzrast=1-3&usluga=logoped).

Krive i trajanja

  • cubic-bezier(.22, 1, .36, 1)--ease-out
  • opruga sa blagim odskokom--ease-spring
  • 160 · 320 · 640 · 1000ms--dur-1 … --dur-4

Živi primeri

Svaki blok se animira jednom, kada uđe u ekran. Osvežite stranu i skrolujte ponovo da ih vidite još jednom. Uz smanjeno kretanje primeri su odmah vidljivi, bez animacije.

  • data-split

    Reč po reč, korak po korak

  • data-write

    od prve reči

    Script se ispisuje

  • data-reveal

    Kartica se blago podiže na mesto.

  • data-stamp

  • data-reveal-stagger

    • Reedukacija psihomotorike
    • VB-MAPP
    • Marte Meo
    • RBT edukacija
    • Refleksna integracija
    • Reynell
    • Predčip