Skip to content
  1. Get started
  2. Getting started
View as Markdown

Getting started

Umia DS is the design system behind the hub, the admin and the website. Its tokens are CSS variables set on :root, so you can use them through Tailwind classes or directly with var(--color-…).

Add it to an app

Section titled “Add it to an app”

Import the stylesheet straight after Tailwind v4, and before your app’s own @theme block:

@import "tailwindcss";
@import "@umia/design/styles.css";


@theme inline {
  /* only app-local names, for example the hub's shell tokens */
}

Tailwind classes now use Umia DS values, so bg-surface-raised, text-muted-foreground, rounded-card and p-4 work as you’d expect. The dark: variant turns on when <html> has the dark class or data-theme="dark".

Use roles, not raw colours

Section titled “Use roles, not raw colours”

A role is a token named after its job, like bg-card, text-text-secondary or border-border. A raw colour is one fixed step on a scale, like bg-neutral-100.

Use roles in components. They change on their own for dark mode and for the color-blind setting. Raw colours never change.

Section titled “What to read next”