← Πίσω στο prototype
Style guide · redesign 2026
v3 · 30.09.2026 · κλειδωμένο για development
Οπτική ταυτότητα · v3 · τελικό

Λιτό για τους γονείς, με μια σταγόνα παιχνίδι.

Το νέο withKalli μιλάει στους γονείς: καθαρή δομή, ευανάγνωστο κείμενο, σαφή βήματα κράτησης. Το παιχνίδι μένει στις λεπτομέρειες, σε μια πινελιά, ένα αυτοκόλλητο, μια χειρόγραφη λέξη.

Δες τα components Σελίδες & handoff
01 · Αρχές

Τέσσερις κανόνες για κάθε σελίδα

Κάθε απόφαση σχεδιασμού περνάει από αυτούς τους τέσσερις κανόνες. Αν κάτι δεν βοηθά τον γονιό να καταλάβει ή να κλείσει ραντεβού, φεύγει.

Γ

Για γονείς

Ο επισκέπτης είναι ενήλικας με λίγο χρόνο. Σαφή μηνύματα, καθαρή πληροφορία, CTA σε κάθε ενότητα.

Λ

Λιτό πρώτα

Πολύς λευκός χώρος, αυστηρό grid, ένα κύριο στοιχείο ανά ενότητα. Οι φωτογραφίες κάνουν τη δουλειά.

Τ

Μία τσαχπινιά

Ένα παιχνιδιάρικο στοιχείο ανά ενότητα: splash, κλίση, doodle ή highlighter. Όχι όλα μαζί.

Χ

Χειρόγραφο μόνο σε τίτλους

Η χειρόγραφη δίνει προσωπικότητα στους τίτλους. Όλο το υπόλοιπο κείμενο είναι σε Inter.

02 · Χρώματα

Ένα cyan, τέσσερα παστέλ

Κρατάμε το cyan της Κάλλι ως το μοναδικό έντονο χρώμα. Κάθε κατηγορία υπηρεσιών παίρνει το δικό της παστέλ, ώστε ο γονιός να αναγνωρίζει την κατηγορία σε όλο το site: στις κάρτες, στα tags, στα άρθρα.

Βάση

Brand
Cyan#1BB9DFΚύρια κουμπιά, splash, λογότυπο
Links
Cyan σκούρο#0A7797Links και eyebrows (περνά AA)
Text
Μελάνι#16202EΚείμενο, CTA band, footer
Φόντο
Χαρτί#FCFBF8Φόντο σελίδας, πιο φωτεινό από το σημερινό μπεζ

Κατηγορίες υπηρεσιών

Συνεδρίες
Λεβάντα#E5DFFAΑτομικές, ζεύγους, οικογενειακές
Ομάδες & Εργαστήρια
Μέντα#D3F1E4Εργαστήρια γονέων, ομάδες
Βρέφη & Παιδιά
Ροδακινί#FFE2CDBaby swimming, Messy Moments…
Προσβασιμότητα
Ροζ#FBDDE6ΕΝΓ, No Barrier δράσεις
✦Κανόνας αντίθεσης: στο cyan κουμπί το κείμενο είναι σκούρο (μελάνι), όχι λευκό. Το λευκό πάνω στο cyan δεν διαβάζεται καλά, κάτι που φαίνεται και στο σημερινό «ΚΑΛΕΣΤΕ ΜΑΣ».
03 · Τυπογραφία

Eyebrow, τίτλος, κείμενο

Κάθε ενότητα ανοίγει με το ίδιο μοτίβο 3 επιπέδων. Χειρόγραφη γραμματοσειρά μόνο στον τίτλο, Inter για ό,τι διαβάζεται: κείμενα, λίστες, τηλέφωνα, φόρμες, κουμπιά.

1 · Eyebrow: Inter 600, 12.5px, κεφαλαία, με βούλα Ομάδες & Εργαστήρια 2 · Τίτλος: GB Blank Notebook

Μεγαλώνοντας παιδιά χωρίς ντροπή

