Wardline is the single front door to Sheffield city services: twenty-eight wards, six departments, one app, one letter template, one sign. The system has one rule, and the rule is a prohibition: no element may pretend to sit above the page. Rank is carried by area, weight and colour, and by nothing else.
A solid department bar butted hard against the wordmark, no gap, no rounding. The bar takes the colour of whichever department is speaking. Six departments, six marks, one construction.
Wordmark at 30, 19 and 12 px · bar width scales with the cap height · six department colours
The rule is generative. Order the six services by what this ward needs most and the tile areas are computed, not drawn. Rank one gets four columns by two rows; rank two gets a quarter of that; the tail gets a strip each. No designer picks a size.
Click any tile to promote it to rank one
Promote a service and every tile below it moves down one. Area is a function of position in this list.
Each department owns a single flat colour, all six chosen to clear 4.5:1 against white text at body size. No tints, no shades, no hover states that lighten: a tint would read as a fourth department nobody has been told about.
#1D6FB8Tenancies, repairs, homelessness. The default when no department is named.#1E7B4DBins, bulky collection, tips. Carries the van livery.#C05119Highways, parking, tram works. The only colour permitted on street furniture.#6B3FA0Admissions, transport, term dates.#B32338Public health and adult social care. Also the deadline band on letters.#0F6E77Premises, taxis, markets, street trading.Archivo throughout, at four weights and five sizes. The steps are far apart on purpose: with no shadow and no rule to lean on, a size difference has to be unmistakable or it does no work.
Every dimension in the system is a multiple of eight: padding, gaps, bar widths, row heights, the tile grid. One number, applied without exception, is what replaces the shadow as the thing holding the page together.
57 modules across, 25 down · every edge lands on the grid
Five artefacts, one construction. Each is a stack of full-bleed bands: no card sits on a ground, no panel is inset, no corner is rounded. The same six colours do the sorting on a phone, a letter, a van and a kiosk.
Wardline app · home, ward 14
Letter · health red carries the date, always
Tram track renewal between Cambridge Street and Furnival Gate. Shops and the market are open throughout. Buses are diverted via Arundel Gate.
Site hoarding · 2400 x 1600 mm
Collection vehicle · nearside
Entrance totem · 600 x 1260 mm
The visual rule has a verbal twin: say the thing, in the fewest words, in the order the resident needs it. Date first, action second, reason third. Nothing is softened and nothing is buried.
Your bin was not emptied. Report it by Friday.
The fact, then the deadline. Twelve words.We are sorry to advise that your scheduled refuse collection may have been subject to disruption.
Sixteen words, no date, no action, no bin.Pinstone Street is closed until 14 November.
A closure is a date, not a project name.Phase 2b of the Sheffield Retail Quarter public realm programme is now underway.
Nobody standing on Pinstone Street needs a phase number.Flat is the easiest system to keep and the easiest to lose, because every failure arrives as a favour: a shadow to help the button, a gradient to warm the header, a tint to fit one more service in. Four we have already had to refuse.
Added so the button “looks clickable”. It now sits above the page, so everything under it is a background, and the ranking the rule computed stops being read.
Two ends of a gradient are two colours. On a six-colour system that reads as two departments, and the header no longer tells anyone which one they are in.
Four blues to cover four housing teams. Residents cannot name the difference between them, so the colour has stopped sorting anything and become decoration.
Twelve services in a rank-five strip. Area is the whole hierarchy here, so overfilling a small tile does not just look bad, it deletes the rule.
Wardline is an invented service, built as a portfolio exercise in flat design. Sheffield, its wards, streets and postcodes are real; the organisation, its letters, deadlines and figures are not. The system is after Microsoft’s Metro language of 2010 and Google’s Material of 2014, and after the plainer discipline of the UK Government Digital Service pattern library that followed them. Those designers and teams are credited as influences only.
Nothing is lifted. Rank is carried by area, weight and one of six colours. Every dimension is a multiple of eight.