Payd Labs Design System
This design system captures the shared Payd Labs interface language currently visible across Payd Stables, Sentinel, Knowhere, Dispatch, OneLink, and Secret Share. It is meant to be used when starting or repairing Payd Labs dashboards, login surfaces, docs sites, checkout flows, and operational control planes.
The system is compact, technical, calm, and task-first. It favors precise information hierarchy over decoration, quiet borders over heavy containers, and real workflow state over marketing copy.
Primary References
| Page | Use it for |
|---|---|
| Principles | Product feel, information density, what to avoid |
| Tokens | Colors, fonts, radius, spacing, shadows, motion |
| Typography | Font family choices, sizes, weights, labels |
| Color Themes | Light and dark mode rules and semantic state color |
| Layout | Shells, page spacing, responsive behavior |
| Components | Cards, tables, buttons, badges, forms, nav |
| Page Patterns | Dashboards, login pages, checkout, docs, control planes |
| Assets | Payd logo variants and product lockups |
| Implementation | CSS variables and Tailwind adoption |
| Examples | Copyable shell, login, table, and status examples |
| Evidence | Source files and projects inspected |
Core Shape
- Fixed app header at 56px (
h-14) with Payd logo, product name or pill, theme toggle, and session action. - Left sidebar at 224px (
w-56) for authenticated admin and control-plane surfaces. - Content padding of 16px on small screens and 24px on large screens.
- Cards and panels use surface background, a 1px neutral border, 8-12px radius, and soft shadows only when elevation matters.
- Headings use Space Grotesk. Body and form text use Nunito. Code and technical values use JetBrains Mono.
- Brand color is Payd navy. Accent, success, selected, and primary positive action color is Payd green.
Canonical Token Summary
:root {
--color-primary: #10263E;
--color-accent: #18D26E;
--color-surface: #ffffff;
--color-surface-secondary: #f8fafc;
--color-surface-tertiary: #f1f5f9;
--color-border: #e2e8f0;
--color-text: #10263E;
--font-heading: "Space Grotesk", sans-serif;
--font-body: "Nunito", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}