ReasonableGraph
Living document

Style Guide — Reasonable Graph

Το single source of truth του design system. Παλέτα & tokens βασισμένα στο σύστημα Federal Blue / Ink, με Bootstrap Icons. Συμβουλευόμαστε αυτή τη σελίδα πριν από κάθε νέο component και την ενημερώνουμε όποτε αλλάζει κάτι — ώστε να καλύπτει και μελλοντικές προσθήκες.

Χρώματα

Δύο κλίμακες (Brand · Federal Blue και Ink · cool neutrals) 50→900, συν τα state χρώματα. Το brand λειτουργεί ως accent (actions, links, focus, header/footer όπου χρειάζεται), τα ink ως κείμενο/borders/backgrounds.

Brand · Federal Bluebrand-50 → brand-900
brand-600 — primary actions, links, focus rings, default brand-700 — display headings, hover, sticky nav brand-800 — masthead, dark header/footer, logo bg
Ink · Cool neutralsink-50 → ink-900
ink-50/100 — page background, table zebra, hover ink-500/600 — secondary text, helper, metadata ink-800/900 — primary text, dense data tables
States
Success
Tokensuccess-500
Hex#0F9D58
Δημοσίευση, upload OK, copy success.
Warning
Tokenwarn-500
Hex#C77A07
Pending review, lock, lockout.
Danger
Tokendanger-500
Hex#C63838
Validation, deactivate, failure.
Info
Tokeninfo-500
Hex#1E66B8
Toasts, ενημερωτικά μηνύματα, ψηφιοποιημένο υλικό.

Τυπογραφία

Ένα μόνο family παντού: DM Sans — τίτλοι και σώμα. Ιεραρχία μέσω βάρους/μεγέθους, line-height 1.6 για σώμα, μέγιστο πλάτος ανάγνωσης ~72ch.

Display · 700 · 34px
Τίτλος σελίδας
H2 · 600 · 22px
Επικεφαλίδα ενότητας
H3 · 600 · 18px
Υπο-ενότητα
Body · 400 · 15px
Κανονικό σώμα κειμένου — η προεπιλεγμένη ροή ανάγνωσης.
Body strong · 600
Έντονο σώμα — labels, ετικέτες πεδίων.
Small · 400 · 13.5px
Δευτερεύον / μετα-πληροφορία.
Caption · 12.5px
Hints, βοηθητικό κείμενο, captions.

Spacing · Shape · Elevation

4-pt grid · radii · shadows · borders. Όλα ως tokens — όχι αυθαίρετοι αριθμοί στον κώδικα.

Spacing (4-pt base)
4 · sp-1 · inline icon gap
8 · sp-2 · button padding-y
12 · sp-3 · form gaps
16 · sp-4 · card padding
24 · sp-6 · default card
32 · sp-8 · page gutter
48 · sp-12 · section break
Border radius
r-xs · 4
badges, chips
r-sm · 6
buttons, inputs
r-md · 8
panels, swatches
r-lg · 12
cards · default
r-xl · 16
surfaces, modals
Elevation
cardκάρτες σε λευκό canvas
shadow-xsπίνακες, μικρά panels
shadow-smdropdowns, popovers
shadow-mdside sheets
shadow-lgmodals, focus dialogs
Layout grid · 12 col / content max 1500px

Breakpoints (Bootstrap): sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400. Reading column max ~72ch. Σημείωση: το Bootstrap fixed container φτάνει έως 1320px (xxl) — το 1500px είναι custom token του έργου.

Bootstrap Icons

Ενιαίο icon system: Bootstrap Icons 1.11.3 (~2.000 icons, MIT license). Κληρονομούν currentColor. Default μέγεθος 16px (UI), 14px inline σε badges, 20–24px σε κουμπιά/empty states. Πάντα aria-hidden="true" όταν συνοδεύονται από κείμενο. Ενδεικτικό set — όχι περιοριστικό.