3 · Κείμενο: Inter 400, 17–18px, έως 65 χαρακτήρες/γραμμή

Πώς μιλάμε στα παιδιά για το σώμα, τα όρια, τη συναίνεση και τις σχέσεις. Οκτώ δίωρες συναντήσεις για γονείς και φροντιστές.

Κλείσε θέσηΜάθε περισσότερα →
DisplayGB Blank Notebook · 76/78Γνώρισε την Κάλλι
H1 σελίδαςGB Blank Notebook · 56/60Υπηρεσίες
H2 ενότηταςGB Blank Notebook · 40/45Λόγια γονιών
H3 κάρταςInter 600 · 21/27Ατομικές συνεδρίες
LeadInter 400 · 20/32Βιωματική μάθηση για όλη την οικογένεια.
ΚείμενοInter 400 · 17/28Συνδυάζω τη θεωρία με την πράξη.
Μικρό / metaInter 500 · 14/2111 Φεβρουαρίου 2026 · 5′ ανάγνωση
✦Χειρόγραφη γραμματοσειρά: GB Blank Notebook, με πλήρη ελληνικά και τόνους. Χρησιμοποιείται μόνο σε τίτλους και στο λογότυπο κειμένου.
04 · Κουμπιά & tags

Flat pill κουμπιά, ένα κύριο CTA ανά οθόνη

Τα κουμπιά είναι flat: γεμάτο χρώμα, χωρίς σκιές. Στο hover απλώς σκουραίνουν. Τα tags κατηγορίας χρησιμοποιούν το παστέλ της κάθε κατηγορίας.

Κουμπιά

Κλείσε ραντεβούΔες τις υπηρεσίες
ΑποστολήΚάλεσέ μεΔιάβασε το άρθρο →

Primary: cyan με μελάνι · Secondary: outline · Σε σκούρο φόντο: dark ή primary · Text link: υπογράμμιση cyan και βελάκι.

Tags κατηγορίας & meta

ΣυνεδρίεςΟμάδες & ΕργαστήριαΒρέφη & ΠαιδιάΠροσβασιμότητα
8 δίωρες συναντήσειςΟμαδικόΧανιά

Τα tags μπαίνουν σε κάρτες υπηρεσιών, άρθρα και φίλτρα blog. Τα meta chips στο hero της υπηρεσίας.

05 · Τσαχπινιά

Παιχνίδι με μέτρο

Τέσσερα εργαλεία που θυμίζουν παιδική δημιουργία χωρίς να κάνουν το site παιδικό. Σε κάθε ενότητα χρησιμοποιούμε μόνο ένα, το πολύ δύο.

Splash

Μικρό, σε γωνία φωτογραφίας ή πίσω από έναν αριθμό. Όχι πια τεράστιο.

Αυτοκόλλητο

Φωτογραφία με λευκό περίγραμμα και κλίση ±2–5°. Αντικαθιστά τα μεγάλα blobs.

γονείς που ακούν

Highlighter

Cyan μαρκαδόρος πίσω από μία λέξη-κλειδί στον τίτλο ή σε ένα lead.

Doodles

Βελάκι ή κυματιστή υπογράμμιση, με το χέρι. Δείχνει προς ένα CTA ή μια φωτογραφία.

Ναι

  • Ένα playful στοιχείο ανά ενότητα
  • Κλίσεις μέχρι 5°
  • Κυματιστό divider μόνο πριν το footer
  • Πραγματικές φωτογραφίες από τις δράσεις

Όχι

  • Χειρόγραφα σε κείμενα, λίστες, τηλέφωνα
  • Τεράστιες blob μάσκες σε κάθε φωτογραφία
  • Ίδια φωτογραφία σε πολλές σελίδες
  • Stock φωτογραφίες όπου υπάρχουν αληθινές
06 · Μεγάλες λέξεις

Section divider μόνο στην αρχική

