Design System

Ideology

The signed-in app reads as one calm instrument: chrome recedes, content leads. Every decision below was measured against a reference, not guessed.

• Chrome is neutral. Navigation, panels, and controls live in one cool gray family. The interface never competes with the user's products, orders, or colors.
• Borders, not shadows. Depth comes from hairlines and a ≤2% background shift. Shadows are reserved for true overlays (menus, the open primary panel, modals).
• One hue family per surface. Never mix warm and cool grays. The original rail clash (warm #fbfbfa paper on the cool #f6f7f9 canvas) is the cautionary tale.
• Measure references. When a product is named as the feel to match, measure it. The rail's hover timing was ported from Supabase Studio's source, not eyeballed.
• Emoji are content, not chrome. Page titles, nav items, and panel labels are plain text with 1.5px-stroke outline icons.

Panel system

Two panels, fixed vocabulary. The primary panel is the shared navigation rail. A secondary panel is a page's own left panel.

Primary panel (studio-rail.js / studio-rail.css)

• Collapsed 56px icon strip on every private page (≥901px). Hovering opens the 240px panel; leaving closes it. The dashboard (index.html) keeps its bespoke always-open rail — the visual reference the hover panel must twin exactly (same icons, divider before Help, account row with email + plan chip + chevron).
• Account row opens the drop-up menu (Account Settings / Billing & Subscription / Sign out — plus Design System for admins). The menu sits above the panel (z-index 99 vs the panel's 97) and pins the panel open while visible.
• Library rows navigate to their pages; a hover-revealed + affix is the quick add (modal on the dashboard, ?add=1 deep link elsewhere).
• Never renders in embed-mode or below 901px, and on dual public/private pages it waits for body.authenticated.

Secondary panel

• Exactly 240px wide (help.html's Documentation panel is the width reference), card-white, hairline right edge, sticky full-height beside the strip.
• Sections: sentence-case labels (Navigate, Filters, Quick actions) over 13px items with the neutral active pill. Counts use small gray badges.
• Page toolbars belong here, not above the content: Order Manager's tabs, search, filters, and export all live in its panel.
• Functional list panes (Order Viewer's order list) follow the same recipe and width.
• Panel header: when a page's identity lives in its secondary panel (Order Viewer), the panel header is the page name set as a standard section label — sentence-case 11.5px/500 #9ba0aa — with an optional subtitle at 12px #848a96, separated from the sections below by an #eceef2 hairline. Breadcrumbs are a main-content pattern and never appear inside panels.

Secondary panel — alternative width

The same panel in every respect that carries the brand — surface, hairline, label style, item rhythm, header, footer — at 480px instead of 240px. Main content clears 56 + 480 = 536px exactly as it clears 296px normally. Width is the only thing that changes. Every type size, weight and colour is the standard panel's; a wider panel is not a licence to restyle what sits in it.

• When to use it: only when the panel holds controls rather than navigation, and 240px would force every row to stack. Customize Appearance is the reference: colour field, hex input and a 14-swatch row all sit on one line at 480px and cannot at 240px.
• Never for a navigation panel. Nav items are 13px labels — doubling the width just doubles the empty space, and the two panels stop reading as one system.
• Collapsible groups are the pattern that makes the extra width work: the group label is the toggle. It keeps the standard section label exactly — sentence-case 11.5px/500 #9ba0aa — going to #17181c on an #f4f5f8 hover, with a chevron rotating −90° when closed. Being interactive does not earn a label extra size or weight: the chevron and the hover carry the affordance. One group open by default; open/closed state persists per browser. Groups are separated by an #f4f5f8 hairline, not a card edge.
• At 901–1280px it narrows to 360px (main clears 416px) rather than collapsing — the controls still fit, just tighter.
• The trap: a panel pinned with position: fixed leaves its grid track behind. If the layout is still a grid, the main content is placed into that vacated column and silently keeps the panel's old width. Make the layout a plain block at panel widths — and beware an inline display set by JS, which beats the stylesheet.

Color tokens — "Bright White"

The panel surface is the exact content-card white, and every chrome gray leans cool with the canvas. Verified computed-equal, not near-equal.

Semantic families — one shade set per role

Content colors are exempt from all of this: palette libraries, filament and material swatches, template presets, generated-ad art — anything the product hands to the user is data, not chrome.

Typography & the page header

DM Sans everywhere, line-height 1.6. Every applicable page begins with the standard header, measured from the Color Library.

Exclusions: the customizer editors and Ad Generator keep their tool layouts; the dashboard is the breadcrumb root (its greeting is the header). Order Viewer has no breadcrumb at all — its identity lives in its panel header (see the panel header spec above).

Geometry contract

Measured from the Color Library at 1440×940 and enforced by probe on every page.

Patterns

Library quick add

Rows navigate to the real page. The hover-revealed + is the shortcut: it opens the quick-add modal on the dashboard, and deep-links (colors.html?add=1 / fonts.html?add=1) elsewhere — the target page scrolls to and spotlights its add UI.

Navigate scroll-spy

Secondary panels list the page's real sections. Clicking smooth-scrolls and moves the active pill; the first item starts active.

Count badges

11px/600 #848a96 on #f0f2f5, pill radius, right-aligned in the row; inverts to white on the active pill.

Buttons

Primary actions are brand indigo (13px/600, radius 8 in panels); ghost buttons are white with #e5e8ef borders and #f4f5f8 hover. No translateY bounces inside panels.

Callouts & info banners

Solid #eef2ff background (never a gradient), #c7d2fe border, radius 12–14. Title 600 #4f46e5; body text is always neutral #4b5563 — accent-colored paragraphs are a defect. Inline code chips sit on rgba(79,70,229,.08).

Step markers

Numbered circles are #4f46e5 with a white numeral. Completed steps go #16a34a; locked/disabled steps #e5e7eb with #9ca3af numerals. Step markers are structure, not CTAs — never violet.

Icon tiles

Two sanctioned treatments: solid — #7c3aed with a white icon, for brand/section/banner tiles; tint — #eef2ff with a #4f46e5 icon, for informational cards (contact methods, utility cards). Tiles carrying semantic meaning (a green billing tile, an amber warning tile) keep their semantic family.

Edge-to-edge rules

Full-width hairlines and section rules run edge to edge of the page — the public-site style carries into headers and dividers here.

Motion

• Primary panel: zero hover delay both directions; the open/close is a width morph, 100ms linear (56→240px) with children fixed at 220px so labels are revealed, not reflowed. Measured from Supabase Studio's source.
• Color transitions: 0.15–0.2s ease on hover states; the account chevron rotates 180° in 0.15s.
• Focus pins: an active search field or an open account menu keeps the primary panel open regardless of the pointer.
• Restraint: chrome never bounces, scales, or slides more than it must; celebratory motion belongs to content moments, not navigation.

Mobile contract

• ≤900px the shared top nav is the only navigation — the rail renders nothing there, ever. Removing the top nav on mobile strands phones.
• Secondary panels stack full-width above the content at ≤768px with a bottom hairline.
• Zero horizontal scroll at 390px on every page — enforced by an automated sweep.
• Touch targets reach 44×44px via invisible ::after overlays, never by visually thickening the chrome.
• Nothing is removed on mobile to make it fast — features get optimized, not deleted.