Vela UI Docs
venizia.ai

Getting started

Theming

Colour, type, radius and spacing are variables in Figma and tokens in code. Change a mode and every component follows; components never hold a colour of their own.

Modes

Variable setModesWhat it changes
ColourLight · DarkEvery semantic colour
Corner radiusFour moods, from soft to sharpHow round every corner is
Type scaleBase 16 · Base 14 · Base 13Body size and icon size
TypefaceVelaUI · AppiaThe heading family
TypographyDesktop · MobileText sizes per screen

Colour tokens

Components use semantic tokens. Each token points to a primitive, and the primitive it points to changes with the mode.

TokenLightDark
background/main→ Base/White→ Neutral/950
background/foreground→ Neutral/950→ Base/White
text/strong→ Neutral/950→ Base/White
text/muted→ Neutral/600→ white/80
text/note→ Neutral/400→ white/40
border/default→ Neutral/200→ white/15
primary/default→ Neutral/950→ Base/White
secondary/default→ Neutral/100→ white/15
accent/default→ Teal/500→ Teal/500
info/middle→ Cyan/500→ Cyan/500
success/middle→ Green/500→ Green/500
warning/middle→ Amber/500→ Amber/500
negative/middle→ Red/600→ Red/600

Radius

  • none0px
  • xs2px
  • sm4px
  • md6px
  • lg8px
  • xl12px
  • 2xl16px
  • 3xl24px
  • full9999

The corner-radius mood swaps these values together, from soft to sharp.

Type scale

TokenDesktopMobileSample
text/xs12px12px
text/sm14px13px
text/base16px14px
text/lg18px16px
text/xl20px18px
text/2xl24px22px
text/3xl32px26px
text/4xl36px30px
text/5xl48px36px