Use the design system

StackRivet keeps Element Plus’s engineering efficiency but replaces its default look with a deliberate design system, so the admin feels like a tool a senior engineer would respect — dense, scannable, quietly confident — rather than a stock template. When you build new screens, these are the conventions that keep them on-brand.

Browse the live component showcase at http://127.0.0.1:5173/design-system.

The design language

Aspect	Rule
Accent	`#5E63E0` (deep lavender-indigo) — the single chromatic accent. No second accent color.
Canvas	Light for the admin app (`#FFFFFF` + `#FAFAFA` bands); dark is for marketing pages only
Elevation	Hairlines and a surface ladder carry hierarchy; drop shadows are used only for floating layers (modal, popover, dropdown)
Radius	6px buttons & inputs, 8px cards, 12px modals — never pill (`9999px`) on a button
Type	Inter for UI/display, JetBrains Mono for code; letter spacing stays `0` unless a component has a documented token
Numerics	`tabular-nums` on every money / count / timestamp value, so figures line up

Tokens are the source of truth

All colour, spacing, radius and type live in src/styles/tokens.scss. Reference a token — never hard-code a hex or pixel value in a .vue file. If you need a value that doesn’t exist, add a token rather than inlining one.

The token groups:

Brand — $color-brand-primary (#5E63E0) plus hover / active / soft tints.
Surface ladder — $color-canvas / -soft / -sunken, $color-surface-1 / -2.
Ink — $color-ink / -strong / -mute / -faint / -disabled.
Hairlines — $color-hairline / -strong / -faint.
Semantic — $color-success / -warning / -danger / -info (each with a -soft fill).
Spacing — a 4px base unit ($space-1…$space-9), no half-units.
Type scale — $type-display-*, $type-heading-*, $type-body*, $type-caption, $type-button.
Radius — $radius-sm 4px, $radius-md 6px (buttons/inputs), $radius-lg 8px (cards), $radius-xl 12px (modals).

Component conventions

Element Plus components pick up the theme through CSS-variable mapping, so most of the time you just use them. When you build your own:

Primary button — one filled #5E63E0 CTA per page; use the StackRivet primary style, not Element Plus’s default blue.
Secondary actions — ghost / text buttons, especially inside tables and forms.
Tables — the StackRivet ElTable style: a 1px hairline grid, an uppercase-tracked header, no zebra striping, and tabular-nums on numeric columns.
Cards — a 1px hairline border and 8px radius, no default drop shadow.
Sidebar menu — the active item uses the brand-soft background with a 2px accent rail.

Do / Don’t

Use the brand #5E63E0 for the single filled primary CTA on a page.
Use hairlines and the surface ladder for hierarchy.
Put tabular-nums on every numeric / currency / timestamp column.
Keep the admin app on a light canvas; use dark only for marketing pages.

Don’t

Don’t use Element Plus default primary blue (#409EFF) or its default 4px button radius.
Don’t pill-round buttons.
Don’t add drop shadows to cards by default.
Don’t introduce a second chromatic accent — the palette is greyscale + indigo.
Don’t hard-code colour, spacing or radius in .vue files — always use tokens.

Keep your components on-system

A quick self-check before committing a UI change:

# No hard-coded hex outside tokens.scss
grep -rnE "#[0-9a-fA-F]{3,8}" src --include='*.vue'
# No hard-coded radius outside tokens.scss
grep -rnE "border-radius: [0-9]+px" src --include='*.vue'

Both should come back empty — colours and radii belong in tokens.scss. The code generator emits components that already follow these rules, and the deep token + override reference ships with the project for when you need the exact values.