shield-lockAuth
personΠρόσωπο
peopleΧρήστες
searchΑναζήτηση
slidersΣύνθετη
folder2Συλλογή
diagram-3Graph
music-noteΗχογράφηση
vinylΔίσκος
bookΒιβλίο
file-textΤεκμήριο
calendar3Ημερομηνία
geo-altΤόπος
micAudio
play-circlePlayer
downloadΛήψη
starsAI badge
check-circleSuccess
exclamationWarning
x-circleError
info-circleInfo
funnelΦίλτρα
list-ulList view
gridGrid view
sort-downΤαξινόμηση
arrows-fullscreenLightbox
card-imageΧωρίς εικόνα
chevron-rightDisclosure

Τύποι τεκμηρίων

Κάθε τύπος τεκμηρίου έχει ένα σταθερό icon + ετικέτα, ορισμένα μία φορά σε κεντρικό map (ENTITY) — προσθήκη νέου τύπου = μία γραμμή. Το ίδιο icon επαναχρησιμοποιείται σε λίστα, καρτέλα και στο breakdown των αποτελεσμάτων. Συντηρησιμότητα: όσο περισσότερα διακριτά icons, τόσο μεγαλύτερο το κόστος σε νέες προσθήκες — γι' αυτό κρατάμε ένα icon ανά τύπο και, όταν οι τύποι σε ένα σύνολο αποτελεσμάτων ξεπερνούν τα 6, τα υπόλοιπα μαζεύονται πίσω από ένα «+N ακόμη».

bookΒιβλίο
discΕμπορική ηχογράφηση
vinylΈκδοση δίσκου
chat-quoteΠαροιμία
personΠρόσωπο
geo-altΤόπος
soundwaveΗχητικό τεκμήριο
calendar-eventΓεγονός
buildingΟργανισμός
imageΦωτογραφία
file-musicΠαρτιτούρα
music-noteΑντικείμενο (όργανο)
music-note-listΜουσικό Έργο
file-earmark-textΈγγραφο
journal-textΒιβλιογραφικό έργο

Νέοι τύποι (Ιούν 2026): work · document · biblio — προστέθηκαν στο κεντρικό ENTITY map. Το ίδιο icon δουλεύει ως ουδέτερο tag στις κάρτες αποτελεσμάτων και στο breakdown.

Κουμπιά

Variants: primary · secondary · outline · ghost · danger. Sizes: sm / md / lg. Με/χωρίς icon, με loading & disabled states. Touch target ≥44px (≥36px για sm σε πυκνά UI). focus: ring 4px brand-100.

Variants
Sizes
Με icon
States

Anatomy (medium primary): padding 16/8, radius r-sm (6px), font 600, focus ring 4px brand-100. Destructive ενέργειες πάντα με confirm dialog.

Φόρμες & Validation

label-on-top · ορατό label πάντα (ποτέ placeholder ως label) · helper text · μηνύματα validation στα ελληνικά. States: default, focus, error, success, disabled.

Στέλνουμε σύνδεσμο επιβεβαίωσης.

Υπάρχει ήδη εγγραφή με αυτόν τον τίτλο.

Διαθέσιμο.

Δικαιώματα
Δημόσια προβολή
Απαιτήσεις κωδικού
  • Τουλάχιστον 8 χαρακτήρες
  • Τουλάχιστον 1 κεφαλαίο
  • Τουλάχιστον 1 αριθμός
  • Τουλάχιστον 1 ειδικός χαρακτήρας

Badges & States

soft · solid · dot · entity · outline. Πάντα icon/κουκκίδα + κείμενο (όχι μόνο χρώμα — SC 1.4.1).

Ελεύθερη πρόσβαση Περιορισμένη Ψηφιοποιημένο Μη διαθέσιμο Αρχειοθετημένο ΝΕΟ Χωρίς ψηφιακό Ηχογράφηση Δίσκος
ΣημασίαVariantBadge tokenColor
Θετικό / ελεύθεροsuccessbadge.successsuccess-500
Προσοχή / περιορισμόςwarningbadge.warnwarn-500
Πληροφορία / ψηφιακόinfobadge.infoinfo-500
Σφάλμα / μη διαθέσιμοdangerbadge.dangerdanger-500

