VoltAgent

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.

Colors

Brand & Accent

• **Electric Green** (`{colors.primary}` — `#00d992`): The single brand accent. Every primary CTA, every status pill, every "live" indicator, the brand's lightning glyph itself. Reserved.
• **Primary Soft** (`{colors.primary-soft}` — `#2fd6a1`): A slightly more muted green used inside button-ghost variants and tooltip / focus indicators.
• **Primary Deep** (`{colors.primary-deep}` — `#10b981`): The darker green used for inline link colour in body copy.

Surface

• **Canvas** (`{colors.canvas}` — `#101010`): The default near-black page background. The only surface mode in the brand's marketing system.
• **Canvas Soft** (`{colors.canvas-soft}` — `#1a1a1a`): A slightly lighter dark fill used inside code blocks and form inputs to mark them visually distinct against the canvas.
• **Hairline** (`{colors.hairline}` — `#3d3a39`): 1 px solid borders — feature cards, buttons, dividers between rows. The brand's universal "edge" colour.
• **Hairline Soft** (`{colors.hairline-soft}` — `#b8b3b0`): A lighter divider tint used in rare on-light secondary contexts.

Text

• **Ink** (`{colors.ink}` — `#f2f2f2`): Default text colour on the dark canvas — slightly off-white to reduce contrast strain.
• **Ink Strong** (`{colors.ink-strong}` — `#ffffff`): Pure-white text for hero headlines and high-emphasis copy.
• **Body** (`{colors.body}` — `#bdbdbd`): Secondary text — supporting copy, body paragraphs in long-form sections.
• **Mute** (`{colors.mute}` — `#8b949e`): Lowest-priority on-dark text — captions, fine print, footer secondary lines.
• **Canvas Text Soft** (`{colors.canvas-text-soft}` — `#f5f6f7`): Used inside code mockups to keep code colour just slightly cooler than the surrounding body text.

Semantic

The brand doesn't surface a separate error / warning palette in its public 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.

Typography

Font Family

Two faces carry the system:

1. **Inter** for every display, body, button, and link role. Weights 400 / 500 / 600 / 700 are the working set. Used with OpenType features `"calt"` and `"rlig"` enabled across the page so the geometric Inter ligatures and contextual alternates render correctly.

2. **SF Mono** (`SFMono-Regular` with Menlo / Monaco / Consolas / Liberation Mono fallbacks) for inline code, command snippets, terminal mockups, and the brand's numeric counters. Weights 400 / 549 / 550 / 700 are present — the unusual 549 / 550 sub-bold weight gives the mono a "slightly heavier than regular" voice for emphasis.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 60px | 400 | 60px | -0.65px | Hero headline ("AI Agent Engineering Platform"). |

| `{typography.display-lg}` | 36px | 400 | 40px | -0.9px | Section headlines. |

| `{typography.display-md}` | 24px | 700 | 32px | -0.6px | Sub-section / card-title displays. |

| `{typography.display-sm}` | 20px | 600 | 28px | 0 | Card titles in dense grids. |

| `{typography.eyebrow-mono}` | 14px | 600 | 20px | 2.52px | UPPERCASE eyebrow tags ("EVERYTHING YOU NEED"). |

| `{typography.eyebrow-uppercase}` | 18px | 600 | 28px | 0.45px | Larger uppercase eyebrows above hero subsections. |

| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs. |

| `{typography.body-md}` | 16px | 400 | 26px | 0 | Default body paragraph. |

| `{typography.body-md-strong}` | 16px | 600 | 24px | 0 | Bolded inline body. |

| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body. |

| `{typography.body-sm-strong}` | 14px | 600 | 23px | 0 | Bold caption / pill-tag labels. |

| `{typography.caption}` | 12px | 400 | 16px | 0 | Fine print. |

| `{typography.caption-strong}` | 12px | 500 | 16px | 0 | Bold caption. |

| `{typography.code}` | 13px | 400 | 18px | 0 | Code blocks, inline command snippets. |

| `{typography.code-strong}` | 13px | 550 | 16px | 0 | Emphasised inline code (the SF Mono "almost-bold" weight). |

| `{typography.button-md}` | 16px | 600 | 24px | 0 | Button labels. |

