Collide UI/UX review  /  Sovrnty

A title workspace that looked like the tools it replaced, only better.

Sovrnty was a title workspace I built for landmen: raw courthouse PDFs in, defensible ownership report out. I built it because I spent twenty years doing this work in a spreadsheet, a PDF viewer, a whiteboard, and a folder tree, and none of them talked to each other.

Every interface decision came from that: it had to hold up for ten hours a day, in front of people who ranged from 25 to 70, doing work where one wrong fraction cost somebody real money. This page is how I thought about that problem from a product and UI/UX perspective.

4tools it replaced: Excel, Acrobat, Miro, Explorer
2typefaces, zero monospace
1accent color, used only where it meant something

Who it was for

A field landman or title agent running several contracts at once. The job is reading a few hundred recorded instruments, transcribing the ownership-relevant facts, connecting them into a chain, and computing who owns what today. The output has to survive an attorney reading it.

The user age band was unusually wide. My mother, in her seventies, still does title work. New grads come into the trade with Notion and Linear as their reference points. The overlap between those two people is quiet competence: a tool that respects that they know what they're doing, shows them the information, and gets out of the way.

That one fact set most of the constraints below. Density was a feature. Type sizes couldn't go Linear-tight. Both light and dark mode had to ship. Nothing could rely on hover to be discovered.

How I thought about it

Microsoft 365, if it were made by people with taste, tuned for title work.

It was never a hot-SaaS aesthetic. It was a professional-tool aesthetic rendered with polish. The guiding rule was to honor the mental models of the tools being replaced, so that each surface felt like the best version of the thing the user already knew.

Runsheet felt like Excel

Grid, tab between cells, column filters, inline edit. The chain of title has lived in spreadsheets for forty years; the muscle memory is real.

Documents felt like Acrobat

Page thumbnails, sidebar, zoom. Reading a deed is reading a deed.

Flowchart felt like Miro

Infinite canvas, pan and zoom, sticky notes. Landmen already draw chains on whiteboards.

Files felt like Explorer

Folder tree, breadcrumbs, context menus. Nobody needs to learn a new way to find a PDF.

The delight was in the behavior, not the chrome

A cell on the runsheet linked to a node in the graph. An extraction that pre-filled a row and flagged the fields it wasn't sure about. Autosave you never thought about. Those were the upgrade. Visual novelty would have been noise on top of them.

Density was a feature

The tool existed to show information, not hide it behind pretty cards. A 42px table row was the compromise between a boomer's eyes and a power user's patience.

The accent earned attention by placement, not saturation

One color. It went on the primary action, the active nav item, the selected row, the focus ring, and the number that mattered. It never went on a large surface and it was never decorative. If a button needs to glow to get your attention, it doesn't trust its own design.

Foundations

The whole visual system fit on one screen. Three opaque surface levels, four text levels, one accent, two typefaces, three corner radii. This page is rendered with those same tokens, so you're looking at the system while reading about it.

Surfaces

Three levels, all opaque. No transparency, no backdrop blur, no frosted glass. Depth came from hierarchy: the sidebar sat one step up from the page, cards and inputs one step above that. Hairline borders did the separating; there were no card shadows at all.

BackgroundThe page. Visible between sidebar and content.
SurfaceSidebar, table header, cards.
RaisedStat cards, inputs, menus.
Dusty Clay · #a88e6aThe only accent, in both modes.
Accent, mutedActive nav, selected rows.
Hairline1px, 7–12% alpha. Felt, not seen.

Dusty Clay is a desaturated warm bronze that barely asserts itself: almost a warm gray with just enough amber to read as chosen rather than default. Old money, not nouveau riche. A Defender, not a Range Rover Sport.

Text

Four levels, each with a job. Dark mode was warm bone at high contrast, with secondary and tertiary lifted for older eyes. Light mode was warm ink with a brown undertone throughout, like ink on linen.

Primary — grantor names, headings, active nav, stat numbers
Secondary — grantee names, toolbar buttons, the project name in the breadcrumb
Tertiary — table headers, volume and page, dates, form labels
Dimmed — row numbers, inactive nav, placeholders, disabled states

