Principles

Payd Labs interfaces are operational products first. They should help a user inspect state, compare records, make a decision, and take the next available action without needing decorative explanation.

1. Calm, Dense, Scannable

Use compact spacing, clear labels, and predictable alignment. Dashboard screens should feel like instruments: quiet enough for repeated use, dense enough to compare related data, and structured enough that a user can scan across status, amounts, owners, times, and actions.

Avoid oversized hero sections, decorative cards, gradient-heavy framing, and large marketing layouts inside admin or workflow tools.

2. Product Identity Is Present, Not Loud

Every authenticated shell starts with the Payd logo and a product marker such as Stables, Sentinel, Knowhere, OneLink, or Invincible. The product marker is usually a compact pill or adjacent heading, not a large lockup.

Use product names to orient the user. Do not use invented decorative branding systems per product.

3. Surface Hierarchy Beats Ornament

The design language relies on:

• White or dark neutral surfaces.
• Low-contrast neutral borders.
• 8-12px radius.
• Soft shadows only when a surface needs separation.
• Accent green for selection, success, and the main action.

If a page needs more hierarchy, add section headings, tables, dividers, grouped rows, and better labels before adding decorative color.

4. Workflow State Is Explicit

Show real loading, empty, error, disabled, and success states. A disabled button should sit near visible requirements or state that explains why action is not available.

Do not put internal implementation labels such as readiness, stub, blocked, mock, or non-production on user-facing surfaces. Those belong in internal docs, trackers, PRs, and handoffs.

5. Use Icons As Controls

Common actions use familiar icon buttons where possible:

• Sun and moon for theme.
• LogOut for session end.
• Menu and X for mobile navigation.
• Chevron buttons for pagination.
• Copy, external-link, refresh, check, alert, and loader icons for workflow actions.

Use icon plus text for primary workflow actions and unfamiliar commands.

6. Tables And Data Lists Are First-Class

Most Payd Labs products are operational tools. Tables, status pills, metrics, audit rows, and detail panels should be polished rather than treated as secondary.

Tables use small text, uppercase Space Grotesk headers, sticky or visually stable headers where useful, horizontal scroll on small screens, and row hover states.

7. Light And Dark Themes Are Equal

The canonical implementation uses CSS variables so every surface can switch theme by toggling .dark on the root. Dark mode is not an inverted palette; it uses a neutral dark stack with softer text and adjusted shadows.