Pillars of Consistency: Forging Greystar's Global Design System
Developed in parallel with the landmark £8.5 million website overhaul, the "Pillars" Design System represents a foundational shift in how Greystar approaches its digital identity. This industry-leading system was conceived as a single source of truth, designed to bring unwavering brand consistency, scalability, and efficiency to Greystar's entire global digital ecosystem, from its primary website to internal applications and partner platforms.
Charleston, USA
1993
Property
23,000
Challenge
Prior to this initiative, Greystar's vast digital portfolio suffered from fragmentation. A lack of a centralised design and development framework led to brand inconsistencies across different platforms, duplicated effort, and significantly slower development cycles. As the company scaled, the challenge became clear: to create a unified, systematic approach that would empower diverse teams to build cohesive, on-brand experiences efficiently, while eliminating redundant work and technical debt.
Results
The implementation of the Pillars Design System has been transformative. It has established a shared language between designers and developers, drastically accelerating the entire product development lifecycle. Key results include:
Radical Efficiency: Development time has been immensely reduced by providing a library of pre-built, reusable components and design tokens that flow directly from design to code.
Absolute Consistency: A consistent and polished user experience is now maintained across all of Greystar's digital endpoints, reinforcing the new brand identity at every touchpoint.
Seamless Workflow: A direct pipeline from Figma, through the Supernova documentation hub, into development has automated the handover process and ensures design fidelity.
Empowered Teams: Both internal and external parties are now equipped to leverage a consistent set of principles and components, allowing them to build high-quality, on-brand digital products with confidence and speed.
40%
Faster: Time‑to‑market
80%
Reuse: Components leveraged
95%
Coverage: Design tokens synced
Process
Our approach was systematic, building the design system from the ground up to ensure it was robust, scalable, and easy to adopt.
Foundations & Philosophy: We adopted Brad Frost's Atomic Design methodology as our guiding principle. The core technology stack was established with Figma for UI design, utilising its powerful variables and foundation toolkits, and Supernova as the central hub where the design system would live.
Building the Atoms: We began by defining the foundational elements, or 'design tokens', in Figma. These included variables for colours, typography, spacing, and iconography etc. A three tiered collection was used; Primitive, Alias and Mapped. These tokens formed the elemental basis of the entire system and allowed for things such as Multi-brand, light and dark modes.
Constructing the System: Following the atomic structure, we built out the component library. Simple 'Atoms' (buttons, inputs) were combined to create more complex 'Molecules' (a search bar), which in turn were assembled into 'Organisms' (page headers, footers).
Integration and Documentation: Supernova became the heart of Pillars. It was connected to our Figma library, acting as the definitive home for all documentation surrounding the system. From colour values and typographic scales to detailed usage guidelines for every atom and molecule, it provided a comprehensive resource for anyone interacting with the Greystar brand.
The Design-to-Dev Pipeline: The true innovation was creating a seamless flow of information. Supernova ingested the design tokens directly from Figma and translated them into usable code formats. This allowed developers to pull the exact design specifications into their projects, ensuring a perfect 1:1 translation from design to the final product and dramatically easing development time. Any design update made in Figma could flow through this entire system, effortlessly updating every digital endpoint.
“Pillars is more than just a component library; it's a shared language for our designers and developers. It has fundamentally changed how we build, allowing us to deliver consistent, high-quality experiences at a pace we previously thought impossible. It's the engine that ensures our brand's digital presence is as strong and unified as its physical one.”
Conclusion
The Pillars Design System is a strategic asset that provides Greystar with a competitive advantage. It moves beyond simple brand guidelines to provide a living, breathing framework that ensures coherence and quality across a complex digital landscape. This project is a testament to the power of systematic design, proving that a significant investment in foundational tools and processes can yield an incredible return by enhancing efficiency, fostering collaboration, and creating a truly unified brand experience for every user.