Λέξεις από το ίδιο το κείμενο της Κάλλι, σε μεγάλο μέγεθος και με ελαφριά κλίση. Χρησιμοποιείται μία φορά, στην αρχική, ανάμεσα στο «Γνώρισε την Κάλλι» και τις Υπηρεσίες.

Μιλάμε.Παίζουμε.Περπατάμε.Ησυχάζουμε.
07 · Components

Τα δομικά κομμάτια των σελίδων

Με αυτά χτίζονται όλες οι σελίδες: αρχική, σχετικά, υπηρεσίες, μεμονωμένη υπηρεσία, blog, άρθρο, επικοινωνία.

Compact hero εσωτερικής σελίδας

Υπηρεσίες / Ομάδες & Εργαστήρια Ομάδες & Εργαστήρια

Μεγαλώνοντας παιδιά χωρίς ντροπή

Πώς μιλάμε στα παιδιά για το σώμα, τα όρια, τη συναίνεση και τις σχέσεις.

Κλείσε θέσηΤι θα δούμε →
Βαμμένα τσόφλια αυγών πάνω σε ροζ άμμο

Κάρτα κατηγορίας (σελίδα Υπηρεσίες & αρχική)

Κατηγορία 03

Για βρέφη & παιδιά

Δράσεις με παιχνίδι, νερό και φύση, για παιδιά από λίγων μηνών και τους γονείς τους.

Γονείς με βρέφη σε εργαστήρι

Info box υπηρεσίας (κάτω από το hero)

Διάρκεια
8 δίωρες συναντήσεις
Μορφή
Ομαδικό
Για ποιους
Γονείς & φροντιστές
Πού
Χανιά · ή online
Κλείσε θέση

Κάρτες άρθρων & testimonials

Παιδί ανακατεύει πράσινο χρώμα
Βρέφη & Παιδιά5′ ανάγνωση

Γιατί το «βρώμικο» παιχνίδι κάνει καλό

Τι κερδίζει ένα παιδί όταν λερώνεται, και πώς το αντέχουμε εμείς.

Διάβασε →
“
Οι ασκήσεις είναι πολύ στοχευμένες. Με κάθε ενότητα έρχομαι πιο κοντά στον εαυτό μου και στο παιδί μου.
ΜΜαρία
Εργαστήρι γονέων
“
Η Κάλλι είναι εστιασμένη και αυθεντική. Καθοδηγεί την ομάδα μέσα από όσα φέρνει ο καθένας.
ΕΕλένη
Ομάδα επικοινωνίας

FAQ & φόρμα επικοινωνίας

Πώς κλείνω ραντεβού;

Συμπληρώνεις τη φόρμα ή τηλεφωνείς. Η Κάλλι επικοινωνεί μαζί σου για μια πρώτη σύντομη γνωριμία.

Γίνονται συνεδρίες online;

Ναι, οι ατομικές και οι συνεδρίες ζεύγους μπορούν να γίνουν και online.

Είναι ψυχοθεραπεία;

Όχι. Τα εργαστήρια είναι εκπαίδευση ενηλίκων και δεν περιλαμβάνουν διάγνωση ή θεραπευτική επεξεργασία.

Από ποια ηλικία ξεκινούν οι δράσεις για παιδιά;

Το βρεφικό μασάζ και το baby swimming ξεκινούν από τους πρώτους μήνες.

Με ενδιαφέρει

Τελικό CTA (πριν το footer)

Ας γνωριστούμε

Ας βρούμε μαζί τι ταιριάζει σε εσάς

Μια πρώτη σύντομη κουβέντα, χωρίς δέσμευση. Πες μου τι ψάχνεις και θα σου προτείνω το επόμενο βήμα.

Κλείσε ραντεβού
08 · Tokens

Γωνίες, αποστάσεις, πλάτη

Οι τιμές που κρατούν όλες τις σελίδες συνεπείς. Αυτές περνάνε αυτούσιες στο development.

Γωνίες

12 · inputs
20 · κάρτες
32 · ενότητες
pill · κουμπιά

Αποστάσεις (βάση 8)

