Use a circular container for standalone icon actions.
HSG Design System · v1.0
Built for work
at any height.
A practical interface framework for Hawk Services Group and its family of specialist brands.
01Foundations
A focused palette with one clear signal colour.
Colour
Core colours observed on the current HSG website, extended into practical interface neutrals and states.
Typography
A modern grotesk stack keeps HSG direct, legible, and technical without feeling cold.
Display / 80Any height.
Heading 1 / 56
One capable group.
Heading 2 / 40
Safety is our foundation.
Heading 3 / 28
Nationwide presence.
Body large / 20
Specialist teams, equipment, and expertise for complex work at height.
Body / 16
Clear reporting keeps clients informed from site assessment to completion.
Label / 12Project status · Active
Spacing & shape
An 8px base grid, restrained panel radii, and full pills for actions and compact metadata.
Spacing scale
8
16
24
32
48
64
Radius scale
8px · fields
16px · cards
24px · features
999px · actions and tags
Icon style
↗＋✓↓
Bold geometric silhouettes, selective open strokes, and a 24px default size.
02Icon system
Operational icons with a clear HSG character.
48 original SVGs
Bold geometric silhouettes for quick recognition, with open strokes where meaning requires them. Every icon uses currentColor and a consistent 24 × 24 grid.
24 × 24 gridcurrentColor16 to 32px UI size4 categories
Drone inspectionService report
Use the full HSG pill when an icon is paired with text.
03Components
Clear controls with unmistakable hierarchy.
Buttons
All text actions use the HSG pill. Circular icon buttons are the only exception.
Tags & status
Pill tags work well for company, service, filter, and status metadata.
HSGBuilding washRope accessDrone inspection
CompleteSyncedWarningAlertDraft
Form controls
Fields use strong labels, generous targets, and visible focus states.
Navigation
Use simple language, high contrast, and an active-state pill only where orientation matters.
Menus & popovers
Use lightweight surfaces for short choices. Preserve the HSG pill for selected filters and reserve red for irreversible actions.
04Patterns
Reusable building blocks for operational work.
Rope access01
Complex access.
Specialist capability.
Explore services ↗
Service reports03
Clear evidence.
Better decisions.
See reporting ↗Live projectsOn track
24+8% from last month
Safety actionsThis week
92%resolved
23 of 25 actions closed
Today on site
205 Queen StreetOff The Ledge · 6 crew
Justice CentreWCC · 4 crew
L’OréalBWS · 3 crew
Service report complete
Photos and site notes are ready to share.
Weather window changed
Review tomorrow’s high-wind forecast.
Site alert requires action
Review access controls before the crew arrives.
Service report synced
The latest site data is connected and current.
No incidents reported
Safety observations and incidents will appear here.
Building services at heightAny height.
Any height.
Every capability.
One group gives you access to New Zealand’s leading specialists in exterior cleaning, rope access, and height safety.
115Expert technicians
80+Collective years serving Kiwi businesses
2,000+Training hours each year
24/7Nationwide support