DSNCO HR · Design System
Γλώσσα σχεδίασης
Κάθε token, στοιχείο, μοτίβο και κίνηση που χρησιμοποιείται στο κιόσκι και στην κονσόλα διαχείρισης ορίζεται πρώτα εδώ. Σκούρο θέμα Raycast, liquid glass σε δύο βαθμίδες, ελληνικά παντού.
Κανόνες
- «Πρώτα εδώ»: κάθε νέο στοιχείο, παραλλαγή ή κίνηση παρουσιάζεται σε αυτή τη σελίδα πριν εμφανιστεί σε οθόνη προϊόντος.
- «Μόνο δημόσιο API»: τα demos εισάγουν αποκλειστικά εξαγόμενα components και props. Αν ένα demo χρειάζεται αντίγραφο markup, το στοιχείο δεν είναι έτοιμο.
- «Ιχνηλασιμότητα»: κάθε αρχείο στοιχείου δηλώνει την ενότητά του εδώ με σχόλιο της μορφής «Demo: /ui-system#kiosk».
Θεμέλια
Κλίμακα επιφανειών
Το βάθος προκύπτει από τη φωτεινότητα της επιφάνειας, ποτέ από σκιά (Raycast). Κάθε επίπεδο ανεβαίνει ένα σκαλί.
canvas
#07080a
surface-1
#0d0d0e
surface-2
#101112
surface-3
#151618
surface-4
#1b1c1f
Διαχωριστικές γραμμές
Χρώματα κειμένου
Ψηφιακή Κάρτα Εργασίαςink · #f4f4f6
Ψηφιακή Κάρτα Εργασίαςink-dim · #cdcdcd
Ψηφιακή Κάρτα Εργασίαςink-faint · #9c9c9d
Ψηφιακή Κάρτα Εργασίαςink-disabled · 35% ink
Χρώματα έμφασης
Κάθε τόνος έχει και ημιδιαφανή εκδοχή 12% για chips και απαλά γεμίσματα. Το violet σημαίνει πάντα «αυτόματη» ενέργεια.
accent · #57c1ff
success · #59d499
danger · #ff6161
warning · #ffc533
violet · #b28cff
Brand gradient
DSNCO HR #ff5757 → #a1131a
Liquid glass · δύο βαθμίδες
Ίδια κλάση .glass παντού. Η επιφάνεια επιλέγει βαθμίδα με data-glass στο layout της: το κιόσκι είναι πάντα lite, η κονσόλα full.
tier: lite
Συμπαγές ημιδιαφανές, μηδενικό κόστος GPU
Κιόσκι και κάθε browser χωρίς backdrop-filter.
tier: full
Blur + saturate + specular
Κονσόλα διαχείρισης: αιωρούμενα στοιχεία σε desktop.
GlassCard
Τυποποιημένο δοχείο σε τρεις παραλλαγές: glass, flat και inset. Το interactive φωτίζει το περίγραμμα στο hover για κάρτες-συνδέσμους.
glass
Βασική κάρτα· η βαθμίδα προκύπτει από το data-glass της επιφάνειας.
flat
Αδιαφανής surface-2 για πυκνές λίστες χωρίς κόστος glass.
inset
Βυθισμένο πεδίο για λεπτομέρειες και δευτερεύον περιεχόμενο.
glass + interactive
Περίγραμμα line-strong στο hover· για κάρτες με href ή onClick.
Τυπογραφική κλίμακα
Google Sans με ελληνικό subset (self-hosted). Σκούρο φόντο, αρνητικό letter-spacing πάνω από 20px.
Αριθμητικά δεδομένα · tabular numerals
08:58:32 · ΑΦΜ 094123456 · ΑΚ123456 · +0:14
Ώρες, ΑΦΜ, πρωτόκολλα και μετρητές αποδίδονται στην Google Sans με tabular numerals ώστε να μην «χοροπηδούν» στα live updates. Η JetBrains Mono (font-code) κρατείται μόνο για πλήκτρα και μπλοκ κώδικα ή σφαλμάτων.
Κώδικας · font-code
ERGANI: Ο εργαζόμενος δεν έχει ενεργή Ψηφιακή Κάρτα (WRK-409)
17:12
text-clock · 72px, ρολόι κιόσκι
Καμπυλότητα & αποστάσεις
Στόχοι αφής κιόσκι
touch 56px (ελάχιστο) · touch-lg 72px (κύριες ενέργειες)
Κλίμακα z-index
Εικονίδια
Phosphor (duotone) μέσα από επιμελημένο λεξιλόγιο (components/ui/icon.tsx). Μεγέθη 16/20/24/32, bold για μικροσκοπικά glyphs.
Πλήκτρα (keycaps)
Στυλ Raycast: gradient, εσωτερικό φως, mono.
Φόρμες
Πεδία κειμένου
Το focus έρχεται από το καθολικό δαχτυλίδι εστίασης. Το invalid προσθέτει border-danger και aria-invalid.
Μικρό μέγεθος (sm)
Περιοχή κειμένου
Invalid
Αναζήτηση
Κουμπί καθαρισμού όταν υπάρχει κείμενο, υπόδειξη συντόμευσης όταν είναι κενό.
Επιλογή (SimpleSelect)
Κωδικοί αιτιολογίας απουσίας. Το περιεχόμενο ανοίγει σε glass panel.
Combobox υπαλλήλων
Φιλτράρισμα χωρίς τόνους: το «γεωργιου» βρίσκει τη ΓΕΩΡΓΙΟΥ ΜΑΡΙΑ. Βέλη πάνω/κάτω, Enter για επιλογή, Escape για κλείσιμο.
Επιλογές (Checkbox, RadioGroup, Switch)
Checkbox
RadioGroup
Switch
Segmented control
Σημασιολογία radiogroup με πλοήγηση με βέλη.
Ημερομηνίες και ώρες
Στιλιζαρισμένα native inputs με color-scheme dark, mono και tabular αριθμούς.
Εύρος ημερομηνιών
Γρήγορες επιλογές
Πεδία φόρμας (FormField)
Όπως εμφανίζεται στο ΕΡΓΑΝΗ
Ο ΑΦΜ πρέπει να έχει 9 ψηφία
Οριζόντια διάταξη
Καταγράφεται στο ιστορικό της βάρδιας
Emails ειδοποιήσεων (ChipInput)
Enter ή κόμμα για προσθήκη, Backspace σε κενό πεδίο αφαιρεί το τελευταίο. Άκυρο email: το πεδίο κουνιέται και δεν προστίθεται.
Μεταφόρτωση αρχείου (FileDropzone)
Σύρσιμο αρχείου ή επιλογή με κουμπί. Το δεύτερο παράδειγμα δείχνει την κατάσταση σφάλματος.
Σύρετε εδώ το αρχείο
Excel ή CSV με το εβδομαδιαίο πρόγραμμα βαρδιών
Σύρετε εδώ το αρχείο
Excel ή CSV με το εβδομαδιαίο πρόγραμμα βαρδιών
vardies-w27.xlsx48 KB
Το αρχείο έχει άγνωστες στήλες. Ελέγξτε το πρότυπο.
Κατάσταση & Ανάδραση
Badge
Έξι τόνοι, τρεις εμφανίσεις. Το dot δηλώνει κατάσταση, το pulse ζωντανή ροή (π.χ. αποστολή, ενεργή βάρδια).
soft
solid
outline
Με dot και pulse
Chips κατάστασης
Το πλήρες λεξιλόγιο καταστάσεων του συστήματος, από τα semantic maps του lib/design/status.
Υποβολές ΕΡΓΑΝΗ (submission_status)
Βάρδιες (shift_status)
Μέθοδος καταγραφής (clock_method)
Εισαγωγές (import_status)
Ειδοποιήσεις (notification_type)
Banner
Προγραμματισμένη συντήρηση
Προθεσμία 15 λεπτών
Αποτυχία υποβολής
ProgressBar
Χωρίς τιμή: αόριστη πρόοδος με κινούμενη λωρίδα.
Skeleton
SkeletonRows
Spinner
EmptyState
Καμία προγραμματισμένη βάρδια σήμερα
Εισάγετε το εβδομαδιαίο πρόγραμμα από Excel ή προσθέστε βάρδιες χειροκίνητα.
Επικαλύψεις
Διάλογοι
Modal με .glass πάνω σε σκοτεινό overlay. Ο απλός διάλογος για φόρμες, το ConfirmDialog για επιβεβαιώσεις με τόνο και ίχνος καταγραφής.
Συρτάρι
Δεξιό sheet για λεπτομέρειες χωρίς αλλαγή σελίδας: βάρδια, εργαζόμενος, ιστορικό υποβολών.
Ειδοποιήσεις toast
Μέχρι 3 ορατές, η παλαιότερη αποχωρεί. Παύση χρονομέτρου στο hover, κλείσιμο με σύρσιμο δεξιά.
Tooltip · Popover · Μενού
Καρτέλες
Underline στυλ με accent στο ενεργό tab.
Παλέτα εντολών
Στυλ Raycast με cmdk: αναζήτηση χωρίς τόνους, πλοήγηση με βέλη, άνοιγμα με ⌘K ή Ctrl+K.
Δεδομένα
Κεφαλίδα σελίδας
Kicker με ημερομηνία, τίτλος, περιγραφή και ενέργειες δεξιά.
Δευτέρα 13 Ιουλίου 2026
Επισκόπηση
Ζωντανή εικόνα βαρδιών και υποβολών ΕΡΓΑΝΗ για όλα τα καταστήματα.
KPI κάρτες
Το tone χρωματίζει την τιμή. Το delta είναι σημασιολογικό: positive=false όταν η άνοδος είναι κακή (καθυστερήσεις).
σε σχέση με την προηγούμενη εβδομάδα
ώρες αυτή την εβδομάδα
έναντι προγράμματος
απαιτούν ενέργεια
delta και sparkline μαζί
Φόρτωση · Παλιά δεδομένα
τελευταία ενημέρωση πριν 4′
Toolbar
Η τυπική μπάρα φίλτρων και ενεργειών πάνω από πίνακες: φίλτρα αριστερά, το slot end στοιχίζει τις ενέργειες δεξιά.
Πίνακας δεδομένων
Ταξινόμηση σε Εργαζόμενο και Απόκλιση (τοπικό state). Χρόνοι πάντα mono + tnum, εύρη με en-dash. Κλικ σε γραμμή την ορίζει ενεργή· η ενεργή γραμμή δείχνει ανοιχτό drawer.
| Κατάστημα | Πρόγραμμα | Πραγματικό | Κατάσταση | ||
|---|---|---|---|---|---|
| Γιώργος Αντωνίου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 07:58– | -2′ | Σε εξέλιξη |
| Δημήτρης Οικονόμου | ΔΕΜΕΝΙΚΑ | 09:00–17:00 | – | 0′ | Ακυρωμένη |
| Ελένη Δημητρίου | ΟΒΡΥΑ | 10:00–18:00 | 10:22–18:05 | +22′ | Ολοκληρωμένη |
| Κατερίνα Λύρα | ΔΕΜΕΝΙΚΑ | 16:00–00:00 | – | 0′ | Προγραμματισμένη |
| Μαρία Παπαδοπούλου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 08:04–16:01 | +4′ | Ολοκληρωμένη |
| Νίκος Σταθόπουλος | ΟΒΡΥΑ | 14:00–22:00 | – | 0′ | Απουσία |
Ομαδοποίηση ανά εταιρεία
| Κατάστημα | Πρόγραμμα | Πραγματικό | Κατάσταση | ||
|---|---|---|---|---|---|
| ΔΗΜΟΠΟΥΛΟΥ ΑΡΙΣΤΕΑ | |||||
| Μαρία Παπαδοπούλου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 08:04–16:01 | +4′ | Ολοκληρωμένη |
| Γιώργος Αντωνίου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 07:58– | -2′ | Σε εξέλιξη |
| Ελένη Δημητρίου | ΟΒΡΥΑ | 10:00–18:00 | 10:22–18:05 | +22′ | Ολοκληρωμένη |
| ΑΧΑΪΚΟ ΧΩΡΙΑΤΙΚΟ ΙΚΕ | |||||
| Νίκος Σταθόπουλος | ΟΒΡΥΑ | 14:00–22:00 | – | 0′ | Απουσία |
| Κατερίνα Λύρα | ΔΕΜΕΝΙΚΑ | 16:00–00:00 | – | 0′ | Προγραμματισμένη |
| Δημήτρης Οικονόμου | ΔΕΜΕΝΙΚΑ | 09:00–17:00 | – | 0′ | Ακυρωμένη |
Φόρτωση · Κενό
| Κατάστημα | Πρόγραμμα | |
|---|---|---|
| Κατάστημα | Πρόγραμμα | |
|---|---|---|
Κανένα αποτέλεσμα Δοκιμάστε διαφορετικά φίλτρα ή άλλη ημερομηνία. | ||
Σελιδοποίηση
Παραλλαγή καρτών
Ενέργειες σε hover
Η ράγα ενεργειών στη δεξιά άκρη εμφανίζεται στο hover της γραμμής και με focus πληκτρολογίου μέσα σε αυτήν.
| Κατάστημα | Πρόγραμμα | Πραγματικό | Ενέργειες | |
|---|---|---|---|---|
| Μαρία Παπαδοπούλου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 08:04–16:01 | |
| Γιώργος Αντωνίου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 07:58– | |
| Ελένη Δημητρίου | ΟΒΡΥΑ | 10:00–18:00 | 10:22–18:05 |
Αναπτυσσόμενες γραμμές
| Ανάπτυξη λεπτομερειών | Κατάστημα | Πρόγραμμα | Πραγματικό | |
|---|---|---|---|---|
| Μαρία Παπαδοπούλου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 08:04–16:01 | |
| Γιώργος Αντωνίου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 | 07:58– | |
| Ελένη Δημητρίου | ΟΒΡΥΑ | 10:00–18:00 | 10:22–18:05 | |
Πυκνότητα
| Κατάστημα | Πρόγραμμα | |
|---|---|---|
| Μαρία Παπαδοπούλου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 |
| Γιώργος Αντωνίου | ΔΕΜΕΝΙΚΑ | 08:00–16:00 |
| Ελένη Δημητρίου | ΟΒΡΥΑ | 10:00–18:00 |
GroupLabel
Ετικέτες ομάδων του live board: τόνος ανά κατάσταση, προαιρετικός μετρητής σε μικρό Badge.
Γραμμές υποβολών ΕΡΓΑΝΗ
Μία ανά κατάσταση. Η προθεσμία μετρά αντίστροφα για pending/sending/failed/late_pending· η αποτυχημένη είναι ανοιχτή by default.
ERGANI 400 · WRK_CARD_003: Μη έγκυρος Α/Α παραρτήματος για το ΑΦΜ εργοδότη 998877665
WRKCardSE · ΑΦΜ 045678123 · ΕΝΑΡΞΗ 14:22 · παράρτημα 0
Προεπισκόπηση εισαγωγής
Έγκυρη, ολονύκτια και ένα παράδειγμα ανά μήνυμα σφάλματος.
Διαφορές πεδίων
Χρονολόγιο ενεργειών
Ίχνος ελέγχου: ποιος, τι, πότε. Οι λεπτομέρειες αλλαγών σε glass-inset.
- Αριστέα Δημοπούλου εισήγαγε 24 βάρδιες από αρχείο Excel30/06/2026 09:12
- Αριστέα Δημοπούλου επεξεργάστηκε τη βάρδια της Μαρίας Παπαδοπούλου01/07/2026 11:47Ώρα έναρξης08:0009:00Ώρα λήξης16:0017:00
- Κώστας Νικολάου κατέγραψε χειροκίνητη λήξη για τον Γιώργο Αντωνίου01/07/2026 22:05
Ειδοποιήσεις
Ένα στοιχείο ανά τύπο, με αδιάβαστα/διαβασμένα και ένδειξη αποστολής email.
Χρονόμετρα και ενδείξεις
Όλα mono + tnum. Το countdown αλλάζει χρώμα στα όρια warn/danger και δείχνει «ΕΚΤΟΣ ΟΡΙΟΥ +λεπτά» μετά τη λήξη.
LiveTimer
CountdownTimer
PollIndicator
CopyMono
Sparkline
Stepper
- Αρχείο
- Έλεγχος
- Καταχώρηση
Κέλυφος
Πλωτή μπάρα (Dock)
Συμπαγής μπάρα με εικονίδια, αιωρείται στο αριστερό άκρο και κεντράρεται κάθετα. Με hover intent ή focus πληκτρολογίου επεκτείνεται πάνω από το περιεχόμενο (χωρίς να το μετακινεί) και αποκαλύπτει ονόματα· το καρφίτσωμα την κρατά ανοιχτή.
Μπάρα εντολών (Topbar)
Scope chips αριστερά, ⌘K pill στο κέντρο, δραστηριότητα · καμπανάκι · χρήστης δεξιά. Ο διακόπτης «Κύλιση» προσομοιώνει την ανύψωση κατά το scroll.
Ένδειξη δραστηριότητας
Hover ή focus πληκτρολογίου απλώνει inline strip με τις τελευταίες μη επιβεβαιωμένες υποβολές. Με κενό href αποδίδεται ως απλό span αντί για σύνδεσμο.
Bento
Μωσαϊκό 12 στηλών για συνθέσεις dashboard: hero 6×2, small 3, wide 12. Η διαδραστική κάρτα σηκώνεται στο hover και ακολουθεί τον δρομέα με spotlight (μόνο full tier).
Παρόντες τώρα
14/18
σε 2 καταστήματα · 3 βάρδιες ξεκινούν μέσα στην επόμενη ώρα
Υποβολές σήμερα
42
όλες με πρωτόκολλο ΑΚ
Μέση απόκλιση
+6′
έναντι προγράμματος
Εξαιρέσεις
3
απαιτούν ενέργεια
Στοίβα toast
Η νεότερη κάρτα μπαίνει μπροστά στην τράπουλα· hover ή focus απλώνει τη στοίβα σε στήλη και παγώνει τα χρονόμετρα.
Πίνακας ειδοποιήσεων
Ζωντανό demo: σήμανση ανάγνωσης και αρχειοθέτηση ενημερώνουν τοπικό state. Ομαδοποίηση Σήμερα / Χθες / Παλαιότερα σε ώρα Αθήνας· δεξιά το inbox zero.
Βοήθεια & οδηγοί σελίδας
Δύο επίπεδα βοήθειας στην κονσόλα: ο διακόπτης «?» της μπάρας αποκαλύπτει σημειακές εξηγήσεις (HelpHint) πάνω στη σελίδα, και το βιβλίο (HelpGuide) ανοίγει τον αναλυτικό οδηγό της τρέχουσας σελίδας: κάθε στοιχείο, διακόπτης και κατάσταση, με τα πραγματικά chips.
Σημειακή βοήθεια (ενεργοποιήστε το «?»)
Αναλυτικός οδηγός ανά σελίδα (πατήστε το βιβλίο)
Βοήθεια σε προειδοποίηση (Banner με help slot)
Κιόσκι
Οθόνη αναμονής
Τρία στρώματα aurora σε 70s, 90s και 110s · μόνο transform.
Πατήστε την οθόνη για να συνεχίσετε
Επιλογή εργαζόμενου
RosterGrid: πρώτα όσοι έχουν εκκρεμή ενέργεια (πράσινη κουκκίδα), μετά αλφαβητικά στα ελληνικά. Όλο το πλακίδιο είναι στόχος αφής.
PIN
Λειτουργικό demo: σωστό PIN το 1234 (δείχνει έλεγχο και μετά επιβεβαίωση), λάθος PIN κουνά τις κουκκίδες και καθαρίζει.
Πληκτρολογήστε το PIN σας
Κλειδωμένο PIN
Μετά από πολλές λανθασμένες προσπάθειες τα πλήκτρα κλειδώνουν και η αντίστροφη μέτρηση τρέχει εσωτερικά (εδώ 45 δευτερόλεπτα).
Πολλές λανθασμένες προσπάθειες. Δοκιμάστε ξανά σε 45 δευτερόλεπτα.
Οθόνη ενεργειών
ShiftCard, StatusMessage και TouchButton σε όλες τις καταστάσεις: έναρξη (πράσινο), απενεργοποιημένη έναρξη με μήνυμα, λήξη (brand gradient) και δευτερεύουσα πρόωρη αποχώρηση.
Σημερινή βάρδια
09:00 – 17:00
Καλημέρα, ΓΕΩΡΓΙΟΥ ΜΑΡΙΑ
Νυχτερινή βάρδια
22:00 – 06:00
(λήγει επόμενη ημέρα)
Η έναρξη ενεργοποιείται στις 08:45
Δαχτυλίδι αναμονής
Conic πρόοδος μέσω --ring-progress, ενημέρωση μία φορά το δευτερόλεπτο από το εικονικό ρολόι. Διακοσμητικό (aria-hidden)· το διπλανό StatusMessage φέρει το προσβάσιμο κείμενο.
Η έναρξη ενεργοποιείται στις 08:45
Λόγοι πρόωρης αποχώρησης
Κάρτες-radio σε μέγεθος κιόσκι: σταθερή θέση για το check ώστε οι γραμμές να μην αλλάζουν πλάτος όταν μετακινείται η επιλογή.
Ο λόγος «Ασθένεια» φέρει τη σήμανση «Απαιτεί σημείωση»: η καταχώρηση προχωρά μόνο με συμπληρωμένη σημείωση.
Επιβεβαίωση καταγραφής
Δεύτερο δαχτυλίδι ηχούς, ώρα με ελατήριο και 6 κουκκίδες έκρηξης · όλα κάτω από 1 δευτερόλεπτο.
Πατήστε «Αναπαραγωγή» για να δείτε την επιβεβαίωση
Ανάδραση (ήχος + δόνηση)
Κάθε άγγιγμα συνθέτει έναν σύντομο ήχο Web Audio μαζί με δόνηση. Ο ήχος ακούγεται παντού· η δόνηση ενεργοποιείται μόνο σε συσκευές με haptic (Android tablet). Ρυθμίζεται από τον πίνακα δοκιμών.
Κίνηση
Ελατήριο παραθύρου
Το Dialog εισέρχεται με spring (scale + fade) και εξέρχεται με fade. Ανοίξτε το πραγματικό component.
Ολίσθηση toast
Το toast γλιστρά από τα δεξιά και αποσύρεται μόνο του μετά από 5 δευτερόλεπτα.
Παλμός chip
Το animate-pulse-dot δηλώνει ζωντανή ροή (αποστολή, ενεργή βάρδια). Τρέχει συνεχώς, δεν χρειάζεται αναπαραγωγή.
Έκρηξη επιτυχίας κιόσκι
Καθαρό CSS: wash (opacity), δαχτυλίδι (scale με υπερακόντιση) και τικ που ζωγραφίζεται με stroke-dashoffset.
Η έναρξη καταγράφηκε
08:58
ΓΕΩΡΓΙΟΥ ΜΑΡΙΑ
Καλή βάρδια!
Σφάλμα PIN
Το animate-shake κουνά μόνο τη σειρά με τις κουκκίδες (transform), ποτέ ολόκληρη την οθόνη.
Αργή μετατόπιση αναμονής
Το kiosk-drift μετακινεί και περιστρέφει το φόντο σε κύκλο 90 δευτερολέπτων (alternate), μόνο με transform.
Πολιτική prefers-reduced-motion
Πώς συμπεριφέρεται όλο το σύστημα κίνησης όταν ο χρήστης ζητά λιγότερη κίνηση.
Όταν το λειτουργικό δηλώνει prefers-reduced-motion, το styles/base.css μηδενίζει καθολικά τις διάρκειες των animations (0.01ms, μία επανάληψη) και περιορίζει τα transitions στα 80ms. Springs, ολισθήσεις, εκρήξεις επιτυχίας και drift καταλήγουν απευθείας στο τελικό καρέ, χωρίς ενδιάμεση κίνηση.
Καμία πληροφορία δεν μεταφέρεται αποκλειστικά μέσω κίνησης: κάθε κατάσταση έχει στατικό ισοδύναμο (χρώμα, κείμενο, εικονίδιο), οπότε η απενεργοποίηση της κίνησης δεν αφαιρεί νόημα, μόνο διακόσμηση.