Mapping CSS theme variables to inline styles tab.
Frontend (App Interfaces)

The BaseTheme used in Outsystems, as like most of the designers in the market, use the multiple of 8 rule to create sizes for margins, padding, font sizes, grids... So, if BaseTheme uses the same rule for variables for everything why not use it in the Style Tab too? 


  • Less maintenance, Easier for the Develop team to match mockups margins and paddings. 

  • Less frustration, Help experience between the Develop team and the Ui/Ux/ FrontEnd teams easy and softly. Less work for the FrontEnd team finding wrong margins and paddings. 

  • Apply best practices, (One-click change everywhere), Even if there is inline CSS (which isn’t the best practice) when the variable is changed on the theme, the value is automatically updated everywhere. 

  • CSS learning, Make the Develop team more familiar with the CSS variables.  

please 🙏 Outsystems!

Great Idea!

This would be very useful!

As said previously this would be very useful.

I like it! <3

That would make it more comfortable,

but when that is bind with a dropdown showing only calculated values, difficult to allow other values to be entered as input. 


As said inline CSS is not the best practice and should be avoided by the most. However, I have a mixed response. In the first place it reads nice and aligns with the base theme structure, but at the same time in its current state, it provides more flexibility for adjustment to be pixel perfect (again this should be avoided).

Thank you all for the comments.
The main idea is to maintain the actual behavior, only the default values inside the dropdown should change. So if you want to write a specific value like nowadays you also can.

If Outsystems do this, I think it will be a great time saver inside a project for everyone and also help on applying best practices.

Thanks João  Veras, little Detail in your comment made it clear and Nice Idea!!

Nice Idea

Nice Idea

very good idea

I agree with you that it would be a good approach to take.