Atomic Design components
Atoms, molecules and organisms share the same composables and tokens: a button, a field and the form built from them behave alike. You build your own components from the same atoms.
Skip to content
Luma AI-firstDesignSystem
Vue 3 components, design tokens and themes for B2B-Center products. From an atom to a whole product: one interface language shared by designers, developers and AI agents.
npm create luma@latestInto an existing project: npm install @central-design-system/components@next
Theme tokensTailwind utilities
--cds-color-brand-primary--cds-color-surface-primary--cds-color-content-primary--cds-color-line-secondary.bg-brand-primary.bg-surface-primary.text-content-primary.border-line-secondaryThemes, tokens and Tailwind
A theme is an object of semantic tokens that CSS variables are generated from at startup. Tailwind CSS v4 plugs in on top of the same tokens: the bg-surface-primary and text-brand-primary utilities recolour together with the theme.
createCds({ theme: { defaultTheme: 'b2bLight' }, icons: { defaultSet: 'phosphor' }, locale: { locale: 'en' }, defaults: { global: { size: 'sm' }, CdsButton: { appearance: 'secondary' } } });
Adapts to your project
One createCds call sets the theme, locale, default prop values and the icon set: Remix, Phosphor, Lucide, Carbon, MDI or your own. The base layer and component variables are overridden with SASS configuration at build time.
$ npx --package @central-design-system/skills@next cds-skills install ✓ cds-builder ✓ cds-migrate ✓ cds-refactor
SkillsMCP serverllms.txtAI Ready
Agent Skills, an MCP server and llms.txt ship with the package: an agent builds Luma interfaces by the same rules a person does and checks the markup against component contracts.