Accessibility-first CSS + Web Components

CSS Design System mit live Web Components.

OKLCH-Tokens, Utilities, Themes und 38 Custom Elements — nur laden, was im DOM liegt.

npm i @birdapi/velinstyle@1.2.0

Loslegen Installation GitHub Docs Live Demo

35+ CSS Components 38 Web Components 27 HTML Attributes 13 Themes

Accessibility

WCAG-2.2-AAA-orientierte Tokens, Fokus, Keyboard-Contracts.

Accessibility Docs

Modernes CSS

OKLCH-Tokens, Nesting, Layers, Container Queries.

Design Tokens

Native Runtime

bootFromDOM lädt nur Komponenten, die auf der Seite liegen.

JavaScript API

Web Components

38 Custom Elements für Overlays, Search, Toast, Charts.

Component Index

Developer Experience

npm-Pin, CDN, CLI, generierte Docs, Live-Galerien.

Download

Performance

Selektive Loader, Audit-CLI, kein Full-IIFE auf der Home.

Performance Audit

Kriterium

Bootstrap

Tailwind

VelinStyle

CSS

Komponenten

Utilities

Komponenten + Utilities

Accessibility

Teilweise

Selbst bauen

Integriert

Themes

Begrenzt

Selbst bauen

13 Themes

Motion

Plugins

Bibliotheken

Integriert

Web Components

Nein

CLI

Eingeschränkt

CLI

CLI + Generator + Audit

Agent Support

Nein

velin-agent.json · llms.txt

Live Demo

Docs Samples

Play CDN

Diese Seite

1. CSS Components

<button class="velin-btn velin-btn--primary">Invite</button>

Token-basierter Button mit Varianten und Focus Ring.

Button Docs

2. Web Components

<velin-theme-toggle themes-base="dist/themes/"></velin-theme-toggle>

Custom Elements für Theme, Toast, Overlays, Search.

Component Index

3. HTML Attributes

<div velin-reveal>Erscheint beim Scrollen</div>

Erscheint beim Scrollen

27 velin-*-Brücken für Motion und Behavior.

Motion Attributes

VelinStyle

3 Säulen

Core

Die Design-System-Basis — Komponenten, Utilities und OKLCH-Tokens auf einem Vertrag.

CSS Components Utilities Tokens

Docs →

4 Features

Runtime

Selektiver Boot für Motion, Suche, Highlight und Themes — nur was das DOM braucht.

Motion Search Highlight Theme

Docs →

4 Contracts

Accessibility

AAA-orientierte Defaults für Fokus, Kontrast, Schreibrichtung und Reduced Motion.

WCAG RTL Hoher Kontrast Reduced Motion

Docs →

4 Tools

Developer

CLI, Docs, Playground und Generatoren für plan-first Delivery.

CLI Generator Docs Playground

$ velin

Docs →

4 Artefakte

AI

Agent-taugliche Metadaten für Briefings, Pläne und Toolchains.

velin-agent.json llms.txt Metadata AI Skills

Docs →

shipped Skill Engine Registry Packs Workflows CLI

01Registry

IDs, Dependencies, Status, Confidence

02Packs

frontend · design · a11y · review · enterprise

03Workflows

Landing · Component Ship · Release Gates

04CLI

velinstyle skills · workflow

Schnellstart

velinstyle skills list && velinstyle workflow run release-gate

Hero Gallery

Landing Heroes

Full-Bleed- und Split-Heroes mit CTA-Gruppen und Live-Surfaces.

12 Beispiele

Galerie öffnen Docs

Navigation Gallery

Nav · Menubar · Drawer

Sticky Nav, Mega-Menus, Drawers und Bottom Navigation.

9 Beispiele

Galerie öffnen Docs

Dashboard Gallery

KPI · Tables · Charts

Dichte App-Shells mit Sparklines, Cards und Status-Badges.

8 Beispiele

Galerie öffnen Docs

Form Gallery

Inputs · Validation

Forms, Secure Fields, Summaries und zugängliche Labels.

14 Beispiele

Galerie öffnen Docs

1.2.0RuntimeNEU

Motion Runtime

Reveal, Stagger und Reduced-Motion-Contracts in der Attribute-Schicht.

Live Demo Docs API

1.2.0SearchNEU

Suche

Fuzzy-Dokumentationssuche als velin-search auf der Homepage.

Live Demo Docs API

1.2.0Docs

Highlight

Selektives Syntax-Highlighting für Galerien und Code-Blöcke.

