Support a second design system

[oliviertassinari]

Summary 💡

Provide a second theme the community would love. It has to gain traction on its own to make it a successful effort.

Examples 🌈

One example of a component library that supports multiple themes:

https://seek-oss.github.io/braid-design-system/components/Button

Motivation 🔦

Material Design doesn't have a monopoly on the design systems used by developers and designers. During our last survey, we had 28 feedback to improve custom themes and provide a new theme.

The issues with Material Design:

• Feels a lot like Google. Moving away from this brand can require more overrides than is desirable.
• Community love/hate relationship with Material Design. It's polarising.
• I suspect that making a good looking UI could be made easier, too many shadows.

Proposed solution

We bring on board a designer/developer (somebody with both skills, but has to be a really great designer, no need to have strong development skills) to build a theme using a limited set of constraints:

• Create a new repository under a different name in the mui-org organization.
• Use the unstyled components we are working on Provide a version of the components without any styles #6218. This should save a lot of time in the process. This would create a healthy constraint to make sure that the unstyled components truly deliver (hopefully it will force us to improve them). It would also give the unstyled components credibility.
• Use the tooling infrastructure. Our CI infrastructure is pretty solid at this point. We can make it work across repositories as we do it with material-ui-x.

A few elements that we could consider setting as constraints but we are not fully convinced, it could actually harm:

• Use the same documentation infrastructure
• Use the same styling solution

Related issues

• Add global presets of MD2 "Material Studies" for the theme provider #18908: Material Design studies x4 themes
• iOS 14 / UIKit Design/Theme switch inside theme.tsx #21911: iOS theme
• Support for a 'true black' mode  #23519: true dark theme
• Community themes #21113: document the themes of the community

Benchmark

https://trello.com/c/02I7LL5D/2491-introduce-a-second-theme

[oliviertassinari]

Another advantage of this direction, Material-UI is often associated with Material Design, but that's not the end goal, we provide material to build UIs 🏗️, they have to look and feel awesome. Material Design is one mean to this end.

[drmzio]

Another issue you could add with Material Design is that the UI is quite big and bulky looking, especially when building desktop hybrid apps in Electron. For apps that use every bit of precious screen real estate, I either have to customize MUI to be “smaller”, “compact” or straight up just using a different UI library. So perhaps an idea for the next MUI theme would be for a more compact UI?

[oliviertassinari]

@drmzio Material Design supports the notion of density. We have implemented it with https://material-ui.com/customization/density/, at least tried.

[simsek97]

I totally discourage this. There are tons of other libraries that provide such themes. I picked Material UI because I love Material Design, and I like how it looks in Google products. If I liked something else as a design or theme, I would've picked something else as a library.
I believe the team should focus on more components and improving features/APIs for existing components. As mentioned, Material Design is evolving very fast, and so should Material UI.

[o-alexandrov]

Great addition! It would be awesome to be able to toggle between (sorted by popularity):

• Google Material Design Guidelines
• Apple Human Interface Guidelines
• Microsoft Fluent Design

Ability to do change theme programmatically would greatly improve the UX for the end users. Thank you very much!

[oliviertassinari]

I totally discourage this.

@simsek97 If we do this, it will be by onboarding more people in the team. It shouldn't come at the cost of degrading the Material Design support quality.

[codingedgar]

Another issue you could add with Material Design is that the UI is quite big and bulky looking, especially when building desktop hybrid apps in Electron. For apps that use every bit of precious screen real estate, I either have to customize MUI to be “smaller”, “compact” or straight up just using a different UI library. So perhaps an idea for the next MUI theme would be for a more compact UI?

I'm also working on an Electron app, mimicking all the design from a macOS native version, I'm overwriting/duplicating so much, wish I could develop a more concise theme that yields the same results as a UI kit, same for a react-native app, but with iOS design.

Is there a way today to make this easier?

[drmzio]

