Vean

v0.50.0-beta.1

Theme editor

Tune the theme on the left and every component below follows. The panel is the real SThemeCustomizer — colors, radius, size, spacing, surfaces, borders and the per-token overrides apply to this page as you change them.

Color mode

Brand color

primary, the fills derived from the base palette, and the role ramp

  • primary
  • primary-foreground
  • primary-50…950
  • ring
  • secondary
  • accent
  • carbon

SButton

SButton · SLink · SBadge · STag

Theme docs
9
Secondary
Accent
Carbon

SSwitch · SCheckbox · SSlider · SProgress · SRating · SPagination · SAvatar

S

primary-50 → primary-950

Status colors

the feedback scheme: destructive, success, warning and info

  • destructive
  • success
  • warning
  • info
  • -foreground
  • -text
  • -subtle
  • -border

SAlert

SBadge · STag · SProgress

9
9
9
9
solid
solid
solid
solid
soft
soft
soft
soft
outline
outline
outline
outline

toast · SPopconfirm

destructive · destructive-foreground · destructive-text · destructive-subtle · destructive-border

destructive
destructive-subtle
destructive-border

Form controls

hairline tokens, control fills and the focus ring

  • input
  • border
  • ring
  • muted
  • secondary
  • accent

SInput · SSelect · STextarea · SInputNumber

SCheckbox · SRadioGroup · SSwitch · SRating · SSlider

SSegment · SToggleGroup · STagsInput · SCheckboxGroup

Vue
UnoCSS

Focus ring · disabled — press Tab to walk the ring token

Data display

surfaces, muted fills and table borders

  • surface
  • elevated
  • muted
  • accent
  • border
  • muted-foreground

Card title

Surface, border, radius and shadow tokens

Card content sits on --vean-surface with the global radius seed.

Tab content: overview
K
InvoiceStatusAmount
INV-001Paid$250.00
INV-002Pending$150.00
INV-003Paid$350.00
INV-004Refunded$450.00

No data

Empty state icons and copy follow the text ladder.

Surfaces & shadows

the elevation ladder, nested surfaces and surfaceStyle

  • background
  • surface
  • elevated
  • carbon
  • shadow-md
  • surfaceStyle

Elevation ladder — background → surface → elevated → carbon

Aa--vean-background
Aa--vean-surface
Aa--vean-elevated
Aa--vean-carbon

Nesting — a surface inside a surface

Surface panel

Elevated popupmuted chipaccent chip

Shadow ladder

xs
sm
md
lg

Text roles on the page surface

--vean-foreground — the quick brown fox

--vean-muted-foreground — the quick brown fox

muted-foreground/70 — the quick brown fox

Borders & focus

hairline tokens, border-strong and the ring

  • border
  • border-strong
  • input
  • ring
  • border-alpha
  • borderOpacity

Hairline tokens

--vean-border
--vean-border-strong
--vean-input
--vean-primary
border-border/40
dashed

Control outlines — SInput · SSelect · STextarea

SCheckbox · SRadioGroup · SSwitch · STag

outline
primary
destructive

SSeparator

Card border

Card outlines read the same hairline tokens

BlogDocsSource

Horizontal and vertical separators

Focus rings

--vean-ring
ring-ring/50
--vean-ring-width

Border opacity and ring width are global: the hairline tiles above are the same token at different alpha.

Overlays

dialogs and popups on the elevated surface

  • elevated
  • border
  • shadow-md
  • z-base

SDialog · SDrawer · SSheet · SDropdownMenu · SPopover · STooltip · SPopconfirm

Popup surface tokens

--vean-elevatedPopup
--vean-borderPopup
--vean-shadow-mdPopup

Size

the ladder every control and text rung reads

  • size
  • text-4xs…2xl
  • leading-*

SButton · SBadge · STag

xs
xs
sm
sm
md
md
lg
lg
xl
xl
2xl
2xl

SInput · SSelect · STextarea · SInputNumber

SCheckbox · SSwitch · SSlider · SRadioGroup · SSegment

SProgress · SAvatar

VVVVVV

Text ladder — --vean-text-4xs → --vean-text-2xl

text-4xs

text-3xs

text-2xs

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

Radius

one seed drives the whole rung ladder

  • radius
  • radius-2xs…2xl
  • radius-none
  • radius-full

Rung ladder — every rung is a multiple of --vean-radius

none
2xs
xs
sm
md
lg
xl
2xl
full

SButton · SInput · STag · STextarea at five rungs

2xs
Tag
sm
Tag
md
Tag
xl
Tag
full
Tag

Nesting — inner radius derived from the outer panel

Card

Card and controls inside it share the seed

Spacing

one unit drives padding, margin and gap

  • spacing-unit
  • spacing-3xs…9xl
  • p-4
  • gap-md

Padding ladder — the inner block is fixed, the frame moves

2xs
xs
sm
md
lg
xl
2xl

Gap ladder — SButtonGroup · SToolbar · SKbd

3xs
K S
2xs
K S
xs
K S
sm
K S
md
K S
lg
K S
xl
K S

SButtonGroup · SToolbar · SSeparator

SAlert stack · SCard padding

Card

Cards pad their body with the same grid

Body content

Region — sidebar

the region skin, mirroring the global roles

  • sidebar-surface
  • sidebar-foreground
  • sidebar-accent
  • sidebar-accent-foreground
  • sidebar-border
  • sidebar-primary

SLayout · STreeMenu — the region skin in place

V

Region tokens — the sidebar mirrors the global roles

bg-sidebar-surface
bg-sidebar-accent
text-sidebar-primary
bg-carbon

Chart colors

chart-1 to chart-5, derived from primary

  • chart-1
  • chart-2
  • chart-3
  • chart-4
  • chart-5

Grouped bars

Q1
Q2
Q3
Q4

Stacked bar · legend

chart-1 chart-2 chart-3 chart-4 chart-5

Contrast

the fill to foreground pairs the contrast guard walks

  • contrast
  • *-foreground
  • *-text
  • *-subtle

Solid fills — SButton on every role

Fill ↔ foreground pairs — the contrast guard's units

--vean-primaryReadable text
--vean-secondaryReadable text
--vean-accentReadable text
--vean-carbonReadable text
--vean-destructiveReadable text
--vean-successReadable text
--vean-warningReadable text
--vean-infoReadable text

Text roles on the page surface

text-foreground — body copy at 14px

text-muted-foreground — body copy at 14px

text-muted-foreground/70 — body copy at 14px

In dark mode the guard re-picks a fill level or flips the foreground; the AAA policy widens the thresholds.