Michael Evan

Tagged #design-systems

15 examples

  1. Design system overviewGlossTiered components, tokens, motion and brand packages on npm.
  2. Component architectureGlossPrimitives up to whole sections on one chart, by tier.
  3. Documentation siteGlossThe glossary, the architecture and a live page per component.
  4. Components in every stateGlossButtons to pickers running live, each with a note on its motion.
  5. Style and component docs, still liveDesign CommonsColor tiers, typography, buttons and the Pixel library.
  6. Layout tool with usage notes beside the canvasPixel StudioScreens built from a system’s elements and docs.
  7. State mapsButtons to tooltips in every variant and size, across three design systems.
  8. Property sheetsAnatomy and specifications for five components.
  9. Usage guidelinesSix component guideline pages from a docs site.
  10. Foundation guidelinesColor, type, grid, spacing and elevation.
  11. How a design system ranTwo diagrams: components made and shipped, tokens from Figma to teams.
  12. Component specimensHeaders, tabs, fields and cards, then put together as an app.
  13. Style guides from FigmaColor, type and icon pages, plus the live components that build them.
  14. Where text-box trim centers a button labelOptical Type for ImpeccableA proposal and live demo for Impeccable’s type guidance.
  15. Two decks for new clientsIntro to UX and Style GuidesA 20-slide talk and a 30-slide walk-through of Mindnest’s Design Bible.

Want to talk about any of these?

See the workEmail me