Principles

• **Inter regular at 60 px display** is the brand's calming counter to AI marketing's tendency to shout. The light tracking and modest weight read like documentation.
• **Two-face contrast carries the technical voice.** Inter for narrative; SF Mono for anything that could be typed at a terminal.
• **Uppercase eyebrow with tracking is the brand's signature label style.** `2.52 px` at 14 px is the documented value.

Note on Font Substitutes

• **Sans** — *Inter* is the brand's actual face; substitute is the brand itself when self-hosting is not available.
• **Mono** — *SF Mono* is Apple-system; *JetBrains Mono* or *Geist Mono* are the best free substitutes.

Layout

Spacing System

• **Base unit**: 4 px; small 5 / 6.4 px values appear inside code-mockup line-height compensation.
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 20 px · `{spacing.2xl}` 24 px · `{spacing.3xl}` 32 px · `{spacing.4xl}` 40 px · `{spacing.5xl}` 48 px · `{spacing.6xl}` 64 px.
• **Section padding**: hero + content bands use `{spacing.5xl}` 48 px top/bottom.
• **Card interior padding**: feature cards sit at `{spacing.2xl}` 24 px.

Grid & Container

• Marketing container centres at roughly 1200 – 1400 px; content stays edge-to-edge in colour with horizontal gutters of `{spacing.3xl}` on desktop.
• Feature-card grids: 2-up to 3-up at desktop, 1-up at mobile.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hero 60→32 px; cards 1-up; nav hamburger. |

| Tablet | 768–1023px | Cards 2-up; nav stays horizontal. |

| Desktop | ≥ 1024px | Full 3-up card grids. |

#### Touch Targets

Buttons render at ~44 px tall (12 px vertical padding + 24 px line-height). Meet WCAG AAA at all breakpoints.

#### Collapsing Strategy

Nav collapses to hamburger at mobile; the menu overlay keeps the same green CTA pinned at the bottom. Feature-card grids drop to 1-up; hero typography scales fluidly.

#### Image Behavior

Code-editor mockups render as image-like cards with copy-to-clipboard affordances. No photography in the brand's marketing surface.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Full-bleed bands. |

| Level 1 — Hairline | 1 px solid `{colors.hairline}` border on `{colors.canvas}`. | Default for every feature card and button. |

| Level 2 — Inset Glow | `0 0 15px rgba(92, 88, 85, 0.2)` subtle outer glow. | Hovering / featured cards. |

| Level 3 — Modal Stack | `0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(148,163,184,0.1) inset` heavy drop + inset ring. | Modal / dialog surfaces in-product. |

Decorative Depth

• Hairline cards on dark canvas — the brand's only true elevation mode.
• A 2 px solid `{colors.primary}` green border occasionally marks "featured" or "active" status on a card.
• A 1 px dashed `rgba(79, 93, 117, 0.4)` divider sits between section bands as a quiet rhythm cue.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed bands. |

| `{rounded.xs}` | 4px | Smallest inline pills, code inline chips. |

| `{rounded.sm}` | 6px | Default button and input radius. |

| `{rounded.md}` | 8px | Card chrome, code-block chrome. |

| `{rounded.pill}` | 9999px | Inline status tags ("Live", "Beta"). |

| `{rounded.full}` | 9999px | Circular icon containers. |

Components

Buttons

**`button-primary`** — the electric-green CTA.

• Background `{colors.primary}`, text `{colors.on-primary}` (near-black), label `{typography.button-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}` 6 px.

**`button-outline-on-dark`** — the hairline-on-dark secondary button.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, same typography / padding / shape.

**`button-ghost-green`** — text-only with green label, for tertiary actions.

• Background `{colors.canvas}`, text `{colors.primary-soft}`, no border.

**`button-pill-tag`** — the inline pill for category tags / status labels.

• Background `{colors.canvas}`, text `{colors.ink}`, hairline border, body in `{typography.body-sm}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.pill}` 9999 px.

Cards & Containers

**`card-feature`** — the default feature card.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, padding `{spacing.2xl}`, shape `{rounded.md}` 8 px. The brand's most-repeated card chrome.

**`card-feature-emphasized`** — the same card with a 3 px hairline border for emphasis.

• Same chrome as `card-feature` with 3 px solid `{colors.hairline}`.

**`code-mockup`** — the dark code-editor card with copy-to-clipboard affordance.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, body in `{typography.code}` (SF Mono 13 px), padding `{spacing.xl}`, shape `{rounded.md}`.

**`code-inline-chip`** — the inline command snippet pill.

• Background `{colors.canvas-soft}`, text `{colors.canvas-text-soft}`, body in `{typography.code}`, padding `{spacing.xxs} {spacing.sm}`, shape `{rounded.sm}`.

Inputs & Forms

**`text-input`** — the standard text input on dark.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, body in `{typography.body-sm}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}` 6 px.

Navigation

**`nav-bar`** — the sticky top nav on dark.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.3xl}`.

**`nav-link`** — link items in nav.

• Text `{colors.body}`, set in `{typography.body-sm}`.

**`footer`** — the dark footer band.

• Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.4xl} {spacing.3xl}`. Body in `{typography.body-sm}`.

Signature Components

**`hero-band`** — the dark hero band with the 60-px Inter headline.

• Background `{colors.canvas}`, text `{colors.ink}` (with the headline at `{colors.ink-strong}` white), padding `{spacing.5xl} {spacing.3xl}`. Headline in `{typography.display-xl}` (60 px / weight 400 / `-0.65 px` tracking). Eyebrow above headline in `{typography.eyebrow-mono}` (uppercase, tracked).

**`content-band`** — the standard content band hosting feature grids.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.3xl}`. Section headline in `{typography.display-lg}`.

**`green-divider-band`** — a thin green-glow band that occasionally separates major sections.

• Background `{colors.canvas}`, 2 px solid `{colors.primary}` top/bottom border. The brand's only chromatic divider.

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` (`#00d992`) for every primary CTA, the lightning logo glyph, and live-status indicators. The green is the brand's centre of gravity.
• Use the dark `{colors.canvas}` (`#101010`) as the only page surface. There is no light-mode rhythm.
• Build cards with 1 px `{colors.hairline}` borders, not shadows. Hairlines on dark IS the brand's elevation system.
• Pair Inter (sentence-case) with SF Mono (inline code, command snippets). Every uppercase moment uses Inter at weight 600 with `2.52 px` tracking — not a separate mono.
• Use `{rounded.sm}` 6 px for buttons, `{rounded.md}` 8 px for cards, `{rounded.pill}` 9999 px only for inline status tags.

Don't

• Don't introduce a light-mode counterpart. The brand is dark-canvas only.
• Don't use the primary green as a body-text fill. It's CTA-only.
• Don't drop a soft drop-shadow on cards. The brand uses hairlines + occasional glow, never material shadows.
• Don't render the hero headline in heavy weight (700+). The brand's display is intentionally calm at weight 400.
• Don't replace Inter or SF Mono with a different family — both faces are part of the brand's voice and pairing.

개요

Voltennt는 개발자를 위해 구축된 AI 에이전트 엔지니어링 플랫폼이며 브랜드는 라이트 모드 대응 없이 가장자리에서 가장자리까지 실행되는 거의 검은색에 가까운 `{colors.canvas}`(`#101010`) 페이지 배경, CTA용으로 예약된 단일 전기 녹색 액센트(`{colors.primary}` `#00d992`), 상태 알약 및 브랜드 번개 문자 모양, 문장 대소문자를 쌍으로 연결하는 타이포그래피 시스템 등 해당 청중을 자랑스럽게 착용합니다. 인라인 코드 및 명령 조각을 위해 SF Mono와 상호 연결됩니다. 전체 페이지는 무언가를 판매하기로 결정한 세련된 문서처럼 읽혀집니다.

장식 시스템은 제한되어 있습니다. 그라디언트 메쉬, 대기 배경, 일러스트레이션 모음이 없습니다. 대신, 브랜드는 녹색 코드 칩('npxvoltent...'), 검은색에 가까운 동일한 캔버스에 놓인 3px 윤곽선 기능 카드, 섹션 밴드 사이의 녹색 헤어라인 구분선 등 작은 인쇄상의 순간을 사용하여 아이덴티티를 표시합니다. 결과적으로 설계된 페이지가 탄생했습니다. 모든 카드에는 가는 테두리가 있고, 모든 스니펫에는 클립보드로 복사 버튼이 있으며, 모든 측정항목은 숫자 고정 폭으로 렌더링됩니다.

타입은 침착함을 유지합니다. 히어로 디스플레이는 `-0.65px` 추적을 사용하여 일반 무게로 60px에 위치합니다. 광고판 헤드라인이 아니라 문서 H1과 비슷합니다. 섹션 제목은 비슷한 가중치로 36px/24px로 낮아집니다. 본문 사본은 긴 형식 개발자가 기대하는 가독성을 위해 줄 높이가 1.65인 16픽셀 Inter입니다. 대문자 눈썹은 일반적입니다. 섹션 헤드라인 위의 `EVERYTHING YOU NEED` 스타일 모노 캡 라벨은 와이드 포지티브 추적(14px에서 `2.52px`)과 함께 가중치 600의 Inter를 사용합니다.

**주요 특징:**

• 단일 전기 녹색 액센트 `{colors.primary}`(`#00d992`)에는 모든 CTA, 모든 상태 알약 및 브랜드의 번개 로고가 포함됩니다. 두 번째 악센트가 없습니다.
• 어두운 캔버스(`{colors.canvas}` `#101010`)가 유일한 페이지 표면입니다. 밝은 모드 리듬이 없습니다. 전체 사이트는 기능 카드 경계로 인해 끊어진 하나의 연속적인 어두운 표면으로 읽혀집니다.
• 가는 선으로 둘러싸인 기능 카드(`{colors.hairline}` `#3d3a39`, 1px 단색)는 브랜드의 기본 크롬입니다. 그림자도 없고 채우기도 없고 정확한 가는 선 직사각형입니다.
• 시그니처 점선 테두리 액센트(`1px 점선 rgba(79, 93, 117, 0.4)`)가 섹션 사이에 조용한 리듬 신호로 표시됩니다. 이는 브랜드의 유일한 장식 라인입니다.
• Inter + SF Mono 쌍은 모든 인쇄상의 역할을 수행합니다. SF Mono는 코드 블록, 인라인 명령 조각 및 메트릭 카운터용으로 예약되어 있습니다.
• 버튼은 6픽셀의 둥근 직사각형(알약 모양 아님)으로 되어 있습니다. 인라인 상태 태그만 9999px 전체 알약을 사용합니다.

색상

브랜드 및 액센트

• **일렉트릭 그린** (`{colors.primary}` — `#00d992`): 단일 브랜드 액센트입니다. 모든 기본 CTA, 모든 상태 알약, 모든 "실시간" 표시기, 브랜드의 번개 모양 자체. 예약된.
• **기본 소프트**(`{colors.primary-soft}` — `#2fd6a1`): 버튼 고스트 변형 및 툴팁/포커스 표시기 내부에 사용되는 약간 더 부드러운 녹색입니다.
• **Primary Deep** (`{colors.primary-deep}` — `#10b981`): 본문 문구의 인라인 링크 색상에 사용되는 더 어두운 녹색입니다.

표면

• **캔버스** (`{colors.canvas}` — `#101010`): 검정색에 가까운 기본 페이지 배경입니다. 브랜드 마케팅 시스템의 유일한 표면 모드입니다.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#1a1a1a`): 코드 블록 및 양식 입력 내부에 사용되는 약간 더 밝은 어두운 채우기로 캔버스와 시각적으로 구별됩니다.
• **헤어라인**(`{colors.hairline}` — `#3d3a39`): 1px 실선 테두리 — 기능 카드, 버튼, 행 사이 구분선. 브랜드의 보편적인 "엣지" 색상입니다.
• **Hairline Soft** (`{colors.hairline-soft}` — `#b8b3b0`): 드물게 조명이 켜진 보조 컨텍스트에서 사용되는 더 밝은 구분선 색조입니다.

텍스트

• **잉크**(`{colors.ink}` — `#f2f2f2`): 어두운 캔버스의 기본 텍스트 색상 — 대비 변형을 줄이기 위해 약간 황백색입니다.
• **Ink Strong**(`{colors.ink-strong}` — `#ffffff`): 주요 헤드라인 및 강조 문구를 위한 순백색 텍스트입니다.
• **본문**(`{colors.body}` — `#bdbdbd`): 보조 텍스트 — 긴 형식 섹션의 본문 단락과 카피를 지원합니다.
• **음소거**(`{colors.mute}` — `#8b949e`): 가장 낮은 우선순위의 어두운 텍스트 — 캡션, 작은 글씨, 바닥글 보조 줄.
• **캔버스 텍스트 소프트**(`{colors.canvas-text-soft}` — `#f5f6f7`): 코드 모형 내부에서 코드 색상을 주변 본문 텍스트보다 약간 더 차갑게 유지하는 데 사용됩니다.

의미론

브랜드는 공개 마케팅 페이지에 별도의 오류/경고 팔레트를 표시하지 않습니다. 기본 Docusaurus 기본 의미 팔레트는 디자인 시스템에 존재하지만 제품 내/문서 컨텍스트용으로 예약되어 있습니다. 마케팅 화면의 검증 신호는 성공을 나타내는 기본 녹색을 사용하고 누락된 상태를 나타내는 음소거된 본문 회색을 사용합니다.

타이포그래피

글꼴 계열

두 얼굴이 시스템을 운반합니다.

1. 모든 디스플레이, 바디, 버튼, 링크 역할에 대한 **인터**. 무게 400/500/600/700이 작업 세트입니다. 페이지 전체에 걸쳐 활성화된 OpenType 기능 `"calt"` 및 `"rlig"`와 함께 사용되므로 기하학적 상호 합자 및 문맥적

概要

Voltagent は開発者向けに構築された AI エージェント エンジニアリング プラットフォームであり、このブランドはその視聴者を誇らしげに着ています。ライト モードの対応物なしで端から端まで続く黒に近い「{colors.canvas}」 (#101010) ページの背景、CTA、ステータス ピル、ブランドの稲妻のグリフ用に確保された単一のエレクトリック グリーンのアクセント (「{colors.primary}」 `#00d992`)、インライン コードとコマンド スニペット用に文-格 Inter と SF Mono を組み合わせたタイポグラフィ システム。ページ全体は、何かを販売することを決定した洗練されたドキュメントのように見えます。

装飾系は控えめ。グラデーション メッシュ、雰囲気のある背景、イラスト スイートはありません。代わりに、このブランドは、小さなタイポグラフィーの要素、つまり緑色のコード チップ (「npx volntent ...」)、同じほぼ黒のキャンバスに配置された 3 ピクセルの輪郭を描いたフィーチャー カード、セクション バンド間の緑色のヘアラインの仕切りを使用して、そのアイデンティティをマークしています。その結果、エンジニアリングされたと感じられるページが作成されます。すべてのカードにはヘアラインの境界線があり、すべてのスニペットにはクリップボードにコピーするボタンがあり、すべてのメトリクスは数値等幅でレンダリングされます。

タイプは冷静さを保ちます。ヒーロー ディスプレイは通常のウェイトで 60 ピクセル、「-0.65 ピクセル」のトラッキングを備えています。広告の見出しではなく、ドキュメント H1 に似ています。セクション見出しは、同様のウェイトで 36 ピクセル / 24 ピクセルに下がります。本文のコピーは、行の高さ 1.65 で 16 ピクセル インターで、長文開発者が期待する読みやすさを実現しています。大文字の眉毛が一般的です - セクション見出しの上の「EVERYTHING YOU NEED」スタイルのモノキャップ ラベル - ワイド ポジティブ トラッキング (14 ピクセルで「2.52 ピクセル」) でウェイト 600 の Inter を使用します。

**主な特徴:**

• 単一のエレクトリック グリーンのアクセント `{colors.primary}` (`#00d992`) には、すべての CTA、すべてのステータス ピル、およびブランドの稲妻ロゴが含まれています。第二アクセントはありません。
• ダーク キャンバス (`{colors.canvas}` `#101010`) が唯一のページ表面です。ライトモードのリズムはありません。サイト全体は、フィーチャーカードの境界によって区切られた 1 つの連続した暗い表面のように見えます。
• ヘアラインで縁取られたフィーチャー カード (`{colors.hairline}` `#3d3a39`、1 ピクセル ソリッド) は、ブランドの主要なクロムです。影も塗りつぶしもなく、正確なヘアラインの長方形だけです。
• 特徴的な破線の境界線のアクセント (「1px 破線 rgba(79, 93, 117, 0.4)」) がセクション間に静かなリズムの合図として表示されます。これはブランドの唯一の装飾ラインです。
• Inter + SF Mono のペアは、あらゆるタイポグラフィーの役割を担います。 SF Mono は、コード ブロック、インライン コマンド スニペット、およびメトリック カウンター用に予約されています。
• ボタンは 6 ピクセルの丸い長方形です (錠剤ではありません)。インライン ステータス タグのみが 9999 ピクセルのフル ピルを使用します。

色

ブランドとアクセント

• **エレクトリック グリーン** (`{colors.primary}` — `#00d992`): 単一ブランドのアクセント。すべての主要な CTA、すべてのステータス ピル、すべての「ライブ」インジケーター、ブランドの稲妻のグリフそのもの。予約済み。
• **プライマリ ソフト** (`{colors.primary-soft}` — `#2fd6a1`): ボタン ゴーストのバリアントおよびツールヒント/フォーカス インジケーター内で使用される、もう少し落ち着いた緑色です。
• **Primary Deep** (`{colors.primary-deep}` — `#10b981`): ボディ コピーのインライン リンクの色に使用される濃い緑色。

表面

• **キャンバス** (`{colors.canvas}` — `#101010`): デフォルトのほぼ黒のページ背景。ブランドのマーケティング システムにおける唯一の表面モード。
• **キャンバス ソフト** (`{colors.canvas-soft}` — `#1a1a1a`): コード ブロックとフォーム入力の内部で使用され、キャンバスに対して視覚的に区別できるマークを付けるために使用される、わずかに明るい暗い塗りつぶし。
• **ヘアライン** (`{colors.hairline}` — `#3d3a39`): 1 ピクセルの実線の境界線 — フィーチャー カード、ボタン、行間の仕切り。ブランドの普遍的な「エッジ」カラー。
• **Hairline Soft** (`{colors.hairline-soft}` — `#b8b3b0`): 稀なオンライト セカンダリ コンテキストで使用される明るいディバイダーの色合い。

テキスト

• **インク** (`{colors.ink}` — `#f2f2f2`): 暗いキャンバス上のデフォルトのテキスト色 — コントラストの負担を軽減するためにわずかにオフホワイトです。
• **インク ストロング** (`{colors.ink-strong}` — `#ffffff`): ヒーローの見出しと強調されたコピーの純白のテキスト。
• **本文** (`{colors.body}` — `#bdbdbd`): 二次テキスト — 長い形式のセクションのコピー、本文段落をサポートします。
• **ミュート** (`{colors.mute}` — `#8b949e`): 優先度が最も低いオンダーク テキスト — キャプション、細字、フッターの二次行。
• **キャンバス テキスト ソフト** (`{colors.canvas-text-soft}` — `#f5f6f7`): コードの色を周囲の本文テキストよりもわずかにクールに保つためにコード モックアップ内で使用されます。

セマンティック

このブランドは、公開マーケティング ページに個別のエラー/警告パレットを表示しません。基礎となる Docusaurus のデフォルトのセマンティック パレットはデザイン システム内に存在しますが、製品内/ドキュメントのコンテキスト用に予約されています。マーケティング画面上の検証キューでは、成功にはプライマリの緑色が使用され、欠落状態にはミュートされたボディ グレーが使用されます。

タイポグラフィー

フォントファミリー

2 つの面にシステムが搭載されています。

1. すべてのディスプレイ、本体、ボタン、およびリンクの役割の **Inter**。ウェイト 400 / 500 / 600 / 700 がワーキング セットです。ページ全体で有効になっている OpenType 機能 `"calt"` および `"rlig"` とともに使用すると、幾何学的な合字とコンテキストの合字が有効になります。