Design system
Every screen in Survisio is assembled from these components. Labels are written in plain words, controls are large enough to tap on site, and status is never shown by colour alone.
Brand identity
One flat interlocking S/aperture identity, prepared for application, document and secondary brand contexts.
Large
Navigation
Mobile
App icon
Favicon
Monochrome
Colour
Deep teal, white and cool off-white, with action teal reserved for important actions.
Deep teal
#123F46
Action teal
#00A6A6
Cyan accent
#27C7D4
Blue charcoal
#172B31
Slate text
#64767A
Off-white
#F5F8F8
Border
#DCE6E6
Success
#239B68
Warning
#E5A62B
Typography
Body text is 16px or larger everywhere, with comfortable line height and no ultra-light weights.
Page title
Section title
Body text. Survisio is written to be read for long periods, on a phone in a cold hallway and on a large screen at a desk. Sentences stay short and labels say exactly what a control does.
Supporting text, used sparingly for help and metadata.
Buttons
Primary controls are 44px tall. Icons support labels rather than replacing them.
Form controls
Every field has a visible label, optional help text and clear validation.
Your own reference for this piece of work.
Type or dictate. Your original notes are always kept.
Report types are loaded from templates in a later phase.
Status and progress
Status always pairs a word with an icon, never colour alone.
Report completeness
45% of sections started (example only)
Lists, tabs and dialogs
Sample job — Harbour Works
12 Harbour Road, Bristol
Inspection 4 March · Sample data
Sample job — Mill Lane
8 Mill Lane, Cardiff
Inspection 9 March · Sample data
Jane Okafor
Surveyor · sample person