Skip to main content


Bubbles Design System is our frontend components system build over React and well documented with Figma (with information about grid, measures, etc..) and StoryBook (final components).

Bubbles is based on atomic design philosophy and we also provide completed templates for several functionalities.

Design documentation summary

Here you can review the basics definitions of our design system.


Review layout definitions

  • Shell
  • Grid and Measures
  • Layouts


Review theme definitions

  • Theme default

Review navigation definitions

  • Organizational
  • Contextual


Review actions definitions

  • Buttons
  • Edit & Detail panels
  • Forms


Review content definitions

  • Cards
  • Tables
  • Text elements


Review layout definitions

  • Mails
  • Modals
  • Headers

Help and phatic functions

Review help definitions

  • Alerts
  • Contextual help
  • Initial setup
  • Tooltip

How to create new Bubbles components (Johan)