1. Docs
2. CLI & Extend
3. Approach

Approach beta

Understand the design principles behind VelinStyle — why it works the way it does. Deutsch: Ansatz

When to use

• Follow this guide when integrating or extending VelinStyle (Approach).
• Pin @birdapi/velinstyle@1.3.0 and check maturity badges for beta surfaces.

When not

• Do not treat beta plan/review/meta as a finished AI design system.
• Do not invent Studio or Utility Engine APIs that are still planned.

Philosophy

• Utility-first, component-friendly — build with utilities, extract components when patterns repeat.
• CSS-native — built on modern CSS features (custom properties, @layer, color-mix(), container queries) instead of preprocessor hacks.
• Zero JavaScript required — the CSS works standalone. JS components are progressive enhancements.
• Accessible by default — ARIA patterns, focus management, and reduced-motion support are built in.

CSS Layers

VelinStyle uses @layer to organize its CSS into predictable cascade levels:

@layer velin.base;      /* Reboot, typography, base styles */
@layer velin.components; /* Component styles */
@layer velin.utilities;  /* Utility classes (highest priority) */

/* Your custom CSS (unlayered) always wins */
.my-class { color: red; }

Mobile-First

All responsive utilities are mobile-first — the base class applies to all screen sizes, and breakpoint variants apply from that breakpoint upward using min-width media queries.

/* Base: applies everywhere */
.velin-d-flex { display: flex; }

/* md breakpoint: applies at 768px and up */
@media (min-width: 768px) {
  .velin-d-md-block { display: block; }
}