Orbitarium Design Lite
Lite Showcase

Every Orbitarium Design Lite component,
on one page.

This page uses only orbitarium-lite.css, plus a little page glue for spacing. Toggle dark mode or pick a primary color below; every example responds live. Need tabs, toasts or dropdowns? They live in the full build.

Colors

One brand token, --orb-primary, drives every tint via color-mix(). Lite has no preset palette: set the token to any color, and use the five semantic tones for status.

Primary
--orb-primary: #3862f5;
Brand & semantic
--orb-primary
--orb-primary-hover
--orb-primary-dim
--orb-success
--orb-danger
--orb-warning
--orb-info
Surfaces
--orb-bg
--orb-surface
--orb-surface-alt
--orb-border
--orb-border-strong

Typography

Three heading levels, a lead paragraph, muted and subtle text helpers, links and a monospace utility.

Heading One / orb-h1
Heading Two / orb-h2
Heading Three / orb-h3

orb-lead - the intro paragraph under a heading.

Body text sits at the base size and inherits --orb-font-sans. orb-link for inline links.

orb-text-muted - for secondary copy.

orb-text-subtle - for the quietest labels.

orb-mono orb-text-sm - for code-like fragments.

Buttons

Flat fills and hairline borders. Hover darkens the fill, focus shows a ring. Add a semantic orb-tone-* to recolor soft and outline buttons.

Variants
Semantic
Sizes & shapes
Full width

Forms

Inputs, select, textarea, checkbox, radio and switch, all keyboard accessible with visible focus rings. Checkbox and radio are native controls tinted with the accent. Inputs are 16px on phones so iOS never zooms in.

Enter a full address, like ada@example.com.
This field is optional.
Notifications

Cards

Structured cards with header, body and footer; feature cards; and quiet panels.

Usage Active

12,402 requests this month across 3 API keys.

Fast by default

No build step. One stylesheet, one script, both small enough to inline.

Plain panel

A quieter container for grouped settings or sidebars, no header divider.

Badges

Labels and statuses in tinted, solid and outline styles. Tinted and solid badges take any semantic tone.

Tinted
Default Primary Live Processing Pending Failed
Solid & outline
Solid New Pro Outline

Alerts

Inline messages that say what happened and what to do next, in four semantic variants.

Maintenance on Sunday
The dashboard is read-only from 02:00 to 03:00 CET.
Domain verified
example.com is connected and serving over HTTPS.
90% of your quota used
Requests pause at 100%. Upgrade the plan to keep them running.

Table

Add orb-table-responsive to stack rows as cards under 720px, or wrap in orb-table-wrap to scroll sideways instead.

ProjectStatusOwnerUpdated
example.com Live McAm 2 hours ago
app.example.com Deploying McAm Yesterday
docs.example.org Draft McAm Today
shop.example.net Pending McAm 3 days ago

Code block

A dark, horizontally scrolling block for snippets, with three highlight classes: orb-c-key, orb-c-str and orb-c-com.

/* Re-theme Lite with one token */
:root {
  --orb-primary: #0f9f6e;
}