Skip to main content
A design module holds your application’s front-end design system: the React UI layer. It bundles components, hooks, icons, fonts, styles, and front-end utilities into one place so every screen draws from the same primitives. It is not backend logic, so there are no controllers, services, or repositories here. A design module is purely the visual and interactive layer that a Single Page App renders. It lives under modules/<kebab-name>/ like any other module, but its <name>.yml declares type: "design". That single flag changes how the framework treats it: a design module is a front-end asset library, not a participant in the backend request pipeline.

​
What a design module is for

The point is one source of UI truth. Buttons, inputs, dialogs, tables, and the rest live in a single module, so every SPA pulls from the same components, icons, and fonts instead of redefining them screen by screen. It carries only the React layer and is never registered into AppModule or SharedModule, since it has nothing to do with handling HTTP or WebSocket requests. Its src/ isn’t a blank local template either: talos design:create pulls the design system from the upstream skeleton-design repository, so you start with a complete set of primitives. Each asset kind (components, hooks, icons, fonts, styles, utils) gets its own folder, which keeps finding and extending a primitive predictable. Your SPA then imports from this module as its UI library; see SPA for how the two connect.

​
How it differs from other modules

A design module is still a module, but it plays a different role than a regular Module or a microservice.

​
How it works

talos design:create scaffolds a base module, marks it type: "design", then pulls the design source from the skeleton-design GitHub repository and installs that design’s dependencies into your project. The result is a module whose src/ mirrors the skeleton, a full design system you can use as-is or extend. A design module sits alongside your other modules but stays out of the backend pipeline:
Because the type is "design", the module is treated as a front-end asset library. Only modules with type: "design" can be removed with talos design:remove; the app and shared modules are protected and cannot be deleted this way.

​
Where to go next

  • Structure: the folder layout in detail and what each asset kind contains.
  • Usage: importing components, hooks, icons, fonts, and utils into a SPA.
  • Create: talos design:create and how the skeleton is pulled.
  • Remove: talos design:remove and the protection on app / shared.
  • Module: how regular backend modules differ from a design module.
  • SPA: the Single Page App that consumes the design system.