A design system in plain CSS
Tokens and component styles that work in any stack, with accessible Vue 3 components built on them. The editor here is made of nothing else: repaint it.
Skin Ori
Untitled weave
0 strokesCSS that stands alone
Design tokens and a stylesheet per component. No JavaScript and no build step, so the same classes work in plain HTML, htmx, Astro or any framework.
Read the CSS guideTheming without JavaScript
Eight skins and dark mode are set on <html>; sizes and variants are single classes. All of it is CSS custom properties.
Open the skin galleryAccessibility that is tested
axe runs against every component, every color pair passes WCAG AA in every skin, and keyboard behavior is exercised in real Chromium, Firefox and WebKit.
See what is testedBehavior you can replace
The Vue components get keyboard, focus and ARIA from @oriui/headless. Use it with your own markup, or plug in another engine for one widget.
Read about headless- HTMLCSS
- VueCSS, components, behavior
- ReactCSS
- SvelteCSS