We changed how the PlatformDTC admin looks today. The layout stayed the same. Every screen keeps its cards, its columns and its buttons where merchants expect them. What changed is the visual language: the bar across the top, and the way every list shows the state of a record.
This post covers what changed, what we removed, and the parts that broke while we built it, because we build in public.
The top bar is gone. Three islands replaced it.
The strip across the top of every admin page used to be a solid bar. Now it is three floating pieces of glass:
- Your store on the left: the store switcher, sized to sit exactly over the sidebar.
- Search in the middle: the same command palette,
⌘K. - You on the right: alerts, the assistant, the theme toggle and your account.
There is no bar behind them any more. Pages run to the top of the window and scroll under the islands, so a long list keeps its full height, and the glass picks up the colour of whatever passes beneath it. The gaps between islands let clicks through, so nothing under them is out of reach.
On a phone there are two islands: the menu with your store, and everything else. Each one is 44 pixels tall. That is the smallest comfortable tap target on iOS and in WCAG 2.5.8. We made the islands that tall so every button inside still meets it. To give the store name room on a small screen, the dashboard logo steps out of the store island (Home is one tap away in the menu), and the light/dark toggle moves into the account menu.
The homepage uses the same islands. In dark mode it keeps a bright edge on the glass. Inside the admin, dark glass is deliberately quieter, because you look at it all day.
Every list now speaks the same language
The Orders list was the reference. Before today, a record's status was a bordered, coloured chip, and each screen picked its own colours. An unfulfilled order was a yellow box, a paid one grey, a normal-risk one a small green box. Products, subscriptions, payouts and returns each did something slightly different.
Now a status is a coloured dot and a plain label, and the colour always means the same thing:
- Green: done, good or live. Paid, Fulfilled, Active, Published.
- Orange: waiting on you. Unfulfilled, Pending, Past due, Open return.
- Red: failed, blocked or risky. Failed payout, Cancelled order, Highest risk.
- Grey: ended or switched off. Refunded, Expired, Archived, Disabled.
A few things changed with it:
- Channel, source and type are an icon and text, not a filled chip.
- Rows are vertically centred.
- The row menu is
…. - The record's name or number is the boldest thing in the row.
Warnings that should interrupt you, such as a chargeback alert or an early fraud warning, are the one exception: they stay as tinted capsules.
The same rules now cover the admin's list screens: orders, drafts, abandoned checkouts, returns, products, reviews, inventory, gift cards, discounts, subscriptions and their plans and journeys, finance and payouts, customers, members, contacts, store pages, collections, blog posts, point-of-sale sales and more. They are written down as one shared component, so a new screen gets them without anyone redrawing a status chip.
One rule came along with the redesign: a value that doesn't exist shows nothing. Several lists printed a dash where tracking, a date or an action was missing. A dash in a table reads as data that failed to load. Now an empty cell is just empty.
What we removed
Top-bar artwork. Settings → Account let you paint an image across the top bar. With no bar left to paint, that setting is gone rather than left in place doing nothing. The light/dark choice in the same panel is unchanged.
What broke while we built it
We looked at every step of this in a real browser, and several things that looked finished weren't.
The glass wasn't glass. The first version of the islands looked right, but text scrolling under the search island stayed razor sharp. The cause is a small rule in how browsers blur. An element with any backdrop-filter, even one that blurs by zero pixels, becomes the boundary that its children's blur can see through to. The old bar had been told backdrop-blur-none, which our CSS toolkit compiles to blur(0), not none. So each island faithfully blurred the empty, transparent bar behind it, and nothing of the page. The fix was one line that sets the bar to backdrop-filter: none, and a note next to it saying why.
The development server lied. Our local development server sometimes generates no CSS for a class that was just added to a file. The element still renders, only without its new styling. Screenshots taken against it showed layouts that would look different in production. Every check in this redesign was redone against a real production build.
A rebuild that would have quietly deleted something. The homepage's stylesheet is generated. Regenerating it from scratch would have dropped a rule someone had added by hand, one that swaps an image in light mode on another page. We rebuilt only the homepage's slice of the stylesheet and left the shared file exactly as it was.
One letter of a store name. The first phone version of the islands squeezed the store switcher down to a single character next to five buttons. Moving the logo and the theme toggle, as described above, is what gave it room.
Tell us what's wrong
This is a beta, and the redesign is new. If a screen reads worse than it did yesterday, we want to hear it. Click Beta in the top bar or Send feedback in your account menu, or write to contact@platformdtc.com. A person reads both.
If you don't have an account yet, you can create one and see all of this on a real store.