Canaccom Design System
Complete component library and design tokens for the Canaccom platform
Typography
Headings
Heading 1 - 4xl Bold
Heading 2 - 3xl Bold
Heading 3 - 2xl Bold
Heading 4 - xl Semibold
Heading 5 - lg Semibold
Heading 6 - base Semibold
Body Text
Large paragraph text - 18px
Regular paragraph text - 16px
Small text - 14px
Extra small text - 12px
Medium weight text
Semibold weight text
Bold weight text
Color Palette
Primary Colors
Primary
#231f20
Secondary
#3a76b6
Accent
#3276B7
Status Colors
Success
#059669
Warning
#d97706
Danger
#dc2626
Info
#0ea5e9
Gray Scale
Gray 900
#111827
Gray 600
#4b5563
Gray 300
#d1d5db
Gray 100
#f3f4f6
Components
Buttons
Primary
Secondary
Status
Modals
Date Pickers
WYSIWYG Editor
Tables
| Booking ID | Client | Hotel | Status | Amount | Actions |
|---|---|---|---|---|---|
| BK-001 | ABC Corp | Hilton Downtown | Confirmed | $12,450 | |
| BK-002 | XYZ Inc | Marriott Airport | Pending | $8,750 | |
| BK-003 | Tech Solutions | Sheraton Centre | Draft | $15,200 |
Switches & Toggles
Basic Toggle
Colored Toggle
With Icons
Tabs
Overview Content
This is the overview tab content. Here you can see a summary of all your bookings and activities.
Bookings Content
This is the bookings tab content. Here you can manage all your current and past bookings.
Reports Content
This is the reports tab content. Here you can generate and view various reports.
Accordions
Multiple Open Items
You can cancel your booking up to 24 hours before check-in through your account dashboard or by contacting our support team.
We accept all major credit cards, PayPal, and bank transfers. Payment is processed securely through our encrypted payment gateway.
SaaS Dashboard Components
User Profile Cards
Progress Bars
File Upload
Upload Files
Drag and drop files here or click to browse
Search and Filters
Kanban Board
To Do (3)
Design new dashboard
Create wireframes and mockups
Update documentation
Review and update API docs
Test new features
QA testing for v2.0
In Progress (2)
Backend API
Implementing new endpoints
Database migration
Updating schema
Done (1)
User authentication
OAuth2 implementation
Calendar Widget
January 2024
Activity Feed
New booking confirmed for ABC Corp
2 minutes ago
New user registered - [email protected]
5 minutes ago
Payment pending for booking #BK-123
10 minutes ago
Report generated - Monthly Revenue Report
1 hour ago
User Management Table
| Member | Role | Status | Location | Activity | Actions | |
|---|---|---|---|---|---|---|
|
|
|
Pricing Cards
Starter
- Up to 10 bookings
- Basic support
- Email reports
Professional
- Up to 100 bookings
- Priority support
- Advanced analytics
- API access
Enterprise
- Unlimited bookings
- 24/7 support
- Custom integrations
- Dedicated account manager
Onboarding Steps
Complete Profile
Add your company information
Connect Payment
Add your payment method
Create First Booking
Set up your first group booking
Invite Team Members
Add your team to collaborate