Orbitarium Design is the CSS + JS framework behind WebOrbiton's own products, now with public source. No build step, no package manager, no config file to fight with. One stylesheet, one script, real components.
Pick an accent or flip dark mode in the header. Every token updates live, nothing reloads.
Every product at WebOrbiton, including MevaSearch, FlatlyPage, Publisium, runs on this exact system. This is that system, minus the parts specific to us.
Link the CSS, link the JS, start writing HTML. No PostCSS, no Vite config, no tailwind.config.js to maintain across projects.
Every color derives from --orb-primary through color-mix(). Swap it for one of 32 accent presets, or recolor a single block with orb-tone-*.
Every class is prefixed. Drop it into a project that already uses Bootstrap, Tailwind, or hand-rolled CSS with zero collisions.
Buttons, forms, tabs, dropdowns, toasts, alerts, tables, modals and nav shells, pre-built and keyboard accessible.
Solid buttons, tabs, switches and keycaps carry a light rim and a soft inner edge. Add orb-depth for an accent glow and glassy cards.
The header folds into a menu, the sidebar into a bottom tab bar and modals into bottom sheets. No extra markup, no media-query homework.
Buttons squish when pressed and settle back, switches stretch as they slide, checkmarks pop in, and menus, modals and toasts spring into place. It all runs on two easing tokens, --orb-ease-spring and --orb-ease-bounce, and switches off automatically when prefers-reduced-motion is set.
No package manager, no build step. Link style.css in the head, add two classes to <body>, and start writing orb- markup. script.js is optional, it adds dark mode, modals, tabs, dropdowns, toasts and the mobile menu.
Load both from the CDN, or download them and serve them from your own server.
<!-- 1. In <head> --> <link rel="stylesheet" href="https://cdn.orbitariumdesign.eu/style.css"> <!-- 2. On <body> --> <body class="orb-app orb-reset"> <button class="orb-btn orb-btn-primary"> Ship it </button> <!-- 3. Optional, before </body> --> <script src="https://cdn.orbitariumdesign.eu/script.js"></script> </body>
<!-- Download style.css and script.js, put them in your project, e.g. /assets/ --> <link rel="stylesheet" href="/assets/style.css"> <body class="orb-app orb-reset"> <button class="orb-btn orb-btn-primary"> Ship it </button> <script src="/assets/script.js"></script> </body>
A single scale for color, spacing, radius and motion, used consistently across every component.
Use Orbitarium Design in personal and commercial projects, edit it, fork it and build your own design system on top, all without attribution. Just don't release the unchanged original as your own, give forks their own name, and keep the official icons ours.
The full showcase page with buttons, forms, tabs, toasts, tables, modals and nav shells, all live.
Open the component showcase
Orbitarium Design