Youzan — A lightweight, customizable Vue UI library for mobile web apps.
Fit guidance has no recorded field-level check date. No readiness audit recorded.
Palette, type ramp, spacing grid, radius, elevation and motion — restated in our own structure from Vant’s public references. Factual values for study; the official docs remain canonical.
Editable editorial reference. 0/4 fields have an explicit source and 0 have a recorded check date. Context sources are not proof of every value; verify current values with the maintainer before implementation.
Inspect every field and its evidence (JSON)Primary / Blue
Primary actions; --van-primary-color is an alias of --van-blue.
--van-primary-color
Exactly what ships in youzan-vant-design.md. This entry doesn’t have a full editorial breakdown yet, so the spec covers the verified facts — profile, official source, and an AI-ready prompt.
Restated from vant-ui.github.io and youzan/vant, links last checked 2026-09-16. The file lists its sources and method in a provenance block at the top.
# Vant — Design Style Reference
```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: medium
verified_at: 2026-09-16
source_page: https://www.designsystems.one/design-systems/youzan-vant
sources:
- https://vant-ui.github.io/vant/
- https://github.com/youzan/vant/blob/main/packages/vant/src/style/css-variables.less
- https://github.com/youzan/vant
```
> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Youzan. "Vant" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.
**System:** Vant
**Owner:** Youzan
**Official documentation:** https://vant-ui.github.io/vant/
---
## Summary
A lightweight, customizable Vue UI library for mobile web apps.
_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Colour only, read from the published CSS custom properties. Field-level evidence: 0/4 claims source-linked, 0/4 dated. Confidence is not verification; validate canonical values before implementation._
[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=youzan-vant)
## Color tokens
| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary / Blue | `#1989fa` | `--van-primary-color` | Primary actions; --van-primary-color is an alias of --van-blue. |
## Quick start (CSS)
```css
/* Vant — illustrative tokens, restated as CSS custom properties.
Unofficial reference by designsystems.one; values are indicative, not
canonical. Native dp/sp values are omitted, never silently converted.
Official reference: https://vant-ui.github.io/vant/
Reference scope: Colour only, read from the published CSS custom properties.
Field evidence: https://www.designsystems.one/api/style-spec?system=youzan-vant */
:root {
/* Color */
--van-primary-color: #1989fa; /* Primary actions; --van-primary-color is an alias of --van-blue. */
}
```
## Engineering profile
- Public engineering details are limited; see the official documentation.
## Apply this style with an AI tool
Paste this into your AI coding assistant as a direction, then iterate:
> Design in the spirit of Vant by Youzan — A lightweight, customizable Vue UI library for mobile web apps. Use a primary colour near #1989fa. Match the intent, not the pixels; adapt it to my product rather than cloning it.
## Official reference
- [Vant documentation](https://vant-ui.github.io/vant/)
---
_Generated by [designsystems.one](https://www.designsystems.one/design-systems/youzan-vant) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
Want the deep dive?
Vant doesn’t have a full editorial breakdown yet — those cover origin, governance, token decisions, and the components worth studying. Thirty-seven anchor systems do.