Live Demo Docs API

1.2.0CLIbetaNEU

CLI Plan und Review

Plan-first Scaffolding und heuristische Review-Gates für A11y, SEO und Design — beta, Schemas wachsen weiter.

Live Demo Docs API

1.2.0AIbetaNEU

Agent-Metadaten

Reicheres velin-agent.json und llms.txt mit Knowledge Graph, Pages, Sections — beta-Seed.

Live Demo Docs API

1.2.xAI SkillsbetaNEU

Skill Engine + Registry

Offizielle Skills mit Capabilities, Workflow-Graphs, Packs, Bundles und Projekt-Templates für Agent-Ausführung.

Live Demo Docs CLI

1.2.0Metabeta

Knowledge + Blueprints

Page Types, Section Graphs und Design Constraints — Seed-Coverage, kein fertiges AI Design System.

Docs API

1.2.0Runtime

Subpath APIs

Selektive ESM-Entry-Points — nur die Chunks booten, die dein DOM braucht.

Live Demo Docs API

1.2.0A11y

Accessibility

AAA-orientierte Defaults, Focus-Manager-Overlays und live Test-Center-Checks.

Live Demo Docs API

1.2.0Themes

Theme Runtime

Attribute- und System-Dark-Parität, dichterer Surface-Stack, 13 Themes.

Live Demo Docs API

1.2.0Perf

Performance

Selektive Loader und Audit-CLI — kein Full-IIFE auf der Homepage.

Docs Live Demo

1.2.0CSS

Container Queries

Komponentenlokales Layout mit Container-Query-Utilities und Docs.

Docs Live Demo

1.2.0ComponentsNEU

Neue Komponenten

38 Web Components und 35+ CSS Components — Overlays, Suche, Charts, Forms.

Docs Live Demo API

1.2.0UtilitiesNEU

Neue Utilities

Layout-, Display-, Spacing- und Position-Utilities auf dem gemeinsamen Token-Vertrag.

Docs Live Demo API

1.2.0AttributesNEU

Neue HTML Attributes

27 HTML Attributes für Motion, Density und Progressive Enhancement.

Docs Live Demo API

1.2.0ThemesNEU

Neue Themes

Dreizehn Themes auf einem Token-Vertrag — live im Nav umschaltbar.

Docs Live Demo API

Layout Gallery

Container · Grids

Container Queries, Grids und responsive Display-Utilities.

11 Beispiele

Galerie öffnen Docs

Mobile Gallery

Touch · Density

Kompakte Frames, Bottom Nav und touch-große Controls.

7 Beispiele

Galerie öffnen Docs

Animation Gallery

Reveal · Feedback

Fokus, Overlays, Loading und Reduced-Motion-Contracts.

8 Beispiele

Galerie öffnen Docs

Pattern Library

Wiederverwendbare UI-Patterns

Contracts, Tokens und interaktive Kit-Patterns an einem Ort.

20+ Beispiele

Galerie öffnen Docs

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Theme Dichte Radius Abstand

MRR

€48k

Churn

1.2%

NPS

<velin-theme-toggle themes-base="dist/themes/"></velin-theme-toggle> <button class="velin-btn velin-btn--primary">Invite</button>

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

EscFocus trap

Modal

Blockierende Entscheidung. Für Bestätigen/Zahlen. Nicht für Navigation.

SideNav

Drawer

Seitennavigation / Filter. Nicht für kritische Bestätigungen.

Secondary

Sheet

Sekundäre Aufgaben, Warenkorb, Notizen. Formulare kurz halten.

Anchor

Popover / Tooltip

Zusätzliche Aktionen ohne Modal.

RovingARIA

Accordion / Tabs / Toast

Roving Tabindex.

Live

Search / Code / Sparkline

bootFromDOM({ attributes: true, motion: true });

MenuEsc

Dropdown

Aktionsmenüs. Nicht für Navigationsbäume.

Contracts

FilterKB

Combobox

Filterbare Einzelauswahl mit Tastatur.

Framework

⌘K

Command

Palette für Power-User (Ctrl/Cmd+K).

SwipeFocus

Carousel / Lightbox

Slide 1 — tokens

Slide 2 — motion

Slide 3 — a11y

MenubarDialog

Menubar / Dialog

SecureTouch

Secure field / Bottom nav

Home Forms Install

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Aktiver Workspace

Seats

Tickets

Trend

