CounselConnect Cases · Design Studio

Seventeen design directions, one product

Full UI/UX redesigns of the Kenyan case-brief research platform. Suites 01–04 share a classic site layout in different skins; suites 05–13 explore different structures and identities; suites 15–18 are the boomer-friendly round — a guided concierge, a signage kiosk, a paper-of-record gazette and an advisory memo — each engineered for legibility first. Every suite carries all 28 product screens — every field, section and word of the live app — in light and dark mode.

Suite 01

The Law Library

Editorial law-report aesthetic: warm ivory paper, deep forest green, oxblood and antique gold. Serif display type and generous measure — like reading a bound volume of the law reports, rebuilt for the screen.

Playfair Display · Source Sans · 28 pages Open suite 01 →
Suite 02

The Civic Registry

Government-grade monochrome: charcoal ink on registry-white sheets, hairline rules, one restrained cobalt accent. Crisp grotesk type and tabular data — a serious research instrument for the profession.

Space Grotesk · Inter · 28 pages Open suite 02 →
Suite 03

High-Contrast Courtroom

Accessibility-first and boomer-proof: near-black on white, 19px Atkinson Hyperlegible type, underlined links, 48px targets and labelled controls everywhere. Maximum legibility without a hint of sacrifice.

Atkinson Hyperlegible · 28 pages Open suite 03 →
Suite 04

Modern Legal (Lexis · Westlaw)

Modern legal-research instrument in the Lexis/Westlaw tradition: deep crimson brand red, crisp white registry sheets and navy secondary. Serif case titles over Source Sans body — dense, fast, unmistakably professional.

Source Serif 4 · Source Sans 3 · 28 pages Open suite 04 →
Suite 05 · NEW STRUCTURE

The Case Desk

A completely different UI/UX — no marketing top-nav. A left-rail “case desk” workbench: dashboard home with a docket, two-pane search with a filter file, and briefs read with the case file pinned left. First of a new line of structurally unrelated designs, in red.

Archivo · Inter · 28 pages · light/dark Open suite 05 →
Suite 06 · NEW STRUCTURE

The Reading Room

Three-pane explorer, like a card catalogue: a persistent shelf tree on the left, the working sheet in the middle, and your desk (recent briefs, saved searches, topics) on the right. Burgundy, brass and parchment; results read as ledger entries.

Spectral · IBM Plex · 28 pages Open suite 06 →
Suite 07 · NEW STRUCTURE

The Command Console

Keyboard-first research terminal: an omnibar you type queries into, browser-style tabs as the navigation, dense monospaced result rows and an IDE status bar carrying corpus counts. Graphite with signal amber — no marketing chrome at all.

IBM Plex Sans + Mono · 28 pages Open suite 07 →
Suite 08 · NEW STRUCTURE

The Dossier

A bound volume: a vertical book spine carries the numbered contents, the page itself is a single document measure with §-numbered sections, marginal notes, and real footnotes — briefs presented the way law reports are read.

Literata · Barlow Condensed · 28 pages Open suite 08 →
Suite 09 · NEW STRUCTURE

The Workbench

Tile canvas with a floating dock for navigation and a persistent assistant rail (ask-the-corpus prompts, a cite-before-you-rely checklist, your desk counts). Everything is a card you can drop into; aubergine and copper on cool slate.

Sora · Inter · 28 pages Open suite 09 →
Suite 10 · NEW STRUCTURE

The Red Docket

Modern legal-tech instrument built on the docket — every case is a numbered filing. A slim dark spine carries numbered sections (01 Search, 02 Judges…), briefs open as filings with a red case-number band, and search returns docket rows. Bright signal red is the working primary, not just an accent.

Space Grotesk · Inter · IBM Plex Mono · 28 pages Open suite 10 →
Suite 13 · RED ON CLASSIC

The Red Docket — regular menu

The Red Docket identity without the numbered left spine — same bright signal red, same type system, but on the classic top-menu layout (the structure of suites 01–04). Byte-identical content, pure re-skin: for when the regular menu is what you want.

Space Grotesk · Inter · IBM Plex Mono · 28 pages Open suite 13 →
Suite 11 · NEW STRUCTURE

The Sky Brief

Optimistic modern Kenyan civic: royal blue on warm sand, set on a ruled editorial grid with blue-mono section numbers in the margin. Serif headlines over clean sans, double hairlines under the masthead — a legal information service that feels genuinely pleasant to use.

Fraunces · Source Sans 3 · IBM Plex Mono · 28 pages Open suite 11 →
Suite 12 · NEW STRUCTURE

The File

Tactile case-file metaphor: navigation is a strip of physical folder tabs, every page renders as a document in the folder (hole-punch gutter, ruled sheets), and outcomes are rubber stamps. Typed metadata in mono, warm serif prose — and deliberately no red anywhere.

Newsreader · IBM Plex Mono · 28 pages Open suite 12 →
Suite 15 · BOOMER-FIRST

The Concierge

The guided service desk: "What do you need today?" leads to big labelled task cards, and every case brief reads as seven numbered steps with plain-language "What this means" callouts. A persistent help rail answers glossary questions as you read. Navy, sky and daffodil — government service design done right.

Bricolage Grotesque · Public Sans · 28 pages Open suite 15 →
Suite 16 · BOOMER-FIRST

The Kiosk

Public-signage legibility: a fixed bottom tab bar (Home · Search · Judges · Topics · My Desk) you can't miss, 3px black borders on every card and button, and outcomes stamped as yellow signage plates. Airport-clear, touch-first, and bold in a strictly 2026 way.

Archivo · IBM Plex Mono · 28 pages Open suite 16 →
Suite 17 · BOOMER-FIRST

The Gazette

The paper of record, digitised: a centred serif masthead with heavy double rules, a ruled section bar, and case briefs read as reported pieces — kicker, headline, byline row (bench · date · citation), standfirst, then crossheaded sections with page-pinned extracts. Black on newsprint with one steel-blue accent.

Source Serif 4 · IBM Plex Mono · 28 pages Open suite 17 →
Suite 18 · BOOMER-FIRST

The Advisor

The trusted professional adviser in software form: case pages set as advisory memoranda — letterhead, To/From/Date/re rows, ruled sections and bronze "Counsel's note" guidance. Warm ivory and charcoal, unhurried layout, plain labels; the senior-partner register, never corporate-cold.

Lora · Figtree · IBM Plex Mono · 28 pages Open suite 18 →

Every page includes a working light/dark toggle · All copy and fields match the live product · Static prototypes only — the Next.js app is untouched. See README for the full page map.