getting-design-system-customization-just-right

Things to consider when deciding how flexible your design system should be

Koen Vendrik

Chris Coyier, the author of CSS Tricks and Codepen, recently published “Who are design systems for?”, in which he talks about the audiences for different open-source design systems.

In the article he discusses design system customizability and the role it plays in how usable a design system is for non-company use. He concludes that design systems have different levels of customization — ranging from “not at all” to giving people broad control of how they apply styles (or “BYO Theme” as he calls it).

I want to dive into this “customization spectrum”: the different options, the audiences they cater to, what their implementation might look like, and their risks.

This is where companies build a design system mostly for themselves. A design system that is in no way customizable is very hard to use if you want to build a distinct product, since you can’t give it its own look and feel.

When we launched Shopify’s design system, Polaris, it wasn’t customizable at all. In 2018 we decided to make Polaris partly customizable and we’re still working to expand on that to make most things customizable.

We implemented the customization options because we’ve found that, while zero customizability is a great way to enforce consistency, as the company grows, the lack of flexibility has become a real pitfall.

Teams have started to develop a visual style that is intentionally different from our company-wide branding, which Polaris doesn’t allow for. The Shopify Point of Sale team, for example, started experimenting with dark mode because it made the system more usable in dark storefronts, and the Shopify Plus team started experimenting with different colors, fonts, and spacing because they wanted to visually differentiate themselves from the core product. Third-party developers currently have the same problem, as they are unable to properly express their brand.

To be able to create these products using Polaris, these teams and third parties currently have to fork the system. As a result, we’ve ended up with a bunch of different forks that all do things slightly differently.

So if you want to create a design system that can’t be customized, take into account that there may be valid reasons for customizing your system that you don’t yet foresee.

This is the other end of the spectrum. This option gives full control over the styling to the user.

On the web you see a lot of pure HTML and CSS design systems that allow for this level of customization. Since they expose raw HTML, it’s very easy to customize just about anything.

A risk this approach has is that it’s very likely that consumers of your system will integrate CSS and JS hooks into this raw markup. This will make the system very hard to maintain, since any change to the markup has a good chance of breaking one of your consumers’ implementations.

Salesforce’s Lightning Design System’s Accordion Blueprint exposes raw HTML.

Design systems that utilize frameworks (or view layers) like React are a bit different. They hide their underlying markup, making it hard to change, which makes the system much easier to maintain. By creating this clear separation between what is publicly exposed and what is only available within the system, you create a much better definition of what kind of changes introduce the risk of breaking a consumer’s implementation.

Many React based systems still do allow for a similar level of customization by allowing for class overrides. You won’t be able to freely customize the markup as you can with raw HTML, but you’re still able to apply style overrides to specific elements, and thus still have a large amount of control over how the component looks and behaves.

Material UI (A React library for Google’s Material Design) for example, allows for class overrides

This level of flexibility can be very useful and appeals to a large audience. Its ability to fully adapt to a user’s needs is very powerful.

Depending on who your design system is for, and what they can do with it, this pattern can also be risky. Giving people this level of control over styling can create the same issue that design systems are supposed to solve in the first place: having a thousand different variations of the same component or pattern.

A good example of the problem we try to solve with design systems. Taken from Andrey Okonetchnikov’s React Amsterdam talk.

This level of customization, therefore, usually isn’t ideal for a design system that’s supposed to enforce consistency since it’s too inviting for consumers to completely modify components to cater to their needs. It is, however, a great way to provide a template that is fully customizable.

Guided theme building allows your components to be themed to a degree that allows third parties to use them to create their own product, with its own look and feel, but removes the risk of people over-customizing them. Which is exactly what we will be trying to do with Polaris going forward.

A lot of design systems allow you to modify certain Sass variables to customize things like colors and fonts. Guided theme building is essentially the same thing, minus the Sass and plus some extra features.

Instead of customizing things using Sass variables, Polaris uses an overarching React component called ThemeProvider that provides a set of colors. These colors are then used to style the component(s). If you only provide a partial set of colors, Polaris uses the colors you defined to generate the rest, making it as frictionless as possible to theme your interface.

Example of a theme object that customizes the colors of our TopBar component.

