--- version: alpha name: Voltagent Inspired website: "https://voltagent.dev" description: An inspired interpretation of Voltagent's design language — a developer-focused AI agent engineering platform whose surface is an unrelenting near-black canvas broken only by a single electric-green brand accent, code-editor mockups inside the hero, and a precise grid of dark feature cards that read like a documentation site dressed as marketing. seo: title: "Voltagent Design System for React — #00d992, Inter + SF Mono, 24 components" metaDescription: "Voltagent's design system as a DESIGN.md file. Electric green #00d992, Inter + SF Mono, 14 colors, 24 components. For React, Next.js, and AI tools." highlights: - "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 system — 1px #3d3a39 borders replace shadows; depth comes from precise rectangles, not material lift" - "Two-face type pairing — Inter at calm 400-weight 60px display next to SF Mono 13px for code chips and command snippets" - "Tight 6px button radius — buttons stay rectangular at rounded.sm; only inline status tags use the 9999px pill" tags: - "AI & LLM Platforms" - "Developer Tools & IDEs" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is Voltagent's primary brand color?" answer: "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." - id: "dark-mode" title: "Does Voltagent's design system have a light mode?" answer: "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." - id: "typography" title: "What typography does Voltagent use, and what should I use if SF Mono isn't available?" answer: "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." - id: "elevation" title: "How does Voltagent handle elevation without shadows?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React developer-tools site?" answer: "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." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "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." colors: primary: "#00d992" primary-soft: "#2fd6a1" primary-deep: "#10b981" on-primary: "#101010" ink: "#f2f2f2" ink-strong: "#ffffff" body: "#bdbdbd" mute: "#8b949e" hairline: "#3d3a39" hairline-soft: "#b8b3b0" canvas: "#101010" canvas-soft: "#1a1a1a" canvas-text-soft: "#f5f6f7" typography: display-xl: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 60px fontWeight: 400 lineHeight: 60px letterSpacing: -0.65px display-lg: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 36px fontWeight: 400 lineHeight: 40px letterSpacing: -0.9px display-md: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 24px fontWeight: 700 lineHeight: 32px letterSpacing: -0.6px display-sm: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 20px fontWeight: 600 lineHeight: 28px eyebrow-mono: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: 2.52px eyebrow-uppercase: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 600 lineHeight: 28px letterSpacing: 0.45px body-lg: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px body-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 26px body-md-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px body-sm: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 600 lineHeight: 23px caption: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px caption-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 500 lineHeight: 16px code: fontFamily: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace fontSize: 13px fontWeight: 400 lineHeight: 18px code-strong: fontFamily: SFMono-Regular, Menlo, Monaco, Consolas, monospace fontSize: 13px fontWeight: 550 lineHeight: 16px button-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px rounded: none: 0px xs: 4px sm: 6px md: 8px pill: 9999px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 40px 5xl: 48px 6xl: 64px components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "{spacing.md} {spacing.3xl}" nav-link: textColor: "{colors.body}" typography: "{typography.body-sm}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" button-outline-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" button-ghost-green: backgroundColor: "{colors.canvas}" textColor: "{colors.primary-soft}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" button-pill-tag: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "{spacing.xs} {spacing.md}" text-input: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" card-feature: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.2xl}" card-feature-emphasized: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" code-mockup: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.code}" rounded: "{rounded.md}" padding: "{spacing.xl}" code-inline-chip: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.canvas-text-soft}" typography: "{typography.code}" rounded: "{rounded.sm}" padding: "{spacing.xxs} {spacing.sm}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "{spacing.5xl} {spacing.3xl}" content-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.5xl} {spacing.3xl}" green-divider-band: backgroundColor: "{colors.canvas}" borderColor: "{colors.primary}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: "{spacing.4xl} {spacing.3xl}" # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ─── ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.2xl}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.2xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}" --- ## Overview Voltagent is an AI agent engineering platform built for developers, and the brand wears that audience proudly: a near-black `{colors.canvas}` (`#101010`) page background that runs edge-to-edge with no light-mode counterpart, a single electric-green accent (`{colors.primary}` `#00d992`) reserved for CTAs, status pills, and the brand lightning glyph, and a typography system that pairs sentence-case Inter with SF Mono for inline code and command snippets. The whole page reads like polished documentation that decided to also sell something. The decorative system is restrained. There is no gradient mesh, no atmospheric backdrop, no illustration suite. Instead, the brand uses small typographic moments — a green code chip (`npx voltagent ...`), a 3-px outlined feature card sitting against the same near-black canvas, a green hairline divider between section bands — to mark its identity. The result is a page that feels engineered: every card has a hairline border, every snippet has a copy-to-clipboard button, every metric is rendered in a numeric monospace. Type stays calm. Hero display sits at 60 px in regular weight with `-0.65 px` tracking — not a billboard headline, more like a documentation H1. Section headings step down to 36 px / 24 px in similar weights. Body copy is 16 px Inter at line-height 1.65 for the kind of legibility long-form devs expect. Uppercase eyebrows are common — `EVERYTHING YOU NEED` style mono-cap labels above section headlines — and they use Inter at weight 600 with wide positive tracking (`2.52 px` at 14 px). **Key Characteristics:** - A single electric-green accent `{colors.primary}` (`#00d992`) carries every CTA, every status pill, and the brand's lightning logo. No second accent. - Dark canvas (`{colors.canvas}` `#101010`) is the only page surface — there is no light-mode rhythm; the entire site reads as one continuous dark surface broken by feature-card boundaries. - Hairline-bordered feature cards (`{colors.hairline}` `#3d3a39`, 1 px solid) are the brand's primary chrome — no shadows, no fills, just precise hairline rectangles. - A signature dashed-border accent (`1px dashed rgba(79, 93, 117, 0.4)`) appears between sections as a quiet rhythm cue — the brand's only ornamental line. - Inter + SF Mono pair carries every typographic role. SF Mono is reserved for code blocks, inline command snippets, and metric counters. - Buttons are tight 6 px rounded rectangles (not pills); only inline status tags use the 9999 px full pill. ## Known Gaps - **Semantic palette:** the brand doesn't surface a separate error / warning palette on marketing pages — the underlying Docusaurus default semantic palette exists in the design system but is reserved for in-product / docs contexts. Validation cues on the marketing surface use the primary green for success and a muted body grey for missing states. - **Hover-state treatments:** the inset-glow elevation tier (`0 0 15px rgba(92, 88, 85, 0.2)`) is documented, but the precise hover ramp for individual feature cards and buttons isn't captured at the token level. - **Loading skeletons:** not visible on the extracted marketing surfaces. - **In-product app-shell chrome:** the sidebar nav row and data-table cell tokens are included as illustrative `ex-*` entries, but the full in-product application shell (top bar, breadcrumb, command palette) lives outside the marketing scope captured here. - **Modal stack:** the Level 3 modal shadow (`0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(148,163,184,0.1) inset`) is documented but only appears inside in-product dialog surfaces — not exercised on marketing pages. - **Font licensing:** SF Mono is Apple-system and isn't redistributable; downstream consumers need to substitute JetBrains Mono or Geist Mono when self-hosting.