Graphite Design System
Platform · Native iOS/Android
Team · Built in Figma, documented using Zeroheight
Role · Lead Product Designer
Foundations
Colour Variables
Colour variables define the foundational colour palette and semantic tokens used throughout the design system. This includes 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. This ensures readability and consistency in how information is presented to users.
Icons
Icons are designed to help Sage Design System users clearly communicate actions, navigate products, and understand information. Icons are created to be accessible, consistent, and recognizable across all platforms.
Components
Native
Native components are designed and implemented for iOS and Android using platform-specific technologies. These components are built to feel natural on each platform while maintaining the Sage brand and experience. The native components work with the shared iOS/Android library of variables.
Bespoke
Bespoke components are custom-built for specific use cases within Sage products. These are built for Sage.com and custom web services using React. These components work with the web library of variables allowing for teams to create bespoke components suited to their products.
Documentation
Figma
All components, styles and variables are documented in Figma with guidelines for designers to follow when designing. Each component is fully documented with usage guidelines, variants, and best practices to ensure consistent implementation across designs.
Zeroheight
Comprehensive end-to-end documentation in Zeroheight for developers. This allows developers 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.