body { -ms-overflow-style: scrollbar; overflow-y: scroll; overscroll-behavior-y: none; } .errorContainer { background-color: #FFF; color: #0F1419; max-width: 600px; margin: 0 auto; padding: 10%; font-family: Helvetica, sans-serif; font-size: 16px; } .errorButton { margin: 3em 0; } .errorButton a { background: #1DA1F2; border-radius: 2.5em; color: white; padding: 1em 2em; text-decoration: none; } .errorButton a:hover, .errorButton a:focus { background: rgb(26, 145, 218); } .errorFooter { color: #657786; font-size: 80%; line-height: 1.5; padding: 1em 0; } .errorFooter a, .errorFooter a:visited { color: #657786; text-decoration: none; padding-right: 1em; } .errorFooter a:hover, .errorFooter a:active { text-decoration: underline; } #placeholder, #react-root { display: none !important; } body { background-color: #FFF !important; }

JavaScript is not available.

We’ve detected that JavaScript is disabled in this browser. Please enable JavaScript or switch to a supported browser to continue using twitter.com. You can see a list of supported browsers in our Help Center.

Terms of Service Privacy Policy Cookie Policy Imprint Ads info © 2023 Twitter, Inc.

Conversation

Stop treating your #designsystem reference site as just a place for dry, technical documentation. Most people forget that it’s a marketing site too. Some tips + inspiration to make your reference site a exciting destination for your users to visit frequently: 🧵

3

13

114

In the Philly suburbs, there’s a place called Andy’s Brick Shop. It's a store full of Legos, and it’s a perfect analogy for what an ideal experience of interacting with a design system should be like.

Andy’s Brick Shop

read image description

ALT

1

1

4

Up front, they have the coolest—and most expensive—pieces, already assembled and for sale: • Star Wars Y-Wing: $360 • Star Wars snowspeeder: $368 • Space shuttle orbiter: $100 • Millennium Falcon: $80

Star Wars Y-Wing

read image description

ALT

Space shuttle orbiter

read image description

ALT

Star Wars snowspeeder

read image description

ALT

1

6

In the middle of the store, different universes that show assembled sets from Star Wars to Tolkien's Middle Earth to DC and Marvel Comics, and more. Also, pieces organized by type: Supermen, Batmen, Chewbacca's, C-3PO's.

Middle earth

read image description

ALT

DC + Marvel

read image description

ALT

1

2

Toward the back, categories of bricks: gears, connectors, sprockets, flames, pots, wheels, and more.

Legos, categorized

read image description

ALT

1

2

At the very back of the store, a trash bin for fake Legos. Andy's Brick Shop acknowledges it and makes room for it while still letting you know that they're different from everything else you'll find in the store.

Trash bin for fake Legos

read image description

ALT

1

2

Most design system teams could learn a lot from the way Andy's Brick Shop engages its customers and community. Most do the opposite. They lead with the least compelling parts: components. That’s like putting a bin of gears up front.

1

2

My top tip for making your reference site attractive to your audience? Lead with results: the kinds of products that can be made with the system. Putting the Millennium Falcon at the front of the store makes more people walk in. Some examples:

1

4

The

user interface guide has an amazing video to get you excited about how you might combine elements to make a valuable interface: audi.com/ci/en/guides/u

9:35 PM · Jan 19, 2023

1,097

Views

Replying to

Not only does the

team feature products that HAVE been built with their system, but they also break it down case study style AND give you a link to the repo so you can see the code they used to make the interface:

2

3

12

The best

@materialdesign

reference site in my opinion isn’t their reference site. It’s their YouTube channel! It shows in a simple and fun way how to use the design system to make the stuff that you need—which is exactly the point of a reference site! youtube.com/materialdesign

1

3

Not only does the

team highlight products made with their Wall of Fame section at the bottom of every component detail page, but they take it a step further by celebrating the PEOPLE who made it with them: marmaladedesignsystem.com/76b74a45e/p/72

Marmalade celebrates what you create. Big thanks to Gleny Rodriguez, Franco Trucco, Suélen Ramos Vieira Vale, and Samer Alkhouri on the Reporting Team for partnering with us to build and test this component.

read image description

ALT

1

3

For more tips, check out my new video on creating the perfect design system reference site:

Creating the Perfect Design System Style Guide Site

Learn more about how to create design system style guide and reference sites in my workbook, "Design System in 90 Days:" https://danmall.com/products/design-...

1

3

Want more small but powerful ways to get better at design systems? 1. Follow me

for more of these 2. RT the tweet below to share this entire thread

Quote Tweet

Stop treating your #designsystem reference site as just a place for dry, technical documentation. Most people forget that it’s a marketing site too. Some tips + inspiration to make your reference site a exciting destination for your users to visit frequently:

Show this thread

1

Replying to

and

Wow, great work

DS team that was a joy to watch