Endispute / Design Directions
qalarc.com / projects
A dispute resolution, advisory & management practice Thirteen concepts · One source of truth

Thirteen ways to open the same case.

One brand. One set of words. Thirteen fully-built, animated websites — each arguing the same matter in a different voice.

Endispute resolves commercial and civil disputes through facilitative, advisory and determinative processes — out of court, without prejudice, and led by senior independent panel members. The brief here was singular: hold the message perfectly still and let only the design personality move. Every site below shares one content schema, so the copy is identical across all eight; what changes is tone, typography, motion and atmosphere. Select any exhibit to review the real, live, production-built site.

13
Design directions
1
Shared content schema
15
Next.js · static export
Words held constant

Selected direction — refined

Exhibit B-II · Courtroom v2

The client selected Courtroom as the preferred direction. This is the refined build: the dominant full-screen scroll section is replaced with a compact, flowing “how a matter moves” sequence — a sticky step index with a self-drawing progress spine that keeps the site moving rather than hijacking it; the portrait and wordmark load eagerly so nothing reads as a missing image; and the static “range of processes” diagram is rebuilt as a live, responsive Facilitative → Advisory → Determinative matrix.

Exhibit B-II · Preferred
Courtroom v2

Courtroom v2

Editorial · Gravitas · Refined

“The preferred voice — pick the scroll you like best.”

Same editorial confidence as Courtroom, refined from review. The process section now ships with a built-in style picker (bottom-right of the live site, desktop): switch between five scroll animations — Flow, Stagger, Spotlight, Slide and Pinned — and your choice is saved to the URL so you can send the exact option back. The portrait and wordmark load eagerly so no image reads as missing, and the flat “range of processes” diagram is a live Facilitative → Advisory → Determinative matrix.

5 scroll styles to pickstyle pickereager imagesclient-preferred

The first three

Exhibits A — C · Round 01

Three opening arguments — a calm, premium firm; an editorial, kinetic profile with gravitas; and a precise, dark studio direction. Each leans on a different visual language and animation toolkit.

Exhibit A
Aurora

Aurora

Calm · Premium · Light

“A modern firm that doesn’t feel stuffy.”

Paper-white, Swiss-precise composition with softly drifting gradient light in the hero, scroll-orchestrated reveals and count-up stats — rationed colour, never glaring.

paper-whitesoft gradientscount-up stats
Exhibit B
Courtroom

Courtroom

Editorial · Gravitas

“A magazine profile of a courtroom drama.”

Thin-serif editorial headlines, a gold cursor spotlight and a pinned horizontal-scroll walk-through of the resolution process. Literary, considered, confident.

thin serifcursor spotlighthorizontal scroll
Exhibit C
Mosaic

Mosaic

Dark · Studio · Sapphire

“Restraint, in obsidian.”

A near-black studio direction — perfectly aligned bento composition, depth from tonal grey-stepping rather than shadow, and a single sapphire accent reserved for action.

obsidianbento gridone accent

The refined five

Exhibits D — H · Round 02

A second pass — five concepts, each built around a structural metaphor for dispute resolution: an archival ledger, a two-sided verdict, an open atrium, a written quill, and a guided meridian from conflict to outcome.

Exhibit D
Ledger

Ledger

Archival · Restrained

“End your dispute — indexed and precise.”

A calm law-journal on warm parchment. Whisper-weight Cormorant display, generous measure and near-monochrome restraint — a meticulously kept case file, decluttered.

parchmentserif displaymonochrome
Exhibit E
Verdict

Verdict

Cinematic · Dark

“Two sides. One resolution.”

A crimson-in-obsidian split-screen built on the duality of every dispute — two sides resolving along a single red seam into one confidential, decisive space.

split-screensingle red seamwhisper display
Exhibit F
Atrium

Atrium

Grounded · Architectural

“Resolve with clarity.”

Warm editorial paper with a visible hairline architecture — sharp corners, baseline-aligned structure and grounded, restrained motion. Solid, not adrift.

warm creamhairline gridoutline accent
Exhibit G
Quill

Quill

Manuscript · Formal

“In the matter of your dispute… let it be resolved.”

A beautifully typeset legal letter — serif throughout, a letterpress drop-cap, ruled lines and a generous measure. The most formal voice, and the one that reads like a document.

manuscript serifdrop-capruled lines
Exhibit H
Meridian

Meridian

Cosmic · Journey

“From conflict to resolution.”

A particle-cosmos on the void with scroll-drawn constellations charting the path from conflict to outcome. Ultra-thin display type and a single plum accent for action.

particle fieldscroll-drawn pathplum accent

Living artworks

Exhibits I — M · Round 03

A third pass that treats the page itself as a moving artwork. Each of these builds its centrepiece from generative, interactive CSS / canvas art — the visuals respond to the cursor and re-form as you scroll, turning the journey from conflict to resolution into something you can watch happen. Open them and move your mouse.

Exhibit I
Constellation

Constellation

Generative · Particle field

“From conflict to resolution.”

Thousands of tiny line-drawn shapes on the void. As you scroll, the whole cloud morphs through the story — scattered conflict, into the scales of justice, into a handshake, into one closed ring of resolution. Twinkles and parts around your cursor.

canvas particlesscroll morphcursor-reactive
Exhibit J
Tribunal

Tribunal

Interactive · Scales of justice

“Where every dispute finds its balance.”

An etched-brass scales of justice that tips toward your cursor with real spring physics, then settles — and as you scroll, the imbalance of conflict resolves into perfect, level balance. The two parties’ weights equalise.

SVG physicsscroll-to-balancebrass on black
Exhibit K
Clause

Clause

Manuscript · Living document

“A Deed of Resolution, writing itself.”

A warm parchment contract that comes to life — clauses type in line by line, a signature draws itself, a wax seal presses in, and an ink quill trails your cursor. Letterpress hairlines and a drop-cap give it manuscript gravitas.

self-drawing signaturewax sealink-trail cursor
Exhibit L
Equilibrium

Equilibrium

Generative · Force network

“Two sides. One equilibrium.”

Two clouds of nodes — one per party — drift on a flow field and weave together with light. Your cursor is a force that pulls the network and brightens the threads; scrolling draws the two opposing sides into a single, calm, balanced lattice.

force-field canvascursor weavingtwo-sides → one
Exhibit M
Convergence

Convergence

Generative · Split editorial

“Two sides. One resolution.”

The editorial split-screen layout of Verdict married to the living force-lattice of Equilibrium — recoloured so one party reads in ash-white and the other in signal-red, weaving across the central seam from two sides into one resolution.

split-screen seamforce-lattice artobsidian + red