Color Themes

Payd Labs theme behavior is driven by CSS variables on :root and .dark. Applications should toggle the .dark class on document.documentElement and save the user preference in local storage.

Light Theme

Light mode is the default for most operational surfaces.

:root {
  --color-primary: #10263E;
  --color-accent: #18D26E;
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;
  --color-surface-tertiary: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-medium: #cbd5e1;
  --color-text: #10263E;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
}

Dark Theme

Dark mode uses a neutral stack instead of pure black:

.dark {
  --color-surface: #0f1419;
  --color-surface-secondary: #161b22;
  --color-surface-tertiary: #1c2128;
  --color-border: #30363d;
  --color-border-medium: #484f58;
  --color-text: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-tertiary: #6e7681;
  --color-accent: #4ae08e;
  --color-accent-dark: #4ae08e;
  color-scheme: dark;
}

Semantic State

State	Use
Success	Completed, available, approved, active, selected positive result
In progress	Pending, confirming, processing, onboarding, received
Warning	Awaiting action, underpaid, expired, partial, risky but recoverable
Error	Failed, rejected, suspended, invalid, destructive
Neutral	Cooldown, inactive, unavailable, unknown

Status Pills

Use pale backgrounds with colored text. Keep status pills compact:

<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-accent-100 text-accent-dark">
  completed
</span>

Recommended mappings:

Bucket	Light classes or tokens
Success	`bg-accent-100 text-accent-dark`
In progress	`bg-blue-50 text-blue-600` or `bg-primary-100 text-text`
Warning	`bg-amber-50 text-amber-600`
Error	`bg-red-50 text-red-600`
Neutral	`bg-surface-tertiary text-text-tertiary`

Selection

Selected nav items and selected cards use green-tinted backgrounds:

background: var(--color-accent-100);
color: var(--color-accent-dark);

Focus

Inputs and controls use accent focus:

border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-100);

Avoid

Do not create single-product palettes unless a product has a real brand need.
Do not dominate the page with gradients.
Do not use pure black for dark surfaces.
Do not use accent green for every visual element; it should mark action, selection, success, or important positive state.