This approach has two big advantages over Sass variables:

  1. Being able to only provide a partial set of colors makes it very easy (and quick) to give your UI its own look.
  2. It provides consumers with a very deliberate public customization API that is far removed from things like SCSS variables and CSS classes, which, in Polaris, are technically modifiable, but should never be modified since they’re a private API.

There are two main reasons we find this distinction between the public and private API so important. First, when people modify things using our private APIs we don’t know what would be a breaking change, which is quite problematic in a public library. Second, we want to be able to enforce consistency. Our design system is built with a very specific set of design principles in mind, and by allowing too much customization we would create the risk of consumers violating those principles.

This approach does come with its own set of problems though. One is that it relies on CSS variables and, in a system like Polaris that heavily relies on built-in Sass functions (mostly color utilities like lighten, darken and rgba), this poses a real issue. Because the theming system doesn’t know what the colors are going to be until runtime, it can’t use these Sass functions to modify colors, and we therefore need an alternative way to generate them.

This is a problem we haven’t solved yet, but we’re working on a solution so we can start expanding this API. Currently, we only allow people to customize colors on our TopBar component, but we’re working on improving the system to also allow font customizations, and perhaps even animation customizations, across all of Polaris. We’re also exploring how we can make the API less component specific, as this can lead to UI inconsistencies. We’re exploring a pattern where you wouldn’t be able to customize these properties on a per-component basis, but only on a global level.

All things considered, we feel this implementation is a good start, as it provides just the right amount of flexibility. It does a good job of enforcing the principles we really care about while still giving consumers a way to give their product its own look and feel.

If you’re interested in exploring this level of customization for your own design system make sure to check out Theme UI, which is an open-source project that provides a very similar API to the ThemeProvider system that we use for Polaris.


I hope this gives a bit more insight into what the customization spectrum looks like. As Chris mentioned in his article, it’s important that you first define who a design system is for and what people should be able to do with it. When you have decided this, and start looking at the implementation for the level of flexibility you require, keep in mind that it’s okay to do something that’s different from what’s already out there. It’s easy to create a lot of flexibility or none at all, the trick is to get it just right.

Thanks to Kaelig, Tim Layton, and Dan Rosenthal for the feedback.

