Vela UI Docs
venizia.ai

Getting started

Design rules

A short set of rules that keep screens built with Vela UI consistent. Each one follows from how the tokens and components are set up.

  1. 01

    Use semantic tokens, not primitives

    Write background/main, text/strong, border/default. Primitives such as Neutral/200 only define those tokens, so a mode switch reaches every screen.

  2. 02

    One primary action per view

    Primary is for the one thing the screen is for. Everything else uses Secondary, Outline or Ghost.

    Do One Primary, the rest Outline and Ghost
    Don’t Three Primary buttons competing
  3. 03

    Accent marks emphasis, not actions

    Teal accent is for focus rings and selection. Actions stay on the primary colour.

  4. 04

    Status colours mean status

    Info, success, warning and negative appear on alerts, badges and validation, never as decoration.

  5. 05

    Space from the scale

    Padding and gap come from the 2–160 scale. A value that is not on it is a value to question.

  6. 06

    Stack with the z tokens

    Dropdowns, sticky bars, dialogs, popovers, toasts and tooltips each have a layer. Do not invent new ones.

  7. 07

    Icons inherit their colour

    Icons are stroked in currentColor on a 24px grid. Colour the text around them, not the icon.

  8. 08

    Destructive means confirm

    Destructive buttons remove or reset something. Pair them with a Modal that names what will be lost.