Design System
UI components and style guide for DoorBird Installers
Brand Colors
DoorBird Blue
#1e40af
Blue Light
#4a6188
Orange (CTA)
#ea580c
Orange Dark
#c2410c
Teal (Links)
#0d9488
Gray Background
#f9fafb
Status Colors
Success
#16a34a
Error
#dc2626
Warning
#eab308
Info
#4a6188
Typography
H1 - Page Title
The quick brown fox jumps
H2 - Section Title
The quick brown fox jumps
H3 - Subsection
The quick brown fox jumps
H4 - Card Title
The quick brown fox jumps
Body Large
The quick brown fox jumps over the lazy dog. This is body text used for descriptions and introductory paragraphs.
Body Regular
The quick brown fox jumps over the lazy dog. This is the standard body text used throughout the site.
Body Small
The quick brown fox jumps over the lazy dog. Used for captions and secondary information.
SKU / Code
DBI-D2101V-STAI-V2A
Buttons
Primary Buttons (Orange - CTA)
Secondary Buttons (Outline)
Blue Buttons (Brand)
Text Links
Badges & Labels
Category Badges
Status Badges
Promo Badges
Filter Chips (Active)
Form Elements
Cards
Basic Card
This is a basic card component with padding and rounded corners.
Product Card
Product description goes here.
$1,299.00
Featured Card
Gradient background card for special content.
Alerts & Notifications
Success
Your order has been placed successfully.
Error
There was a problem processing your payment.
Warning
This item is running low on stock.
Info
Free shipping on orders over $500.
Trust Badges
Pricing Display
Regular Price
$1,299.00
Sale Price
$1,099.00
$1,299.00
From Price (Multiple Variations)
From $999.00
Breadcrumb
Contact Information
Page Header
Used on Products, Blog, Categories pages
Page Title Here
Description text that explains what this page is about and what the user can expect to find.
Search Input
Used in filter bars on Blog and Products pages
View Toggle
Grid/List view switcher - used on Blog and Products pages
Style 1: Square Buttons (Current)
Style 2: Pill Toggle
Style 3: Segmented Control
Style 4: Underline Indicator
Style 5: Minimal Ghost
Style 6: Card Style with Labels
Results Count
Shows number of items - used in filter bars
Sort Dropdown
Used on Products page filter bar
Checkbox Filter Group
Used in Products page sidebar filters
Brand
Product Type
Sidebar Widgets
Categories
Popular Tags
Need Expert Help?
Our certified installers are ready to assist with your DoorBird installation
Contact UsNewsletter Widget
Stay Updated
Get tips delivered to your inbox
Complete Filter Bar
Full filter bar as used on Blog page
Full filter bar as used on Products page