Дизайн система
Живият стайлгайд на аукционната къща BidWars. Всеки пример се рендерира от токените на темата, така че е верен и в светъл, и в тъмен режим — ползвай превключвателя на темата, за да прегледаш и двата.
Цветови токени
Всяка мостра е изрисувана с токен-утилитата (bg-primary, bg-accent…), никога с твърдо зададен hex. Показаните hex стойности са само за документация.
--background
#FFFFFF / #09090B
Пергаментова топлина — повърхност на страницата
--foreground
#0F1B2D / #FAFAFA
Мастиленосиньо — основен текст
--card
--card-foreground
#FFFFFF / #18181B
Издигнати повърхности (карти, изскачащи прозорци)
--primary
--primary-foreground
#0F1B2D / #C9A227
Доверие и структура — основни действия (синьо светло / златно тъмно)
--secondary
--secondary-foreground
#F4F4F5 / #27272A
Действия и повърхности с нисък акцент
--muted
--muted-foreground
#F4F4F5 / #27272A
Приглушени повърхности + помощен текст
--accent
--accent-foreground
#C9A227 / #C9A227
Действие и прожектор — злато, CTA за буст/споделяне
--destructive
--destructive-foreground
#B3402A / #E06A4F
Разрушителни действия
--warning
--warning-foreground
#FDE8C8 / #3A2E0B
Състояния за доставка без проследяване / спорове
--border
#E4E4E7 / #3F3F46
Рамки и разделители
--input
#E4E4E7 / #71717A
Контури на полета във форми
--ring
#C9A227 / #C9A227
Индикатори за фокус
Типография
Заглавията използват серифния шрифт (Fraunces, чрез font-display); основният текст използва Inter.
Заглавен — серифен (--font-display)
Заглавие 1 — Чукчето удря само веднъж
Заглавие 2 — Приключващи скоро
Заглавие 3 — Детайли за търга
Основен — Inter
Основен — Наддавай за карти, комикси и други колекционерски предмети в обвързващи C2C търгове с прозрачни такси.
Дребен — Защитата на купувача важи за всяка приключена поръчка.
Приглушен — Таксите винаги се показват преди да потвърдиш оферта.
Компоненти
Споделени примитиви от @auction/ui, рендерирани с техните варианти и кратък пример за употреба.
Button
<Button variant="accent" size="lg">…</Button>Badge
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>Card
Картите са издигнатата повърхност за обяви, диалози и обобщения.
<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>Шаблони
Канонични композиции, изградени от примитивите по-горе — копирай ги, не ги измисляй наново.
Карта на търг
Текуща оферта: €245.00
€250.00 + €12.50 такса = €262.50