Design systemGetting started
KDS stores Kinobi's design system as design tokens and generates kds classes and --kds-* variables from them.
Load the stylesheet
Each admin app gets the same generated file, assets/kds/kds.generated.css. Load it once, globally:
css: ["~/assets/kds/kds.generated.css"], Use a class
Every class starts with kds:. Classes read the --kds-* variables, so both stay in step.
<button class="kds:bg-primary-main kds:text-neutral-50 kds:text-button-default kds:px-4 kds:py-2 kds:rounded-sm">
Save
</button>Or use a variable
When no class fits, read the variable in your own CSS:
Approved
.status-dot {
background-color: var(--kds-color-success-main);
box-shadow: var(--kds-shadow-elevation-1);
}How names map
| DS name | Token | CSS variable | CSS class |
|---|---|---|---|
| Primary / Hover | color.primary.hover | --kds-color-primary-hover | kds:bg-primary-hover |
Header/H6 | font.h6 | --kds-font-h6 | kds:text-h6 |
spacing-4 | spacing.4 | --kds-spacing-4 | kds:mt-4 |
rounded-sm | radius.sm | --kds-radius-sm | kds:rounded-sm |
elevation-2 | shadow.elevation.2 | --kds-shadow-elevation-2 | kds:shadow-elevation-2 |