VelinCloud
WCAG-first patterns
Skip links, focus rings, overlay inert, and announcer feedback baked into components.
VelinStyle + Ocean theme
Ship accessible interfaces without the framework tax.
OKLCH tokens, container-aware layout, motion, and Web Components that respect focus — a fictional SaaS landing built entirely with VelinStyle primitives.
7:1+ contrast defaults
38 Web Components
13 theme presets
NorthwindAcme CloudStudio 42Blue HarborHelix LabsFrame.io clone
Everything in one layer stack
Utilities stay predictable because cascade layers keep themes, components, and security separate.
13 theme presets
Swap data-velin-theme or load preset CSS — this page uses Ocean.
Runtime 1.0
Motion, search, highlight, and agent metadata — live demo.
Scanner & perf
velinstyle scan, layout audit, and PII rules for CI pipelines.
Mobile shell
Bottom nav, sheets, and safe-area utilities — resize to see mobile nav below.
VelinSearch
Fuzzy offline docs search in the dashboard demo.
Developers love the token pipeline
Design tokens compile to CSS, JSON, and agent bundles. Validate OKLCH pairs in CI with npm run test:contrast.
- Subpath exports for motion, search, highlight
velin-code-blockwith lazy syntax highlighting- Velin-Meta for Cursor & Copilot
“We replaced three micro-libraries with VelinStyle tokens and one bundle. Our Lighthouse accessibility score jumped on the first pass.”
Simple pricing
Demo plans — buttons show toast feedback only.
Starter
$0
Open source MIT
Team
$24/seat
Scanner, themes, CLI layout
Enterprise
Custom
SSO, audit, support
FAQ
Is this a real product?
No — VelinCloud is a marketing demo for VelinStyle. VelinStyle itself is a real MIT framework.
Can I use my own theme?
Yes. Load any preset from
dist/themes/ or override tokens in your CSS.Does it work without React?
Yes. These demos are plain HTML. React wrappers ship in the package for Vite starters.
Ready to try VelinStyle?
Explore the dashboard, e-commerce, and runtime demos — all built with the same token stack.