Tokens
These tokens are the baseline shared across Payd Labs product UIs. They are extracted from Stables, Sentinel, Knowhere, Dispatch, OneLink, and Secret Share.
Color
| Token | Light | Dark | Use |
|---|---|---|---|
--color-primary | #10263E | #e2e8f0 | Payd navy, dark-mode primary text |
--color-primary-light | #1a3a5c | #cbd5e1 | Navy hover or emphasis |
--color-primary-dark | #0a1829 | #f1f5f9 | Deep navy, dark text on green |
--color-accent | #18D26E | #4ae08e | Primary action, success, selected |
--color-accent-dark | #12a557 | #4ae08e | Accent text on pale green |
--color-success | #18D26E | #4ae08e | Positive status |
--color-warning | #f59e0b | #fbbf24 | Attention, pending, partial |
--color-error | #ef4444 | #f87171 | Failure, destructive, invalid |
--color-info | #3b82f6 | #60a5fa | Informational state |
--color-surface | #ffffff | #0f1419 | App background or card surface |
--color-surface-secondary | #f8fafc | #161b22 | Page background, table header |
--color-surface-tertiary | #f1f5f9 | #1c2128 | Hover, input fill, skeleton |
--color-border | #e2e8f0 | #30363d | Default 1px border |
--color-border-medium | #cbd5e1 | #484f58 | Hover or stronger border |
--color-text | #10263E | #e6edf3 | Body text |
--color-text-secondary | #475569 | #8b949e | Secondary labels |
--color-text-tertiary | #94a3b8 | #6e7681 | Hints, timestamps |
Alpha Tokens
Use alpha tokens instead of new one-off colors:
--color-primary-50: rgba(16, 38, 62, 0.05);
--color-primary-100: rgba(16, 38, 62, 0.1);
--color-accent-50: rgba(24, 210, 110, 0.05);
--color-accent-100: rgba(24, 210, 110, 0.1);
--color-accent-200: rgba(24, 210, 110, 0.2);Typography
| Token | Value | Use |
|---|---|---|
--font-heading | "Space Grotesk", sans-serif | Headings, metric values, nav labels, badges |
--font-body | "Nunito", sans-serif | Body text, forms, tables, descriptions |
--font-mono | "JetBrains Mono", monospace | IDs, addresses, refs, code, OTP input |
Radius
| Token | Value | Use |
|---|---|---|
--radius-sm | 0.375rem / 6px | Tiny pills, compact action chips |
--radius-md | 0.5rem / 8px | Buttons, inputs, nav items, panels |
--radius-lg | 0.75rem / 12px | Cards, login panels, tables |
--radius-xl | 0.875rem / 14px | Larger workflow cards |
--radius-full | 9999px | Pills, avatars, circular icons |
Use 8px as the default control radius and 12px as the default card radius. Avoid larger radius unless the component is intentionally soft, isolated, or round.
Shadows
--shadow-soft: 0 2px 8px -2px rgba(16, 38, 62, 0.08);
--shadow-medium: 0 4px 16px -4px rgba(16, 38, 62, 0.12);
--shadow-strong: 0 8px 24px -8px rgba(16, 38, 62, 0.16);
--shadow-glow-accent: 0 0 20px -5px rgba(24, 210, 110, 0.4);Default cards often use border only. Use --shadow-soft for login panels, elevated menus, or card groups that need separation. Reserve glow for accent actions that need clear affordance.
Spacing
| Size | Value | Use |
|---|---|---|
| 1 | 4px | Icon gaps, tiny dividers |
| 2 | 8px | Control inner gaps |
| 3 | 12px | Compact cards, nav stack, table gaps |
| 4 | 16px | Small screen page padding, card padding |
| 5 | 20px | Card header/body padding |
| 6 | 24px | Desktop page padding |
| 8 | 32px | Login header spacing, major section separation |
Motion
Motion is short and functional:
- Theme and color transitions: 150-200ms.
- Page or route fade: 150-300ms.
- Enter-up motion: 8-12px vertical movement.
- Active button/card scale: 0.98.
- Skeleton shimmer: 1.5s where loading is meaningful.