Design System — Vue.js

Design Philosophy

Vue.js 的文档设计系统主要承载了渐进式框架的技术讲解。其设计美学推崇以内容为中心，减少修饰性干扰，同时通过高识别度的标记性区域来提升技术指引的阅读体验。

提示 — 核心原则

信息层级化是核心。所有的文档都应易于导航，长篇大论的代码块应有明确的语言分类与一键复制功能。

Color System

vue-green

#42b883

vue-navy

#35495e

canvas-bg

#ffffff

canvas-dark

#1b1b1f

surface-alt

#f6f6f7

warning-yellow

#e7c000

danger-red

#cc0000

Design Token	Hex Value	Default Application
--vp-c-brand	#42b883	Primary action link, active menu highlight
--vp-c-navy	#35495e	Secondary brand contrast header color
--vp-c-text-1	#2c3e50	Default reading dark grey text color
--vp-c-bg-alt	#f6f6f7	Sidebar backgrounds, inline code backing, warning box bounds
--vp-c-border	#e2e2e3	Table column separators, horizontal dividers

Typography

Progressive Framework.

Inter · 38px · font-extrabold · line-height 1.2

渐进式 JavaScript 框架

Inter · 24px · font-bold · line-height 1.3

易学易用，性能出色，适用场景丰富的 Web 前端框架。基于标准 HTML、CSS 和 JavaScript 构建，提供容易入手的 API 和一流的文档。

Inter · 16px · font-normal · line-height 1.6

Custom Containers

VitePress-style custom container blocks are structural callouts used to classify information weight:

TIP

这是一个提示框。主要用于提供额外的信息或最佳实践，帮助开发者更好地理解 API 的使用方式。

WARNING

这是一个警告框。表示在这里存在可能触发的配置异常，或是即将废弃的非推荐接口。

DANGER

这是一个危险警告框。提醒开发者有关重大安全漏洞隐患，或者是会导致运行崩溃的严重操作误区。

Code Block Styling

Interactive code block display with dark background theme (`#202024`) and uppercase language indicators:

import { createApp, ref } from 'vue'

const app = createApp({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return { count, increment }
  }
})

app.mount('#app')

Visual Elements

Interactive Counter Card

This is a component preview highlighting Vue's brand badge colors and rounded layout edges.

Read API Specs →

Badges and status pills:

v3.3.4 Composition API Stable Experimental