Type

Two families with a hard boundary between them. If you were reading it to navigate or work, it was Inter. If it was a name or a number that anchored the page, it was Libre Baskerville. The serif gave the proper nouns courthouse-deed weight; the sans stayed invisible and workmanlike.

Brand, project names, report titles, hero numbers
Mineral Ownership Report  ·  312
Nav, table body, toolbar, forms, everything functional
Runsheet   Documents   Lease Index   Warranty Deed · Vol 412 Pg 88 · 03/14/1962
Table headers, stat labels
Grantor    Grantee    Instrument    Recording

Radii: 8px for cards and containers, 6px for inputs and buttons, 4px for badges. Linear's tightness. It said "I'm a tool," not "I'm an app."

What got cut

The version before the final one was spectacle: deep indigo accent, a plexus wallpaper behind everything, frosted-glass cards, glowing buttons. It looked like a landing page. It did not look like something you'd trust with a title opinion. The move to v4 was a shift from spectacle to restraint, and most of it was subtraction.

Deep Indigo #4f46e5Dusty Clay #a88e6a"The whole purple thing was too much." Tested on a laptop and an ultrawide, not a phone in a truck.
Plexus wallpaper and background orbsFlat opaque surfacesDecoration behind a data grid is just contrast you lose.
Frosted glass, backdrop-filterThree opaque surface levelsGlass reads as consumer. It also fights the OS compositor.
30px / 60px CTA glowFlat accent button, no shadowA button that needs to glow doesn't trust its own design.
Accent-tinted hover statesNeutral background shiftHover is informational. Selection is intentional. Only selection gets the accent.
14px card radius8pxPlayful became professional.
Inter onlyLibre Baskerville + InterProper nouns deserve a deed-quality serif.
Dark mode onlyLight and dark, both in V1Half the market was over fifty. Dark-only was a tool half of them couldn't use.

Screen by screen

Every screenshot here is the real app. The chain, flowchart, and ownership screens use a 100-acre mineral test project built to exercise the graph; the document-heavy screens use a real two-tract Ector County sovereignty project.

Projects

Replaced a folder of spreadsheets

Every contract as a card with category, starting point, and status. The sidebar in home mode showed recent and pinned projects, because a landman running six tracts wants the two he touched today, not an alphabetical list.

Projects list
02-projects-std.png

Project home

Replaced the cover sheet and the notes file

Category, chain origin, active interest types, and the tracts in scope with their baselines. This is where a project got its shape before any document was uploaded: a sovereignty chain and a lease check are different jobs, and the rest of the app reconfigured around that answer.

Project home tab
04-project-std.png

Documents

Replaced Acrobat plus a naming convention

Instruments went in, extraction ran, and each document carried its own review status. The list was the queue: what had been read, what was waiting, what the extractor wasn't sure about.

Documents tab
05-documents-std.png

Runsheet

Replaced Excel

The heart of the product and the screen people spent the most hours on. One row per instrument, one column per fact a title examiner needs. It behaved like a spreadsheet on purpose: tab between cells, filter by column, edit inline, and the grid stayed dense.

The runsheet was a faithful transcription of the record. It was deliberately not where ownership got computed; that happened downstream, so the source layer stayed clean.

One keystroke collapsed the sidebar when the grid needed the whole width.

Runsheet
06-runsheet-wide.png
Runsheet with sidebar collapsed
07-runsheet-collapsed-wide.png
Sidebar collapsed. The grid was the point; the chrome got out of the way.

Flag per field, not per document

When extraction wasn't confident about a value, it flagged that cell, not the whole row. The examiner's eye went straight to the one thing that needed a human. Flags were the one place a warning color was allowed on the grid, which is exactly why they worked.

Every accepted value was still a human decision. The model proposed; the examiner ruled.

A runsheet row with flagged fields
06-crop-flagged-cells.png

Editing against the source

Replaced two monitors and a lot of alt-tab

