Design Tokens

BaklaVue uses the Baklava Design System tokens. You can customize them via useBaklavaTheme().applyTheme() for a consistent, branded look.

Token Categories

Category	Description	Docs
Colors	Primary, semantic, and neutral colors	Colors →
Border Radius	Corner roundness for components	Border Radius →
Size & Spacing	Sizes and spacing scale	Size & Spacing →
Typography	Font family, size, and weight	Typography →
Z-Index	Layering for overlays and dialogs	Z-Index →

Quick Example

<script setup>
import { useBaklavaTheme } from "@baklavue/composables";

useBaklavaTheme().applyTheme({
  preset: "vue",
  borderRadius: { m: "0.5rem" },
  typography: { fontFamily: "'Inter', sans-serif" },
});
</script>

See useBaklavaTheme for the full API.