TowerCapture WORKING NAME
UI style guide · v0.1 prototype · Jovitech Solution Sdn Bhd · field data capture for lattice towers, monopoles & minimasts
Design principles
Light theme by default, near-black ink (#0B1220) on white, body text ≥ 17px, bold labels. All text pairs meet WCAG AA; key pairs exceed AAA (7:1). Dark mode for dusk / night work.
Primary targets 56px, nothing below 48px. Steppers, chips and pickers replace typing; ± buttons sit at the edges of each control so a gloved thumb can't miss them.
Network pill visible on every screen with queued-change count; home banner has a one-tap Sync. Everything saves to the device first.
Inline hints in plain words with an icon and colour (never colour alone): ✓ ok, ⚠ check, ✕ blocking. Sums are checked against declared height.
Every value carries its unit (m, mm, °). Heights in m to 0.1/0.5 m, diameters & widths in mm, azimuth in ° true north.
Defects and appurtenances start from a photo, auto-tagged with GPS, time and heading; required photos are tracked per section.
Colour Brand red / blue sampled from the Jovitech logo PNG (pixel average)
Typography All bundled OFL fonts (assets/fonts) — works offline
Display · Barlow Semi Cond 700 / 28Site checklistTitle · Barlow Semi Cond 700 / 22Geometry · MonopoleValue · Barlow Semi Cond 700 / 2445.0m · 3750mmSection · Barlow 700 / 15 capsPanels / levelsBody · Atkinson Hyperlegible 400 / 17Sections sum to declared height.Label · Atkinson 700 / 15Face width at topHelp · Atkinson 400 / 14Ø measured with tape (circumference ÷ π)ID · JetBrains Mono 700 / 15JHR-0001 · ANT-A1 · S2 · P3Numbers in tables, sketches and steppers use Barlow (plain zero) so “0” is never confused with the diameter sign “Ø”.