8
16
24
48
88 · μεταξύ ενοτήτων

Πλάτη

1180 · container
720 · κείμενο άρθρου
65ch · παράγραφος

Breakpoints: 980 · 820 · 560

09 · Σελίδες

Τα 7 templates και η δομή τους

Η σειρά των ενοτήτων ανά σελίδα, όπως κλειδώθηκε στο prototype. Header και footer είναι κοινά σε όλες. Όλες οι εσωτερικές σελίδες ανοίγουν με compact hero (όχι full-screen) και breadcrumb.

Αρχική

/
  1. Hero: eyebrow, τίτλος με highlighter, lead, 2 κουμπιά, «σε ποιους απευθύνεται», 2 φωτογραφίες-αυτοκόλλητα
  2. Τι ψάχνεις; 4 κάρτες κατηγοριών (τίτλος σε Inter, όχι χειρόγραφα)
  3. Γνώρισε την Κάλλι: φωτογραφία, σύντομο bio, link στο Σχετικά
  4. Μεγάλες λέξεις «Μιλάμε. Παίζουμε…»
  5. Υπηρεσίες: πλέγμα 2×2 σε παστέλ, λίστα υπηρεσιών ανά κατηγορία
  6. Πώς ξεκινάμε: σκούρο μπλοκ, 3 βήματα, CTA
  7. Testimonials · 3 άρθρα · FAQ
  8. Επικοινωνία: απλά στοιχεία αριστερά, φόρμα δεξιά

Σχετικά

/sxetika
  1. Γεια χαρά! Είμαι η Κάλλι. ως H1, χωρίς ξεχωριστό hero. Η φωτογραφία μένει sticky στο desktop
  2. Οι ερωτήσεις: λεβάντα μπλοκ
  3. Η διαδρομή: timeline 4 βημάτων
  4. Εκπαίδευση / Με ποιους δουλεύω: 2 κάρτες με chips
  5. Στη δύναμη της περιέργειας: φωτογραφία full-width με κείμενο
  6. CTA σε μέντα

Υπηρεσίες (νέα)

/ypiresies
  1. Compact hero
  2. Sticky μπάρα κατηγοριών με αριθμό υπηρεσιών· φωτίζεται η ενεργή στο scroll
  3. 4 ενότητες: intro κατηγορίας + κάρτες υπηρεσιών (τίτλος, 1 γραμμή, tags, βελάκι)
  4. Προβολή υπηρεσίας με ετικέτα «Νέος κύκλος»
  5. Δεν ξέρεις από πού να ξεκινήσεις; σκούρο μπλοκ με 4 επιλογές

Μεμονωμένη υπηρεσία

/ypiresies/{slug}
  1. Hero με breadcrumb 3 επιπέδων και tag κατηγορίας
  2. Μπάρα βασικών: διάρκεια, μορφή, για ποιους, επόμενος κύκλος, CTA
  3. Κείμενο με sticky «Σε αυτή τη σελίδα» (desktop): περιγραφή, θεματολογία (✓ κάρτες), μεθοδολογία, κοινό, disclaimer
  4. Testimonials · Εγγραφή (σκούρο μπλοκ + φόρμα) · FAQ · σχετικές υπηρεσίες
  5. Κινητό: σταθερή κάτω μπάρα «Κλείσε θέση»

Blog

/blog
  1. Compact hero
  2. Φίλτρα κατηγοριών (chips στο χρώμα κάθε κατηγορίας)
  3. Featured: πιο πρόσφατο άρθρο σε μεγάλη κάρτα
  4. Πλέγμα 3 στηλών · «Φόρτωσε περισσότερα»
  5. Newsletter (αν το εγκρίνει η Κάλλι)

Άρθρο

