Design System

Comprehensive guide for building, styling, and using components in the frontend.

When to Apply

Reference these guidelines when:

• Working on .{vue|css|scss} files in packages/frontend
• Adding new components to packages/frontend/@n8n/design-system
• Refactoring styles for Vue components
• Implementing new UI components or features
• Reviewing changes to UI

Rules

• Follow guidelines in packages/frontend/@n8n/design-system/src/styleguide/*.mdx
• ALWAYS use CSS variables for styles from packages/frontend/@n8n/design-system/src/css/_tokens.scss or packages/frontend/@n8n/design-system/src/css/_primtivies.scss. Use hard-coded values only when no suitable tokens.
• ALWAYS prefer using existing components from packages/frontend/@n8n/design-system/src/components. Prefer components that aren't marked @deprecated.
• Use light-dark() when alternating colors for ligh/dark mode
• When working with animations or transitions, ALWAYS prefer using mixins from packages/frontend/@n8n/design-system/src/css/mixins/motion.scss
• When reviewing animations, follow the guides in rules/web-animation-guidelines.md