@codingedgar Your best bet would be switching to Ionic Framework (https://ionicframework.com) if you want to mimic macOS and/or iOS styling.

[o-alexandrov]

Could you please share your plans on:

• Material You

Do you plan to introduce it as a separate theme or by modifying the existing one?

[oliviertassinari]

Could you please share your plans on Material You

@o-alexandrov Great question.

• Google has communicated that they plan to roll out Material You to the web in the coming years. It's not meant to be Android only. Android won't be ready before Q3-Q4 2021.
• Design doesn't age well. Trends usually have cycles of around 5-10 years. It was time for Google to rethink it.
• Material You is a significant change, similar to if we moved to implement Ant Design only. If we were to update the existing style (@material-ui/core) to match it, we would likely create many breaking changes. Making the adoption really hard. A more realistic approach seems to allow the different designs to live on the same page. This path makes Provide a version of the components without any styles #6218 even more important.
• We might rename our brand from Material-UI to MUI, to further differentiate with Material Design: @mui/unstyled, @mui/system. We might expose a small set of themes: @mui/core-material (currently @material-ui/core), @mui/core-material-you, @mui/core-antd and a @mui/core-new-trendy-theme.

What would you like to see happen?

[o-alexandrov]

What would you like to see happen?

@oliviertassinari , I think your view is totally correct:

• Material You would introduce a lot of breaking changes

And thus, introducing Material You as a separate theme is a necessity, unless You’ll be introduced as part of MUI v6 or v7.

On a side note, I’m a bit surprised you mentioned Ant Design as the second theme.
I believe new themes should be introduced by popularity and, therefore, the second theme should be Apple’s Human Guidelines.

• It’d be much easier to convince clients to pick material-ui library because of the ability to toggle between Apple’s and Google’s vision
  • not many Business people know what Ant Design is

[warryit]

@oliviertassinari
Suggestion for theme: https://element-plus.org

[edazpotato]

Are there any updates on this new design yet? I like Material, but sometimes it just feels too Google-ey or bulky and I end up doing frustrating amounts of customisation just to make my apps look different.
I, and I'm sure many other people, would love to see some of the progress your designers have made on this so that we can give feedback on it, and just generally get excited about the new theme.

[siriwatknp]

Are there any updates on this new design yet? I like Material, but sometimes it just feels too Google-ey or bulky and I end up doing frustrating amounts of customisation just to make my apps look different.
I, and I'm sure many other people, would love to see some of the progress your designers have made on this so that we can give feedback on it, and just generally get excited about the new theme.

@edazpotato We are likely to start the second design system next week after the rebranding is done. Still working on what's the best way to share the progress with the community.

FYI, we decided to go with design system, not theme. Will share more details in a dedicated RFC.

[danilo-leal]

Hello there, everyone!

We recently put out as a Discussion post (#29024) a first look at the 2nd DS theme structure and other features we're planning. Feel free to take a peek there and don't hesitate to share your thoughts, we're looking for as much feedback as we can :)

[liesislukas]

@oliviertassinari just make apple / windows toolkits paid. while material ui design language is de-facto inside this community, but adding apple visuals to components could be paid product. There is no good alternative atm, so if your company could provide it, it would be perfect. While a lot of people are familiar with mui.com components API and it's well made api, but sometimes need to build for apple/ms with something like electronjs and would benefit from another "theme". Would expect to find such theme here:

https://mui.com/store/#populars

[oliviertassinari]

apple / windows toolkits

@liesislukas this issue is about implementing a second aesthetic on top of @mui/base and @mui/system. For Apple and Windows aesthetic, I indeed think that could be built as a theme JS object on top of @mui/material or @mui/joy by the community, paid or MIT depending on what's needed to make it sustainable.

[liesislukas]

@oliviertassinari yes, exactly. not sure about @mui/joy, never noticed that package. I hope it would be possible to build a js object basically which you could feed into createTheme() and have e.g. Apple aesthetics. You could extend that JS object with your specific styling as needed, just like you can now. But this would give the "base" to do Apple/Windows. createTheme() already can accept a lot of styling but if there is something missing, such project of creating a theme would expose those details and would allow to make it even more powerful. This would show off that mui.com is not about material ui but it's very capable theming lib.

Referring to this:
import { createTheme } from "@mui/material/styles";

[danielvianna]

I've checked Joy and looks very good (I'm a designer)

[mgan59]

Getting caught up with the thread and like the direction of Joy and in general the approach being adopted here in supporting templates 👍🏻 -- I manage several material UI projects each with custom templating and appreciate efforts to consolidate on inner-operability and abstractions.

[siriwatknp]

@oliviertassinari I guess this issue can be closed when Joy UI goes stable, right?

[oliviertassinari]

can be closed when Joy UI goes stable

@siriwatknp I think we could already close this issue at this point, but we can do this 👍.

In terms of targeted audience, I believe that it could work very well if we defined it as:

• Joy UI (Joy Design): Target new Y Combinator startups (US companies). People who want a fresh design look to challenge the incumbent.
• Material UI (Material Design): Target the S&P 500 (US companies). People who want a battle-tested and safe design system used by billions of end-users (e.g. Chrome moving to Material Design v3).