Πίνακες

Header σε ink-50, zebra rows, sticky-able header, row actions, pagination. Πάντα <caption> (visually-hidden αρκεί) και scope στα th.

ΤίτλοςΗμ/νίαΤύποςΠρόσβαση
Τα διαλεχτά παιδιά
Νίνου, Μαρίκα · 03:19
1951 Ηχογράφηση Ελεύθερη
Columbia (GR) DG 6913
Δίσκος 78 στροφών
1951 Έκδοση Περιορισμένη
Χρονολόγιο Γεγονότων 1940-1944
Ακαδημία Αθηνών
2002 Βιβλίο Ψηφιοποιημένο
Εμφάνιση 1–3 από 84

Empty states

Εικονίδιο + τίτλος + σύντομη εξήγηση + (προαιρετικά) κύρια ενέργεια. Διαφορετικό μήνυμα για «κενό» vs «δεν βρέθηκαν αποτελέσματα» vs «σφάλμα».

Δεν υπάρχουν εγγραφές ακόμα

Ξεκινήστε προσθέτοντας το πρώτο τεκμήριο σε αυτή τη συλλογή.

Δεν βρέθηκαν αποτελέσματα

Δοκιμάστε διαφορετικό όρο ή αφαιρέστε τον περιορισμό συλλογής.

Κάτι πήγε στραβά

Δεν ήταν δυνατή η φόρτωση των δεδομένων. Ελέγξτε τη σύνδεση και δοκιμάστε ξανά.

Φίλτρα & chips

Faceted φίλτρα αριστερά των αποτελεσμάτων, flat χωρίς κουτιά. Όλη η σειρά clickable, count σε pill, προαιρετικό deep-link. Πολλά items → «περισσότερα»· πολλά facets → «Όλα τα φίλτρα». Επιλογή σε ένα facet απενεργοποιεί προσωρινά τα υπόλοιπα και εμφανίζει «Εφαρμογή» (το backend κάνει submit ένα facet τη φορά). Τα εφαρμοσμένα φίλτρα γίνονται removable chips. Χωρίς collapse ολόκληρου facet.

Τύπος τεκμηρίου

Συλλογή

Γλώσσα

Εφαρμοσμένα φίλτρα (removable chips)
Βιβλίο Αθήνα

Στο παράδειγμα το facet «Τύπος τεκμηρίου» είναι ενεργό — τα «Συλλογή» & «Γλώσσα» εμφανίζονται απενεργοποιημένα μέχρι το «Εφαρμογή». Το sidebar είναι sticky με ανεξάρτητο scroll ώστε να μη μένει κενό κάτω από τα αποτελέσματα. Όταν ένα facet έχει περισσότερα από 12 items, εμφανίζεται search input για άμεσο φιλτράρισμα των τιμών (in-place, χωρίς re-render)· καθώς φιλτράρεις, το «περισσότερα» κρύβεται όταν δεν χρειάζεται.

Αποτελέσματα αναζήτησης

Toolbar (διάταξη · ταξινόμηση · σελιδοποίηση) και κάρτες αποτελεσμάτων σε δύο προβολές (λίστα / πλέγμα). Σχεδιασμένες να φιλοξενούν κάθε ποικιλία περιεχομένου — από σκέτο τίτλο+tag έως αναλυτικά έγγραφα με collapsible υπο-περιεχόμενο.

Toolbar

Desktop: η toolbar κάθεται στην ίδια οριζόντια γραμμή με τον τίτλο «Φίλτρα». Tooltips σε hover και focus, dismiss με Esc (SC 1.4.13). Η σελιδοποίηση κρύβεται όταν τα αποτελέσματα χωρούν σε μία σελίδα και επαναλαμβάνεται στο τέλος των αποτελεσμάτων.

Κάρτα — προβολή λίστας

