Vela Intelligence Design System

A drop-in web-component library for financial-services UIs. No npm install, no build step — just a single <script> tag.

The Vela Intelligence Design System is a library of web components built on Lit, designed for regulated financial-services interfaces. Every component supports full theming — colors, fonts, border-radius, spacing, and more — through CSS custom properties, so you can match any brand or client without forking the source. Include a single script tag and start building immediately; no bundler, no framework lock-in.

Documentation

Full interactive docs with live examples, theming controls, and a component playground.

Browse Documentation

Quick Start

Add one script tag and start using vi-* components immediately.

<script type="module"
  src="https://ds.cdn.velaintelligence.com/vela-ds.js">
</script>

<vi-button variant="primary">
  Run Analysis
</vi-button>

Icon Configuration

Components ship with dependency-free fallback icons. Switch to Font Awesome or another set globally:

<script>
  window.VelaDS.configureIcons({
    defaultSystem: 'font-awesome',
    defaultFaStyle: 'solid',
    roles: {
      clear:  { name: 'circle-xmark' },
      filter: { name: 'magnifying-glass' }
    }
  });
</script>

Theme & Density

Switch mode, theme, and density globally through the standalone runtime API.

<script>
  const theme = window.VelaDS.resolveTheme('console', 'dark');
  window.VelaDS.applyTheme(theme, document.documentElement, 'dark');
  window.VelaDS.applyDensity('compact');
</script>

Implementation Guide

Use these patterns to wire real features quickly. The standalone bundle already registers all components, applies global styles, and exposes utility APIs on window.VelaDS.

1) Compose with slots

Most container components use named slots for leading/trailing actions, headers, and content regions.

<vi-field label="Issuer">
  <vi-input slot="control" placeholder="Search issuer"></vi-input>
  <vi-button slot="trailing" variant="secondary">Validate</vi-button>
</vi-field>

2) Set complex properties from JavaScript

For arrays/objects, assign properties directly instead of string attributes.

const select = document.querySelector('vi-select');
select.options = [
  { label: 'Compliance', value: 'compliance' },
  { label: 'Asset Management', value: 'asset' }
];
select.value = 'compliance';

3) Listen for component events

Components emit custom events (for example vi-change) with state in event.detail.

const issuerInput = document.querySelector('#issuer');
issuerInput.addEventListener('vi-change', (event) => {
  console.log('Input changed:', event.detail);
});

4) Use global toast notifications

Call notify from anywhere. A global toast stack is created on demand.

window.VelaDS.notify({
  tone: 'success',
  title: 'Analysis queued',
  message: 'The Atlas Capital model run has started.',
  duration: 4500
});

5) Create a client-specific theme

Define token overrides once, then apply globally to any page using the standalone API.

const acmeTheme = window.VelaDS.createClientTheme(
  'client-acme',
  {
    '--vi-sem-action-primary': '#0b4f3b',
    '--vi-sem-action-primary-hover': '#0f664b',
    '--vi-sem-border-default': '#c6d4df'
  },
  { density: 'default' }
);
window.VelaDS.applyTheme(acmeTheme);

6) Component coverage

All functionality is documented in the live catalog and machine-readable manifests.

Form Inputs Data Tables Navigation Overlays Feedback Layouts App Shells Utilities
Open interactive docs Open component-catalog.yaml Open tokens.yaml

AI-Readable Documentation

Machine-readable manifests so LLM coding agents can generate correct Vela DS markup without guessing. Point your AI assistant at these files to get accurate component usage.

How to use with your AI assistant

Give your AI coding agent (Claude, ChatGPT, Copilot, Cursor, etc.) the catalog URL so it can look up components, props, and patterns:

  1. Paste this URL into your AI prompt or project instructions:
    https://ds.cdn.velaintelligence.com/ai/component-catalog.yaml
  2. Ask it to fetch the catalog before generating any Vela DS code.
I'm using the Vela Design System (web components).
Before writing any code, fetch the component catalog at:
https://ds.cdn.velaintelligence.com/ai/component-catalog.yaml

Component Catalog

Every component, its properties, slots, events, and usage examples.

component-catalog.yaml

Design Tokens

Color, spacing, and typography tokens in YAML format.

tokens.yaml

Artifact Context

Self-contained design context for Claude Artifacts — no external dependencies needed.

artifact-context.md