Design System
Hipcall
Marka Rehberi
Color palette, typography, and component reference for building consistent Hipcall interfaces.
01
Logo
The Hipcall logo in horizontal and icon-only formats. Use the light version on light backgrounds and the dark version on dark backgrounds.
Horizontal - with text
Light backgrounds - blue logo
Dark backgrounds - white logo
Icon - without text
On white
On primary-900
On base-200
On gray-800
Available files
horizontal-light.svg
horizontal-dark.svg
icon-light.svg
icon-dark.svg
02
Color Palette
Each scale runs from deep (900) to light (50). The 600 step is the primary reference for each color group.
Primary
Core brand color - trust, authority, professionalism900
#02315A
700
#024988
600
#025196
500
#1B62A0
400
#3574AB
300
#4e7dc7
200
#80A7CA
100
#B3CADF
50
#D8E4EE
Secondary
Accent warmth - highlights, CTAs, energy900
#402902
600
#FCBA4C
500
#FDC870
400
#FDCF82
300
#FDD694
200
#FDDCA5
100
#FDE2B6
50
#FEEAC9
Danger
Errors, destructive actions, critical alerts900
#8D1C21
600
#B9242B
500
#C03A40
400
#C75055
300
#CE666B
200
#DC9295
100
#EABEC0
50
#F5DEDF
Warning
Caution states, pending actions, attention900
#704000
600
#F08700
500
#F19319
400
#F39F33
300
#F5AB4D
200
#F8C380
100
#FBDBB3
50
#FDEDD9
10
#FEF4E3
Success
Positive outcomes, confirmations, active states900
#2F5606
600
#447D08
500
#578A21
400
#699739
300
#7DA453
200
#A2BE84
100
#C7D8B5
50
#E3ECDA
10
#EBF1E5
Gray
Neutrals - text, borders, backgrounds (Slate)950
#020617
900
#0f172a
800
#1e293b
700
#334155
600
#475569
500
#64748b
400
#94a3b8
300
#cbd5e1
200
#e2e8f0
100
#f1f5f9
50
#f8fafc
03
Theme
Semantic colors mapped to the Hipcall palette. These drive all daisyUI components.
primary
#025196
secondary
#FCBA4C
accent
#4e7dc7
neutral
#1e293b
info
#3574AB
success
#447D08
warning
#F08700
error
#B9242B
Buttons
Badges
Alerts
Cards
Phone System
Cloud-based VoIP with smart call routing and IVR menus.
Call Centre
Manage queues, monitor agents, and track performance in real time.
Integrations
Connect with your CRM, helpdesk, and 100+ other tools.
Form Controls
04
Typography
Montserrat is our primary typeface across all weights. Clean geometry with humanist warmth.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Character Set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? ! @ # %
05
Product Icons
Custom icons for each Hipcall product. Monochrome SVGs that inherit color via currentColor - pair with the assigned semantic color.
Business Phone System
Cloud VoIP with IVR menus, intelligent call routing, call recording, voicemail, and local numbers in 50+ countries.
product-phone-system Call Centre Software
Call queues, real-time agent monitoring, wallboards, and performance analytics.
product-call-center Business SMS
Two-way business texting with templates and workflow automation.
product-sms WhatsApp Business
Manage WhatsApp conversations alongside calls and tickets.
product-whatsapp Live Chat
Website chat widget with automatic agent routing and canned responses.
product-live-chat Sales Management
Pipeline tracking, deal management, and automated follow-ups.
product-sales Customer Service
Ticketing, knowledge base, and SLA management.
product-customer-service Size Reference
On Dark Background
Icon files
Located in src/icons/ - used via <Icon name="product-*" />
product-phone-system.svg
product-call-center.svg
product-sms.svg
product-whatsapp.svg
product-live-chat.svg
product-sales.svg
product-customer-service.svg
Sector Icons
Industry-specific icons for sector landing pages. Same monochrome SVG convention - inherit color via currentColor.
Accounting
sector-accounting Association
sector-association Automotive
sector-automotive Chemical & Pharmaceutical
sector-chemical Consulting
sector-consulting E-commerce
sector-ecommerce Education
sector-education Energy
sector-energy Engineering & Architecture
sector-engineering Finance
sector-finance Food
sector-food Healthcare
sector-healthcare Insurance
sector-insurance Legal
sector-legal Logistics
sector-logistics Manufacturing
sector-manufacturing Media
sector-media Outsourcing
sector-outsourcing Public
sector-public Real Estate
sector-realestate Retail
sector-retail Service
sector-service Technology
sector-technology Textile
sector-textile Tourism
sector-tourism Transportation
sector-transportation On Dark Background
Sector icon files
Located in src/icons/ - used via <Icon name="sector-*" />
sector-accounting.svg
sector-association.svg
sector-automotive.svg
sector-chemical.svg
sector-consulting.svg
sector-ecommerce.svg
sector-education.svg
sector-energy.svg
sector-engineering.svg
sector-finance.svg
sector-food.svg
sector-healthcare.svg
sector-insurance.svg
sector-legal.svg
sector-logistics.svg
sector-manufacturing.svg
sector-media.svg
sector-outsourcing.svg
sector-public.svg
sector-realestate.svg
sector-retail.svg
sector-service.svg
sector-technology.svg
sector-textile.svg
sector-tourism.svg
sector-transportation.svg
06
Feature Category Icons
Category-level icons representing each feature group. Used for navigation, section headers, and feature landing pages. Same monochrome SVG convention - currentColor inheritance.
Business Phone System
35 features
feature-category-business-phone-system Call Centre
13 features
feature-category-call-centre Customer Service
2 features
feature-category-customer-service Sales Management
1 features
feature-category-sales-management CRM & Contact Management
1 features
feature-category-crm Conversations
2 features
feature-category-conversations Tasks
1 features
feature-category-tasks Reports & Analytics
3 features
feature-category-reports Integration
7 features
feature-category-integration Client Apps
5 features
feature-category-client-apps Security
4 features
feature-category-security On Dark Background
Category icon files
Located in src/icons/ - used via <Icon name="feature-category-*" />
feature-category-business-phone-system.svg
feature-category-call-centre.svg
feature-category-customer-service.svg
feature-category-sales-management.svg
feature-category-crm.svg
feature-category-conversations.svg
feature-category-tasks.svg
feature-category-reports.svg
feature-category-integration.svg
feature-category-client-apps.svg
feature-category-security.svg
07
Feature Icons
Individual icons for all 74 Hipcall features, grouped by category. Monochrome SVGs using currentColor - designed to work at 16–48px.
Business Phone System
35 features
Interactive Voice Response (IVR)
feature-ivr Call Queuing
feature-call-queuing Ring Groups
feature-ring-groups Smart Call Routing
feature-smart-call-routing Call Forwarding
feature-call-forwarding Return Call Routing
feature-return-call-routing Contact-Based Routing
feature-contact-based-routing Missed Call Notifications
feature-missed-call-notifications Auto Callback
feature-auto-callback Missed Call Return Tracking
feature-missed-call-return-tracking Call Detail Records (CDR)
feature-cdr Call Recording
feature-call-recording Business Hours
feature-business-hours Extensions
feature-extensions Conference Calling
feature-conference-calling Voicemail
feature-voicemail Denylist
feature-denylist International Numbers
feature-international-numbers FCT – GSM Integration
feature-fct-gsm Concurrent Calls
feature-concurrent-calls Call Recording Backup
feature-call-recording-backup Hold Music
feature-hold-music Queue Position Announcement
feature-queue-announcement Outbound Caller ID
feature-outbound-caller-id Text-to-Speech (TTS)
feature-tts-announcements Inter-Branch Free Calls
feature-inter-branch-calls Local & Global Numbers
feature-local-global-numbers Outbound Call Announcement
feature-outbound-call-announcement Multiple Greetings
feature-multiple-greetings Call Pickup
feature-call-pickup Ring Together
feature-ring-together Multi-Language Announcements
feature-multi-language-announcements SMS Module
feature-sms WhatsApp Integration
feature-whatsapp Call Tagging
feature-call-tagging Call Centre
13 features
After Call Work (ACW)
feature-after-call-work QA Scorecard
feature-qa-scorecard Call Coaching & Whispering
feature-call-coaching Post-Call Survey (CSAT)
feature-post-call-survey Do Not Disturb (DND)
feature-dnd Queue Statistics
feature-queue-statistics Per-Extension Statistics
feature-per-extension-statistics Live Queue Dashboard
feature-live-queue-dashboard SLA Measurement
feature-sla-measurement Operator Busy Panel
feature-operator-busy-panel Live Monitoring TV
feature-live-monitoring-tv Disposition Codes
feature-disposition-codes Campaigns (Power Dialer)
feature-campaigns Customer Service
2 features
Knowledge Base
feature-knowledge-base Ticketing System
feature-ticketing Sales Management
1 feature
Sales Pipeline & Deal Tracking
feature-sales-pipeline CRM & Contact Management
1 feature
Contact Centre Module
feature-contact-centre Conversations
2 features
WhatsApp Business Inbox
feature-whatsapp-inbox Live Chat
feature-live-chat Tasks
1 feature
Task Management
feature-task-management Reports & Analytics
3 features
Number Reports
feature-number-reports Agent Reports
feature-agent-reports Inbox Reports
feature-inbox-reports Integration
7 features
Integration Marketplace
feature-integration-marketplace Computer Telephony (CTI)
feature-cti Insight Card
feature-insight-card REST API
feature-rest-api Webhooks
feature-webhooks SIP Connections
feature-sip-connections Text-to-Speech Tool
feature-tts-tool Client Apps
5 features
Mobile App (iOS & Android)
feature-mobile-app WebRTC Softphone
feature-webrtc-softphone Web Interface
feature-web-interface Web Push Notifications
feature-web-push-notifications Click to Dial
feature-click-to-dial Security
4 features
Call Encryption (SRTP)
feature-call-encryption Two-Factor Auth (2FA)
feature-two-factor-auth Role-Based Access (RBAC)
feature-rbac IP Restrictions
feature-ip-restrictions All Feature Icons - Dark Background
Feature icon files
Located in src/icons/ - used via <Icon name="feature-*" />
feature-ivr.svg
feature-call-queuing.svg
feature-ring-groups.svg
feature-smart-call-routing.svg
feature-call-forwarding.svg
feature-return-call-routing.svg
feature-contact-based-routing.svg
feature-missed-call-notifications.svg
feature-auto-callback.svg
feature-missed-call-return-tracking.svg
feature-cdr.svg
feature-call-recording.svg
feature-business-hours.svg
feature-extensions.svg
feature-conference-calling.svg
feature-voicemail.svg
feature-denylist.svg
feature-international-numbers.svg
feature-fct-gsm.svg
feature-concurrent-calls.svg
feature-call-recording-backup.svg
feature-hold-music.svg
feature-queue-announcement.svg
feature-outbound-caller-id.svg
feature-tts-announcements.svg
feature-inter-branch-calls.svg
feature-local-global-numbers.svg
feature-outbound-call-announcement.svg
feature-multiple-greetings.svg
feature-call-pickup.svg
feature-ring-together.svg
feature-multi-language-announcements.svg
feature-sms.svg
feature-whatsapp.svg
feature-after-call-work.svg
feature-qa-scorecard.svg
feature-call-coaching.svg
feature-post-call-survey.svg
feature-dnd.svg
feature-queue-statistics.svg
feature-per-extension-statistics.svg
feature-live-queue-dashboard.svg
feature-sla-measurement.svg
feature-operator-busy-panel.svg
feature-live-monitoring-tv.svg
feature-call-tagging.svg
feature-disposition-codes.svg
feature-campaigns.svg
feature-knowledge-base.svg
feature-ticketing.svg
feature-sales-pipeline.svg
feature-contact-centre.svg
feature-whatsapp-inbox.svg
feature-live-chat.svg
feature-task-management.svg
feature-number-reports.svg
feature-agent-reports.svg
feature-inbox-reports.svg
feature-integration-marketplace.svg
feature-cti.svg
feature-insight-card.svg
feature-rest-api.svg
feature-webhooks.svg
feature-sip-connections.svg
feature-tts-tool.svg
feature-mobile-app.svg
feature-webrtc-softphone.svg
feature-web-interface.svg
feature-web-push-notifications.svg
feature-click-to-dial.svg
feature-call-encryption.svg
feature-two-factor-auth.svg
feature-rbac.svg
feature-ip-restrictions.svg