Πρακτικό συνεδρίασης του Δημοτικού Συμβουλίου Καλυβίων Αττικής με θέμα την έγκριση δαπανών για τη διοργάνωση της ετήσιας εμποροπανήγυρης της Ζωοδόχου Πηγής, τον καθορισμό των αμοιβών των οργανοπαικτών και τη ρύθμιση ζητημάτων δημόσιας τάξης [Απρίλιος 1954]

Έγγραφο
Ημ/νίες: 02-04-1954

Εικόνα αριστερά (σταθερό 128×128, object-fit:cover, border-radius, click → lightbox). Όλο το περιεχόμενο δεξιά της εικόνας. Όλη η κάρτα clickable (stretched-link): ο τίτλος είναι ο πραγματικός σύνδεσμος σε ουδέτερο χρώμα (όχι μπλε)· οι εσωτερικοί σύνδεσμοι μένουν μπλε & ανεξάρτητα clickable. Χωρίς εικόνα → το placeholder δείχνει τον ίδιο τον τίτλο (κεντραρισμένο, padding 10px, clamp 4 σειρών) αντί για «Χωρίς εικόνα». Τα μεταδεδομένα μπαίνουν το ένα κάτω από το άλλο — 2 στήλες σε desktop, 1 σε στενή οθόνη. Ο τίτλος κόβεται στις 4 σειρές (clamp + ellipsis)· ολόκληρος εμφανίζεται σε Bootstrap tooltip (ίδιο με τα κουμπιά προβολής) που ενεργοποιείται μόνο όταν ο τίτλος όντως κόβεται — ίδιο σε list & grid (δες την 4η κάρτα).

Κάρτα — λίστα: εναλλακτικό (εικόνα δεξιά, χωρίς aspect ratio)

Εναλλακτική προβολή λίστας (διαφορά ΜΟΝΟ στα list items): η εικόνα πάει δεξιά, κάτω από το tag, σε φυσικές αναλογίες (fixed width, height auto — κανένα crop / forced aspect ratio). Όπου λείπει εικόνα δεν μπαίνει placeholder (δες τη 2η κάρτα). Ιδανικό όταν οι εικόνες είναι λίγες/ανομοιόμορφες. Πλέγμα & τα υπόλοιπα παραμένουν ίδια με το ενιαίο view. search-alt.html

Κάρτα — προβολή πλέγματος

Τσιτσάνης, Βασίλης. Τα διαλεχτά παιδιά

Μουσικό Έργο

Τίτλος σε άλλη γλώσσα: Ta dialekhtá paidiá

Συνθέτης: Τσιτσάνης, Βασίλης

Εικόνα επάνω (aspect-ratio:4/3, cover), μετά τίτλος και από κάτω το tag. Χωρίς εικόνα → το placeholder δείχνει τον τίτλο (κεντραρισμένο, padding 10px, clamp 4 σειρών). Πάντα ορατά: τίτλος + tag + max 2 στοιχεία· οι κάρτες ισοϋψώνονται ανά σειρά. Το «Περισσότερα» (κάτω-δεξιά) εμφανίζεται μόνο όταν το πλήρες περιεχόμενο ΔΕΝ χωράει στο ύψος της σειράς — αν μια διπλανή κάρτα ψηλώνει τη σειρά και τα στοιχεία χωρούν, δείχνονται όλα χωρίς κουμπί (μετριέται με JS). «Λιγότερα» στο τέλος της κάρτας. Σε mobile (≤560px): μόνο card view, και όπου λείπει εικόνα αφαιρείται η placeholder για πιο σύντομο scroll.

Μπλε με φειδώ. Ουδέτερα (ink): type tags, breakdown pills (πλήθος ανά τύπο), μετα-πληροφορία, τίτλος-σύνδεσμος. Μπλε μόνο σε ό,τι είναι πραγματικά actionable: εσωτερικοί σύνδεσμοι, «+N ακόμη», disclosures, ενεργό view, τρέχουσα σελίδα. Πολύ απαλό zebra στις λίστες· η κύρια ανάγνωση γίνεται με κάρτες & hover.

