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

Finalised direction

Exhibit B-III · Courtroom v3

The client selected Courtroom as the direction and the Spotlight scroll treatment from the v2 options. This is the finalised build: the process section uses the chosen Spotlight animation — the step nearest the centre of the screen brightens while the others recede, along a drawing gold spine. This is the candidate heading to the live domain.

Exhibit B-III · Finalised
Courtroom v3

Courtroom v3

Editorial · Gravitas · Final

“The finalised voice — Spotlight scroll, locked in.”

The chosen direction, finalised. The process section is locked to the Spotlight treatment (the picker is removed); the Tania Sourdin portrait is hardened against dark-mode browser extensions so it always renders; and the “range of processes” is a live, responsive Facilitative → Advisory → Determinative matrix. Ready for content polish and the live domain.

spotlight scrollfinalisedportrait fixeddomain-ready

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