Open any row and the recorded instrument opened beside it. The form on the left was the transcription; the scan on the right was the truth. Grantor, grantee, volume, page, land: every field was a glance away from the line on the deed it came from.

The form was deliberately plain. Labels in small caps, inputs on the raised surface, one section per concept. Conveyances were a repeatable block because one instrument can carry several. Nothing competed with the document for attention, because the document is what the examiner is actually reading.

Save stayed disabled until something changed. Cancel was always available. Both sat exactly where Acrobat and Excel taught people to expect them.

Edit Details panel beside the document viewer
edit-details-viewer.png
Mineral Deed, Cherokee County. The edit panel and the page it was extracted from, side by side.

Lease index

Replaced the second spreadsheet

Oil and gas leases got their own index because they don't behave like conveyances: they create leasehold, they expire, they get ratified and amended and extended. Working interest was derived from this table plus the mineral graph, never typed in by hand.

Lease index
08-lease-index-std.png

Wells

Wells on the tract, their depth, and what they held. Depth matters in Texas title because a lease can be alive in one stratum and dead in another, and the ownership math had to respect that.

Wells tab
09-wells-std.png

Flowchart

Replaced Miro and the whiteboard

Underneath every canvas was a graph built by deterministic code from verified runsheet rows. No model touched it. Each node was a conveyance event, each edge linked a grantee to the next grantor, and the tracts a conveyance covered rode on the edge. The flowchart and the ownership reports were both rendered from that one structure.

The canvas itself was a read-only view of that graph, one canvas per interest type, with sticky notes and annotations layered on top. You couldn't edit ownership here; you edited the runsheet, and the chart updated. That one rule kept the chain honest.

The cards used the same serif-for-names, sans-for-metadata rule as everything else, so a title card read like a courthouse index entry.

Flowchart canvas
11-flowcharts-std.png
A single flowchart title card
11-crop-flowchart-card.png
The root of every Texas chain: the sovereign. Every canvas started here.

Ownership reports

Replaced the calculator and the Word doc

The computed end state: who owned what, today, by interest type. Fractions were exact to twelve decimals under the hood and rendered as fraction, decimal, or percent depending on who was reading. This was the deliverable, so it was the one place the serif heading was allowed to be big.

Overview, then one report per interest type. Surface, mineral, royalty, leasehold.

Ownership overview report
12-own-overview-std.png
Mineral ownership report
13-own-mineral-std.png
Leasehold ownership report
14-own-leasehold-std.png
Ownership table detail
13-crop-ownership-table.png

Files

Replaced Explorer and Dropbox

Folder tree, breadcrumbs, right-click. Everything a project touched, in one place, without inventing a new way to find a PDF.

Files tab
15-files-std.png

Extraction QC

The bench where extraction got measured. Rules were versioned config injected at call time, so when a rule changed you could see exactly what moved. This was an operator screen, and it looked like one.

Extraction QC
16-extraction-qc-std.png

Dashboard and clients

Where you landed in the morning. Stat numbers in Baskerville, labels in small-caps Inter, the gap count in accent because it was the number that meant "go do something."

Dashboard
03-dashboard-std.png
Clients
01-clients-std.png

Behavior over chrome

Things you could only see by using it, which is where the actual design work went.

The determinism firewall

LLM output never silently became a fact. Extraction proposed a row with per-field flags; a human accepted it; deterministic code built the graph; deterministic math computed ownership. The UI enforced that order. There was no screen where a model's guess could turn into an ownership edge without a person having looked at it.

One source, three views

Runsheet, flowchart, and reports were the same data. Edit the runsheet, and the other two updated. Nothing was ever edited in two places, so nothing was ever out of sync.

Overrides that never touch the source

When an examiner needed to assert something the record didn't say cleanly, the override lived in its own layer with a reason attached. The transcription underneath stayed faithful. You could always see what the documents said and what the examiner decided, separately.

Autosave, and never asking twice

Nothing had a save button. Preferences persisted: sidebar state, theme, which interest type you were looking at. The app remembered where you were, because a title examiner's context is expensive to rebuild.

Click image to toggle actual size