/blog/{slug}
  1. Κεφαλίδα: breadcrumb, tag, τίτλος, lead, συγγραφέας, ημερομηνία, χρόνος ανάγνωσης
  2. Εξώφυλλο · στήλη κειμένου 720px · μπάρα προόδου
  3. Rich text: lede, H2 χειρόγραφο, H3 Inter, λίστες, pull quote, εικόνα με λεζάντα, κουτί «Δοκίμασε στο σπίτι», ετικέτες
  4. Κοινοποίηση (sticky στο desktop, στο τέλος στο κινητό)
  5. Author box · CTA σχετικής υπηρεσίας · προηγούμενο/επόμενο · 3 σχετικά

Επικοινωνία

/epikoinonia
  1. Compact hero
  2. Αριστερά: τηλέφωνα, email, πόλη ως απλές γραμμές, κουμπιά «Κάλεσέ με» / «Στείλε email», λίστα «Μπορείς να με ρωτήσεις για»
  3. Δεξιά: ίδια φόρμα με την αρχική
  4. Χωρίς χάρτη, χωρίς φωτογραφία πριν το footer

Κοινά

header · footer
  1. Header sticky: λογότυπο, μενού, τηλέφωνο, «Κλείσε ραντεβού» → Επικοινωνία. Κάτω από 980px κρύβεται το τηλέφωνο· κάτω από 680px hamburger
  2. Footer cyan με κυματιστό πάνω άκρο: λογότυπο, σελίδες, κατηγορίες, επικοινωνία, social, νομικά
  3. Λείπουν ακόμα: Όροι χρήσης, Πολιτική απορρήτου, 404
10 · Συμπεριφορές

Τι κάνει κάθε στοιχείο

Οι αλληλεπιδράσεις που υπάρχουν στο prototype και πρέπει να υλοποιηθούν.

ΣτοιχείοΣυμπεριφορά
ΚουμπιάFlat. Hover: primary #16A6C9, dark #2A3547, outline γεμίζει μελάνι. Χωρίς σκιά ή μετακίνηση.
Κάρτες (υπηρεσίες, άρθρα, κατηγορίες)Όλη η κάρτα είναι link. Hover: ανεβαίνει 4px· στα άρθρα και μικρό zoom εικόνας.
HeaderSticky, ημιδιάφανο φόντο με blur· εμφανίζεται γραμμή μόλις γίνει scroll. Ενεργή σελίδα: cyan υπογράμμιση.
Μπάρα κατηγοριών (Υπηρεσίες)Sticky κάτω από το header, anchor links, φωτίζει την ενότητα στην οθόνη. Στο κινητό οριζόντιο scroll.
Φίλτρα BlogΦιλτράρουν ανά κατηγορία χωρίς reload (ή με query ?cat=). Κενή κατηγορία: μήνυμα «Δεν υπάρχουν ακόμα άρθρα».
FAQAccordion (<details>), το πρώτο ανοιχτό, το «+» γυρίζει σε «×».
ΦόρμαΟνοματεπώνυμο, τηλέφωνο, email, «Με ενδιαφέρει» (πολλαπλή επιλογή, 4 κατηγορίες + «Δεν ξέρω ακόμα»), μήνυμα. Στέλνει email στην Κάλλι· μήνυμα επιτυχίας κάτω από το κουμπί. Στη μεμονωμένη υπηρεσία η κατηγορία/υπηρεσία περνά αυτόματα.
Τηλέφωνα & emailΠάντα links (tel:, mailto:), σε Inter, ποτέ σε χειρόγραφα.
ΆρθροΜπάρα προόδου ανάγνωσης 3px cyan· κοινοποίηση Facebook, WhatsApp, αντιγραφή συνδέσμου.
Κινητό υπηρεσίαςΣταθερή κάτω μπάρα με διάρκεια + «Κλείσε θέση» (κάτω από 680px).
MotionΜόνο μικρά transitions (.15–.2s). Σεβασμός στο prefers-reduced-motion.
11 · Handoff

Checklist για τον developer

Ό,τι χρειάζεται για να στηθεί το site πάνω στο σχέδιο. Το prototype είναι η οπτική αναφορά· τα tokens και οι κανόνες εδώ είναι η προδιαγραφή.