# CounselConnect Cases — UI/UX Redesign Prototypes

Seventeen design directions for **CounselConnect Cases**, the
Kenyan case-brief research platform. Every suite re-presents **all current
content, sections, fields and copy** of the live product across **28 pages**
(20 public routes + 404 + 7 admin screens) — nothing shown today is dropped.

Each suite is a static, dependency-free HTML prototype: open any `index.html`
in a browser and click through. All pages share one local stylesheet and one
small theme script — no build step, no server.

| Suite | Folder | Personality |
|-------|--------|-------------|
| 1 · **Law Library** | `style-1-law-library/` | Editorial law-report aesthetic — warm ivory paper, deep forest green, oxblood, antique gold; Playfair Display + Source Sans. Feels like a 21st-century law library. |
| 2 · **Civic Registry** | `style-2-civic/` | Government-grade monochrome — charcoal + registry-white sheets, hairline rules, one restrained cobalt accent; Space Grotesk + Inter, tabular data. Dense, crisp, authoritative. |
| 3 · **High-Contrast Courtroom** | `style-3-courtroom/` | Accessibility-first — near-black on white, 19px Atkinson Hyperlegible type, underlined links, oversized 48px controls, every icon paired with a label. The boomer-proof option, still unmistakably 2026. |
| 4 · **Modern Legal** (Lexis/Westlaw-inspired) | `style-4-lexis/` | A dense modern legal-research instrument — deep crimson brand red on crisp white registry surfaces, navy secondary, Source Serif case titles over Source Sans body. Built to feel like the serious tools advocates already trust. |
| 5 · **The Case Desk** | `style-5-casedesk/` | **Structurally unrelated layout** — no marketing top-nav. A left-rail workbench app: dashboard home with a docket, two-pane search (filter file + results), briefs read with the case file pinned left, chipbar section nav. Red themed. First of the new "different UI/UX" line. |
| 6 · **The Reading Room** | `style-6-reading-room/` | **Different structure** — three-pane explorer: shelf tree · working sheet · desk rail. Burgundy, brass, parchment; Spectral + IBM Plex. Results render as ledger entries. |
| 7 · **The Command Console** | `style-7-command/` | **Different structure** — keyboard-first terminal: omnibar query line, browser-tab navigation, dense monospaced result rows, IDE status bar with live corpus counts. Graphite + signal amber. |
| 8 · **The Dossier** | `style-8-dossier/` | **Different structure** — a bound volume: vertical book spine holding the numbered contents, one document measure with §-numbered sections, marginal notes and real footnotes. Prussian blue + brass + sealing-wax red; Literata + Barlow Condensed. |
| 9 · **The Workbench** | `style-9-workbench/` | **Different structure** — tile canvas with a floating macOS-style dock for navigation and a persistent assistant rail (ask-the-corpus prompts, a before-you-cite checklist, desk counts). Aubergine + copper on slate; Sora + Inter. |
| 10 · **The Red Docket** | `style-10-red-docket/` | **Different structure** — a numbered docket system: slim dark-ink left spine (01 Search … 14 My account), briefs as red-banded filings, search as docket rows. Bright signal red is the working primary; Space Grotesk + Inter + IBM Plex Mono. |
| 11 · **The Sky Brief** | `style-11-sky-brief/` | **Different structure** — ruled civic editorial: royal blue on warm sand, double hairlines, blue-mono §-numbered margin gutters; Fraunces serif + Source Sans 3 + IBM Plex Mono. |
| 12 · **The File** | `style-12-the-file/` | **Different structure** — tactile case-file: physical folder-tab navigation, manila paper, hole-punch gutter, ruled sheets, rubber-stamp outcomes; Newsreader + IBM Plex Mono. Deliberately no red. |
| 13 · **Red Docket — regular menu** | `style-13-red-docket-classic/` | **Red identity on the classic layout** — the bright signal-red design language of suite 10 (tokens, type, chips, stamps) applied to the regular top-menu structure of suites 01–04. 28 pages byte-identical to style-1; pure re-skin. |
| 15 · **The Concierge** | `style-15-concierge/` | **Boomer-first guided service** — "What do you need today?" task cards, 7-step numbered brief reading with plain-language callouts, persistent help rail; navy/sky/daffodil; Bricolage Grotesque + Public Sans. |
| 16 · **The Kiosk** | `style-16-kiosk/` | **Boomer-first signage** — fixed bottom tab bar (5 giant tabs), 3px black borders, yellow signage plates for outcomes, billboard hero; Archivo + IBM Plex Mono on pure white. |
| 17 · **The Gazette** | `style-17-gazette/` | **Boomer-first paper of record** — serif masthead + double rules, ruled section bar, case briefs as reported pieces (kicker → headline → byline → standfirst → crossheads); black on newsprint, steel-blue accent; Source Serif 4. |
| 18 · **The Advisor** | `style-18-advisor/` | **Boomer-first advisory memo** — case pages as memoranda: letterhead, To/From/Date/re rows, ruled sections, bronze "Counsel's note" callouts; warm ivory + charcoal + bronze; Lora + Figtree. |

