Layout

Payd Labs layout is optimized for dashboards and workflow tools. Most products share the same fixed shell: header, sidebar, and padded content area.

Authenticated App Shell

Element	Size	Rule
Header height	56px	Fixed top, full width, border bottom
Sidebar width	224px	Fixed left, starts below header
Desktop content offset	224px	`lg:pl-56`
Content padding	16px mobile, 24px desktop	`p-4 lg:p-6`
Max content width	1280px where useful	`max-w-7xl mx-auto`

Header structure:

Mobile menu button.
Payd logo.
Product name or pill.
Optional workspace or context switcher.
Flexible spacer.
Theme toggle.
Session action.

Sidebar structure:

Flat list by default.
Optional small section dividers for major product areas.
Nav items: icon, 13px label, 8px radius, 8-10px vertical hit area.
Active state: accent pale background and accent-dark text.

Element	Rule
Wrapper	`min-h-screen flex items-center justify-center p-4`
Width	`max-w-sm`
Logo	28-32px high, centered
Product title	18px Space Grotesk
Panel	Surface background, 1px border, 12px radius, 24px padding
Error	Red pale background, 1px red-tinted border, 12px radius

OTP inputs can be a single centered monospace input or five fixed boxes. Use a visible back action on the OTP step.

Dashboard Layout

Dashboards usually follow this order:

Compact page title.
Optional filters or action row.
Metric grid.
Status breakdown or secondary summary.
Table, activity feed, or workflow detail grid.

Recommended grid:

<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
  ...
</div>

Tables

Table shells are panels:

bg-surface
border border-border
rounded-xl
overflow-hidden
nested overflow-x-auto

Header rows use bg-surface-secondary, bottom border, uppercase Space Grotesk headers, and 10-12px vertical padding. Body rows use subtle hover background and thin border dividers.

Detail Pages

Use two-column grids for detail pages only when both columns have comparable importance. Otherwise prefer a primary column and a narrower context panel.

Use cards for actual grouped data, not for entire page sections. Avoid cards inside cards.

Public Checkout And Payment

Checkout surfaces can be slightly more spacious than admin tools but should still use the same tokens. Keep the payment card centered, show the Payd logo, use clear step state, and keep amounts, addresses, and timers visually stable.

Responsive Rules

Sidebar collapses behind a mobile overlay below lg.
Content always keeps 16px minimum padding.
Tables scroll horizontally rather than shrinking into unreadable columns.
Inputs on small screens should be at least 16px text where mobile browsers would otherwise zoom.
Fixed-format UI such as QR codes, OTP boxes, icon buttons, and metric cards should have stable dimensions.