Eratronix Design System
A comprehensive design system for the Eratronix e-commerce platform. Built with Poppins typography, teal primary actions, orange commerce CTAs, and clean card-based UI components.
Brand Essence
Eratronix delivers premium electronics with trust, speed, and value.
♡ Trustworthy
▣ Fast Delivery
✓ Great Value
01Colors
Primary
Primary
#00B1C9
Primary Dark
#00899E
Primary Light
#D1F0F4
Secondary / Accent
Accent
#FF8A00
Accent Dark
#E65F00
Accent Light
#FFF4E6
Neutral
900
#333333
500
#828282
50
#F8F8F8
Semantic
Success
#28A745
Warning
#FFC107
Danger
#DC3545
Functional
Success Light
#E8F5E9
Warning Light
#FFF8E1
Error BG
#FFF0F0
02Typography
Type Scale
H1 Heading
Poppins SemiBold · 30px · 1.2
H2 Heading
Poppins Medium · 24px · 1.3
H3 Heading
Poppins Medium · 20px · 1.4
H4 Heading
Poppins Regular · 18px · 1.5
H5 Heading
Poppins Medium · 14px · 1.4
H6 Heading
Poppins SemiBold · 13px · 1.4
Body XL
Poppins Medium · 17px · 1.6
Body Default
Poppins Regular · 14px · 1.6
Text Styles
Large Paragraph
Detail of the product can have up to 2 lines with ellipsis for better UI consistency.
Default Paragraph
Detail of the product can have up to 2 lines with ellipsis for better UI consistency.
Link Default
This is a link text
Disabled Text
Detail of the product can have up to 2 lines with ellipsis.
03Buttons
04Components Preview
Alert / Notification
✓ Your information
has been updated.
has been updated.
Success Alert
Input Field
Default State
Product Card
🎧
Logitech G Pro X Wireless Headset
$159.98
Shopping Cart (2)
Product Name
$600.00
$600.00
Product Name
$400.98
$400.98