Design System Documentation
An Atomic Design guide to Monotech's design system
I documented Monotech's design system for the designers and developers who use it. It's meant to give every team the same reference and help new designers get started faster.
- Company
- Monotech Solutions Ltd.
- My role
- Product designer
- Type
- Documentation and onboarding
Overview
The design system is built on Atomic Design, and the guide follows the same order. After an intro to the method comes the component library with its variables, primitives, tokens and local styles. Then molecules, organisms, templates, pages and final design. The last section covers how to build components.
Every stage gets a short definition and examples, like buttons and input fields with their states, or headers and footers. Pages show the designs on mobile, tablet and desktop. That part is for stakeholders and front-end developers.
My role
I wrote and structured the documentation, and kept it organized and current. I also helped onboard new designers and ran a workshop.
The work
Contents pages for the full guide and two of its sections.
Contents pages
Chapters 1 to 5 match the names and numbers of the design files on the introduction page. The contents pages follow the intro card layout, with the list on the left and a gray panel on the right holding an icon and the section name.
Primitives and tokens have their own outlines. On the primitives side that's breakpoints, colors, radius, spacing, stroke and type. Tokens are grouped into buttons, radius, spacing, stroke and font.
Contact
Let’s work together.
If you liked what you saw, or just want to say hi, drop me a line.