Element Plus — A Vue 3 based component library for designers and developers.
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 Element Plus’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
Primary actions; $colors.primary.base in theme-chalk.
--el-color-primary
Exactly what ships in element-plus-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 element-plus.org and element-plus/element-plus, links last checked 2026-09-16. The file lists its sources and method in a provenance block at the top.
# Element Plus — 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/element-plus
sources:
- https://element-plus.org/
- https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
- https://github.com/element-plus/element-plus
```
> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Element Plus. "Element Plus" 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:** Element Plus
**Owner:** Element Plus
**Official documentation:** https://element-plus.org/
---
## Summary
A Vue 3 based component library for designers and developers.
_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Colour only, read from the SCSS colour map. 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=element-plus)
## Color tokens
| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary | `#409eff` | `--el-color-primary` | Primary actions; $colors.primary.base in theme-chalk. |
## Quick start (CSS)
```css
/* Element Plus — 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://element-plus.org/
Reference scope: Colour only, read from the SCSS colour map.
Field evidence: https://www.designsystems.one/api/style-spec?system=element-plus */
:root {
/* Color */
--el-color-primary: #409eff; /* Primary actions; $colors.primary.base in theme-chalk. */
}
```
## 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 Element Plus by Element Plus — A Vue 3 based component library for designers and developers. Use a primary colour near #409eff. Match the intent, not the pixels; adapt it to my product rather than cloning it.
## Official reference
- [Element Plus documentation](https://element-plus.org/)
---
_Generated by [designsystems.one](https://www.designsystems.one/design-systems/element-plus) — 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?
Element Plus doesn’t have a full editorial breakdown yet — those cover origin, governance, token decisions, and the components worth studying. Thirty-seven anchor systems do.