ElectraDen design system showcase. All visual components used across the store.
−25%
ElectraDen Component Library
Complete design system showcase
Components
1. Color Palette
Primary Colors
Primary
#2563EB
Primary Hover
#1D4ED8
Foreground
#0F172A
Background
#FFFFFF
Neutral Colors
Muted
#64748B
Secondary
#F1F5F9
Border
#E2E8F0
Accent
#94A3B8
Status Colors
Success
#22C55E
Warning
#EAB308
Error
#EF4444
Info
#2563EB
Gradient Colors
Red Gradient
Deals/Sale
Blue Gradient
Category
Green Gradient
Promotion
Purple Gradient
Premium
2. Typography
Heading 1
Heading 2
Heading 3
Heading 4
Body Large
Body Regular
Body Small
Caption
4. Badges
Solid Badges
New
-25%
In Stock
Bestseller
Limited
Soft Badges
Featured
Sale
Verified
Pending
Outline Badges
Featured
Free Shipping
Spec Chip Badges
Technical specs shown on product cards
Wi-Fi 6
8-Port
Gigabit
PoE Support
Mesh Compatible
Dot / Status Badges
In Stock
Low Stock
Out of Stock
Pre-order
PDP Inventory Indicator (5 states)
Shown on the product detail page. Threshold configurable in theme editor (default: 10).
In Stock
Ships within 1 business day
Only 3 left
Order soon — selling fast
Out of Stock
Notify me when available
Pre-order
Ships when back in stock
In Stock
Ships within 1 business day
States: In Stock (green) · Low Stock (amber, pulsing dot) · Out of Stock (red) · Pre-order (blue) · Untracked (green)
5. Icons
6. Form Inputs
Text Input
Search Input
Select / Dropdown
Checkbox / Radio
Toggle Switch
Textarea
7. Product Cards
8. Ad Cards
10. Trust Badges
Free Shipping
Orders over $100
2 Year Warranty
Full coverage
30-Day Returns
No questions asked
11. Category Cards
12. Brand Cards
Logo Card (Grid)
Watchguard
445 products
Ubiquiti
445 products
Lenovo ISG
445 products
TP-LINK
445 products
Brother
445 products
Yealink
445 products
APC
445 products
Aten
445 products