Guideline Design System component spacing specifications

Guideline's 2020 rebrand called for a Figma-native design system, uniting their design language across their products and properties.

🎨 Design Foundations: We built a versatile design language based on #designtokens. Starting with color primitives, we created semantic palettes for various use cases and contexts then created design tokens for grids, sizing, spacing, radius, and more.

🛠️ Component Library: We prioritized the most used components, like buttons, and then combined them to create more complex components, patterns, layouts, and templates.

🚀 Pilot Exploration: To test the system, we recreated existing product interfaces, giving us key insights into how to refine styles and enhance user experience.

📚 Documentation & Training: We created design guidelines, conducted live training sessions, and recorded "how-to" Loom videos to foster the adoption of the new system. We're so proud of this project.

More cool projects in our profile