Balfin UI Kit
The BALFIN component library for the CMMS behind our retail and real-estate portfolio — TEG, QTU and Gallery by TEG. Plain HTML and CSS — design tokens, 60+ components and ready-made page patterns. No build step, no framework.
01
Foundations
Every value below is a CSS custom property — restyle the whole kit from :root.
Brand & semantic colours
Neutrals
Typography — Inter
| Specimen | Token | Usage |
|---|---|---|
| Cooling tower | --fs-4xl / 700 | Display, KPI values |
Chiller · TEG roof plant | --fs-3xl / 600 | Page title |
Quarterly plant service | --fs-xl / 600 | Card / section title |
| Body text at 14px is the default for tables, forms and detail rows. | --fs-md / 400 | Body, tables |
| Secondary text, hints and metadata | --fs-sm / 400 | Meta, hints |
| Overline label | --fs-xs / 600 | Column heads, labels |
Spacing scale
--sp-1 · 4px
--sp-2 · 8px
--sp-3 · 12px
--sp-4 · 16px
--sp-5 · 20px
--sp-6 · 24px
--sp-7 · 32px
--sp-9 · 48px
Radius & elevation
xs
sm
md
lg
full
xs
sm
md
lg
Icon set — Font Awesome 6
table-columns
wrench
gears
clipboard-check
building
location-dot
calendar-days
chart-line
triangle-exclamation
qrcode
boxes-stacked
user-group
file-lines
filter
gauge-high
screwdriver-wrench
02
Buttons
One base class, modifiers for tone and size.
Tones
<!-- primary / secondary / soft / ghost --> <button class="btn"><i class="fa-solid fa-plus"></i> New ticket</button> <button class="btn btn--secondary">Edit</button> <button class="btn btn--danger btn--sm">Deactivate</button>
Sizes, icon-only, state
Groups & record action bar
03
Status & badges
Operational state, priority and workflow labels.
Badges
Draft
Quarterly
Preventive
Completed
Pending approval
Overdue
Recurring
Archived
New
SLA breach
Chilled water
Operational status & priority
Working
In progress
Awaiting parts
Out of order
Decommissioned
Live telemetry
Critical
High
Normal
Low
TEG
HVAC
Overdue
LI
SE
DA
+5
Observers
04
Forms
Inputs, selectors and the Yes / No / N-A answer control used on inspections.
kW
Serial number is required for warranty claims.
Alerts are sent 60 days before expiry.
Checkbox & radio
Switches
Answer control
Drop files or click to upload
PDF, JPG, XLSX · max 25 MB
05
Cards & KPIs
Containers, stat tiles, meters and a dependency-free SVG chart.
76
Open tickets
12% vs last month
312
Scheduled inspections
4% vs last month
18.4K
Registered assets
across 3 businesses
5
SLA breaches
1 this week
Tickets opened this month
Completion by team
This month76%
Overall completion
214 of 312 scheduled inspections closed on time.
Mechanical team92%
External service64%
Cleaning contractor38%
Record header info grid
Business
TEG
Responsible
LI
Lorem Ipsum
Owner
Category
Chilled water
Inspection date
18 Aug 2026
Progress
51.5%
06
Tables
Sortable headers, row selection, grouped rows, bulk bar and pagination.
| Ticket | Asset | Business | Priority | Status | Assignee | Due | ||
|---|---|---|---|---|---|---|---|---|
| #4118Quarterly chilled-water plant service | Chiller Northwind NW-CH 420 | TEG | High | Pending approval | LIL. Ipsum |
18/08/2026 | ||
| #4102Escalator emergency stop — north atrium | Escalator ESC-04 Vertex VX-500 | QTU | Critical | Overdue | DAD. Amet |
12/08/2026 | ||
| #4127Replace filter set — food court AHU 4 | AHU 4 Airfleet AF-60 | Gallery by TEG | Normal | In progress | SES. Elit |
24/08/2026 | ||
| #4133Fire damper annual test — cinema block | Fire damper FD-12 | TEG | Low | Completed | MAM. Aliqua |
02/08/2026 |
Empty state
No spare parts linked yet
Link the parts this asset consumes so stock is reserved automatically when a ticket is raised.
Loading skeleton
Loading equipment history…
07
Detail lists
The label / value pattern used on every asset, ticket and inspection record.
General
Manufacturer
Northwind
Business
Category
Mechanical / Chilled water
Status
Active
Operation
Working
QR tag assigned
Yes
Lifecycle
Manufacture date
12/03/2025
Warranty start date
01/07/2025
Warranty expiry date
01/07/2029 34 months left
Operation end date
01/07/2035
Specifications
Cooling capacity
420 kW
Refrigerant
R-513A · 55 kg
09
Feedback
Alerts, toasts, tooltips, modal and drawer. All wired through data- attributes.
Alerts
Cycle plan 42 starts tomorrow
3 businesses are included. Assign responsible technicians before 08:00.
Report generated
Inspection-4118-Report.pdf is ready to download.
Warranty expires in 60 days
Chiller Northwind NW-CH 420 — renew the service contract to keep coverage.
2 tickets breached their SLA
Escalator emergency stop — north atrium is 6 days overdue.
Overlays & toasts
Progress vs. planned schedule
Accordion
Twelve pass / fail checks carried out on every quarterly visit — temperatures, mounts, strainers, dosing and alarms.
Four numeric readings, each with an allowed range and unit.
Two photos the technician must attach before the visit can be closed.
10
CMMS blocks
Purpose-built patterns: inspection checklist, permission matrix, activity feed and the annual schedule strip.
Inspection checklist
Plant room checks (12)
Record header supply and return temperatures
Compliant?
Inspect compressor anti-vibration mounts for play
Compliant?
Backwash the condenser strainer and log the pressure drop
Compliant?
Confirm the glycol concentration sits between 28% and 32%
Compliant?
Activity timeline
Inspection marked as done
All 16 checks answered. Summary: “No defects found on this visit”.
Reassigned to the mechanical team
Compressor B tripped on high pressure
Inspection #4118 created
Year planner strip
Chiller — quarterly service
AHU 4 — filter swap
Fire dampers — annual test
Roles & permissions matrix
|
Acronym
Description
|
Administrator |
Site manager |
Technician |
Contractor |
Tenant liaison |
Finance |
Helpdesk |
Auditor |
Regional lead |
Security |
Read-only |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Finance · Budgeting | |||||||||||
ModuleView Open the module |
|||||||||||
BudgetRead Read the annual spending plan |
|||||||||||
VendorEdit Add and edit vendor records |
|||||||||||
11
Mobile patterns
The technician app: launcher tiles and a record view that stacks the detail rows.
LI
Lorem Ipsum
Mechanical team
#4118 Inspection
Audit
35%
Quarterly chilled-water plant service /1
Status
Opened
Inspection date
18/08/2026 (5 days)
Business
TEG
Owner
Lorem Ipsum