@dante · AI & LLM
Developer-first AI agent platform kit: an unrelenting near-black canvas, a single electric-green accent, hairline-bordered feature cards, and Inter + SF Mono code mockups.
Voltagent is an AI agent engineering platform that wears its developer audience proudly. The entire page is a single near-black canvas (#101010) that runs edge-to-edge with no light-mode counterpart, broken only by hairline-bordered feature cards and code-editor mockups. A lone electric-green accent (#00d992) carries every CTA, status pill, and the brand's lightning glyph. The result reads like polished documentation that decided to also sell something — engineered, restrained, and unmistakably technical.
The brand is dark-canvas only. Near-black #101010 is the sole page surface, with a slightly lighter #1a1a1a fill inside code blocks and inputs. A single electric-green #00d992 is the center of gravity, reserved for CTAs, live indicators, and the logo; #2fd6a1 and #10b981 handle ghost buttons and inline links. Text steps from off-white ink (#f2f2f2) and pure white (#ffffff) down through body grey (#bdbdbd) to mute (#8b949e). Every edge is a 1px hairline in #3d3a39 — the brand's universal border colour. No shadows, no second accent.
Two faces carry the system. Inter handles every display, body, button, and link role at weights 400–700; SF Mono is reserved for code blocks, inline command snippets, and numeric counters. The hero display sits at 60px in a calm weight 400 with -0.65px tracking, reading like a documentation H1 rather than a billboard. Uppercase mono-cap eyebrows at 14px / weight 600 with 2.52px tracking are the signature label style. Body copy runs 16px at line-height 1.6 for long-form legibility.
A 4px base spacing scale climbs to 64px; hero and content bands pad 48px top/bottom, feature cards 24px inside. Containers centre around 1200–1400px with 32px gutters. Radii stay tight: 6px buttons and inputs, 8px cards and code chrome, 9999px only for inline status tags. Depth is a hairline system — 1px solid borders on the dark canvas, an occasional 2px green edge for featured cards, and a 1px dashed slate divider between bands. Never a drop shadow.
Buttons are tight 6px rectangles: green primary, hairline-outline secondary, green ghost, hairline pill tags. Feature cards are near-black with 1px hairline borders. Code mockups carry copy-to-clipboard affordances and SF Mono bodies. Inputs sit on the canvas-soft fill with a green focus ring. The green glow band is the only chromatic divider.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#00d992#2fd6a1#10b981#101010#f2f2f2#ffffff#bdbdbd#8b949e#3d3a39#b8b3b0#101010#1a1a1a#f5f6f7Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serifInter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serifInter, system-ui, -apple-system, sans-serifInter, system-ui, -apple-system, sans-serifSFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace{
"displayXl": "60px/60px",
"displayLg": "36px/40px",
"displayMd": "24px/32px",
"displaySm": "20px/28px",
"eyebrowMono": "14px/20px",
"eyebrowUppercase": "18px/28px",
"bodyLg": "18px/28px",
"body": "16px/26px",
"bodySm": "14px/20px",
"caption": "12px/16px",
"code": "13px/18px",
"button": "16px/24px"
}Tight 6px-rounded controls on dark. Electric-green primary with near-black label; hairline-outline secondary; green ghost; hairline pill for tags. No shadows, no pills except tags.
Dark field on canvas-soft fill with a 1px hairline border and 6px radius. Focus lifts the border to primary-soft green with a matching glow ring.
The brand's workhorse feature card — near-black fill, 1px hairline border, 8px radius, no shadow. The emphasized variant swaps to a 3px hairline or a 2px green edge.
Compact status marker — hairline pill for neutral, tinted green for live/new, canvas-soft for muted metadata.
Calm Inter hierarchy — hero display at 60px weight 400 with -0.65px tracking reads like a documentation H1, stepping down to bold 24px card titles.
Quiet inline links in primary-deep green on the dark canvas, brightening to electric green on hover. Underline-on-hover, never a body-text fill.
Near-black hero band with a 60px Inter headline, tracked mono-cap eyebrow, and a green primary CTA beside a hairline-outline secondary.
Sticky top nav on near-black canvas — wordmark with a green lightning glyph, muted body-grey links, and a single green CTA.
Near-black footer band with muted body-grey utility links and a hairline divider — the quiet close of the continuous dark surface.
Monospace numeric counter with a muted sans label — benchmark figures rendered in SF Mono, the single most-important number tinted electric green.
The dark code-editor card — near-black fill, hairline border, SF Mono 13px body, a green comment line and a copy-to-clipboard affordance.
Inline command snippet pill on canvas-soft fill — cool-toned SF Mono text at 6px radius for npx / install commands within prose.
Section rhythm cues — a 1px dashed slate divider between bands and the signature 2px electric-green glow band for major section breaks.
Segmented tab list inside a canvas-soft container — active pill lifts to near-black with a green underline for switching between docs surfaces.
Data table with a canvas-soft header in tracked mono-caps and hairline row borders — the documentation-grade comparison surface.
Voltagent is an AI agent engineering platform that wears its developer audience proudly. The entire page is a single near-black canvas (#101010) that runs edge-to-edge with no light-mode counterpart, broken only by hairline-bordered feature cards and code-editor mockups. A lone electric-green accent (#00d992) carries every CTA, status pill, and the brand's lightning glyph. The result reads like polished documentation that decided to also sell something — engineered, restrained, and unmistakably technical.
The brand is dark-canvas only. Near-black #101010 is the sole page surface, with a slightly lighter #1a1a1a fill inside code blocks and inputs. A single electric-green #00d992 is the center of gravity, reserved for CTAs, live indicators, and the logo; #2fd6a1 and #10b981 handle ghost buttons and inline links. Text steps from off-white ink (#f2f2f2) and pure white (#ffffff) down through body grey (#bdbdbd) to mute (#8b949e). Every edge is a 1px hairline in #3d3a39 — the brand's universal border colour. No shadows, no second accent.
Two faces carry the system. Inter handles every display, body, button, and link role at weights 400–700; SF Mono is reserved for code blocks, inline command snippets, and numeric counters. The hero display sits at 60px in a calm weight 400 with -0.65px tracking, reading like a documentation H1 rather than a billboard. Uppercase mono-cap eyebrows at 14px / weight 600 with 2.52px tracking are the signature label style. Body copy runs 16px at line-height 1.6 for long-form legibility.
A 4px base spacing scale climbs to 64px; hero and content bands pad 48px top/bottom, feature cards 24px inside. Containers centre around 1200–1400px with 32px gutters. Radii stay tight: 6px buttons and inputs, 8px cards and code chrome, 9999px only for inline status tags. Depth is a hairline system — 1px solid borders on the dark canvas, an occasional 2px green edge for featured cards, and a 1px dashed slate divider between bands. Never a drop shadow.
Buttons are tight 6px rectangles: green primary, hairline-outline secondary, green ghost, hairline pill tags. Feature cards are near-black with 1px hairline borders. Code mockups carry copy-to-clipboard affordances and SF Mono bodies. Inputs sit on the canvas-soft fill with a green focus ring. The green glow band is the only chromatic divider.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css