Design System.
Η πηγή αλήθειας για τις οδηγίες επωνυμίας VGS, τη βιβλιοθήκη components και τα σχεδιαστικά μοτίβα που χρησιμοποιούνται σε όλες τις δημόσιες σελίδες.
Παλέτα Χρωμάτων
Χρώματα επωνυμίας και UI που ορίζονται στη διαμόρφωση του Tailwind. Χρησιμοποιήστε αυτές τις κλάσεις με συνέπεια σε όλες τις σελίδες.
Επωνυμία
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Κλίμακα Γκρι
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Χρώματα Κατάστασης
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Τυπογραφία
Δύο οικογένειες γραμματοσειρών αποτελούν το σύστημα τύπου. Audiowide για επικεφαλίδες και display text, Inter (sans-serif) για κείμενο σώματος και UI.
Επικεφαλίδες font-audiowide uppercase tracking-tight
Επικεφαλίδα Επιπέδου 1
text-4xl md:text-6xl font-audiowide uppercase
Επικεφαλίδα Επιπέδου 2
text-3xl md:text-4xl font-audiowide uppercase
Επικεφαλίδα Επιπέδου 3
text-xl font-audiowide uppercase
Κείμενο Σώματος Προεπιλεγμένη sans-serif (Inter), text-gray-400 για δευτερεύον
Το κείμενο σώματος χρησιμοποιεί την Inter σε διάφορα μεγέθη. Το προεπιλεγμένο χρώμα είναι λευκό για το κύριο περιεχόμενο και gray-400 για δευτερεύουσες περιγραφές και υποστηρικτικό κείμενο.
text-lg text-gray-400 leading-relaxed
Ετικέτες & Λεζάντες text-xs uppercase tracking-wider text-gray-500
Ετικέτα Ενότητας
Κουμπιά
Τα κουμπιά συνθέτουν τρία πράγματα: μια παραλλαγή (χρώμα), ένα μέγεθος και ένα προαιρετικό εφέ. Και τα τρία επίπεδα στοιβάζονται πάνω στη βάση .btn.
Παραλλαγές
Μεγέθη
Εφέ
Το .btn-glow είναι το τυπικό halo CTA. Το .btn-glow-intense το διπλασιάζει για το μοναδικό πιο σημαντικό CTA σε μια σελίδα. Το .btn-shimmer προσθέτει ένα one-shot σάρωμα φωτός στο hover. Το .btn-press προσθέτει μια μικρο-κλιμάκωση προς τα κάτω στο κλικ για απτική ανατροφοδότηση.
Χρήση
<!-- Variant + size + effect compose freely -->
<button class="btn-primary btn-lg btn-glow">Get Started</button>
<button class="btn-secondary btn-md">Learn more</button>
<button class="btn-ghost btn-sm btn-press">Cancel</button>
/* CSS — src/styles/globals.css */
.btn-glow:hover { box-shadow: 0 0 12px rgba(240,230,200,0.15), 0 0 24px rgba(240,230,200,0.05); }
.btn-press:active { transform: scale(0.96); }Επιφάνειες
Glass, κάρτες, badges και tabs. Το γυαλί με απόχρωση σαμπάνιας είναι η χαρακτηριστική επιφάνεια VGS — χρησιμοποιήστε το για ανυψωμένο περιεχόμενο πάνω σε σκούρα φόντα.
Glass
.glass
Τυπική επιφάνεια glass. Backdrop blur με απόχρωση σαμπάνιας, ακτίνα 16px. Ιδανικό για ενότητες πλήρους πλάτους και επικαλύψεις hero.
.glass-card
Ελαφρώς εντονότερη ρητή παραλλαγή με blur 12px. Άμεση αντικατάσταση όταν το .glass φαίνεται πολύ απαλό.
Κάρτες
.card
Βασική ημιδιαφανής κάρτα. Padding 6, ακτίνα sm.
.card-elevated
Προσθέτει διακριτική σκιά. Χρησιμοποιήστε με φειδώ για ανύψωση.
.card-interactive
Δείκτης pointer + κατάσταση hover. Χρησιμοποιήστε όταν ολόκληρη η κάρτα είναι clickable.
.card-compact
Πιο σφιχτό padding (p-4) — για πυκνές σειρές και πλέγματα.
.card-minimal
Επαναφέρει φόντο, padding και περίγραμμα. Χρησιμοποιείται ως wrapper που δεν πρέπει να υπάρχει οπτικά.
Badges
Animations
Τα animations που ενεργοποιούνται με κύλιση είναι opt-in μέσω του data-animate. Οι ενότητες hero προσθέτουν επιπλέον εφέ για θέαμα. Και τα δύο σέβονται το prefers-reduced-motion.
Scroll Animations
Fade Up
data-animate (default)
Fade Left
data-animate="fade-left"
Fade Right
data-animate="fade-right"
Scale
data-animate="scale"
Σταδιακές Καθυστερήσεις
Προσθέστε data-stagger="100" σε ένα γονικό container. Τα θυγατρικά στοιχεία με data-animate θα λάβουν αυτόματα αυξανόμενες καθυστερήσεις (σε ms).
<!-- Staggered children -->
<div data-stagger="100">
<div data-animate>0ms delay</div>
<div data-animate>100ms delay</div>
<div data-animate>200ms delay</div>
</div>Εικονίδια
Οι δημόσιες σελίδες χρησιμοποιούν το icon pack Font Awesome Etch — ένα επιμελημένο υποσύνολο ~280 εικονιδίων με συνεπή χαραγμένη αισθητική. Το Kit ID 66eef93df2 φορτώνεται στο public layout. Το FA Brands είναι επίσης διαθέσιμο για σύμβολα κοινωνικών πλατφορμών.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Χρήση
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Μετονομασίες Κλασικού FA → Etch
Αρκετά κοινά κλασικά ονόματα FA δεν υπάρχουν στο Etch και έχουν διαφορετικές αντικαταστάσεις. Ελέγξτε τη λίστα εικονιδίων στο CLAUDE.md πριν προσθέσετε ένα νέο εικονίδιο.
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin