Visual Theme & Atmosphere
# Design System — Vue.js (VitePress Documentation Style)
Extracted and adapted from [cn.vuejs.org](https://cn.vuejs.org) and [vuejs.org](https://vuejs.org). A content-first, developer-friendly documentation design system characterized by vibrant Vue Green accents, soft semantic highlights, progressive layout flow, and exceptionally legible dark-theme code blocks.
---
Live Visual Theme Representation:
Visual Theme Example
Color Palette & Roles
Typography Rules
Layout Principles
Grid Layout Wireframe Mockup:
Layout Grid Example
Depth & Elevation
Elevation Level Showcase:
Elevation Level Example
Used for background layers, sidebar headers, or baseline borders.
Used for floating product elements, cards, and hover states.
Used for modals, select menus, code editor tooltips, and overlay headers.
Border Radius & Shape Scale:
Component Stylings
Interactive Component Demonstrations:
Component Interactive Example
Do's and Don'ts
Do
- Keep documentation layout flat and focused on readability.
- Use monospaced fonts for paths, variables, and terminal commands.
- Limit bright brand gradients to main logos and call-to-action cards.
Don't
- Don't use overly stylized buttons or elements that distract from raw documentation content.
- Don't use heavy cards with deep blur box-shadows.
- Don't mix bright brand gradients inside long reading blocks.
- Keep documentation layout flat and focused on readability.
- Use monospaced fonts for paths, variables, and terminal commands.
- Limit bright brand gradients to main logos and call-to-action cards.
- Don't use overly stylized buttons or elements that distract from raw documentation content.
- Don't use heavy cards with deep blur box-shadows.
- Don't mix bright brand gradients inside long reading blocks.
Responsive Behavior
Responsive Adaptation Note:
Responsive Behavior Example
Agent Prompt Guide
Copyable Agent Integration Prompt:
Prompt Guide Copy Box
Full System Design Tokens
The parsed design tokens extracted from the core stylesheet of this design system:
| Design Token | Hex Value | System Palette Role |
|---|---|---|
| --primary | #42b883 | System color representation for primary |
| --primary-focus | #338a60 | System color representation for primary-focus |
| --canvas | #ffffff | System color representation for canvas |
| --surface-card | #f6f6f7 | System color representation for surface-card |
| --surface-soft | #f6f6f7 | System color representation for surface-soft |
| --ink | #2c3e50 | System color representation for ink |
| --body | #2c3e50 | System color representation for body |
| --muted | #476582 | System color representation for muted |
| --hairline | #e2e2e3 | System color representation for hairline |