# 设计资源

### 介绍

Vant 是基于有赞 [Zan Design System](https://design.youzan.com/) 视觉规范实现的组件库，在这里可以下载 Vant 的设计资源。

## 设计稿

### 组件设计稿（Sketch）

包含 Sketch 格式的色彩规范、字体规范、组件设计规范。

#### 色彩规范

<img src="https://img.yzcdn.cn/vant/color_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

#### 字体规范

<img src="https://img.yzcdn.cn/vant/words_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

#### 组件规范

<img src="https://img.yzcdn.cn/vant/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

<a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">下载</a>

### 图标设计稿（Sketch）

包含 Sketch 格式的图标库资源。

<img src="https://img.yzcdn.cn/vant/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

<a class="design-download" href="https://github.com/youzan/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>

### Axure 元件库

Axure 元件库，由社区的 [@axure-tczy](https://github.com/axure-tczy) 同学贡献。

<img src="https://img.yzcdn.cn/vant/vant-axure-0905.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

<a class="design-download" href="https://b.yzcdn.cn/vant/vant-axure-20200905.zip">下载</a>

<style>
a.design-download {
  display: inline-block;
  width: 100px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  background-color: #38f;
  border-radius: 3px;
}

a.design-download:hover {
  color: #fff;
  opacity: .9;
}

a.design-download:active {
  opacity: .7;
}
</style>