Get Started

WaslaCare Style Guide

Design System Reference & Component Library

Colors

WaslaCare brand palette and semantic colors.

Brand Colors

Primary (Orange)
#F97316
Secondary (Light Orange)
#FB923C
Gradient
135deg, #F97316 to #FB923C
Accent (Purple)
#8B5CF6

Background & Text

BG Dark
#0A1628
BG Card
#0f1b2d
#FFFFFF
Text Primary
#FFFFFF (dark) / #0F172A (light)
#94A3B8
Text Secondary
#94A3B8

Semantic Colors

Success
Warning
Danger
Info

Typography

Outfit (English) + Tajawal (Arabic). Weights: 300-800.

Heading 1 — The quick brown fox

font-weight: 800, clamp(2rem, 5vw, 3.5rem)

Heading 2 — The quick brown fox

font-weight: 700, 2rem

Heading 3 — The quick brown fox

font-weight: 600, 1.5rem

Heading 4 — The quick brown fox

font-weight: 600, 1.25rem
Heading 5 — The quick brown fox
font-weight: 600, 1.1rem
Heading 6 — The quick brown fox
font-weight: 600, 1rem

Body text — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

font-weight: 400, 1rem, line-height: 1.6

Small text — Used for captions, labels, timestamps, and secondary information throughout the interface.

font-weight: 400, 0.85rem

Buttons

Primary gradient, glass outline, and size variants.

Button Types

Primary Button Glass / Outline Disabled

Button Sizes

Small Default Large

Buttons with Icons

Add Service Download Next Step

Cards

Feature cards, stat cards, and glass cards used throughout WaslaCare.

Feature Card

Feature Card Title
This is a standard feature card with an icon, title, and description. Hover to see the lift effect.
Another Feature
Cards use var(--wasla-bg-card) background with glass border and hover glow shadow.

Stat Card

1,234
Total Bookings
12.5%
SAR 45K
Revenue
8.3%
892
Active Providers
2.1%

Glass Card

Glass Card

Uses backdrop-filter: blur() with semi-transparent background. Ideal for overlaying content on visual backgrounds.

Forms

Input fields, selects, textareas, and toggle components.

Enabled

Badges

Status badges, tier badges, and vendor badges.

Status Badges

Active Pending Completed Cancelled Draft

Tier Badges

Tier 1 Tier 2 Tier 3

Vendor Badges

Verified Featured KSA

Icons

Bootstrap Icons used throughout the WaslaCare platform.

Service Icons

bi-snow
bi-droplet
bi-lightning
bi-stars
bi-paint-bucket
bi-bug

UI Icons

bi-shield-check
bi-calendar-check
bi-lock
bi-geo-alt
bi-person-check
bi-chat-dots
bi-bell
bi-graph-up

Additional Components

Escrow notice, FAQ accordion, filter chips, and star rating.

Escrow Notice

Escrow Protected

Your payment is held securely until you confirm satisfaction.

Filter Chips

Star Rating

4.5 out of 5 (128 reviews)

FAQ Accordion

Click the question to expand and reveal the answer. Click again to collapse. Uses the .faq-item, .faq-question, and .faq-answer classes.
Yes, the .faq-answer div can contain any HTML content including images, lists, and other components.
We accept all major credit cards (Visa, Mastercard), Mada, Apple Pay, STC Pay, and digital payment methods. All transactions are secured with bank-level encryption.
Yes, you can cancel or reschedule your booking up to 24 hours before the scheduled time without any charges. Cancellations within 24 hours may incur a small fee.

Tabs

Tab navigation with dynamic content panels.

Service Overview

Our professional AC maintenance service includes complete inspection, cleaning, filter replacement, and performance testing. We ensure your system runs efficiently all year round.

Navigation Components

Links, breadcrumbs, and pagination.

Navigation Links

Default Link Active Link Disabled Link

Breadcrumb

Pagination

Modal

Overlay dialog for important actions and information.

Book AC Maintenance

Select your preferred date and time for the service. Our certified technicians will arrive on schedule.

Toast Notifications

Temporary notification messages for user feedback.

Success
Booking confirmed successfully!
Error
Unable to process request.
Warning
Your session will expire in 5 minutes.
Info
New service available in your area.

Provider Cards

Cards used to display service provider profiles.

AH
Ahmed's Home Services
4.9 (127 reviews)
Verified Featured
Responds in ~30 minutes
Jeddah and surrounding areas
View Profile
KS
Kingdom Services Co.
4.8 (89 reviews)
Verified KSA
Responds in ~1 hour
Riyadh Region
View Profile

Section Layouts

Pre-built section templates for common page layouts.

Hero Section

Your Trusted Home Services Partner

Connect with verified professionals for all your home service needs.

Get Started Browse Services
500+ Services 1000+ Providers 4.9 Rating

Trust Strip

Verified Pros
Secure Payments
60s Booking
Satisfaction Guaranteed

Spacing & Design Tokens

Spacing scale and design token reference for consistent layouts.

Spacing Scale (4px base)

xs 4px
sm 8px
md 16px
lg 24px
xl 32px
2xl 48px
3xl 64px

Border Radius

4px (sm)
8px (md)
12px (lg)
16px (xl)
50% (full)

CSS Variable Reference

--wasla-accent: #F97316
--wasla-gradient: linear-gradient(135deg, #F97316, #FB923C)
--wasla-bg-dark: #0A1628
--wasla-bg-card: #0f1b2d
--wasla-bg-input: rgba(255,255,255,0.05)
--wasla-glass-border: rgba(255,255,255,0.08)
--wasla-text-primary: #FFFFFF
--wasla-text-secondary: #94A3B8
--wasla-text-muted: #64748B
--wasla-shadow-glow: 0 0 20px rgba(249,115,22,0.15)