Design system

The design system in Swifter is stored in .swifter/specs/{storageName}/design_system/style_specifications.yaml, where {storageName} is the module's filesystem identifier.

That single YAML file contains all the design tokens — colors, typography, spacing, etc. — that Swifter agents reference when generating or modifying frontend code.

repositories/your_project_name.frontend/src/variables.css is an auto-generated file that translates the design system spec (style_specifications.yaml) into actual CSS custom properties the application uses at runtime. The flow is: style_specifications.yaml → generates → variables.css → consumed by → application styles/components.

If you need to extend the design system with a custom theme namespace (e.g., --vault-*), new tokens are added to style_specifications.yaml and generated into CSS files or via Tailwind utility classes in your UI components, for example: bg-vault-primary text-vault-on-primary.