What is Voltagent's primary brand color?

Voltagent's brand color is an electric green at #00d992, used as the single accent across the entire marketing surface. It carries every primary CTA, every status pill, the brand's lightning glyph, and live indicators — nothing else. A slightly softer #2fd6a1 appears inside ghost buttons and focus states, and a deeper #10b981 handles inline link color in body copy, but the page never introduces a second accent hue. Most surfaces are 90% near-black canvas plus off-white ink, with the green as the only voltage focusing the eye on one action at a time.

Does Voltagent's design system have a light mode?

No — Voltagent is dark-canvas only. The page surface is a near-black #101010 throughout, with a slightly lighter #1a1a1a fill used inside code blocks and form inputs to mark them visually distinct. There is no light-mode counterpart in the marketing system, and the brand's hairline elevation depends on the dark canvas to read correctly. Default text sits at an off-white #f2f2f2 to reduce contrast strain, with pure white #ffffff reserved for hero headlines and high-emphasis copy.

What typography does Voltagent use, and what should I use if SF Mono isn't available?

The system pairs Inter for every display, body, button, and link role with SF Mono for inline code, command snippets, terminal mockups, and numeric counters. Inter runs at weights 400 through 700, with the 60px hero display deliberately set at weight 400 and -0.65px tracking. SF Mono ships at an unusual 549 / 550 sub-bold weight to give code a slightly heavier voice for emphasis. If SF Mono isn't available, JetBrains Mono or Geist Mono are the closest free substitutes; Inter is the brand's actual face and ships open-source already.

How does Voltagent handle elevation without shadows?

The brand replaces material shadows with 1px hairline borders at #3d3a39 on the dark canvas. Every feature card, button, and divider uses the same hairline rectangle rather than a soft drop shadow — hairlines on dark IS the brand's elevation system. Featured or hovering cards step up to a subtle 0 0 15px rgba(92, 88, 85, 0.2) outer glow, and modal surfaces stack a heavy drop with a thin inset ring, but 95% of surfaces stay at the flat hairline tier. Depth comes from precise rectangles, not from layered shadows.

Can I use this DESIGN.md to build my own React developer-tools site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent reproduces Voltagent's discipline (single green accent, hairline borders, two-face Inter + SF Mono pair, tight 6px button radius) rather than a generic dark-mode SaaS theme. You can also paste the tokens directly: every color hex, type style, radius, and spacing value is a quoted value ready for Tailwind config, CSS variables, or your own component library.

What's missing from this DESIGN.md spec?

The spec doesn't surface a separate error / warning palette for marketing pages — the underlying Docusaurus default semantic palette exists in the design system but is reserved for in-product and docs contexts. Validation cues on marketing surfaces use the primary green for success and a muted body grey for missing states. Hover-state colors beyond the inset-glow tier, loading skeletons, full input error-state combinations, and the in-product app-shell chrome aren't captured here. The Examples block also carries a handful of auto-derived surfaces that downstream consumers re-skin via the same primitives.

Voltagent Inspired Design System

Voltagent's design system as a DESIGN.md file.

About Voltagent Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source voltagent.dev

AI & LLM Platforms
Developer Tools & IDEs

Voltagent is an AI agent engineering platform that wears its developer audience proudly. The marketing surface looks like polished documentation that decided to also sell something: a near-black #101010 canvas runs edge-to-edge with no light-mode rhythm, a single electric-green #00d992 carries every CTA and the lightning logo, and hairline-bordered feature cards replace material shadows. The hero headline sits at 60px Inter in regular weight 400 with -0.65px tracking, deliberately calm against AI marketing's tendency to shout. Code-editor mockups, copy-to-clipboard chips, and monospace metric counters anchor the brand's engineered voice.

This page packages the full system into a single DESIGN.md file built on Google Labs' open spec. Inside: 14 color tokens grouped into brand, surface, text, and semantic ranges, 17 typography styles across Inter and SF Mono, 6 corner-radius tokens, 11 spacing values from 2px to 64px, and 24 components covering buttons, cards, code mockups, hero bands, and 11 illustrative example surfaces. Every hex is quoted, every padding traces back to a spacing token, and every component references its primitives by name.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Voltagent's restraint — single accent, hairline elevation, two-face type pair — rather than a generic dark-mode SaaS theme. Or paste the tokens straight into Tailwind config and CSS variables. The system rewards study for one reason: it shows how to make a dark, developer-facing brand feel engineered rather than edgy, using typography and hairlines instead of glow and gradient.

What makes it distinct

Single electric-green accent#00d992 carries every CTA, status pill, and the lightning glyph, never a body fill
Dark canvas only#101010 page surface with no light-mode counterpart, broken only by hairline-bordered feature cards
Hairline elevation system1px #3d3a39 borders replace shadows; depth comes from precise rectangles, not material lift
Two-face type pairingInter at calm 400-weight 60px display next to SF Mono 13px for code chips and command snippets
Tight 6px button radiusbuttons stay rectangular at rounded.sm; only inline status tags use the 9999px pill

Live at voltagent.dev

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

voltagent.dev

Explore Voltagent Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Voltagent Inspired design system FAQ

Common questions about Voltagent Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Voltagent Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→