Ben

Wanda Design System

Wanda is a open-source design system focused on accessibility. Featured on Sidebar, Backlight.dev and TheyMakeDesign among others.

Live website

What covers

  • FoundationsColors, typography, design tokens, themes, motion
  • ComponentsInteractive playground included
  • Brand assetsLogos, colors, Palette
  • Symbols3 styles of icons: solid, outlined and duotone
  • Design guidelinesLayout, composition, motion
The archetype of a component page: the button
Interactive playground to test components in the browser.
Icons in 3 styles: solid, outline and duotone

Wanda artefacts

  • Component library in React symbol, themes, config
  • Symbol package
  • Design tokens & themes
  • JS Linter, CSS Linter, Typescript Type definition
  • Figma component library
  • Documentation website
  • github open source repo
  • Storybook
Multiple component instances of the Button component in Figma
Interactive motion guidelines on the website
low-key flex of brand identity on empty states

My contribution

  • Driving and advocating adoption
  • Shaping design guidelines & writing documentation
  • Shaping in the early phase
  • Enabled search across website
  • Storybook & components check
In depth guidelines about specific use cases
Guidelines about layout and composition
Visual examples to include in the guidelines

What I learned

  • Adoptions is key component
  • Maintaining is a huge effort
  • Scale the project based on available resources
  • How important is to foster collaboration

Want more case studies?!

← Interaction, UI
Research →