Building bigger
Cedar's new foundation for scale
Design systems, like the products they support, need room to grow. As Cedar evolves, we're building on everything we've learned over six years of driving adoption of atomic elements, establishing quality standards, and helping teams work more efficiently across the co-op.
While our foundations for accessible, intuitive UI and brand-aligned design have served us well, we've been busy building something bigger: a fluid layout and container system that helps teams build larger components more consistently. This foundation is making it easier to create dynamic, personalized experiences across the co-op. Want to see what's new and how it's making life easier for teams? Let's dive in.
Cedar's core focus on atomic elements — colors, typography, buttons, etc. — created a strong foundation for consistent design. Building on this success, the system has expanded to tackle bigger challenges: how to efficiently build and maintain complex components, enable dynamic content creation, and deliver personalized experiences at scale.
Fluid foundations
Tired of managing multiple breakpoints for every component? Cedar's new fluid design approach fundamentally changes how components adapt across devices. Instead of maintaining separate styles for different viewports, typography and spacing will scale automatically with screen size. This shift will not only improve the mobile experience but significantly reduce the time teams spend managing viewport-specific styles.
The new atomic content components complement this fluid approach by providing consistent, reusable text patterns. This eliminates the common challenge of inconsistent text styles proliferating across pages and applications.
Building blocks for dynamic layouts
This year marked a significant evolution in how Cedar helps teams build flexible, consistent layouts. We started by introducing surface — a new container system that brings clear rules for elevation, hierarchy, and spatial organization. Surface provides the foundation for specific container components like cards and tiles, while offering the flexibility teams need for custom solutions.
Building on this foundation, our new layout system introduces Layout and MediaObject components. These work seamlessly with surface containers to create dynamic, responsive layouts without the complexity of managing custom grid code. Whether you're creating experiences to showcase products, share outdoor stories, or highlight expert advice, these components handle the heavy lifting of responsive behavior and spacing consistency
Prefab component system
Building on the fluid foundation, Cedar is expanding our component library with larger, pre-built component patterns. Think of these as your favorite LEGO sets — carefully designed pieces that snap together perfectly. We're starting with high-value, frequently used components to give you the biggest bang for your buck.
This 'prefab' approach will combine the consistency of the atomic system with the efficiency of pre-assembled solutions. Teams will be able to pull from a library of production-ready components instead of building their own versions of common patterns, helping deliver complex features faster while maintaining design consistency.
Component spotlight: Product recommendations
The product recommendations component showcases how these improvements work together in practice. This high-usage component needed modernization to improve product discovery while being maintainable across multiple teams. The goal was to create a more engaging, personalized shopping experience that helps customers find relevant products more easily.
Our approach combined several key improvements:
- Enhanced the user interface and interaction patterns for better product discovery
- Optimized code and performance for faster page loads
- Leveraged the new fluid foundations for better adaptability and efficiency
- Established centralized ownership to coordinate testing and future iterations
To make this immediately useful for teams, we've updated the existing recommendation slider components in the shared FEDComp repository with an updated product tile UI, new ScrollCarousel component, and MediaObject layout patterns. Looking ahead, we plan to migrate this and other reusable commerce components into Cedar Grove, building a focused library of production-ready components that teams can easily implement.
Learn more in our technical wiki (employees only).
As we expand Cedar's component libraries to support more complex patterns and shared solutions, we recognize the need to evolve how teams work together. Our experience with the product recommendations component highlighted the importance of coordinated release management across implementations. We're planning to enhance our operating model to support this growth, focusing on:
- Release Management: Developing streamlined processes for managing component releases and coordinating updates across implementations
- Quality & Governance: Creating clear guidance for building and maintaining components
- Team Collaboration: Establishing frameworks for shared component ownership
Next year, we're expanding this with Cedar Grove — our new model for component collaboration and governance. Stay tuned for more details.
Have ideas, questions, or feedback? Find us in Slack (#cedar-user-support) or drop us a line at cedar@rei.com.
Here's to building better, together! 🚀