New to Elements Design Systems? This checklist will get you started confidently and effortlessly.

Step 1: EDS Foundations – Brand and Guidelines

Familiarise yourself with the brand CI guidelines. The Nedbank Design Language is the visual expression of our brand, encompassing color, type scale, the grid, and more. Our design system translates the design language into code that enables us to create cohesive digital experiences. Through elements like color tokens, type tokens, and spacing tokens, you can seamlessly apply these design principles across all digital platforms.

Step 2: Get the right tools – Figma

All Nedbank designers have a license for Figma, our primary design kit tool. While you can still access older tools like Sketch, Adobe XD, and Axure via the Design Toolbox we no longer maintain or update these kits. Migrate to Figma to access our most current and comprehensive design kits and ensure you stay ahead with the latest updates

Step 3: Utilise the core design kits in

The core desing kits are maintained in Figma. These kits include all the essential components and styles for creating product and web experiences. By using these kits, you’ll automatically receive design library updates, keeping your designs aligned with the latest releases. This ensures a unified language among designers and shared functionality expectations with developers during hand-over and development cycles. Visit the Design kits section and follow the Figma setup instructions.

Step 4: Review usage guidance

Explore the components and patterns documentation to gain a deep understanding of the system. EDS offers comprehensive design usage and style guidance for all components, along with a range of key patterns — best practice solutions for user goals. These patterns are vetted, reviewed and approved for use by the Design System team, ensuring you design with confidence.

Step 5: Collaborate with the Design System team

If you are a Nedbanker and you have any questions about the kits or tools, connect with us on MS teams: Design System Queries. Alternatively, you can send your support request via email and receive feedback within a day.

Need help? Get in touch.

Should you require any assistance or wish to collaborate with the Design System team, please reach out via e-mail or our teams channel.

Email: elements@nedbank.co.za
Teams: Design system - Queries

 

Design resources

Welcome to the heart of the design resources! Here, you’ll find a curated collection of essential kits and libraries tailored for designers like you. Whether you’re in need of illustrations, icons, color palettes, typography, or design tokens, we’ve got you covered. Explore our comprehensive libraries and the kits compiled for various platforms and digital products, ensuring you have all the components you need to bring your digital experiences to life.

Design libraries

Icon Library

Find all the popular icons for your projects.

Colour Library

Browse our extensive color palettes.

View library

Type Library

Access a variety of typography options.

View library

Token Library

Find essential design tokens here.

Coming soon

UI Kits and Libraries

Self Service Kiosk Library

Find the components for Self-Service Kiosks here.

View library

ATM Library

Find the components for ATMs here.

View library

Brand Refresh Library

Find the components for the Nedbank web page here.

View library

Current Web – UI Kit

Find the core components for the Nedbank web page brand here.

View library

NBH Web – UI Kit

Find the core components for the Nedbank Business Hub here.

View library

NBH Web – Component library

Find the components for the Nedbank Business Hub here.

View library

Need help? Get in touch.

Should you require any assistance or wish to collaborate with the Design System team, please reach out via e-mail or our teams channel.

Email: elements@nedbank.co.za
Teams: Design system - Queries