VoltAgent
Identity
AI & LLM
Bundled OpenDesign package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures.
Typography
Ag
Ag
Ag
--text-4xl · 64pxThe quick brown fox--text-3xl · 46pxThe quick brown fox--text-2xl · 32pxThe quick brown fox--text-xl · 22pxThe quick brown fox--text-lg · 17pxThe quick brown fox--text-base · 15pxThe quick brown fox--text-sm · 13pxThe quick brown fox--text-xs · 12pxThe quick brown foxPalette
#07110cPage background — defines the brand canvas.#101c16Card / lifted container background.#14281eTertiary surface tier (kami warm-sand).#f4fff8Primary text color.#c8dfd0Secondary text tier (kami dark-warm).#8ba493Subtext / captions.#7cff6bTertiary FG / metadata tier (kami stone).#254132Default border / card edge.#1a3024Inner row separator that should not visually compete.#7cff6bBrand accent. ≤2 visible uses per screen (lint enforced).#07110cFG when --accent is the bg.#52e875Success state.#facc15Warning state.#fb7185Danger state.Also named in DESIGN.md
#00d992The core brand energy — used for accent borders, glow effects, and the highest-signal interactive moments. Th…#2fd6a1The button-text variant of the brand green — slightly warmer and more readable than pure Signal Green, used s…#10b981The ecosystem-standard green used at low opacity (30%) for subtle background tints and link defaults. Bridges…#818cf8A cool indigo-violet used sparingly for secondary categorization, code syntax highlights, and visual variety…#306cceDocusaurus primary dark — used in documentation contexts for links and interactive focus states.#2554a0The darkest primary shade, reserved for pressed/active states in documentation UI.#3b82f6Tailwind's ring color at 50% opacity — visible only during keyboard focus for accessibility compliance.#050507The landing page canvas — a near-pure black with the faintest warm undertone, darker than most "dark themes"…#101010The primary card and button background — one shade lighter than Abyss, creating a barely perceptible elevatio…#3d3a39The signature containment color — not a cold gray but a warm, almost brownish dark tone that prevents borders…#f2f2f2The primary text color on dark surfaces — not pure white (#ffffff) but a softened, eye-friendly off-white. Th…#ffffffReserved for the highest-emphasis moments — ghost button text and maximum-contrast headings. Used at low opac…Imagery & layout
Radius
8px12px18px9999pxSpacing
--space-1 · 4px--space-2 · 8px--space-3 · 12px--space-4 · 16px--space-5 · 20px--space-6 · 24px--space-8 · 32px--space-12 · 48pxElevation
--elev-raisedLayout
Layout rules
- Base unit: 8px
- Scale: 2px, 4px, 5px, 6px, 6.4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px
- Button padding: 12px 16px (standard), 20px (container-button)
- Card internal padding: approximately 24–32px
- Section vertical spacing: generous (estimated 64–96px between major sections)
- Component gap: 16–24px between sibling cards/elements