The Cartly admin panel has been rebuilt with a dark-first design system, 375px mobile layout, and a systematic accessibility sweep. Every page, every route — updated.
Today we are shipping the most significant visual update to the Cartly admin panel since launch. Every page has been rebuilt with a cohesive dark-first design system, a mobile-friendly layout, and dozens of accessibility improvements.
The new admin uses a CSS token system built on --adm-* custom properties. Every colour, spacing value, radius, and font weight is expressed as a token — making the panel consistent across light and dark mode and giving embedded apps a stable API to match the host UI.
Dark mode is now the default. Light mode is one click away in the topbar, and your preference is remembered across sessions.
The admin now works comfortably on a 375px phone screen. We shipped a responsive layout with safe-area insets for notched devices, a bottom-sheet navigation drawer for small viewports, and a redesigned AdminTopbar that collapses gracefully. Whether you are checking an order on the go or approving a discount from your phone, the admin panel keeps up.
The redesign covers the entire admin surface: products, variants, orders, customers, collections, discounts, apps, settings, billing, the developer portal sidebar, and the platform super-admin. We migrated 28 checkbox components, standardised button sizes, and unified card and table layouts across every route.
A systematic conformance sweep identified 138 findings. We closed 67 P0 and P1 issues — including missing ARIA labels, broken focus traps in modals, keyboard navigation gaps in data tables, and colour contrast failures in secondary text elements.
React hydrates on the server with a default theme class. Before this release, merchants on dark mode would briefly see the light-mode panel before React kicked in. The fix: a tiny inline script in <head> reads localStorage and sets the theme attribute on <html> synchronously — before the first paint. A post-mount hook then keeps it in sync with user preference changes.
--adm-* token reference, cartly-admin wrapper requirement, and theme bridge pattern for embedded apps.