Κεφαλίδα εγγραφής & γράφος

Components της σελίδας γράφου (record-graph.html) και της σελίδας εγγραφής. Η προβολή γράφου είναι ξεχωριστή σελίδα — η εναλλαγή εγγραφή ↔ γράφος γίνεται με redirect (όχι tabs). Η κεφαλίδα εγγραφής είναι κοινό component και στις δύο σελίδες: ίδια δομή και θέση, αλλάζει μόνο η δεξιά ενέργεια.

Κεφαλίδα εγγραφής — τίτλος, tags κάτω από τον τίτλο, meta, ενέργεια εναλλαγής
Ψηφιακό τεκμήριο (Μονογραφία) Γράφος διασυνδέσεων

Αναγνωριστικό: oi:4030 Συλλογή: Σπάνιες εκδόσεις 16ου-20ου αιώνα

Πίσω στην εγγραφή

Ο τίτλος είναι κανονικός h1 με τα tags κάτω από αυτόν — ουδέτερα (όχι μπλε), ώστε να μη μοιάζουν clickable. Στη σελίδα εγγραφής το chip προβολής παραλείπεται και η δεξιά ενέργεια γίνεται « Γράφος διασυνδέσεων» → οδηγεί στη σελίδα γράφου· εκεί, «Πίσω στην εγγραφή» → επιστρέφει στην εγγραφή.

Panels γράφου — flat σε στυλ facets, με icons (εδώ τα περιεχόμενα είναι στανταρ)

Help text που εξηγεί την αλληλεπίδραση: κλικ σε κόμβο → «Πληροφορίες», διπλό κλικ → μετάβαση στον γράφο του, ετικέτες κόμβων = αναγνωριστικά.

Υπόμνημα

  • Ψηφιακό αρχείοbitstream5
  • Συλλογήcollection1
  • Άδεια χρήσηςlicence1
  • Ψηφιακό τεκμήριοdigital-item1

Πλοήγηση

  1. Σπάνιες εκδόσεις 16ου-20ου αιώναoi:4024 · Συλλογή
  2. [Χειρόγραφο του 1198]oi:4030 · Ψηφιακό τεκμήριο

Πληροφορίες

Άδεια χρήσης (licence) Μόνο ανάγνωση

Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 4.0 Διεθνές

URN
oi:2158
Προβολή όρων άδειας

Ενημερώνεται με κλικ σε κόμβο (aria-live). Ανά τύπο: χρώμα + icon + ελληνική ετικέτα + τεχνικό όνομα, URN, πεδία, ενέργεια (προβολή/λήψη/αναζήτηση) και — όπου υπάρχουν — συνδεδεμένες εγγραφές.

Χειριστήρια

Σχέσεις που συνάγονται από τον συλλογιστή (inferred) — με διακεκομμένη γραμμή στον γράφο.

Όριο SoW: στο Graph view σχεδιάζονται μόνο τα περιφερειακά components — η απόδοση/φυσική του ίδιου του γράφου (και τα χρώματα κόμβων ανά τύπο) παρέχονται από την υπάρχουσα μηχανή του RG. Τα panels ακολουθούν το flat pattern των facets: λεπτά διαχωριστικά, sticky sidebar, counts σε pills.

Σελίδες εγγραφής & συλλογής (record.html · collection.html · record-file.html) — πρόσθετα components
Sticky πλοήγηση ενοτήτων — scrollspy, αυτο-κύλιση ενεργού chip, βελάκια σε overflow, τίτλος εγγραφής όταν γίνει stick· από κάτω help text καθοδήγησης (κρύβεται όταν το bar γίνει stick, για να μένει συμπαγές)
Αρχείο Στοιχεία Βιογραφικό Φωτογραφίες Ανάλυση Βίντεο

Κυλήστε τη σελίδα για να δείτε όλο το περιεχόμενο ή πατήστε σε μια ενότητα για να μεταβείτε απευθείας σε αυτήν.

