Work

Wanda Design System

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

Live website

What it 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 and duotone
Icons in 3 styles: solid, outline and duotone

Wanda artifacts

  • Component library in React symbol, themes, config
  • Symbol package
  • Design tokens & themes
  • JS linter, CSS linter, TypeScript type definitions
  • 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 the 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

  • Adoption is a key component
  • Maintenance is a huge effort
  • Scale the project based on available resources
  • How important it is to foster collaboration