Typography: Fira Sans throughout — headings SemiBold/Bold, tracking -0.02em, sentence case, flush-left ragged-right, never centred; small-caps Fira Sans for section labels and table headers (letter-spacing 0.08em, 12–13px). Numbers in tabular figures; rupee figures carry the largest weight in any row. Scale 1.25 modular with display jumps: 20 / 22 / 28 / 36 / clamp(44px, 8vw, 112px) hero; body 17px/1.6, table 15px, micro-label 12px small caps. No Inter, Roboto, Poppins or system-ui.
Shape language: rectilinear and honest — 2px radius on inputs and buttons, 0px on cards and tables, 1px hairline rules as the main structural device, 6px colour-coded left borders marking project category and status. Pictograms on a 24px grid, 2px stroke, always with text labels. No soft shadows beyond a single 1px offset line; status chips are rectangles with 2px radius.
Imagery: real, current, geotagged site photography is the evidence layer — before/after photos of roads, drains, streetlights, waste bins and water points, full-bleed inside ruled frames with a caption bar carrying date, district and AI detection confidence. AI detection panels overlay thin signal-red bounding boxes with small-caps labels and confidence scores. Maps are schematic and line-coded by department colour, not satellite decoration. No stock people, no illustration, no gradients. Sample demonstration data is clearly labelled fictional.
Layout: 12-column ruled grid with a persistent 240px left sidebar carrying numbered navigation (01 Overview, 02 Funds, 03 Projects, 04 Visual Evidence, 05 Complaints, 06 Map) and a top strip with district selector and role. Content is tabular: fund rows aligned label-left / value-right on a shared baseline, horizontal rules between every row. Mobile collapses to one column with the sidebar as a numbered drawer; tables become stacked label/value pairs, never horizontally clipped. Headlines, labels, numbers and controls stay whole at 375px, 768px and 1280px.
No comments yet. Be the first!