Components

This page codifies the recurring Payd Labs components seen in Stables, Sentinel, Knowhere, Dispatch, OneLink, and Secret Share.

Cards And Panels

Default panel:

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
}

Use:

• 0.5rem radius for compact panels and inputs.
• 0.75rem radius for cards, tables, login panels.
• 0.875rem only when a larger workflow card needs more softness.
• px-5 py-4 for card body when space allows.
• p-4 for dense metric cards.

Avoid nested card stacks. If content is nested, use dividers, lists, or surface secondary blocks inside the parent.

Metric Cards

Metric cards contain:

• 14-16px icon or small label row.
• 11px uppercase label.
• 24px Space Grotesk metric value.
• 12px secondary detail.

They sit in grid grid-cols-2 lg:grid-cols-4 gap-3 or equivalent.

Buttons

Base:

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

Primary accent:

.btn-accent {
  background: var(--color-accent);
  color: #ffffff;
}
.dark .btn-accent { color: #0a1829; }
.btn-accent:hover { opacity: 0.9; }
.btn-accent:active { transform: scale(0.98); }

Sizes:

Icon Buttons

Use 36px square icon buttons for header and toolbar actions:

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

Inputs

.input {
  width: 100%;
  min-height: 38px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
}
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}

Labels are 12px, semibold, secondary text. Helper text is 12px, tertiary text.

Badges And Status Pills

Badges are compact and informational:

• Height: 20-24px.
• X padding: 8-10px.
• Radius: full for status, 6px for product pills.
• Font: 10-12px, semibold.

Product pill:

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

Status pill:

<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold font-heading">
  completed
</span>

Tables

Table shell:

<div class="bg-surface rounded-xl border border-border overflow-hidden">
  <div class="overflow-x-auto">
    <table class="w-full text-sm">...</table>
  </div>
</div>

Header cells:

• px-4 py-2.5
• Space Grotesk.
• 12px.
• Uppercase.
• Secondary text.
• Surface-secondary background.

Body cells:

• px-4 py-2.5
• 12-14px.
• Monospace for references and addresses.
• Row hover: surface-secondary at partial opacity.

Navigation

Sidebar nav item:

<router-link class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] font-medium transition-all">
  ...
</router-link>

Use 16-17px Lucide icons. Active state is bg-accent-100 text-accent-dark.

Callouts

Callouts use semantic pale backgrounds and a 1px tinted border. They are for user-relevant information, warnings, or errors. Internal implementation status belongs in docs and trackers, not user UI callouts.

Skeletons And Loading

Skeletons use surface-tertiary, 8px radius, and either pulse or shimmer. Loading rows should preserve the final layout dimensions.