73 comments

  1. It’s hard to find well-informed people for this subject, however, you
    seem like you know what you’re talking about! Thanks

  2. Howdy! This is my first visit to your blog! We are a collection of volunteers and starting
    a new project in a community in the same niche.
    Your blog provided us beneficial information to work on. You have done a marvellous job!

    Feel free to surf to my web blog; IQ SuperCharged

  3. Simply want to say your article is as astounding. The clearness to your post
    is simply nice and i could suppose you are an expert in this subject.
    Fine with your permission let me to seize your RSS feed to stay up to date with forthcoming post.

    Thanks 1,000,000 and please carry on the enjoyable work.

    Here is my site :: Keto Lean X

  4. Very nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts.
    In any case I’ll be subscribing to your feed and I hope you write again very soon!

    Also visit my web-site; Hempizor CBD

  5. Greetings! I’ve been following your site for a while now and finally got the bravery to go ahead
    and give you a shout out from Atascocita Texas!
    Just wanted to tell you keep up the great work!

    Here is my web blog :: Keto LeanX

  6. I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an edginess over that you wish be delivering the following.
    unwell unquestionably come more formerly again as exactly the same nearly
    very often inside case you shield this increase.

    my web-site :: https://everythingarcades.com/index.php?action=profile;u=31060

  7. Undeniably imagine that that you stated. Your favorite justification appeared to be at the net the simplest thing
    to take note of. I say to you, I definitely get irked at the same time
    as folks think about worries that they plainly don’t recognize about.
    You managed to hit the nail upon the highest
    as neatly as defined out the whole thing with no need side-effects , people can take a signal.
    Will probably be back to get more. Thank you!

    Here is my website … Spore Mens Vitality Mix Review

  8. Spot on with this write-up, I really believe that this amazing
    site needs a great deal more attention. I?ll probably be back
    again to read through more, thanks for the information!

    Feel free to surf to my webpage; SynerSooth CBD

  9. I rarely write comments, however i did some searching and wound up here Getting design system customization just
    right – Pavvy Designs. And I actually do have some questions for you if you don’t mind.
    Is it simply me or does it look as if like a few of these remarks look like left by brain dead individuals?
    😛 And, if you are writing on additional online social sites, I
    would like to keep up with everything new you have to post.

    Could you list of every one of your community sites like your Facebook page, twitter feed, or linkedin profile?

    Here is my website – Coastal Hemp CBD Gummies

  10. Hello I am so glad I found your website, I really found you by accident, while I was
    browsing on Bing for something else, Nonetheless I am
    here now and would just like to say thanks
    a lot for a tremendous post and a all round interesting blog (I also love the theme/design), I don’t have time to browse it all at the moment but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the awesome
    job.

    my web page :: DFine8

  11. A motivating discussion is definitely worth comment. I believe that you should write more about this issue, it
    may not be a taboo matter but usually people do not talk about such topics.
    To the next! Cheers!!

    My web site; WifiLift Reviews

  12. We’re a bunch of volunteers and opening a brand new scheme in our community.

    Your web site offered us with valuable info to paintings on. You’ve performed
    a formidable job and our entire group will probably be grateful to you.

    Also visit my webpage :: Evo Naturals Hemp Gummy Bears Review (forum.lsbclan.net)

  13. I know this if off topic but I’m looking into starting
    my own blog and was wondering what all is needed to get setup?

    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet savvy so I’m not 100% certain. Any
    tips or advice would be greatly appreciated. Thank you

    Feel free to visit my web page: SlimX Keto

  14. I do agree with all of the ideas you have introduced to your post.
    They’re very convincing and can certainly work. Nonetheless, the posts are very brief for novices.
    May just you please extend them a little from next time?
    Thanks for the post.

    Review my webpage … Testo Bull Reviews

  15. I am not sure where you’re getting your information, but good topic.

    I needs to spend some time learning much more or understanding more.
    Thanks for fantastic info I was looking for this information for my mission.

  16. I think that what you published made a lot of sense. However, what about this?
    suppose you were to create a killer post title?
    I am not saying your information isn’t solid., however what if you
    added a post title that makes people want more? I mean Getting design system
    customization just right – Pavvy Designs is a little plain. You
    ought to look at Yahoo’s front page and note how they create news titles to
    get people to click. You might add a related video or
    a related pic or two to grab people interested about what you’ve got
    to say. Just my opinion, it could make your website
    a little bit more interesting.

  17. Howdy! This post could not be written any
    better! Looking through this article reminds me of my
    previous roommate! He constantly kept talking
    about this. I most certainly will forward this information to him.

    Pretty sure he’ll have a good read. Thank you for sharing!

    Feel free to surf to my webpage :: Re ViVium Reviews

  18. I am extremely inspired together with your writing skills and also with
    the layout on your weblog. Is that this a paid topic
    or did you modify it your self? Either way keep up the nice quality writing, it is uncommon to see a great weblog like this one today..

    Also visit my blog post – Celia

  19. Your style is unique compared to other folks I’ve read stuff from.
    Many thanks for posting when you have the opportunity, Guess I will just bookmark this site.

  20. Fantastic web site. Plenty of useful info here. I am sending it to a few buddies ans additionally sharing
    in delicious. And obviously, thanks in your effort!

  21. Nice post. I used to be checking constantly this blog
    and I’m impressed! Very useful info particularly the
    remaining part 🙂 I handle such info a lot.
    I was seeking this certain info for a very long time.
    Thank you and good luck.

  22. For newest information you have to pay a visit web and on world-wide-web I found this website as a most excellent website for most recent updates.

  23. Hello, Neat post. There’s an issue together with your website in internet explorer, could test this?
    IE still is the market chief and a large portion of other folks will miss your magnificent writing due
    to this problem.

  24. I have learn some excellent stuff here. Certainly price bookmarking for revisiting.

    I surprise how so much attempt you put to create such a fantastic
    informative web site.

  25. Nice blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple adjustements would
    really make my blog stand out. Please let me know where you got
    your theme. Thanks a lot

    Also visit my web-site A1 Keto BHB

Leave a Reply

Your email address will not be published.