Tibeb Shop β UI Style Guide
The single source of truth for colors, typography, and reusable components. Every new page should be built using these approved patterns.
Colors
Primary (Royal Blue)
Accent (Orange CTA)
Gold
Success (Green)
Sale (Red)
Background
Orange is reserved exclusively for primary CTAs (Add to Cart, Buy Now, Register). Gold marks verified/premium status. Green = success/in-stock. Red = sale/errors only.
Typography
Heading XL β Poppins Bold
Heading L β Poppins Bold
Heading M β Poppins Semibold
Body text β Inter Regular. Used for paragraphs and descriptions.
Small / muted text β Inter Regular.
Buttons
Badges
Standardized status badges:
Standard Icons
Cart / Buy
Chat
Wishlist
Reviews
Shipping
Worldwide
Secure Checkout
Alerts
Info
Success
Warning
Error
Forms
Cards
Total Orders
128
Verified Sellers
42
Revenue
12,400 ETB
Pending
6
Tables
| Product | Price | Status |
|---|---|---|
| Habesha Kemis | 2,500 ETB | Active |
| Netela | 900 ETB | Sold |
Spacing & Radius
Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px Β· Border radius: 12px on all cards, buttons, and popups.
