Graphite design system
Platform · Native iOS/Android
Team · Built in Figma, documented using Zeroheight
Role · Lead Product Designer
Foundations
Components
Documentation
Foundations
Colour variables
Colour variables establish the foundational colour palette and semantic tokens used throughout the design system; primary, secondary, and functional colours that maintain accessibility standards and brand consistency.
Typography
Typography systems define the hierarchy, scale, and styling of text across all platforms, ensuring readability and consistency in how information is presented to users.
Icons
Icons help users clearly communicate actions, navigate products, and understand information. Designed to be accessible, consistent, and recognizable across all platforms.
Components
Native
Native components for iOS and Android use platform-specific technologies, designed to feel natural on each platform while maintaining the Sage brand and experience. These components work with the shared iOS/Android library of variables.
Bespoke
Bespoke components are custom-built for specific use cases within Sage products, created for Sage.com and custom web services using React. These components work with the web library of variables, allowing teams to create bespoke components suited to their products.
Documentation
Figma
All components, styles, and variables are documented in Figma with guidelines for designers. Each component includes usage guidelines, variants, and best practices to ensure consistent implementation across designs.
Zeroheight
Comprehensive end-to-end documentation in Zeroheight for developers. Developers can access all components, usage guidelines, code examples, and design token values to ensure accurate implementation. Zeroheight acts as the single source of truth for the design system.
