Accessibility-first CSS + Web Components
OKLCH tokens, utilities, themes, and 43 custom elements — boot only what the DOM needs.
npm i @birdapi/velinstyle@1.3.0
Surfaces & Studio
Ready-made interfaces and the Quiz Challenge today — visual template building when Studio ships.
Available now
Curated production-ready interfaces, live showcases, and a template library. Pull surfaces from the CLI and compose with scaffold --atelier — complete pages, not isolated components.
Coming soon
The planned visual template builder: combine Atelier surfaces, edit layouts, and export production-ready markup — authoring UI on top of the library, not a replacement for it.
Available now
60 questions on components, tokens, a11y, runtime, and CLI — levels, streaks, badges, and a leaderboard. Standalone app at /vs-quiz/.
Framework facts
Core numbers first — then grouped capabilities. Production Builder ships trimmed output: build only what your project actually uses.
Why VelinStyle
WCAG 2.2 AAA-oriented tokens, focus, keyboard contracts.
Accessibility docsOKLCH tokens, nesting, layers, container queries.
Design tokensbootFromDOM loads only components present in the page.
JavaScript API43 custom elements for overlays, search, toast, charts.
Component indexnpm pin, CDN, CLI, generated docs, live galleries.
DownloadSelective loaders, audit CLI, no full IIFE on home.
Performance auditFramework comparison
One stack · three habits
Token-driven button with variants and focus ring.
Button docsCustom elements for theme, toast, overlays, search.
Component index27 velin-* bridges for motion and behavior.
Motion attributesCapabilities
Core, Runtime, Accessibility, Developer, and AI — click a box to open the matching docs.
VelinStyle
The design system foundation — components, utilities, and OKLCH tokens on one contract.
Selective boot for motion, search, highlight, and themes — only what the DOM needs.
AAA-oriented defaults for focus, contrast, direction, and reduced motion.
CLI, docs, playground, and generators for plan-first delivery.
Agent-consumable metadata for briefings, plans, and toolchains.
AI Runtime
Official skills, packs, and workflow graphs run through registry + CLI — not roadmap, already available.
IDs, dependencies, status, confidence
frontend · design · a11y · review · enterprise
Landing · component ship · release gates
velinstyle skills · workflow
Quick start
velinstyle skills list && velinstyle workflow run release-gate
CLI Live
Watch velinstyle motion turn an image into a clip — and the surface we ship with it: presets, local engine, optional PixVerse.
$
Release
Velin Motion Clips — image→clip CLI (local HTML/CSS + optional PixVerse AI). Page Motion remains the DOM registry. Builds on Motion 1.2.6–1.2.9 and Velin Experience.
Package @birdapi/velinstyle-motion · motion create / atelier / transition / sequence / usage · interactive wizard · mini-prompts · optional PixVerse provider (credits).
Timeline Registry + Runtime · Composer · Scroll/Transitions · analyze · review · optimize · full Blueprint Registry. Studio-ready data; Studio UI later.
Full Motion Registry (all namespaces) · Trigger Engine · Policies · doctor/scan/policy/demo · Gallery v1 · velin-motion + velin-trigger.
Registry · Contract · Themes/Modes · full CLI surface · dashboard · --record + replay · plugin skeleton. The binary is only the entrypoint.
Scan your project — HTML, Blade (.blade.php), Twig, Vue, React, Astro, Markdown/MDX. Structured Production Report with Savings %.
Build only what your project actually uses. Analyze the project — CSS, Web Components, themes, icons, and motion trimmed to what you need, with a size report.
Pull Library templates from the CLI: atelier list, atelier 24, scaffold --atelier 24. Atelier ≠ Velin Studio (Studio remains planned).
velin-otp-input, velin-password-strength, velin-empty-state — components teams actually need.
Severity states for tables and data tables — less custom CSS.
Modal, Drawer, and Sheet support dynamic / reactive titles.
Labeling and provenance — AI, trust, compliance, metadata. HTML bridge, claim taxonomy, CLI doctor / report / migrate.
Reveal, stagger, and reduced-motion contracts in the attribute layer.
Fuzzy documentation search as velin-search on the homepage.
Selective syntax highlighting for galleries and code blocks.
Plan-first scaffolding and heuristic review gates for a11y, SEO, and design — beta, schemas still expanding.
Richer velin-agent.json and llms.txt with knowledge graph, pages, sections — beta seed.
Official skills with capabilities, workflow graphs, packs, bundles, and project templates for agent execution.
Page types, section graphs, and design constraints — seed coverage, not a finished AI design system.
Selective ESM entry points — boot only the chunks your DOM needs.
AAA-oriented defaults, focus-manager overlays, and live Test Center checks.
Attribute and system dark parity, denser surface stack, 13 themes.
Selective loaders and audit CLI — no full IIFE on the homepage.
Component-local layout with container query utilities and docs.
43 web components and 35+ CSS components — overlays, search, charts, forms.
Layout, display, spacing, and position utilities on the shared token contract.
27 HTML attributes for motion, density, and progressive enhancement.
Thirteen themes on one token contract — toggle live in the nav.
Versions, site badges, and docs aligned after Technical Debt 1.2.8. verify:home green again.
Security check step, publish pack dry-run, malware categories, Motion V2 fallbacks documented.
CLI security on the Security Engine — doctor, scan, audit, publish, ci, deps, secrets, report.
Ship surface, Design Intelligence, AI Skills, and new WC primitives — base of the 1.2 line.
Live Playground
Theme, density, radius, and spacing reshape the same live surface. Labels, focus, and contracts stay intact.
Quality claims are measured in the Test Center — not asserted here.
€48k
1.2%
72
Component Contracts
Purpose, when / when not, keyboard, ARIA, API — then the live demo.
Quality claims are measured in the Test Center — not asserted here.
Blocking decision. Use for confirm/pay. Not for navigation.
Esc, focus trap, aria-modal. Keyboard: Tab cycle.
Side navigation / filters. Not for critical confirms.
Secondary tasks, carts, notes. Keep forms short.
Extra actions without a modal.
Roving tabindex.
Events bubble.
Action menus. Not for navigation trees.
Filterable single-select with keyboard.
Palette for power users (Ctrl/Cmd+K).
Dashboard
App shell with sidebar, KPIs, table, tabs, drawer trigger, and theme switch — all VelinStyle.
Quality claims are measured in the Test Center — not asserted here.
42
7
| Invoice | Status | Total |
|---|---|---|
| #1042 | Paid | €129 |
| #1041 | Open | €49 |
Deploy succeeded · seat invite sent · theme switched.
Token Lab
Spacing, radius, elevation, density, surface, motion — live on nav, card, form, chart, and CTA.
Quality claims are measured in the Test Center — not asserted here.
Controls write real --velin-* tokens on #tokenSurface. Optionally compare with defaults below the live stage.
Live tokens
Radius, elevation, density, accent and typography cascade here via --velin-*.
| Token | Value |
|---|---|
| --velin-radius-md | live |
| --velin-space-3 | live |
| --velin-color-primary | live |
Control (defaults)
Unmodified --velin-* defaults for side-by-side proof.
Animation Gallery
Only contract-backed motion: focus, overlays, feedback, loading, reveal, and reduced-motion.
Quality claims are measured in the Test Center — not asserted here.
Visible focus ring for keyboard users. Tab into the control.
Show secondary content without leaving the page.
Expanded panel content.
Blocking decision with focus trap. Esc closes.
Side navigation / filters. Keep short paths.
Transient status feedback with live region semantics.
Busy state + spinner. Prefer explicit aria-busy.
Entrance only when motion is allowed.
Respect prefers-reduced-motion. Toggle reports system preference.
—
VelinStyle Test Center
Live labs with the same card layout — tune settings, watch the stage, then copy the markup.
Quality claims are measured in the Test Center — not asserted here.
ARIA live idle
—
—
—
—
—
—
—
—
—
—
—
—1 button
—space-3
space-3
2
—stack
gap-3
none
start
—Tune radius, elevation and tone — then copy the markup.
md
mid
surface
—3 fields
cols-12
comfortable
—
idle
—
—Scores below are not marketing claims — run axe-core for measurable failures.
Showcase
Screenshot, industry, components, utilities, themes, responsive, dark, a11y, live demo, code, case study.
Quality claims are measured in the Test Center — not asserted here.
Loading showcase…
Fair criteria
Four measurable axes. No Bootstrap/Tailwind/Shoelace CSS sketches. Compare on evidence, not vibes.
| Criterion | What we measure | VelinStyle today | Explicit non-claim |
|---|---|---|---|
| Accessibility | Focus, keyboard, ARIA contracts; live axe on stage | Component contracts + Test Center axe scan | Not a WCAG certificate for your finished product |
| Tokens | OKLCH design tokens + theme CSS that cascade | Token Lab writes real --velin-* |
Not Figma token sync or a multi-brand design ops suite |
| Bundle | Selective boot vs full framework dump | ESM bootFromDOM — only components present in the DOM |
Not zero-JS / CSS-only; runtime still loads what you use |
| DX | Docs reachability, search, install path, AI metadata | Nav search, docs, npm install, velin-agent.json / llms.txt |
Not a full IDE extension or Tailwind-scale plugin ecosystem |
Want competitor parity claims? Use their docs and measure the same four axes — don’t trust painted lookalikes.
Install
npm pin, CDN, runtime exports, docs, playground, source — copy and ship.
$
Build faster.
Design smarter.
Ship better.
Partner · Motion AI
Optional AI video for Motion Clips — local HTML/CSS stays free; PixVerse unlocks MP4 when you need it.
Text & image to video on PixVerse, wired through the VelinStyle CLI partner flow. Same neon look as the Motion surface — now at the end of the expo.
Affiliate partner link · opens PixVerse signup
Live velin-modal — Escape, overlay click, focus trap.
Offcanvas pattern via velin-sheet.
Drawer animation live.
Modal open/close lifecycle.
