Revize · County website · Approved October 2026

Rankin County, Mississippi

A county website for one of the fastest-growing counties in Mississippi. The county's IT lead handed over an open canvas, and the Board of Supervisors had one hard requirement: make it easy to search. Approved on the first concept.

Visual DesignSearch UXAccessibilityDev Handoff

The brief

An open canvas and one rule

Rankin County sits in the Jackson metro and is growing fast across Brandon, Pearl, Flowood, Richland, and Star. It had just commissioned a new logo whose R folds a sunrise, a skyline, green fields, and the Pearl River into one mark.

The single contact was the county's IT lead, who described himself as the IT guy, not a design guy. Everything was open except the Board's requirement that residents be able to find things by searching.

The approach

Make search the loudest thing on the page

I explored three directions and kept the one that bet least on photography the county didn't have yet. Search became the single most prominent object on the page, and the hero borrows its shape from the logo instead of from a stock template.

Search firstA search card overlaps the bottom edge of the hero with five popular searches beneath it, and a gold Search pill sits in the navigation on every page.

The river seamThe hero splits along a Pearl River meander, the same S-bend that forms the R in the new logo, traced by a teal ribbon over a sunrise ray-burst.

TypePlayfair Display headings mirror the logo's high-contrast wordmark, with Manrope for everything else. I started with Instrument Serif, but it has no bold weight, and the design system's heading styles need one.

Quick linksTwo rows of three icon cards, with the whole card clickable. Photo cards were tried and rejected as too busy.

No utility barThe county chose simplicity over a utility bar, on the condition that emergency alerts can still be switched on from the CMS. They can.

Dev handoffThe page builder couldn't produce the curve, so I shipped a CSS drop-in: one SVG overlay between the CMS photo and the copy, no markup changes, desktop only, with a five-step README for the developers.

Palette · contrast measured against white

Navy#00264A15.26:1 on white · AAAPrimary
Teal#017E8E4.80:1 on white · AA
Green#59781D5.09:1 on white · AA
Gold#FEBF371.65:1 on white · accentFills only, with navy text

The rest of the approved set · desktop, 1440px

Interior page design — Interior page1440 × 2581

Interactions and menus design — Interactions and menus1440 × 4812

Outcome

Accessible by measurement, not by eye

The concept was checked in the browser before it went to the client, and the county approved it without a revision round. The hero handoff went to development in October.

contrast failures across 58 distinct text and background pairs. Every prose, link, and button label is at least 16px, and every touch target is at least 44px.

Next in the practice

Milton, Georgia↗