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
The archetype of a component page: the button
Interactive playground to test components in the browser.
Interactive playground to test components in the browser.
Icons in 3 styles: solid, outline-solid and duotone
Icons in 3 styles: solid, outline-solid 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
Multiple component instances of the Button component in Figma
Interactive motion guidelines on the website
Interactive motion guidelines on the website
low-key flex of brand identity on empty states
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
In depth guidelines about specific use cases
Guidelines about layout and composition
Guidelines about layout and composition
Visual examples to include in the guidelines
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 →