Product Design / General

Design System that Supports Theming?

Design System that Supports Theming?

Product Design / General · January 29, 2019 at 1:34pm
Hey everyone,
I am looking for an example of a design system that has been created with the idea of 'theming' in mind. That might mean the color palette can be altered and the components accept those changes, or it could be something else.
Material.io definitely comes to mind but I am looking for other examples.
Thanks! 👨‍💻

January 29, 2019 at 1:36pm

So

  • reply
  • like

Is anyone here that I’m supposed to talk to

  • reply
  • like

Now is the time to meet or talk whatever if not I’m out

  • reply
  • like

Now is the time to meet or talk whatever if not I’m out

  • reply
  • like

You might want to take a look at IBM's Carbon design system https://www.carbondesignsystem.com/

  • reply
  • like

I literally had a conversation at work in the last hour about Carbon (I work for a company that's part of IBM). We're testing out the system to see if its feasibile to use with our clients which will also involve theming.. so we're in the same boat.

  • reply
  • like

That's exactly what UX Power Tools it :)

  • reply
  • like

100% theme-able from the Style Guide sheet. change the fonts/colors, and they cascade throughout the entire design system.

  • reply
  • like

I literally had a conversation at work in the last hour about Carbon (I work for a company that's part of IBM). We're testing out the system to see if its feasibile to use with our clients which will also involve theming.. so we're in the same boat.

Good to know I'm not the only one with this problem.

  • reply
  • like

From my experience it is easily „themable“. Take a look at their theming sandbox. http://themes.carbondesignsystem.com/

  • reply
  • like

HI Nick, I have this very solution in private alpha right now, allows styling from a style guide and the entire system can be restyled in a few clicks (loading other stylesheets) colors, fonts, etc. style can be shared also

  • reply
  • like

January 29, 2019 at 6:02pm

That sounds awesome @markthomas. Definitely what we are going for.

  • reply
  • like

January 29, 2019 at 9:03pm

We developed this tool https://github.com/Pausansol/Camilo to support theme swap in sketch. It is not the multibrand design system, but it will help to improve the workflow.

like-fill
2
  • reply
  • like

January 29, 2019 at 10:36pm

@nickmorrison I'm not sure if you're asking for a Sketch-specific solution or something more global, but I've bought both the UX Power Tools and Cabana design system starter kits and they're pretty great and flexible. They've been created specifically for theming but they're really for a Sketch workflow.

For our internal one, I ended up creating it from scratch just because because of certain preferences and opinions in setup. Learned heaps from picking apart their files though, so I can't recommend both of those products enough.

  • reply
  • like

February 4, 2019 at 3:03am

I'm exploring the same challenge at the moment, developing an in house design system to serve multiple products. I guess it depends on the level of change you require from the system, are you just changing a few colors and fonts in the theme or do you want something more flexible. I've reviewed a ton of sketch design system UI kits ... I can honestly say though there are some great ones like Frames for web and Plaster for mobile ... each one has it's own opinionated way of setting the base styling for elements. The material design theme editor strikes me as something that could solve your problem if you're fine with sticking to material - https://material.io/tools/theme-editor/

Edited
  • reply
  • like

We developed this tool https://github.com/Pausansol/Camilo to support theme swap in sketch. It is not the multibrand design system, but it will help to improve the workflow.

I just had a look at this I must say this is really great. A bit of work to get it setup but worth it I think once you're rolling.

  • reply
  • like

February 4, 2019 at 6:54am

When it comes to theming, there are different levels:

[1] (just) colour-based theming: IBM's Carbon is a good start [2] colour- and shape-based theming: Google's Material [3] layout/style tile-based: Vox Media's cross-publications design system

Material theming explained: https://speakerdeck.com/bennoloewenberg/material-design-system-english-number-devfest

Vox Media Design System theming explained: https://speakerdeck.com/yeseniaperezcruz/building-flexible-design-systems

Edited
like-fill
1
  • reply
  • like

Log in or sign up to chat