Contents 1.2.2

What ships with VelinStyle 1.2.0 — compiled CSS, optional Web Components JS, themes, icons, CLI (including beta plan/review), agent metadata, and the modular src/ CSS architecture. Deutsch: Inhalte

Maturity

dist/ CSS + components are stable.

CLI plan / review / agent meta under dist/velin-agent.json are beta / foundation.

For go-live payloads prefer velinstyle production (1.2.2+) over the full CDN bundle.

When to use

Pick velinstyle.min.css for the full production stylesheet.
Use modular src/ only when you need a custom layer build.
Load components JS only when you use custom elements or declarative attributes.

When not

Do not treat beta CLI plan/review output as a finished design system.
Do not mix unpinned CDN builds with a fixed local dist/ without checking versions.

Compiled CSS

The dist/ folder ships multiple CSS bundles so you can include exactly what you need:

File	Description	Size (gzip)
`velinstyle.min.css`	Full framework — components, utilities, animations, reboot, layout, and form-validation helpers layered in `@layer`	~38 KB
`velinstyle.css`	Unminified version for development / debugging	—
`dist/themes/*.min.css`	Optional theme presets (brutalist, nordic, …)	~1–2 KB each
`velin-icons.svg`	Default icon sprite (also copied to `dist/velin-icons.svg`)	—

JavaScript

VelinStyle's interactive features are powered by lightweight Web Components. The JS bundle is optional — pure CSS components work without it.

File	Description
`velinstyle-components.min.js`	Web Components bundle — `<velin-icon>`, `<velin-dialog>`, and more

<!-- IIFE bundle (global custom elements) -->
<script src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@1.3.0/dist/velinstyle-components.iife.js"></script>

<!-- Or ES module entry (bundler / type="module" pages) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@1.3.0/dist/velinstyle-components.js"></script>

<!-- Then use custom elements anywhere -->
<velin-icon name="star" size="24"></velin-icon>

Themes

Built-in light, dark, and auto schemes follow data-velin-theme on <html> or any section. Additional art-direction presets ship as separate stylesheets under dist/themes/*.css (also available minified) — load one or more files next to the core bundle.

data-velin-theme="light" — default light palette
data-velin-theme="dark" — dark palette with inverted surfaces
data-velin-theme="auto" — follows prefers-color-scheme

See Color modes for switching and persistence patterns.

Icons

The <velin-icon> Web Component renders inline SVG icons from a bundled sprite sheet. Over 200 icons are available covering common UI actions, social brands, and developer tools.

<velin-icon name="heart" size="24"></velin-icon>
<velin-icon name="star" size="24"></velin-icon>
<velin-icon name="check-circle" size="24"></velin-icon>
<velin-icon name="arrow-right" size="24"></velin-icon>

CLI

The velinstyle npm package exposes a CLI for blueprints, tokens, scan, docs, meta, and Design Intelligence commands. Full reference: CLI documentation.

velinstyle blueprint <name> — curated HTML snippets (hero, dashboard shell, …).
velinstyle tokens build — turn tokens.json into CSS custom properties.
velinstyle scan — flag risky patterns in your project tree.
velinstyle plan / scaffold / review — beta / foundation page pipeline (see Prompt scaffolding).
velinstyle meta — emit / inspect agent metadata (Velin-Meta).

Agent metadata (beta)

1.2.0 ships dist/velin-agent.json, llms.txt, knowledge-graph seeds, and page/section registries for agent workflows. Schemas and coverage are still expanding — treat as foundation, not a finished AI design system.

See Velin-Meta and Generated Markdown.

Samples

The repository samples/ directory contains full-page demos (dashboard, landing, login, kanban, …) you can open locally after cloning — useful as copy-paste starting points alongside blueprints.

github.com/SkyliteDesign/velinstyle/tree/main/samples

Source files

VelinStyle is implemented as plain CSS modules (no Sass requirement). The main entry src/velinstyle.css imports layers for reboot, layout, components, utilities, animations, and optional add-ons.

src/
├── velinstyle.css          Main @import entry
├── layout/
│   ├── grid.css            Grid & column helpers
│   ├── patterns.css        Page shells (.velin-layout-*)
│   └── …
├── components/
│   ├── form-validation.css Optional form error/hint styling
│   └── …
├── utilities/
├── animations/
└── …

High-level shells are documented under Layout → Patterns. Integration topics live in the Guides section.