Dashboard-Rechnungen
Rechnung	Status	Summe
#1042	Bezahlt	€129
#1041	Offen	€49

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Steuerungen schreiben echte --velin-*-Tokens auf #tokenSurface. Optionaler Vergleich mit Defaults unter der Live-Stage.

Live-Tokens

Surface-Karte

Radius, Elevation, Density, Accent und Typografie greifen hier über --velin-*.

E-Mail

Token-Beispielzeilen
Token	Wert
--velin-radius-md	live
--velin-space-3	live
--velin-color-primary	live

Mit Defaults vergleichen

Control (defaults)

Baseline card

Unmodified --velin-* defaults for side-by-side proof.

Einstellungen

Theme Accent

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Focus

Sichtbarer Fokusring für Tastatur. Tab in die Kontrolle.

Docs Playground

Collapse

Sekundären Inhalt zeigen, ohne die Seite zu verlassen.

Erweiterter Panel-Inhalt.

Docs Playground

Modal

Blockierende Entscheidung mit Focus Trap. Esc schließt.

Docs Playground

Drawer

Seitennavigation / Filter. Kurze Pfade halten.

Docs Playground

Toast

Kurzes Status-Feedback mit Live-Region-Semantik.

Docs Playground

Loading

Busy-State + Spinner. Lieber explizites aria-busy.

Docs Playground

Reveal

Entrance nur, wenn Motion erlaubt ist.

Eingeblendet

Docs Playground

Reduced motion

Respektiert prefers-reduced-motion. Umschalten meldet die Systempräferenz.

—

Docs Test Center

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

ARIA Live bereit

motion

axe-core scan

—

Tastatur-Navigation

—

Focus

—

ARIA

—

RTL

—

Responsive

—

Dark Mode

—

Light Mode

—

Reduced Motion

—

Hoher Kontrast

—

Accessibility-Sweep

—

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Kriterium	Was wir messen	VelinStyle heute	Expliziter Non-Claim
Accessibility	Fokus, Tastatur, ARIA-Contracts; live axe auf der Stage	Component Contracts + Test Center axe-Scan	Kein WCAG-Zertifikat für dein fertiges Produkt
Tokens	OKLCH Design Tokens + Theme-CSS, das cascaded	Token Lab schreibt echte `--velin-*`	Kein Figma-Token-Sync und keine Multi-Brand Design-Ops-Suite
Bundle	Selektiver Boot vs. voller Framework-Dump	ESM `bootFromDOM` — nur Komponenten, die im DOM liegen	Kein Zero-JS / CSS-only; Runtime lädt weiterhin, was du nutzt
DX	Docs-Erreichbarkeit, Suche, Install-Pfad, AI-Metadaten	Nav-Suche, Docs, npm install, `velin-agent.json` / `llms.txt`	Keine volle IDE-Extension und kein Tailwind-großes Plugin-Ökosystem

velinstyle — install

import { bootFromDOM } from '@birdapi/velinstyle/runtime'; bootFromDOM(document, { attributes: true, motion: true, highlight: true });

Dokumentation lesen Playground GitHub

Gebaut für das moderne Web

WCAG 2.2 AAA
Modernes CSS
Web Components
Runtime
CLI
AI-ready
Open Source

Schneller bauen.
Cleverer gestalten.
Besser ausliefern.

CSS Design System mit live Web Components.

Accessibility

Modernes CSS

Native Runtime

Web Components

Developer Experience

Performance

1. CSS Components

2. Web Components

3. HTML Attributes

Core

Runtime

Accessibility

Developer

AI

Motion Runtime

Suche

Highlight

CLI Plan und Review

Agent-Metadaten

Skill Engine + Registry

Knowledge + Blueprints

Subpath APIs

Accessibility

Theme Runtime

Performance

Container Queries

Neue Komponenten

Neue Utilities

Neue HTML Attributes

Neue Themes

MRR

Churn

NPS

Modal

Drawer

Sheet

Popover / Tooltip

Accordion / Tabs / Toast

Search / Code / Sparkline

Dropdown

Combobox

Command

Carousel / Lightbox

Menubar / Dialog

Secure field / Bottom nav

Aktiver Workspace

Seats

Tickets

Trend

Surface-Karte

Baseline card

axe-core scan

Tastatur-Navigation

Focus

ARIA

RTL

Responsive

Dark Mode

Light Mode

Reduced Motion

Hoher Kontrast

Accessibility-Sweep

Gebaut für das moderne Web

Filter

Offcanvas

Sheet