# Vela Design System — Artifact Context > **Generated:** 2026-04-17 > **Purpose:** Paste this file into a Claude conversation so it can produce HTML artifacts that match the Vela Intelligence design system — no external dependencies needed. ## Instructions for Claude This file defines the **Vela Intelligence design language** — a set of colors, typography, spacing, and component building blocks. Use them to create original, creative UI designs that feel cohesive with the Vela brand. **Be creative.** The tokens and recipes below are a vocabulary, not a template. Design layouts, dashboards, forms, reports, landing pages — whatever the user asks for. Compose the building blocks however makes sense for the content. Don't just recreate the examples shown here. **Technical rules:** - Create **HTML artifacts** with plain HTML + CSS. Use `.vi-*` CSS classes — not web components. - Include the CSS Foundation block in a ` ``` --- ## CSS Foundation Paste this into your artifact's `