Design Library Structure

👨🏻‍🎨 I've been doing a lot of file clean up for our Design Library lately (more to come for that soon), but in the meantime, I wanted to share this animation that illustrates how the different layers of our library interact with each other.

1️⃣ Foundations: These are the basic rules, grids, and styles that make up the interactions, patterns, and features we build in Fellow.

2️⃣ Components: The Foundation elements come together to make these Components and their states. Context is not defined at this level yet (ex. Our primary button has rollover states, & placeholder text, but not defined where to use it yet).

3️⃣ Patterns: Groupings of Components and Foundation elements that now have a context and functionality that can be reused in different parts of the product (ie. group of Confirm and Cancel buttons – it is now a Pattern that can be reused)

4️⃣ Architecture: Complex Patterns that are much more contextual, and stand on their own as a piece of screen architecture.

--------

👇🏻 Would love to hear your thoughts on this approach, if it's helpful for you, or how you structure your library!

❤️ Follow us for more!