VI Design System

A stack-agnostic component library built on design tokens. Works in WordPress, SvelteKit, Astro, or plain HTML — link one CSS file and use the markup patterns.

How to use this in a project

HTML — link one file

<!-- Step 1: Link vi.css in your <head> -->
<link rel="stylesheet" href="/vi-system/vi.css">

<!-- Step 2: Use vi-* classes on your HTML -->
<button class="vi-btn vi-btn--primary">Get Started</button>

WordPress — in your theme's functions.php

wp_enqueue_style(
  'vi-design-system',
  get_template_directory_uri() . '/vi-system/vi.css',
  array(),
  '0.1.0'
);

SvelteKit — in app.css or +layout.svelte

@import '$lib/vi-system/vi.css';

Components

Brand Active Pending Error Draft

Active

Design System v0.1

Token pipeline, component library, and documentation are live.

File structure

Project layout

vi-system/
├── build-tokens.js            ← Run to regenerate tokens.css from tokens.json
├── vi.css                     ← LINK THIS in your project (imports everything)
│
├── tokens/
│   ├── tokens.json            ← Source of truth. Edit here. Export from Figma.
│   └── tokens.css             ← Auto-generated. Never edit directly.
│
├── styles/
│   └── components/
│       ├── button.css
│       ├── card.css
│       ├── badge.css
│       └── alert.css
│
└── docs/                      ← You are here. Not shipped to projects.
    ├── index.html
    ├── assets/
    └── components/
        ├── button.html
        ├── card.html
        ├── badge.html
        └── alert.html

The three rules

1. Never hardcode values

No hex colors. No pixel values. If you need a value, it must exist as a token in tokens.json. Rebuild, then use the CSS variable.

2. Use semantic tokens in components

Use --color-interactive-default, not --primitive-color-brand-500. Primitives are raw values. Semantics carry meaning that survives a rebrand.

3. Prefix all classes with vi-

Every component class starts with vi-. This prevents collisions with WordPress, Bootstrap, or any third-party CSS that ends up on the same page.