# 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.