Design Library
The shared visual language behind the Holiday Retirement community-management platform — colors, type, spacing, and the components that compose every screen. Built on Helvetica Neue, a teal & orange brand, and flat, calm surfaces.
Color Palette
Orange is the action color, reserved for CTAs and primary buttons. Teal is the interactive color — text links, icons, and controls. Everything else is a calm neutral or a status accent used sparingly.
Typography
Helvetica Neue throughout the interface; Georgia serif is reserved for the brand mark. Weights stay light — 400 and 500 carry most of the UI, 700 only for emphasis and labels.
Spacing Scale
An 8-point–based rhythm with a few half-steps for tight controls. Component padding and gaps step through this scale; section padding sits at the upper end.
Buttons
A single orange primary in three sizes carries every commit action. Ghost buttons and teal text links handle secondary and tertiary intent. Corners are rounded 8px; weight is bold.
Status Chips
Compact status indicators drawn from the status palette. Soft tints for in-table use; solid fills for stronger emphasis. Score badges read the same scale at larger sizes.
Forms & States
Flat, single-bordered fields on white. Teal signals focus; critical red signals error. Sharp corners keep inputs aligned to the grid.
Table
Uppercase labelled header over flat rows. Rows tint on hover; action icons reveal their intent color (edit→orange, delete→critical) on row hover.
| Updated | Resident | Unit | Move-in | Assigned To | Status |
|---|
Cards
Square metric cards summarize one area with an icon, a headline figure, and a primary action. Long row cards present scannable lists where the whole row is the target.
Icons
A single thin-stroke line set (1.3–1.6px) on a 24px grid. No fills. Stroke inherits the surrounding text color so icons recolor for hover and status.
Upload Files
A dashed teal dropzone with click-or-drag affordance, backed by a file list that shows upload progress, completion, and per-file removal. Try dragging a file in or clicking to browse.