## How to view

Open the hub first: [`index.html`](index.html) — a gallery that links into all
seventeen suites. Or open any suite's `index.html` directly (e.g.
`style-1-law-library/index.html`) and navigate like the real app.

## Common to suites 01–04

- **Light + dark mode.** Every page has a theme toggle (top-right of the
  header, or top-right corner on admin screens). Choice persists via
  `localStorage`; falls back to the OS preference; both themes are fully
  designed per suite.
- **Identical information architecture.** All four suites share the same page
  map, nav, footer and per-route content (from the live app, verbatim), so you
  can compare pure visual design without copy drift.
- **Boomer-friendly by default.** ≥ 16–19px body text, WCAG-AA+ contrast,
  visible focus rings, labelled controls, underline-on-hover links, plain
  wording, no gesture-dependent UI.

## Page map (every suite contains all 28)

Public: `index.html` (home) · `search.html` · `case-detail.html` ·
`authorities.html` · `authority-detail.html` · `judges.html` ·
`judge-detail.html` · `topics.html` · `topic-detail.html` · `trends.html` ·
`propositions.html` · `litigants.html` · `citator.html` · `compare.html` ·
`lineage.html` · `bookmarks.html` · `history.html` · `account.html` ·
`saved-searches.html` · `not-found.html`

Admin: `admin.html` (dashboard) · `admin-cases.html` · `admin-case.html` ·
`admin-case-history.html` · `admin-judges.html` · `admin-judge.html` ·
`admin-ingest.html` · `admin-login.html`

All 28 × 17 pages pass (476 files) `python3 redesign/_qa.py` (structure, internal links,
theme chrome). Rebuild a page from a fragment with
`python3 redesign/_asm.py <suite> <page.html> _fragments/<page>.body.html
[--title …] [--active …]`.

## Files

- `_shared/PRIMITIVES.md` — the shared component vocabulary + content rules.
- `_shared/chrome-*.html` — the page frames: `chrome-public.html` (suites 1–4 top-nav site), `chrome-app.html` (left-rail desk, suite 5), `chrome-explorer.html` (three panes, suite 6), `chrome-console.html` (omnibar + tabs, suite 7), `chrome-dossier.html` (book spine, suite 8), `chrome-dock.html` (dock + assistant rail, suite 9), plus `chrome-admin.html` / `chrome-auth.html`.
- `_shared/PRIMITIVES.md` · `_fragments*` — page bodies; `_asm.py` + `_build-suites.py` rebuild suites 5–9; `_qa.py` verifies all nine.
- `_inv-*.md` — verbatim copy and field inventory extracted from the live
  Next.js app (one file per group of routes).
- `_shared/theme.js` is copied into each suite's `css/` as the theme toggle.

## Disclaimer

Prototypes only — static HTML. The real product remains the Next.js app in
`src/`; nothing here changes it. © 2026 CounselConnect. Briefs are
AI-generated analyses — always verify against the original judgment before
relying on them in court. Not legal advice.