Σχετικές εγγραφές — tabs ανά ρόλο με counters· δεν διπλώνουν: σε overflow οριζόντια κύλιση με βελάκια (ίδιο pattern με το sticky nav), το επιλεγμένο tab αυτο-κυλά ώστε να μένει ορατό· σε 8+ εγγραφές εμφανίζεται φιλτράρισμα λίστας (pattern των facets)· κάρτες με thumbnail

«Φόρτωση περισσότερων» σε βήματα των 8 + μετρητής «Εμφανίζονται Χ από Υ» + «Πλήρης λίστα στην αναζήτηση» (redirect) — ποτέ φόρτωση εκατοντάδων εγγραφών μονομιάς.

Ψηφιακά αρχεία — accordion: ο viewer ανοίγει κάτω από κάθε σειρά· το πρώτο ανοιχτό· Προβολή ↔ Απόκρυψη

Το ψωμί της ξενιτιάς — παρτιτούρα.pdf

Παρτιτούρα — 24 σελίδες2.1 MBCC BY-NC-ND 4.0

Λήψη Εγγραφή αρχείου

Το «Εγγραφή αρχείου» οδηγεί στη σελίδα bitstream (record-file.html): τεχνικά μεταδεδομένα (MIME, MD5, bundle), CTA λήψης δεξιά στην ίδια σειρά με το «Ξεφύλλισμα», και προεπισκόπηση.

Κάρτα υποσυλλογής (collection.html)
Αρχείο Στέλιου Καζαντζίδη 1.418 τεκμήρια4 φάκελοι

Επιπλέον στις σελίδες: μπλοκ ταυτότητας (εικόνα αριστερά + βασικά στοιχεία· χωρίς εικόνα → full width)· αναλυτικά meta σε 2 στήλες με chips εξωτερικών ταυτοποιήσεων (Wikidata, VIAF κ.λπ.)· βιογραφικό με clamp/«Περισσότερα»· κάρτες θηκογραμμάτων & ραβδόγραμμα με λήψη δεδομένων· δέντρο φακέλων με «Βρίσκεστε εδώ»· coverflow καρουσέλ (κεντρική εικόνα εμπρός, κλικ σε πλαϊνή → κέντρο, κλικ στην κεντρική → lightbox)· YouTube facade (φόρτωση iframe μόνο μετά από κλικ)· χάρτης OSM με chips τόπων· κουμπί επιστροφής στην κορυφή. Όλα τα μπλοκ πιάνουν το πλήρες πλάτος του container — ενιαία στοίχιση. Σειρά ενοτήτων: Αρχείο → Στοιχεία → Βιογραφικό → Φωτογραφίες → Ανάλυση → Γράφημα → Βίντεο → Τόποι → Σχετικές εγγραφές → Ψηφιακά αρχεία· στη συλλογή: Στοιχεία → Δέντρο → Υποσυλλογές → Επιλεγμένα → Περιεχόμενα.

Accessibility

Εφαρμόζουμε WCAG 2.2 πραγματιστικά — στόχος AA, με AAA όπου είναι εφικτό χωρίς να βλάπτει το UX.

Icon + label

Ποτέ icon μόνο του για πληροφορία (SC 1.3.1 A). Πάντα ορατό κείμενο: «Ημερομηνία: 1923».

Focus visible

3px brand outline με offset σε όλα τα interactive (SC 2.4.7 / 2.4.11).

Touch targets

≥ 24×24 ελάχιστο (SC 2.5.8), ≥ 44px όπου έχει νόημα.

Contrast

Κείμενο ≥ 4.5:1, large/UI ≥ 3:1 (SC 1.4.3 / 1.4.11).

Skip link

«Μετάβαση στο περιεχόμενο» σε κάθε σελίδα (SC 2.4.1).

Live regions

aria-live για δυναμικά μηνύματα (αποτελέσματα, σφάλματα).

Reduced motion

