Design System

Consistent CSS classes for buttons and badges across the web UI.

Buttons

All buttons use the .btn base class plus a variant and optional size modifier.

<button className="btn btn-primary">Save</button>
<button className="btn btn-secondary btn-sm">Cancel</button>
<button className="btn btn-danger btn-sm">Delete</button>
<button className="btn btn-primary btn-lg">Submit Form</button>

Base (.btn)

Shared properties applied to all buttons:

Variants

Sizes

States

All handled by CSS — no JS needed:

Usage Guidelines

• Forms: Use btn btn-primary btn-lg for submit buttons (full width)
• Tables: Use btn btn-secondary btn-sm for action buttons, btn btn-danger btn-sm for delete
• Modals: Cancel = btn btn-secondary btn-sm, Confirm = btn btn-primary, Destructive = btn btn-danger btn-sm
• Navigation: Use btn btn-secondary for prev/next, btn btn-ghost for menu items
• Tabs: Active = btn btn-primary, Inactive = btn btn-secondary
• For dynamic color buttons (e.g., vote buttons), use btn btn-lg and set background, color, border via style prop

Badges

All badges use the .badge base class plus a variant.

<span className="badge badge-online">active</span>
<span className="badge badge-muted">viewer</span>
<span className="badge badge-accent">Platform Admin</span>
<span className="badge badge-rare">RARE x3</span>

Base (.badge)

Variants

Usage Guidelines

• Status: badge-online (active), badge-offline (blocked), badge-degraded (warning)
• Roles: badge-muted for tenant roles (viewer, member, admin), badge-accent for platform admin
• Species: badge-rare for rare detections, badge-online for confirmed, badge-danger for rejected
• Webhooks/workers: badge-online for active, badge-muted for disabled

Page Layout

Every page follows a consistent fixed-header / scrollable-content pattern:

┌──────────────────────────────────────────────┐
│ .page-header  — Title + subtitle + actions   │  fixed
├──────────────────────────────────────────────┤
│ .page-toolbar — Filters, sort, toggles, ⋮   │  fixed
├──────────────────────────────────────────────┤
│ .page-scroll  — Content (cards, tables...)   │  scrolls
├──────────────────────────────────────────────┤
│ .page-footer  — Pagination controls          │  fixed
└──────────────────────────────────────────────┘

Classes

Principles

• page-header is always present. Title + optional subtitle + optional action buttons (e.g. "Register satellite")
• page-toolbar is optional — only rendered if the page has filters or controls. Uses flexbox wrap for responsive layout. Styled inputs/selects are automatic via child selectors.
• page-scroll wraps all scrollable content. Only this area scrolls.
• page-footer is optional — only for pages with pagination (Detections, Timeline, Audit Log)
• Pages use React fragments (<>...</>) as their root element so the layout classes sit directly inside .main-content's flex column

Overflow Menu

For pages with many secondary actions (e.g. export formats), use the OverflowMenu component:

import { OverflowMenu } from "../components/OverflowMenu.js";

<OverflowMenu items={[
  { label: "Export CSV", href: "/api/export?format=csv", download: true },
  { label: "Export JSON", href: "/api/export?format=json", download: true },
]} />

Uses CSS classes .overflow-menu, .overflow-menu-trigger (⋮ button), .overflow-menu-dropdown (positioned dropdown).

Mobile Behavior

On screens < 768px:

• .page-toolbar loses its fixed position and scrolls with content (via flex-shrink: unset)
• .page-footer stays fixed — pagination is always accessible
• Toolbar inputs expand to full width

Scrollbars

Global scrollbar styling — thin (6px), transparent track, faint thumb:

• Chromium: ::-webkit-scrollbar rules
• Firefox: scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent

Color Palette