Σύστημα σχεδίασης
Ο ζωντανός οδηγός στυλ του οίκου δημοπρασιών BidWars. Κάθε δείγμα αποδίδεται από theme tokens, ώστε να παραμένει σωστό σε ανοιχτό και σκούρο θέμα — χρησιμοποίησε τον διακόπτη θέματος για να δεις και τα δύο.
Tokens χρωμάτων
Κάθε δείγμα χρωματίζεται με το token utility (bg-primary, bg-accent…), ποτέ με hardcoded hex. Οι τιμές hex που εμφανίζονται είναι μόνο για τεκμηρίωση.
--background
#FFFFFF / #09090B
Ζεστασιά περγαμηνής — επιφάνεια σελίδας
--foreground
#0F1B2D / #FAFAFA
Ναυτικό μελάνι — κείμενο σώματος
--card
--card-foreground
#FFFFFF / #18181B
Ανυψωμένες επιφάνειες (κάρτες, popovers)
--primary
--primary-foreground
#0F1B2D / #C9A227
Εμπιστοσύνη & δομή — κύριες ενέργειες (ναυτικό σε ανοιχτό / χρυσό σε σκούρο)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Ενέργειες και επιφάνειες χαμηλής έμφασης
--muted
--muted-foreground
#F4F4F5 / #27272A
Ήπιες επιφάνειες + βοηθητικό κείμενο
--accent
--accent-foreground
#C9A227 / #C9A227
Δράση & προβολή — χρυσό, CTAs προώθησης/κοινοποίησης
--destructive
--destructive-foreground
#B3402A / #E06A4F
Καταστροφικές ενέργειες
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Καταστάσεις αποστολής χωρίς παρακολούθηση / διαμάχης
--border
#E4E4E7 / #3F3F46
Περιγράμματα και διαχωριστικά
--input
#E4E4E7 / #71717A
Περιγράμματα πεδίων φόρμας
--ring
#C9A227 / #C9A227
Δακτύλιοι εστίασης
Τυπογραφία
Οι επικεφαλίδες χρησιμοποιούν τη serif γραμματοσειρά (Fraunces, μέσω font-display)· το κείμενο σώματος χρησιμοποιεί Inter.
Display — serif (--font-display)
Επικεφαλίδα 1 — Το σφυρί χτυπά μία φορά
Επικεφαλίδα 2 — Λήγουν σύντομα
Επικεφαλίδα 3 — Λεπτομέρειες δημοπρασίας
Σώμα — Inter
Σώμα — Πλειοδότησε σε κάρτες, κόμικς και άλλα συλλεκτικά σε δεσμευτικές C2C δημοπρασίες με διαφανείς προμήθειες.
Μικρό — Η προστασία αγοραστή ισχύει για κάθε ολοκληρωμένη παραγγελία.
Ήπιο — Οι προμήθειες εμφανίζονται πάντα πριν επιβεβαιώσεις μια προσφορά.
Components
Κοινά primitives από το @auction/ui, αποδομένα με τις παραλλαγές τους και ένα σύντομο απόσπασμα χρήσης.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Οι κάρτες είναι η ανυψωμένη επιφάνεια για αγγελίες, dialogs και περιλήψεις.
<Card>
<CardHeader><CardTitle>…</CardTitle></CardHeader>
<CardContent>…</CardContent>
<CardFooter>…</CardFooter>
</Card>Input
<Input placeholder="…" />
<Input disabled placeholder="…" />Skeleton
<Skeleton className="aspect-[4/3] w-full" />Avatar
<Avatar>
<AvatarImage src="…" alt="…" />
<AvatarFallback>AH</AvatarFallback>
</Avatar>Patterns
Κανονικές συνθέσεις χτισμένες από τα παραπάνω primitives — αντίγραψέ τες, μην τις ξαναεφεύρεις.
Κάρτα δημοπρασίας
Τρέχουσα προσφορά: €245.00
€250.00 + €12.50 προμήθεια = €262.50