Design System
HTML Markdown

Evidence

This system was codified from local source inspection on 2026-06-29. It should be refreshed when Payd Labs projects materially change their design language.

Projects Inspected

ProjectEvidence
Payd Stablespayd-labs-stables-v1/admin, checkout, ramp-ui, docs
Payd Sentinelpayd-labs-sentinel/sentinel-ui
Knowhere UI serverpayd-labs-ui-server/ui
Payd Dispatchpayd-labs-dispatch
Payd OneLinkpayd-labs-one-link/dashboard, docs, context.md
Payd Secret Sharepayd-labs-secret-share/ui

Repeated Source Facts

Fonts

Multiple projects define:

  • --font-heading: "Space Grotesk", sans-serif
  • --font-body: "Nunito", sans-serif
  • --font-mono: "JetBrains Mono", monospace

Brand And Accent

The repeated token set uses:

  • Payd navy: #10263E
  • Payd accent green: #18D26E
  • Accent dark: #12a557
  • Accent light: #4ae08e

Surface Stack

Light:

  • Surface: #ffffff
  • Secondary: #f8fafc
  • Tertiary: #f1f5f9
  • Border: #e2e8f0
  • Text: #10263E
  • Secondary text: #475569
  • Tertiary text: #94a3b8

Dark:

  • Surface: #0f1419
  • Secondary: #161b22
  • Tertiary: #1c2128
  • Border: #30363d
  • Medium border: #484f58
  • Text: #e6edf3
  • Secondary text: #8b949e
  • Tertiary text: #6e7681

Shell

Stables, Sentinel, Knowhere, OneLink, Secret Share, and Dispatch converge on:

  • h-14 fixed header.
  • w-56 left sidebar.
  • p-4 lg:p-6 content padding.
  • Payd logo in the top-left.
  • Theme toggle using sun and moon icons.
  • Logout/session control on the right.
  • Mobile menu with Menu and X icons.

Cards And Tables

Observed card shells:

  • Surface background.
  • 1px border.
  • rounded-xl or equivalent 12px radius.
  • shadow-soft for elevated/login panels.
  • 16-20px card padding.

Observed table shells:

  • Surface card with rounded outer corners.
  • overflow-x-auto.
  • Surface-secondary header row.
  • 12px uppercase Space Grotesk headers.
  • Compact body rows with hover background.

Login

Stables, Sentinel, Knowhere, and Secret Share use:

  • Centered max-w-sm form.
  • Payd logo above product name.
  • 18px product title.
  • Surface card, border, radius, 24px padding.
  • Full-width accent action.
  • OTP as second step.

Logos

The same Cloudinary logo assets appear across Stables, Sentinel, Knowhere, Dispatch, OneLink, Secret Share, Shops, and Connect docs:

  • Light: https://res.cloudinary.com/dadkir6u2/image/upload/v1767808544/payd_logo_for_light_mode_scwwdc.png
  • Dark: https://res.cloudinary.com/dadkir6u2/image/upload/v1767808543/payd_logo_for_dark_mode_otv7uv.png