HMIS Design System
This page is the master reference for the HMIS website. It defines the approved colours, typography, spacing, buttons, cards, icons and reusable layouts that create a consistent, professional experience across every page.
Brand Colours
These are the approved core colours for the HMIS website. Use these consistently for headings, buttons, icons, backgrounds and highlights.
Navy
#0B2F5B
Primary headings, navigation, footer
Blue
#1E73BE
Buttons, icons, links
Light Grey
#F5F7FA
Section backgrounds, cards
Gold
#CFA64A
Dividers, highlights, accents
UI Components
These are the standard components used throughout the HMIS website. Reusing these elements creates a consistent user experience and reduces design time for future pages.
Primary Button
Main call-to-action for quote requests, contact sections and key enquiry prompts.
hmis-ds-button-primary
Secondary Button
Lower-emphasis action for service pages, guides and supporting links.
hmis-ds-button-secondary
Typography
Montserrat is the standard HMIS website font. Use strong navy headings, clear body text and generous line spacing for a polished, professional feel.
Hero Heading
Specialist Insurance Solutions
54px / 700 / #0B2F5B
Section Heading
Insurance That Moves With You
42px / 700 / #0B2F5B
Card Heading
Tailored Cover
26px / 700 / #0B2F5B
Body TextClear, simple wording helps clients quickly understand their options and take the next step with confidence.
18px / 400 / #5D6775
LAYOUT & SPACING
Consistent spacing and layout create a balanced, professional website. These standards should be used throughout every HMIS page.
Maximum Content Width
1180px
Standard width for all website sections.
Section Spacing
90px
Top and bottom spacing between major sections.
Card Padding
48px
Internal padding used on all feature cards.
Border Radius
22px
Standard radius for cards and images.
Button Radius
8px
Used on all buttons across the website.
Shadow
0 12px 30px
Standard shadow for all floating cards.
SECTION TEMPLATES
These reusable section layouts form the building blocks of the HMIS website. Use them to keep every page consistent, polished and easy to build.
Hero Section
Used at the top of main service pages with a strong heading, short intro and clear call-to-action.
hmis-hero
Two Column Story
Used for image and text sections that explain the client problem or introduce a key service.
hmis-template-two-column
Service Cards
Used to present insurance solutions, benefits, client types or key areas of expertise.
hmis-template-service-cards
CTA Banner
Used near the bottom of pages to encourage quote requests, contact enquiries or next steps.
hmis-template-cta
Service Hero
Used at the top of service pages such as Travel Insurance, Corporate Insurance and Sports Insurance. Includes a strong heading, short introduction, CTA button and supporting image.
PAGE BLUEPRINT
Every HMIS page should follow a consistent structure. This creates a familiar user experience, improves readability and strengthens the HMIS brand.
Hero
Large headline, supporting text and a primary call-to-action.
Introduction
Explain the client’s problem and how HMIS provides the solution.
Trust & Benefits
Build credibility with experience, key benefits and differentiators.
Services
Present the available insurance solutions using service cards.
Feature Story
Use a two-column image and text section to tell the client’s story.
Call to Action
Finish with a strong invitation to request a quote or contact HMIS.