VoltAgent Design System Skill

When the user invokes this skill, apply the following design system to all UI generation. Use these exact design tokens, color values, typography specs, component styles, and layout principles to produce interfaces that match VoltAgent's visual identity.

Reference Previews

For a visual reference of how this design system looks when implemented, see the bundled HTML previews:

• Light theme: preview.html
• Dark theme: preview-dark.html

Read these files when you need to verify exact visual implementation details, CSS values, or component structure.

1. Visual Theme & Atmosphere

VoltAgent's interface is a deep-space command terminal for the AI age — a developer-facing darkness built on near-pure-black surfaces (#050507) where the only interruption is the electric pulse of emerald green energy. The entire experience evokes the feeling of staring into a high-powered IDE at 2am: dark, focused, and alive with purpose. This is not a friendly SaaS landing page — it's an engineering platform that announces itself through code snippets, architectural diagrams, and raw technical confidence.

The green accent (#00d992) is used with surgical precision — it glows from headlines, borders, and interactive elements like a circuit board carrying a signal. Against the carbon-black canvas, this green reads as "power on" — a deliberate visual metaphor for an AI agent engineering platform. The supporting palette is built entirely from warm-neutral grays (#3d3a39, #8b949e, #b8b3b0) that soften the darkness without introducing color noise, creating a cockpit-like warmth that pure blue-grays would lack.