Skip to content

The shell stops looking like a desktop widget - #44

Merged
keirsalterego merged 1 commit into
identra-dev:mainfrom
keirsalterego:design/the-shell-stops-looking-like-a-widget
Aug 2, 2026
Merged

keirsalterego merged 1 commit into
identra-dev:mainfrom
keirsalterego:design/the-shell-stops-looking-like-a-widget

Conversation

@keirsalterego

Copy link
Copy Markdown
Contributor

The three-column shell shipped with the CSS I wrote to make it work, not the CSS to make it look like anything. Three columns of rounded cards with 24px drop shadows floating over a wallpaper, with gaps between the panes — every seam drawn three times over as a gap, then a border, then a shadow. The chrome was competing with the work.

A layout bug shipped with it, and rendering the stylesheet is what found it

.identra-shell > * set position: relative on every direct child. The wallpaper is a direct child and has to stay absolutely positioned; made relative it became a grid item, took the first column for itself, and pushed the right-hand column onto a second row.

The shell has been laid out wrong since the day it landed, and I could not see it by reading the code. The columns are matched by name now, so a layer added behind them can never become one of them.

What changed

Structure is one hairline. No radius, no shadow, no gap on any surface. A seam is a single line darker than both surfaces it divides. Radius survives only on things you press; shadows only on things that genuinely float — menus, dialogs, the wallpaper picker.

The frame joins the terminal's family. Identra's terminals have always been Ubuntu aubergine and the frame around them was neutral grey, so the app read as a purple rectangle inside a grey one. The frame is now aubergine at very low saturation, and the terminal came down to a third of its chroma to meet it. Full-strength #300a24 was tuned to sit in a grey desktop; inside an aubergine frame every pane read as a purple block.

The accent means one thing. Orange was on every hover, every active tab and every focus ring — about thirty rules — which is why it signalled nothing. It is now spent only on memory: the recall strip, the facts badge, the handshake receipt, the newest fact. Structural focus took a bright neutral instead.

The Send button gave up the accent for the same reason, and the screenshot is what settled it: with an orange Send my eye went straight to the button and slid past "Identra remembers" three inches above it — exactly backwards for a product whose whole claim is the memory.

An agent doing nothing stopped glowing. Idle was the brand colour, which put the loudest thing on screen on the least interesting state.

Five spacing values and one type scale. The old sheet used 4, 5, 6, 7, 8, 9, 10, 12 and 20 with no reason for any of them, which is most of why it read as untidy rather than dense. Every number, path and count is monospace now, so columns of them are columns.

The wallpaper got a real job. Three opaque columns cover it, so rather than delete a feature people set per workspace, the panes area is transparent: the wallpaper is what shows where nothing is open — an empty split, or a workspace with no agents in it yet.

Dead canvas chrome removed. Nothing has rendered .identra-node since the pane replaced it, so the aura keyframes, the four [data-state] glow rules and the reduced-motion variant were styling an element that does not exist.


On provenance: no Superset code was read or ported. Their published marketing screenshot was studied for behaviour, per the standing rule in the reference teardown (study behaviour, reimplement, never paste). Superset is Elastic License 2.0 and cannot enter an Apache-2.0 tree.

tsc, bun test and the frontend build are clean.

The three-column shell shipped with the CSS I wrote to make it work, not the CSS to make it look
like anything. Three columns of rounded cards with 24px drop shadows floating over a wallpaper,
with gaps between the panes: every seam drawn three times over as a gap, then a border, then a
shadow. The chrome was competing with the work.

**A layout bug shipped with it, and rendering the stylesheet is what found it.** `.identra-shell >
*` set `position: relative` on every direct child. The wallpaper is a direct child and has to stay
absolutely positioned; made relative it became a grid item, took the first column, and pushed the
right-hand column onto a second row. The shell has been laid out wrong since the day it landed and
I could not see it by reading. The columns are matched by name now, so a layer added behind them
can never become one of them.

What changed, and why each one:

**Structure is one hairline.** No radius, no shadow, no gap on any surface. A seam is a single line
darker than both surfaces it divides. Radius survives only on things you press. Shadows survive
only on things that genuinely float — menus, dialogs, the wallpaper picker.

**The frame joins the terminal's family.** Identra's terminals have always been Ubuntu aubergine
and the frame around them was neutral grey, so the app read as a purple rectangle inside a grey
one. The frame is now aubergine at very low saturation, and the terminal came down to a third of
its chroma to meet it. Full-strength #300a24 was tuned to sit in a grey desktop; inside an
aubergine frame every pane read as a purple block.

**The accent means one thing.** Orange was on every hover, every active tab and every focus ring —
about thirty rules — which is why it signalled nothing. It is now spent only on memory: the recall
strip, the facts badge, the handshake receipt, the newest fact. Structural focus took a bright
neutral instead. The Send button gave up the accent for the same reason, and the screenshot is what
settled it: with an orange Send my eye went straight to the button and slid past "Identra
remembers" three inches above it, which is exactly backwards for a product whose whole claim is the
memory.

**An agent doing nothing stopped glowing.** Idle was the brand colour, which put the loudest thing
on screen on the least interesting state.

**Five spacing values and one type scale.** The old sheet used 4, 5, 6, 7, 8, 9, 10, 12 and 20 with
no reason for any of them, which is most of why it read as untidy rather than as dense. Every
number, path and count is monospace now, so columns of them are columns.

**The wallpaper got a real job.** Three opaque columns cover it, so rather than delete a feature
people set per workspace, the panes area is transparent: the wallpaper is what shows where nothing
is open — an empty split, or a workspace with no agents in it yet.

**Dead canvas chrome removed.** Nothing has rendered `.identra-node` since the pane replaced it, so
the aura keyframes, the four `[data-state]` glow rules and the reduced-motion variant were styling
an element that does not exist.

No Superset code was read or ported. Their published marketing screenshot was studied for
behaviour, per the standing rule in the reference teardown.

tsc, bun test and the frontend build are clean.
Copilot AI review requested due to automatic review settings August 2, 2026 04:51

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@keirsalterego
keirsalterego merged commit 505eef6 into identra-dev:main Aug 2, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants