laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
design-md/voltagent/DESIGN.md Normal file
View File

@@ -0,0 +1,323 @@
# Design System: VoltAgent
## 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.
Typography leans on the system font stack for headings — achieving maximum rendering speed and native-feeling authority — while Inter carries the body and UI text with geometric precision. Code blocks use SFMono-Regular, the same font developers see in their terminals, reinforcing the tool's credibility at every scroll.
**Key Characteristics:**
- Carbon-black canvas (`#050507`) with warm-gray border containment (`#3d3a39`) — not cold or sterile
- Single-accent identity: Emerald Signal Green (`#00d992`) as the sole chromatic energy source
- Dual-typography system: system-ui for authoritative headings, Inter for precise UI/body text, SFMono for code credibility
- Ultra-tight heading line-heights (1.0–1.11) creating dense, compressed power blocks
- Warm neutral palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) that prevents the dark theme from feeling clinical
- Developer-terminal aesthetic where code snippets ARE the hero content
- Green glow effects (`drop-shadow`, border accents) that make UI elements feel electrically alive
## 2. Color Palette & Roles
### Primary
- **Emerald Signal Green** (`#00d992`): The core brand energy — used for accent borders, glow effects, and the highest-signal interactive moments. This is the "power-on" indicator of the entire interface.
- **VoltAgent Mint** (`#2fd6a1`): The button-text variant of the brand green — slightly warmer and more readable than pure Signal Green, used specifically for CTA text on dark surfaces.
- **Tailwind Emerald** (`#10b981`): The ecosystem-standard green used at low opacity (30%) for subtle background tints and link defaults. Bridges VoltAgent's custom palette with Tailwind's utility classes.
### Secondary & Accent
- **Soft Purple** (`#818cf8`): A cool indigo-violet used sparingly for secondary categorization, code syntax highlights, and visual variety without competing with green.
- **Cobalt Primary** (`#306cce`): Docusaurus primary dark — used in documentation contexts for links and interactive focus states.
- **Deep Cobalt** (`#2554a0`): The darkest primary shade, reserved for pressed/active states in documentation UI.
- **Ring Blue** (`#3b82f6`): Tailwind's ring color at 50% opacity — visible only during keyboard focus for accessibility compliance.
### Surface & Background
- **Abyss Black** (`#050507`): The landing page canvas — a near-pure black with the faintest warm undertone, darker than most "dark themes" for maximum contrast with green accents.
- **Carbon Surface** (`#101010`): The primary card and button background — one shade lighter than Abyss, creating a barely perceptible elevation layer. Used across all contained surfaces.
- **Warm Charcoal Border** (`#3d3a39`): The signature containment color — not a cold gray but a warm, almost brownish dark tone that prevents borders from feeling harsh against the black canvas.
### Neutrals & Text
- **Snow White** (`#f2f2f2`): The primary text color on dark surfaces — not pure white (`#ffffff`) but a softened, eye-friendly off-white. The most-used color on the site (1008 instances).
- **Pure White** (`#ffffff`): Reserved for the highest-emphasis moments — ghost button text and maximum-contrast headings. Used at low opacity (5%) for subtle overlay effects.
- **Warm Parchment** (`#b8b3b0`): Secondary body text — a warm light gray with a slight pinkish undertone that reads as "paper" against the dark canvas.
- **Steel Slate** (`#8b949e`): Tertiary text, metadata, timestamps, and de-emphasized content. A cool blue-gray that provides clear hierarchy below Warm Parchment.
- **Fog Gray** (`#bdbdbd`): Footer links and supporting navigation text — brightens on hover to Pure White.
- **Mist Gray** (`#dcdcdc`): Slightly brighter than Fog, used for secondary link text that transitions to bright green on hover.
- **Near White** (`#eeeeee`): Highest-contrast secondary text, one step below Snow White.
### Semantic & Accent
- **Success Emerald** (`#008b00`): Deep green for success states and positive confirmations in documentation contexts.
- **Success Light** (`#80d280`): Soft pastel green for success backgrounds and subtle positive indicators.
- **Warning Amber** (`#ffba00`): Bright amber for warning alerts and caution states.
- **Warning Pale** (`#ffdd80`): Softened amber for warning background fills.
- **Danger Coral** (`#fb565b`): Vivid red for error states and destructive action warnings.
- **Danger Rose** (`#fd9c9f`): Softened coral-pink for error backgrounds.
- **Info Teal** (`#4cb3d4`): Cool teal-blue for informational callouts and tip admonitions.
- **Dashed Border Slate** (`#4f5d75` at 40%): A muted blue-gray used exclusively for decorative dashed borders in workflow diagrams.
### Gradient System
- **Green Signal Glow**: `drop-shadow(0 0 2px #00d992)` animating to `drop-shadow(0 0 8px #00d992)` — creates a pulsing "electric charge" effect on the VoltAgent bolt logo and interactive elements. The glow expands and contracts like a heartbeat.
- **Warm Ambient Haze**: `rgba(92, 88, 85, 0.2) 0px 0px 15px` — a warm-toned diffused shadow that creates a soft atmospheric glow around elevated cards, visible at the edges without sharp boundaries.
- **Deep Dramatic Elevation**: `rgba(0, 0, 0, 0.7) 0px 20px 60px` with `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset` — a heavy, dramatic downward shadow paired with a faint inset slate ring for the most prominent floating elements.
## 3. Typography Rules
### Font Family
- **Primary (Headings)**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
- **Secondary (Body/UI)**: `Inter`, with fallbacks inheriting from system-ui stack. OpenType features: `"calt", "rlig"` (contextual alternates and required ligatures)
- **Monospace (Code)**: `SFMono-Regular`, with fallbacks: `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | system-ui | 60px (3.75rem) | 400 | 1.00 (tight) | -0.65px | Maximum impact, compressed blocks |
| Section Heading | system-ui | 36px (2.25rem) | 400 | 1.11 (tight) | -0.9px | Tightest letter-spacing in the system |
| Sub-heading | system-ui | 24px (1.50rem) | 700 | 1.33 | -0.6px | Bold weight for emphasis at this size |
| Sub-heading Light | system-ui / Inter | 24px (1.50rem) | 300–400 | 1.33 | -0.6px | Light weight variant for softer hierarchy |
| Overline | system-ui | 20px (1.25rem) | 600 | 1.40 | 0.5px | Uppercase transform, positive letter-spacing |
| Feature Title | Inter | 20px (1.25rem) | 500–600 | 1.40 | normal | Card headings, feature names |
| Overline Small | Inter | 18px (1.13rem) | 600 | 1.56 | 0.45px | Uppercase section labels |
| Body / Button | Inter | 16px (1.00rem) | 400–600 | 1.50–1.65 | normal | Standard text, nav links, buttons |
| Nav Link | Inter | 14.45px (0.90rem) | 500 | 1.65 | normal | Navigation-specific sizing |
| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.43–1.65 | normal | Descriptions, metadata, badge text |
| Tag / Overline Tiny | system-ui | 14px (0.88rem) | 600 | 1.43 | 2.52px | Widest letter-spacing — reserved for uppercase tags |
| Micro | Inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Smallest sans-serif text |
| Code Body | SFMono-Regular | 13–14px | 400–686 | 1.23–1.43 | normal | Inline code, terminal output, variable weight for syntax |
| Code Small | SFMono-Regular | 11–12px | 400 | 1.33–1.45 | normal | Tiny code references, line numbers |
| Code Button | monospace | 13px (0.81rem) | 700 | 1.65 | normal | Copy-to-clipboard button labels |
### Principles
- **System-native authority**: Display headings use system-ui rather than a custom web font — this means the largest text renders instantly (no FOIT/FOUT) and inherits the operating system's native personality. On macOS it's SF Pro, on Windows it's Segoe UI. The design accepts this variability as a feature, not a bug.
- **Tight compression creates density**: Hero line-heights are extremely compressed (1.0) with negative letter-spacing (-0.65px to -0.9px), creating text blocks that feel like dense technical specifications rather than airy marketing copy.
- **Weight gradient, not weight contrast**: The system uses a gentle 300→400→500→600→700 weight progression. Bold (700) is reserved for sub-headings and code-button emphasis. Most body text lives at 400–500, creating subtle rather than dramatic hierarchy.
- **Uppercase is earned and wide**: When uppercase appears, it's always paired with generous letter-spacing (0.45px–2.52px), transforming dense words into spaced-out overline labels. This treatment is never applied to headings.
- **OpenType by default**: Both system-ui and Inter enable `"calt"` and `"rlig"` features, ensuring contextual character adjustments and ligature rendering throughout.
## 4. Component Stylings
### Buttons
**Ghost / Outline (Standard)**
- Background: transparent
- Text: Pure White (`#ffffff`)
- Padding: comfortable (12px 16px)
- Border: thin solid Warm Charcoal (`1px solid #3d3a39`)
- Radius: comfortably rounded (6px)
- Hover: background darkens to `rgba(0, 0, 0, 0.2)`, opacity drops to 0.4
- Outline: subtle green tint (`rgba(33, 196, 93, 0.5)`)
- The default interactive element — unassuming but clearly clickable
**Primary Green CTA**
- Background: Carbon Surface (`#101010`)
- Text: VoltAgent Mint (`#2fd6a1`)
- Padding: comfortable (12px 16px)
- Border: none visible (outline-based focus indicator)
- Outline: VoltAgent Mint (`rgb(47, 214, 161)`)
- Hover: same darkening behavior as Ghost
- The "powered on" button — green text on dark surface reads as an active terminal command
**Tertiary / Emphasized Container Button**
- Background: Carbon Surface (`#101010`)
- Text: Snow White (`#f2f2f2`)
- Padding: generous (20px all sides)
- Border: thick solid Warm Charcoal (`3px solid #3d3a39`)
- Radius: comfortably rounded (8px)
- A card-like button treatment for larger interactive surfaces (code copy blocks, feature CTAs)
### Cards & Containers
- Background: Carbon Surface (`#101010`) — one shade lighter than the page canvas
- Border: `1px solid #3d3a39` (Warm Charcoal) for standard containment; `2px solid #00d992` for highlighted/active cards
- Radius: comfortably rounded (8px) for content cards; subtly rounded (4–6px) for smaller inline containers
- Shadow Level 1: Warm Ambient Haze (`rgba(92, 88, 85, 0.2) 0px 0px 15px`) for standard elevation
- Shadow Level 2: Deep Dramatic (`rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`) for hero/feature showcase cards
- Hover behavior: likely border color shift toward green accent or subtle opacity increase
- Dashed variant: `1px dashed rgba(79, 93, 117, 0.4)` for workflow/diagram containers — visually distinct from solid-border content cards
### Inputs & Forms
- No explicit input token data extracted — the site is landing-page focused with minimal form UI
- The npm install command (`npm create voltagent-app@latest`) is presented as a code block rather than an input field
- Inferred style: Carbon Surface background, Warm Charcoal border, VoltAgent Mint focus ring, Snow White text
### Navigation
- Sticky top nav bar on Abyss Black canvas
- Logo: VoltAgent bolt icon with animated green glow (`drop-shadow` cycling 2px–8px)
- Nav structure: Logo → Product dropdown → Use Cases dropdown → Resources dropdown → GitHub stars badge → Docs CTA
- Link text: Snow White (`#f2f2f2`) at 14–16px Inter, weight 500
- Hover: links transition to green variants (`#00c182` or `#00ffaa`)
- GitHub badge: social proof element integrated directly into nav
- Mobile: collapses to hamburger menu, single-column vertical layout
### Image Treatment
- Dark-themed product screenshots and architectural diagrams dominate
- Code blocks are treated as primary visual content — syntax-highlighted with SFMono-Regular
- Agent workflow visualizations appear as interactive node graphs with green connection lines
- Decorative dot-pattern backgrounds appear behind hero sections
- Full-bleed within card containers, respecting 8px radius rounding
### Distinctive Components
**npm Install Command Block**
- A prominent code snippet (`npm create voltagent-app@latest`) styled as a copyable command
- SFMono-Regular on Carbon Surface with a copy-to-clipboard button
- Functions as the primary CTA — "install first, read later" developer psychology
**Company Logo Marquee**
- Horizontal scrolling strip of developer/company logos
- Infinite animation (`scrollLeft`/`scrollRight`, 25–80s durations)
- Pauses on hover and for users with reduced-motion preferences
- Demonstrates ecosystem adoption without cluttering the layout
**Feature Section Cards**
- Large cards combining code examples with descriptive text
- Left: code snippet with syntax highlighting; Right: feature description
- Green accent border (`2px solid #00d992`) on highlighted/active features
- Internal padding: generous (24–32px estimated)
**Agent Flow Diagrams**
- Interactive node-graph visualizations showing agent coordination
- Connection lines use VoltAgent green variants
- Nodes styled as mini-cards within the Warm Charcoal border system
**Community / GitHub Section**
- Large GitHub icon as the visual anchor
- Star count and contributor metrics prominently displayed
- Warm social proof: Discord, X, Reddit, LinkedIn, YouTube links in footer
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 2px, 4px, 5px, 6px, 6.4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px
- Button padding: 12px 16px (standard), 20px (container-button)
- Card internal padding: approximately 24–32px
- Section vertical spacing: generous (estimated 64–96px between major sections)
- Component gap: 16–24px between sibling cards/elements
### Grid & Container
- Max container width: approximately 1280–1440px, centered
- Hero: centered single-column with maximum breathing room
- Feature sections: alternating asymmetric layouts (code left / text right, then reversed)
- Logo marquee: full-width horizontal scroll, breaking the container constraint
- Card grids: 2–3 column for feature showcases
- Integration grid: responsive multi-column for partner/integration icons
### Whitespace Philosophy
- **Cinematic breathing room between sections**: Massive vertical gaps create a "scroll-through-chapters" experience — each section feels like a new scene.
- **Dense within components**: Cards and code blocks are internally compact, with tight line-heights and controlled padding. Information is concentrated, not spread thin.
- **Border-defined separation**: Rather than relying solely on whitespace, VoltAgent uses the Warm Charcoal border system (`#3d3a39`) to delineate content zones. The border IS the whitespace signal.
- **Hero-first hierarchy**: The top of the page commands the most space — the "AI Agent Engineering Platform" headline and npm command get maximum vertical runway before the first content section appears.
### Border Radius Scale
- Nearly squared (4px): Small inline elements, SVG containers, code spans — the sharpest treatment, conveying technical precision
- Subtly rounded (6px): Buttons, links, clipboard actions — the workhorse radius for interactive elements
- Code-specific (6.4px): Code blocks, `pre` elements, clipboard copy targets — a deliberate micro-distinction from standard 6px
- Comfortably rounded (8px): Content cards, feature containers, emphasized buttons — the standard containment radius
- Pill-shaped (9999px): Tags, badges, status indicators, pill-shaped navigation elements — the roundest treatment for small categorical labels
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Page background (`#050507`), inline text |
| Contained (Level 1) | `1px solid #3d3a39`, no shadow | Standard cards, nav bar, code blocks |
| Emphasized (Level 2) | `3px solid #3d3a39`, no shadow | Large interactive buttons, emphasized containers |
| Accent (Level 3) | `2px solid #00d992`, no shadow | Active/highlighted feature cards, selected states |
| Ambient Glow (Level 4) | `rgba(92, 88, 85, 0.2) 0px 0px 15px` | Elevated cards, hover states, soft atmospheric lift |
| Dramatic Float (Level 5) | `rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 1px inset` | Hero feature showcase, modals, maximum-elevation content |
**Shadow Philosophy**: VoltAgent communicates depth primarily through **border weight and color**, not shadows. The standard `1px solid #3d3a39` border IS the elevation — adding a `3px` border weight or switching to green (`#00d992`) communicates importance more than adding shadow does. When shadows do appear, they're either warm and diffused (Level 4) or cinematic and dramatic (Level 5) — never medium or generic.
### Decorative Depth
- **Green Signal Glow**: The VoltAgent bolt logo pulses with a `drop-shadow` animation cycling between 2px and 8px blur radius in Emerald Signal Green. This is the most distinctive decorative element — it makes the logo feel "powered on."
- **Warm Charcoal Containment Lines**: The warm tone of `#3d3a39` borders creates a subtle visual warmth against the cool black, as if the cards are faintly heated from within.
- **Dashed Workflow Lines**: `1px dashed rgba(79, 93, 117, 0.4)` creates a blueprint-like aesthetic for architecture diagrams, visually distinct from solid content borders.
## 7. Do's and Don'ts
### Do
- Use Abyss Black (`#050507`) as the landing page background and Carbon Surface (`#101010`) for all contained elements — the two-shade dark system is essential
- Reserve Emerald Signal Green (`#00d992`) exclusively for high-signal moments: active borders, glow effects, and the most important interactive accents
- Use VoltAgent Mint (`#2fd6a1`) for button text on dark surfaces — it's more readable than pure Signal Green
- Keep heading line-heights compressed (1.0–1.11) with negative letter-spacing for dense, authoritative text blocks
- Use the warm gray palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) for borders and secondary text — warmth prevents the dark theme from feeling sterile
- Present code snippets as primary content — they're hero elements, not supporting illustrations
- Use border weight (1px → 2px → 3px) and color shifts (`#3d3a39` → `#00d992`) to communicate depth and importance, rather than relying on shadows
- Pair system-ui for headings with Inter for body text — the speed/authority of native fonts combined with the precision of a geometric sans
- Use SFMono-Regular for all code content — it's the developer credibility signal
- Apply `"calt"` and `"rlig"` OpenType features across all text
### Don't
- Don't use bright or light backgrounds as primary surfaces — the entire identity lives on near-black
- Don't introduce warm colors (orange, red, yellow) as decorative accents — the palette is strictly green + warm neutrals on black. Warm colors are reserved for semantic states (warning, error) only
- Don't use Emerald Signal Green (`#00d992`) on large surfaces or as background fills — it's an accent, never a surface
- Don't increase heading line-heights beyond 1.33 — the compressed density is core to the engineering-platform identity
- Don't use heavy shadows generously — depth comes from border treatment, not box-shadow. Shadows are reserved for Level 4–5 elevation only
- Don't use pure white (`#ffffff`) as default body text — Snow White (`#f2f2f2`) is the standard. Pure white is reserved for maximum-emphasis headings and button text
- Don't mix in serif or decorative fonts — the entire system is geometric sans + monospace
- Don't use border-radius larger than 8px on content cards — 9999px (pill) is only for small tags and badges
- Don't skip the warm-gray border system — cards without `#3d3a39` borders lose their containment and float ambiguously on the dark canvas
- Don't animate aggressively — animations are slow and subtle (25–100s durations for marquee, gentle glow pulses). Fast motion contradicts the "engineering precision" atmosphere
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Small Mobile | <420px | Minimum layout, stacked everything, reduced hero text to ~24px |
| Mobile | 420–767px | Single column, hamburger nav, full-width cards, hero text ~36px |
| Tablet | 768–1024px | 2-column grids begin, condensed nav, medium hero text |
| Desktop | 1025–1440px | Full multi-column layout, expanded nav with dropdowns, large hero (60px) |
| Large Desktop | >1440px | Max-width container centered (est. 1280–1440px), generous horizontal margins |
*23 breakpoints detected in total, ranging from 360px to 1992px — indicating a fluid, heavily responsive grid system rather than fixed breakpoint snapping.*
### Touch Targets
- Buttons use comfortable padding (12px 16px minimum) ensuring adequate touch area
- Navigation links spaced with sufficient gap for thumb navigation
- Interactive card surfaces are large enough to serve as full touch targets
- Minimum recommended touch target: 44x44px
### Collapsing Strategy
- **Navigation**: Full horizontal nav with dropdowns collapses to hamburger menu on mobile
- **Feature grids**: 3-column → 2-column → single-column vertical stacking
- **Hero text**: 60px → 36px → 24px progressive scaling with maintained compression ratios
- **Logo marquee**: Adjusts scroll speed and item sizing; maintains infinite loop
- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping — preserving code readability
- **Section padding**: Reduces proportionally but maintains generous vertical rhythm between chapters
- **Cards**: Stack vertically on mobile with full-width treatment and maintained internal padding
### Image Behavior
- Dark-themed screenshots and diagrams scale proportionally within containers
- Agent flow diagrams simplify or scroll horizontally on narrow viewports
- Dot-pattern decorative backgrounds scale with viewport
- No visible art direction changes between breakpoints — same crops, proportional scaling
- Lazy loading for below-fold images (Docusaurus default behavior)
## 9. Agent Prompt Guide
### Quick Color Reference
- Brand Accent: "Emerald Signal Green (#00d992)"
- Button Text: "VoltAgent Mint (#2fd6a1)"
- Page Background: "Abyss Black (#050507)"
- Card Surface: "Carbon Surface (#101010)"
- Border / Containment: "Warm Charcoal (#3d3a39)"
- Primary Text: "Snow White (#f2f2f2)"
- Secondary Text: "Warm Parchment (#b8b3b0)"
- Tertiary Text: "Steel Slate (#8b949e)"
### Example Component Prompts
- "Create a feature card on Carbon Surface (#101010) with a 1px solid Warm Charcoal (#3d3a39) border, comfortably rounded corners (8px). Use Snow White (#f2f2f2) for the title in system-ui at 24px weight 700, and Warm Parchment (#b8b3b0) for the description in Inter at 16px. Add a subtle Warm Ambient shadow (rgba(92, 88, 85, 0.2) 0px 0px 15px)."
- "Design a ghost button with transparent background, Snow White (#f2f2f2) text in Inter at 16px, a 1px solid Warm Charcoal (#3d3a39) border, and subtly rounded corners (6px). Padding: 12px vertical, 16px horizontal. On hover, background shifts to rgba(0, 0, 0, 0.2)."
- "Build a hero section on Abyss Black (#050507) with a massive heading at 60px system-ui, line-height 1.0, letter-spacing -0.65px. The word 'Platform' should be colored in Emerald Signal Green (#00d992). Below the heading, place a code block showing 'npm create voltagent-app@latest' in SFMono-Regular at 14px on Carbon Surface (#101010) with a copy button."
- "Create a highlighted feature card using a 2px solid Emerald Signal Green (#00d992) border instead of the standard Warm Charcoal. Keep Carbon Surface background, comfortably rounded corners (8px), and include a code snippet on the left with feature description text on the right."
- "Design a navigation bar on Abyss Black (#050507) with the VoltAgent logo (bolt icon with animated green glow) on the left, nav links in Inter at 14px weight 500 in Snow White, and a green CTA button (Carbon Surface bg, VoltAgent Mint text) on the right. Add a 1px solid Warm Charcoal bottom border."
### Iteration Guide
When refining existing screens generated with this design system:
1. Focus on ONE component at a time
2. Reference specific color names and hex codes — "use Warm Parchment (#b8b3b0)" not "make it lighter"
3. Use border treatment to communicate elevation: "change the border to 2px solid Emerald Signal Green (#00d992)" for emphasis
4. Describe the desired "feel" alongside measurements — "compressed and authoritative heading at 36px with line-height 1.11 and -0.9px letter-spacing"
5. For glow effects, specify "Emerald Signal Green (#00d992) as a drop-shadow with 2–8px blur radius"
6. Always specify which font — system-ui for headings, Inter for body/UI, SFMono-Regular for code
7. Keep animations slow and subtle — marquee scrolls at 25–80s, glow pulses gently

27
design-md/voltagent/README.md Normal file
View File

@@ -0,0 +1,27 @@
# Voltagent — Design System
> Design.md extracted from the public [voltagent](https://voltagent.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Voltagent design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Voltagent Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-dark-screenshot.png)
### Light Mode
![Voltagent Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-screenshot.png)

487
design-md/voltagent/preview-dark.html Normal file
View File

@@ -0,0 +1,487 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: VoltAgent (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--color-abyss: #050507;
--color-carbon: #101010;
--color-signal-green: #00d992;
--color-mint: #2fd6a1;
--color-emerald: #10b981;
--color-purple: #818cf8;
--color-warm-charcoal: #3d3a39;
--color-steel: #8b949e;
--color-parchment: #b8b3b0;
--color-snow: #f2f2f2;
--color-white: #ffffff;
--color-fog: #bdbdbd;
--color-mist: #dcdcdc;
--color-warning: #ffba00;
--color-danger: #fb565b;
--color-info: #4cb3d4;
--color-success: #008b00;
--font-system: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Dark mode */
--bg-page: var(--color-abyss);
--bg-card: var(--color-carbon);
--bg-nav: rgba(5,5,7,0.92);
--text-primary: var(--color-snow);
--text-secondary: var(--color-parchment);
--text-muted: var(--color-steel);
--border-color: var(--color-warm-charcoal);
--border-subtle: rgba(61,58,57,0.5);
--section-label-color: var(--color-signal-green);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand { font-family: var(--font-system); font-size: 18px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }
.nav-brand .bolt { color: var(--color-signal-green); font-size: 20px; filter: drop-shadow(0 0 4px #00d992); }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: var(--color-fog); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--color-signal-green); }
.nav-cta {
background: var(--color-carbon);
color: var(--color-mint);
padding: 8px 20px;
border: 1px solid var(--color-warm-charcoal);
border-radius: 6px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(0,217,146,0.15) 0%, rgba(16,185,129,0.06) 40%, transparent 70%);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-system);
font-size: 60px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.65px;
margin-bottom: 24px;
position: relative;
}
.hero h1 span { color: var(--color-signal-green); text-shadow: 0 0 40px rgba(0,217,146,0.3); }
.hero p {
color: var(--text-secondary);
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
.btn-primary-green {
background: var(--color-carbon);
color: var(--color-mint);
padding: 12px 24px;
border: 1px solid var(--color-warm-charcoal);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
.btn-ghost {
background: transparent;
color: var(--color-snow);
padding: 12px 24px;
border: 1px solid var(--color-warm-charcoal);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
cursor: pointer;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-system);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2.52px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-system);
font-size: 36px;
font-weight: 400;
line-height: 1.11;
letter-spacing: -0.9px;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title { font-size: 20px; font-weight: 500; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.color-swatch-block { height: 80px; }
.color-swatch-info { padding: 12px; background: var(--bg-card); }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* BUTTONS */
.button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.button-demo { text-align: center; }
.button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }
.btn-ghost-charcoal {
background: transparent;
color: var(--color-snow);
padding: 12px 16px;
border: 1px solid var(--color-warm-charcoal);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
cursor: pointer;
}
.btn-tertiary {
background: var(--color-carbon);
color: var(--color-snow);
padding: 20px;
border: 3px solid var(--color-warm-charcoal);
border-radius: 8px;
font-size: 16px;
font-family: var(--font-body);
cursor: pointer;
}
.btn-accent-border {
background: transparent;
color: var(--color-signal-green);
padding: 12px 16px;
border: 2px solid var(--color-signal-green);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card { background: var(--bg-card); border-radius: 8px; padding: 28px; }
.card-standard { border: 1px solid var(--border-color); }
.card-accent { border: 2px solid var(--color-signal-green); }
.card-dramatic { border: 1px solid var(--border-color); box-shadow: 0px 20px 60px rgba(0,0,0,0.7); }
.card-dramatic::after { content: ''; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(148,163,184,0.1); pointer-events: none; }
.card h3 { font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px; margin-bottom: 12px; }
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
.card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-signal-green); margin-bottom: 16px; }
/* CODE BLOCK */
.code-block {
background: var(--color-carbon);
border: 1px solid var(--color-warm-charcoal);
border-radius: 8px;
padding: 20px 24px;
margin-top: 24px;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.5;
color: var(--color-snow);
overflow-x: auto;
}
.code-block .keyword { color: var(--color-purple); }
.code-block .string { color: var(--color-mint); }
.code-block .comment { color: var(--color-steel); }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box { background: rgba(0,217,146,0.12); border: 1px solid rgba(0,217,146,0.3); border-radius: 2px; margin-bottom: 8px; }
.spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }
.radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-contained { border: 1px solid var(--border-color); }
.elevation-emphasized { border: 3px solid var(--border-color); }
.elevation-accent { border: 2px solid var(--color-signal-green); }
.elevation-ambient { border: 1px solid var(--border-color); box-shadow: 0px 0px 15px rgba(92,88,85,0.2); }
.elevation-dramatic { border: 1px solid var(--border-color); box-shadow: 0px 20px 60px rgba(0,0,0,0.7); }
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-signal-green); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 36px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand"><span class="bolt">&#9889;</span> VoltAgent</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br><span>VoltAgent</span></h1>
<p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-primary-green">Explore Tokens</button>
<button class="btn-ghost">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: #00d992;"></div><div class="color-swatch-info"><div class="color-swatch-name">Emerald Signal Green</div><div class="color-swatch-hex">#00d992</div><div class="color-swatch-role">Core brand accent, glow effects, active borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #2fd6a1;"></div><div class="color-swatch-info"><div class="color-swatch-name">VoltAgent Mint</div><div class="color-swatch-hex">#2fd6a1</div><div class="color-swatch-role">CTA button text on dark surfaces</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #10b981;"></div><div class="color-swatch-info"><div class="color-swatch-name">Tailwind Emerald</div><div class="color-swatch-hex">#10b981</div><div class="color-swatch-role">Ecosystem green, background tints at 30%</div></div></div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Secondary & Accent</h3>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: #818cf8;"></div><div class="color-swatch-info"><div class="color-swatch-name">Soft Purple</div><div class="color-swatch-hex">#818cf8</div><div class="color-swatch-role">Code syntax, secondary categorization</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #306cce;"></div><div class="color-swatch-info"><div class="color-swatch-name">Cobalt Primary</div><div class="color-swatch-hex">#306cce</div><div class="color-swatch-role">Docs links, focus states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #4cb3d4;"></div><div class="color-swatch-info"><div class="color-swatch-name">Info Teal</div><div class="color-swatch-hex">#4cb3d4</div><div class="color-swatch-role">Informational callouts</div></div></div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: #050507; border-bottom: 1px solid #3d3a39;"></div><div class="color-swatch-info"><div class="color-swatch-name">Abyss Black</div><div class="color-swatch-hex">#050507</div><div class="color-swatch-role">Landing page canvas</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #101010; border-bottom: 1px solid #3d3a39;"></div><div class="color-swatch-info"><div class="color-swatch-name">Carbon Surface</div><div class="color-swatch-hex">#101010</div><div class="color-swatch-role">Card backgrounds, button surfaces</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #3d3a39;"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Charcoal</div><div class="color-swatch-hex">#3d3a39</div><div class="color-swatch-role">Borders, containment lines</div></div></div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: #f2f2f2;"></div><div class="color-swatch-info"><div class="color-swatch-name">Snow White</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Primary text (1008 instances)</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #b8b3b0;"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Parchment</div><div class="color-swatch-hex">#b8b3b0</div><div class="color-swatch-role">Secondary body text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #8b949e;"></div><div class="color-swatch-info"><div class="color-swatch-name">Steel Slate</div><div class="color-swatch-hex">#8b949e</div><div class="color-swatch-role">Tertiary text, metadata</div></div></div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Semantic</h3>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background: #ffba00;"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning Amber</div><div class="color-swatch-hex">#ffba00</div><div class="color-swatch-role">Warning alerts</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #fb565b;"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger Coral</div><div class="color-swatch-hex">#fb565b</div><div class="color-swatch-role">Error states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background: #008b00;"></div><div class="color-swatch-info"><div class="color-swatch-name">Success Emerald</div><div class="color-swatch-hex">#008b00</div><div class="color-swatch-role">Success confirmations</div></div></div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-system); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -0.65px;">Display Hero</div><div class="type-sample-label">Display / Hero &mdash; 60px / 400 / 1.00 / -0.65px &mdash; system-ui</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-system); font-size: 36px; font-weight: 400; line-height: 1.11; letter-spacing: -0.9px;">Section Heading</div><div class="type-sample-label">Section Heading &mdash; 36px / 400 / 1.11 / -0.9px &mdash; system-ui</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px;">Sub-heading Bold</div><div class="type-sample-label">Sub-heading Bold &mdash; 24px / 700 / 1.33 / -0.6px &mdash; system-ui</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-system); font-size: 20px; font-weight: 600; line-height: 1.40; text-transform: uppercase; letter-spacing: 0.5px;">OVERLINE LABEL</div><div class="type-sample-label">Overline &mdash; 20px / 600 / 1.40 / 0.5px / uppercase &mdash; system-ui</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;">Feature Title</div><div class="type-sample-label">Feature Title &mdash; 20px / 600 / 1.40 / normal &mdash; Inter</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65;">Body text for standard paragraphs, navigation links, and button labels. Inter provides geometric precision.</div><div class="type-sample-label">Body / Button &mdash; 16px / 400 / 1.65 / normal &mdash; Inter</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions</div><div class="type-sample-label">Caption &mdash; 14px / 500 / 1.43 / normal &mdash; Inter</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;">const agent = new Agent({ name: "voltagent" })</div><div class="type-sample-label">Code Body &mdash; 14px / 400 / 1.43 / normal &mdash; SFMono-Regular</div></div>
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33;">import { Agent } from "@voltagent/core"</div><div class="type-sample-label">Code Small &mdash; 12px / 400 / 1.33 / normal &mdash; SFMono-Regular</div></div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo"><button class="btn-primary-green">Get Started</button><div class="button-demo-label">Primary Green CTA</div></div>
<div class="button-demo"><button class="btn-ghost">View Docs</button><div class="button-demo-label">Ghost / Outline</div></div>
<div class="button-demo"><button class="btn-ghost-charcoal">Secondary</button><div class="button-demo-label">Ghost / Charcoal</div></div>
<div class="button-demo"><button class="btn-accent-border">Highlighted</button><div class="button-demo-label">Accent Border</div></div>
<div class="button-demo"><button class="btn-tertiary">Container Button</button><div class="button-demo-label">Tertiary / Container</div></div>
</div>
<div class="code-block" style="margin-top: 40px;">
<span class="comment">// npm install command — the primary CTA</span><br>
<span class="keyword">$</span> npm create voltagent-app@latest
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-standard"><div class="card-label">Standard Card</div><h3>Warm Charcoal Border</h3><p>Standard content card with 1px warm-charcoal border and 8px radius. The default container for features and code blocks.</p></div>
<div class="card card-accent"><div class="card-label">Accent Highlighted</div><h3>Green Signal Border</h3><p>Active card with 2px solid Emerald Signal Green border. For selected features and primary emphasis.</p></div>
<div class="card card-dramatic" style="position: relative;"><div class="card-label">Dramatic Float</div><h3>Deep Shadow Elevation</h3><p>Maximum-elevation card with dramatic shadow and inset slate ring. For hero features and floating content.</p></div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 2px to 64px.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">6px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Nearly squared</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Subtly rounded</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortably rounded</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill-shaped</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat"><div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Page background.</div></div><div class="elevation-level">Level 0</div></div>
<div class="elevation-card elevation-contained"><div><div class="elevation-name">Contained</div><div class="elevation-desc">1px solid Warm Charcoal. Standard cards.</div></div><div class="elevation-level">Level 1</div></div>
<div class="elevation-card elevation-emphasized"><div><div class="elevation-name">Emphasized</div><div class="elevation-desc">3px solid Warm Charcoal. Large containers.</div></div><div class="elevation-level">Level 2</div></div>
<div class="elevation-card elevation-accent"><div><div class="elevation-name">Accent</div><div class="elevation-desc">2px solid Signal Green. Active features.</div></div><div class="elevation-level">Level 3</div></div>
<div class="elevation-card elevation-ambient"><div><div class="elevation-name">Ambient Glow</div><div class="elevation-desc">Warm diffused shadow. Soft atmospheric lift.</div></div><div class="elevation-level">Level 4</div></div>
<div class="elevation-card elevation-dramatic"><div><div class="elevation-name">Dramatic Float</div><div class="elevation-desc">Heavy shadow + inset ring. Hero features.</div></div><div class="elevation-level">Level 5</div></div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>