prefers-reduced-motion απενεργοποιεί transitions/animations.

Keyboard

Πλήρης χειρισμός με πληκτρολόγιο — π.χ. το collection tree (βελάκια, Home/End, Enter).

Hover/focus content

Τα tooltips (view toggle) εμφανίζονται σε hover και focus, παραμένουν hoverable και κλείνουν με Esc (SC 1.4.13). Η ουσιαστική πληροφορία υπάρχει και ως aria-label.

Modal lightbox

Native <dialog>: focus trap, Esc, click backdrop, επιστροφή focus στο σημείο εκκίνησης. Κάθε εικόνα έχει alt· το άνοιγμα είναι <button> με όνομα.

Do / Don't
Σωστό
Ορατό label + leading icon: « Ημερομηνία: 1923»
Λάθος
Μόνο icon χωρίς κείμενο: « 1923» — αόρατο σε screen reader.
Σωστό
Flat layout χωρίς περιττά card containers — WCAG συμβατό.
Λάθος
Card wrappers «για να φαίνεται οργανωμένο» — δεν απαιτούνται.

Αποφάσεις έργου

Bootstrap 5, custom όπου χρειάζεται

Bootstrap 5.3.3 βάση (grid, forms, JS). Custom component όποτε μια UX λύση έχει νόημα.

Bootstrap Icons 1.11.3

Το ενιαίο icon system του έργου.

Παλέτα Federal Blue / Ink

Υιοθετημένη αυτούσια. Brand-600 primary, ink neutrals, states success/warn/danger/info.

HTML, όχι Figma

Όλα τα deliverables ως HTML σελίδες — ευελιξία & βοηθά design + dev.

Reusable, variable content

Τα components σχεδιάζονται ώστε να φιλοξενούν διαφορετικό περιεχόμενο.

Dead-simple chrome

Λιτό header επάνω, ίδιο footer κάτω — όπως το RG demo.

Λευκό canvas, κάρτες με σκιά

Body λευκό· οι κάρτες λευκές με διακριτική σκιά για να «ξεκολλούν». Header/footer & ομάδες πεδίων σε ανοιχτό γκρι ως δευτερεύουσες επιφάνειες.

Φίλτρα flat, submit ανά facet

Φίλτρα αριστερά χωρίς κουτιά. Επιλογή σε ένα facet απενεργοποιεί προσωρινά τα υπόλοιπα + κουμπί «Εφαρμογή» (backend: submit ένα facet τη φορά).

Όλη η κάρτα clickable

Stretched-link: ο τίτλος είναι ο μοναδικός κύριος σύνδεσμος· ένα ::after κάνει όλη την κάρτα click target. Οι εσωτερικοί σύνδεσμοι ζουν πάνω από το overlay (z-index) και μένουν ανεξάρτητα clickable. Χωρίς ξεχωριστό κουμπί «Άνοιγμα».

Μπλε με φειδώ

Type tags & breakdown pills ουδέτερα (ink) — δεν θυμίζουν κουμπιά. Μπλε μόνο σε actionable: σύνδεσμοι, «+N ακόμη», disclosures, ενεργό view, τρέχουσα σελίδα.

Εικόνες ομοιόμορφες

Σταθερό μέγεθος + object-fit:cover + border-radius· click → lightbox (native <dialog>). Όταν λείπει εικόνα: μία κλασική placeholder, ποτέ ανά-τύπο icons.

Δύο προβολές, βαρύ → collapsible

Λίστα (αναλυτική) & πλέγμα. Πλούσιο/φωλιασμένο περιεχόμενο μπαίνει πίσω από disclosures ώστε οι κάρτες να μένουν ομοιόμορφες. Σελιδοποίηση πάνω & κάτω, κρυφή σε μία σελίδα.

Ανοιχτό: ο πελάτης ανέφερε αρχικά Accessibility AAA, ενώ δουλεύουμε σε επίπεδο AA με AAA όπου εφικτό. Να επιβεβαιωθεί το τελικό επίπεδο-στόχος.