Orbitarium Design
Colors
One brand token, --orb-primary, drives every tint via color-mix(). Swap it with data-orb-accent on <html>, or recolor one block with orb-tone-*.
--orb-primary--orb-primary-hover--orb-primary-dim--orb-success--orb-danger--orb-warning--orb-info--orb-surface--orb-surface-alt--orb-bordercrimsonredcoralorangetangerineambergoldyellowolivelimegreenemeraldminttealaquacyanskycobaltbluenavyindigovioletlavenderpurpleplumfuchsiapinkberryrosebrownstoneslategraphiteTypography
Three heading levels, a lead paragraph, muted/subtle text helpers, links, keycaps and a monospace utility.
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.
Search with Ctrl K, close with Esc.
orb-mono orb-text-sm - for code-like fragments.
Forms
Inputs, select, textarea, input groups, checkbox, radio, switch and range, all keyboard accessible with visible focus rings. Inputs are 16px on phones so iOS never zooms in.
Cards
Structured cards with header, body and footer; feature cards; quiet panels; and an accent stripe that takes any tone.
12,402 requests this month across 3 API keys.
Fast by default
No build step. One stylesheet, one script, both small enough to inline.
A tone stripe on top marks a highlighted plan or pinned item.
A quieter container for grouped settings or sidebars, no header divider.
Pills & badges
Status pills for tables and lists; badges for labels. Both take any tone, and badges come in tinted, solid and outline.
Alerts
Inline messages that say what happened and what to do next. Four semantic variants, or any tone.
Tabs
Raised segment on a sunken track, or an underline. Arrow keys, Home and End move between tabs. Without panels it works as a segmented control.
Three environments, 12 deploys this week, no failed builds.
McAm deployed production 2 hours ago.
Project name, domains and access keys live here.
Progress & avatars
Set the fill with --orb-value. Spinners and avatars take tones too.
Toasts
Call Orbitarium.toast("Saved", { tone: "success" }) or add data-orb-toast to any button. Tap a toast to dismiss it.
Table
Add orb-table-responsive to stack rows as cards under 720px, or wrap in orb-table-wrap to scroll sideways instead.
| Project | Status | Owner | Updated |
|---|---|---|---|
| example.com | Live | McAm | 2 hours ago |
| app.example.com | Deploying | McAm | Yesterday |
| docs.example.org | Preview | McAm | Today |
| shop.example.net | Pending | McAm | 3 days ago |
Modal
Driven by orbitarium.js. data-orb-modal-open, Escape and backdrop click all close it, and focus returns to the button that opened it. On phones it slides up as a bottom sheet.
Depth mode
Buttons are raised everywhere. Add orb-depth to <html> or any container for the full treatment: accent glow on solid buttons and sheen on cards, no layout change.
Light falls from the top edge.