766
design-md/voltagent/preview.html Normal file
View File

@@ -0,0 +1,766 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: VoltAgent (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--color-abyss: #050507;
--color-carbon: #101010;
--color-signal-green: #00d992;
--color-mint: #2fd6a1;
--color-emerald: #10b981;
--color-purple: #818cf8;
--color-warm-charcoal: #3d3a39;
--color-steel: #8b949e;
--color-parchment: #b8b3b0;
--color-snow: #f2f2f2;
--color-white: #ffffff;
--color-fog: #bdbdbd;
--color-mist: #dcdcdc;
--color-warning: #ffba00;
--color-danger: #fb565b;
--color-info: #4cb3d4;
--color-success: #008b00;
--font-system: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Light mode overrides */
--bg-page: #ffffff;
--bg-card: #f8f8f8;
--bg-nav: rgba(255,255,255,0.92);
--text-primary: #101010;
--text-secondary: #3d3a39;
--text-muted: #8b949e;
--border-color: #e0e0e0;
--border-subtle: #f0f0f0;
--section-label-color: var(--color-signal-green);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand { font-family: var(--font-system); font-size: 18px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }
.nav-brand .bolt { color: var(--color-signal-green); font-size: 20px; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--color-signal-green); }
.nav-cta {
background: var(--color-carbon);
color: var(--color-mint);
padding: 8px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(0,217,146,0.08) 0%, rgba(16,185,129,0.04) 40%, transparent 70%);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-system);
font-size: 60px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.65px;
margin-bottom: 24px;
position: relative;
}
.hero h1 span { color: var(--color-signal-green); }
.hero p {
color: var(--text-secondary);
font-size: 18px;
line-height: 1.5;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
.btn-primary-green {
background: var(--color-carbon);
color: var(--color-mint);
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
.btn-ghost {
background: transparent;
color: var(--text-primary);
padding: 12px 24px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
cursor: pointer;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-system);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2.52px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-system);
font-size: 36px;
font-weight: 400;
line-height: 1.11;
letter-spacing: -0.9px;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
/* BUTTONS */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
.btn-ghost-charcoal {
background: transparent;
color: var(--text-primary);
padding: 12px 16px;
border: 1px solid var(--color-warm-charcoal);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
cursor: pointer;
}
.btn-tertiary {
background: var(--bg-card);
color: var(--text-primary);
padding: 20px;
border: 3px solid var(--border-color);
border-radius: 8px;
font-size: 16px;
font-family: var(--font-body);
cursor: pointer;
}
.btn-accent-border {
background: transparent;
color: var(--color-signal-green);
padding: 12px 16px;
border: 2px solid var(--color-signal-green);
border-radius: 6px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-standard { border: 1px solid var(--border-color); }
.card-accent {
border: 2px solid var(--color-signal-green);
}
.card-dramatic {
border: 1px solid var(--border-color);
box-shadow: 0px 20px 60px rgba(0,0,0,0.07);
}
.card h3 { font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px; margin-bottom: 12px; }
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
.card-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.55px;
color: var(--color-signal-green);
margin-bottom: 16px;
}
/* CODE BLOCK */
.code-block {
background: var(--color-carbon);
border: 1px solid var(--color-warm-charcoal);
border-radius: 8px;
padding: 20px 24px;
margin-top: 24px;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.5;
color: var(--color-snow);
overflow-x: auto;
}
.code-block .keyword { color: var(--color-purple); }
.code-block .string { color: var(--color-mint); }
.code-block .comment { color: var(--color-steel); }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(0,217,146,0.12);
border: 1px solid rgba(0,217,146,0.3);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-contained { border: 1px solid var(--border-subtle); }
.elevation-emphasized { border: 3px solid var(--border-color); }
.elevation-accent { border: 2px solid var(--color-signal-green); }
.elevation-ambient { border: 1px solid var(--border-color); box-shadow: 0px 0px 15px rgba(92,88,85,0.1); }
.elevation-dramatic { border: 1px solid var(--border-color); box-shadow: 0px 20px 60px rgba(0,0,0,0.07); }
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-signal-green);
text-transform: uppercase;
letter-spacing: 0.55px;
margin-top: 12px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 36px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand"><span class="bolt">&#9889;</span> VoltAgent</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br><span>VoltAgent</span></h1>
<p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-primary-green">Explore Tokens</button>
<button class="btn-ghost">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #00d992;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Emerald Signal Green</div>
<div class="color-swatch-hex">#00d992</div>
<div class="color-swatch-role">Core brand accent, glow effects, active borders</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #2fd6a1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">VoltAgent Mint</div>
<div class="color-swatch-hex">#2fd6a1</div>
<div class="color-swatch-role">CTA button text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #10b981;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Tailwind Emerald</div>
<div class="color-swatch-hex">#10b981</div>
<div class="color-swatch-role">Ecosystem green, link defaults, background tints at 30%</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Secondary & Accent</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #818cf8;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Soft Purple</div>
<div class="color-swatch-hex">#818cf8</div>
<div class="color-swatch-role">Secondary categorization, code syntax highlights</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #306cce;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cobalt Primary</div>
<div class="color-swatch-hex">#306cce</div>
<div class="color-swatch-role">Docs links, interactive focus states</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #4cb3d4;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Info Teal</div>
<div class="color-swatch-hex">#4cb3d4</div>
<div class="color-swatch-role">Informational callouts and tip admonitions</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #050507; border-bottom: 1px solid #3d3a39;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Abyss Black</div>
<div class="color-swatch-hex">#050507</div>
<div class="color-swatch-role">Landing page canvas</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #101010; border-bottom: 1px solid #3d3a39;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Carbon Surface</div>
<div class="color-swatch-hex">#101010</div>
<div class="color-swatch-role">Card backgrounds, button surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #3d3a39;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Charcoal</div>
<div class="color-swatch-hex">#3d3a39</div>
<div class="color-swatch-role">Borders, containment lines</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #f2f2f2; border-bottom: 1px solid #e0e0e0;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Snow White</div>
<div class="color-swatch-hex">#f2f2f2</div>
<div class="color-swatch-role">Primary text on dark surfaces (1008 instances)</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #b8b3b0;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Parchment</div>
<div class="color-swatch-hex">#b8b3b0</div>
<div class="color-swatch-role">Secondary body text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #8b949e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Steel Slate</div>
<div class="color-swatch-hex">#8b949e</div>
<div class="color-swatch-role">Tertiary text, metadata</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Semantic</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffba00;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warning Amber</div>
<div class="color-swatch-hex">#ffba00</div>
<div class="color-swatch-role">Warning states and caution alerts</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fb565b;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Danger Coral</div>
<div class="color-swatch-hex">#fb565b</div>
<div class="color-swatch-role">Error states and destructive actions</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #008b00;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Success Emerald</div>
<div class="color-swatch-hex">#008b00</div>
<div class="color-swatch-role">Success confirmations</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-system); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -0.65px;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 60px / 400 / 1.00 / -0.65px &mdash; system-ui</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-system); font-size: 36px; font-weight: 400; line-height: 1.11; letter-spacing: -0.9px;">Section Heading</div>
<div class="type-sample-label">Section Heading &mdash; 36px / 400 / 1.11 / -0.9px &mdash; system-ui</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px;">Sub-heading Bold</div>
<div class="type-sample-label">Sub-heading Bold &mdash; 24px / 700 / 1.33 / -0.6px &mdash; system-ui</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-system); font-size: 20px; font-weight: 600; line-height: 1.40; text-transform: uppercase; letter-spacing: 0.5px;">OVERLINE LABEL</div>
<div class="type-sample-label">Overline &mdash; 20px / 600 / 1.40 / 0.5px / uppercase &mdash; system-ui</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 20px / 600 / 1.40 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65;">Body text for standard paragraphs, navigation links, and button labels. Inter provides geometric precision for all UI copy.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400 / 1.65 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions</div>
<div class="type-sample-label">Caption &mdash; 14px / 500 / 1.43 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-system); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 2.52px; color: var(--text-muted);">TINY OVERLINE TAG</div>
<div class="type-sample-label">Tag / Overline Tiny &mdash; 14px / 600 / 1.43 / 2.52px / uppercase &mdash; system-ui</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;">const agent = new Agent({ name: "voltagent" })</div>
<div class="type-sample-label">Code Body &mdash; 14px / 400 / 1.43 / normal &mdash; SFMono-Regular</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33;">import { Agent } from "@voltagent/core"</div>
<div class="type-sample-label">Code Small &mdash; 12px / 400 / 1.33 / normal &mdash; SFMono-Regular</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-primary-green">Get Started</button>
<div class="button-demo-label">Primary Green CTA</div>
</div>
<div class="button-demo">
<button class="btn-ghost">View Docs</button>
<div class="button-demo-label">Ghost / Outline</div>
</div>
<div class="button-demo">
<button class="btn-ghost-charcoal">Secondary</button>
<div class="button-demo-label">Ghost / Charcoal</div>
</div>
<div class="button-demo">
<button class="btn-accent-border">Highlighted</button>
<div class="button-demo-label">Accent Border</div>
</div>
<div class="button-demo">
<button class="btn-tertiary">Container Button</button>
<div class="button-demo-label">Tertiary / Container</div>
</div>
</div>
<div class="code-block" style="margin-top: 40px;">
<span class="comment">// npm install command — the primary CTA</span><br>
<span class="keyword">$</span> npm create voltagent-app@latest
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-standard">
<div class="card-label">Standard Card</div>
<h3>Warm Charcoal Border</h3>
<p>Standard content card with 1px solid warm-charcoal border and 8px radius. The default container for features, code blocks, and content sections.</p>
</div>
<div class="card card-accent">
<div class="card-label">Accent Highlighted</div>
<h3>Green Signal Border</h3>
<p>Active or highlighted card with 2px solid Emerald Signal Green border. Used for selected features, active states, and primary emphasis.</p>
</div>
<div class="card card-dramatic">
<div class="card-label">Dramatic Float</div>
<h3>Deep Shadow Elevation</h3>
<p>Maximum-elevation card with dramatic shadow (20px 60px) and inset slate ring. Reserved for hero feature showcases and floating content.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 2px to 64px.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">6px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Nearly squared</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Subtly rounded</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortably rounded</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill-shaped</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Page background and inline text.</div></div>
<div class="elevation-level">Level 0</div>
</div>
<div class="elevation-card elevation-contained">
<div><div class="elevation-name">Contained</div><div class="elevation-desc">1px solid Warm Charcoal. Standard cards and code blocks.</div></div>
<div class="elevation-level">Level 1</div>
</div>
<div class="elevation-card elevation-emphasized">
<div><div class="elevation-name">Emphasized</div><div class="elevation-desc">3px solid Warm Charcoal. Large interactive buttons and containers.</div></div>
<div class="elevation-level">Level 2</div>
</div>
<div class="elevation-card elevation-accent">
<div><div class="elevation-name">Accent</div><div class="elevation-desc">2px solid Emerald Signal Green. Active/highlighted feature cards.</div></div>
<div class="elevation-level">Level 3</div>
</div>
<div class="elevation-card elevation-ambient">
<div><div class="elevation-name">Ambient Glow</div><div class="elevation-desc">Warm diffused shadow (15px blur). Soft atmospheric lift.</div></div>
<div class="elevation-level">Level 4</div>
</div>
<div class="elevation-card elevation-dramatic">
<div><div class="elevation-name">Dramatic Float</div><div class="elevation-desc">Heavy shadow (20px 60px) + inset ring. Hero features, modals.</div></div>
<div class="elevation-level">Level 5</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>