# Design Resource

### Intro

You can download Vant's design resources here.

## Resources

### Components (Sketch)

Contains color specifications, font specifications, and component design specifications.

#### Colors

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

#### Fonts

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

#### Components

<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">Download</a>

### Icons (Sketch)

Contains icon library resources.

<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">Download</a>

### Axure

<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">Download</a>

<style>
a.design-download {
  display: inline-block;
  width: 100px;
  color: #fff !important;
  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>