Lite keeps the orb- class names, tokens and core components of Orbitarium Design, drops the raised gradients and spring motion, and ships in about 35 KB. Built for landing pages, docs, admin tools and slow phones.
Lite has no preset palette. Pick any color and it becomes --orb-primary; every tint, hover and focus ring follows. Flip dark mode in the header.
Orbitarium Design
--orb-primary: #3862f5;
Lite is cut from the same source as Orbitarium Design. When a project outgrows it, swap two links and every page keeps working.
Stylesheet and script together weigh well under half of the full build. No web fonts, images or icons bundled in.
Every Lite class exists in the full build with the same name. Upgrade by changing /lite/style.css to /style.css, nothing else.
Solid fills, hairline borders and short color fades. No gradients, glows or spring animations, so it stays smooth on low-end devices.
Set --orb-primary to your brand color and every tint derives from it through color-mix(). Five semantic tones cover the rest.
Add orb-dark to <html>, or let the 4 KB script follow the system setting and remember the choice.
The header folds into a menu, modals become bottom sheets and tables stack into cards on small screens. No extra markup.
Start with Lite for content sites and simple tools. Move to Full when you need tabs, toasts, dashboards or the raised look.
| Lite | Full | |
|---|---|---|
| Size (CSS + JS) | ~35 KB | ~90 KB |
| Look | Flat fills, hairline borders | Raised gradients, rims, optional glow |
| Motion | Short color fades | Springy presses, pops and slides |
| Colors | Your --orb-primary + 5 semantic tones |
38 tones, 32 accent presets |
| Components | Buttons, forms, switch, cards, alerts, badges, table, modal, header, hero, footer | Everything in Lite, plus tabs, dropdowns, toasts, tooltips, progress, avatars, range, sidebar shells |
| Script | Dark mode, modal, mobile menu | Adds accents, tabs, dropdowns, toasts, scroll reveal |
Link style.css in the head, add two classes to <body>, and write orb- markup. script.js is optional, it adds dark mode, modals and the mobile menu.
Load both from the CDN, or download them and serve them yourself.
<!-- 1. In <head> --> <link rel="stylesheet" href="https://cdn.orbitariumdesign.eu/lite/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/lite/script.js"></script> </body>
<link rel="stylesheet" href="/assets/style.css"> <script src="/assets/script.js"></script>
Use Lite in personal and commercial projects, edit it and build on top of it, all without attribution. Just don't release the unchanged original as your own, give forks their own name, and keep the official icons ours.
Buttons, forms, cards, alerts, badges, tables and modals, all live on one page.
Open the Lite showcase