Guides
Design overview
NewsKit has everything you need to build scalable digital products.
Why design products with NewsKit?
NewsKit improves consistency and efficiency across teams with considered, reusable solutions and shared best practices - creating more robust and innovative products.
Simple
NewsKit makes it simple to design responsive, accessible experiences that align to the components in code. You can concentrate on solving problems for your users.
Flexible
NewsKit is fully customisable. Our powerful theming systemthat gives you the flexibility to apply a single brand or sub-brand and our Figma components are highly configurable.
What’s included?
NewsKit provides Figma libraries to speed up your product design process. Our component library and theme is open-sourced on the Figma community.
Theme library
A powerful theming system containing brand styles that sync across files, including palettes and colours, typography, shadows and grids.
Theme library (internal)
Web components library
A collection of responsive components that you can theme to your brand.Web components library (internal)Web components library and theme (Figma community)
Icon library
A set of Material iconscontaining filled and outlined styles. You can customise or add icons as required.
Icon library (internal)
Utilities library
Includes annotations, cursors, device mockups and accessibility labels.
Utilities library (internal)
NewsKit Figma library architecture
Get the best out of NewsKit by theming your Figma libraries with Tokens Studio plugin:
Figma plugin
Tokens Studio plugin
NewsKit uses Tokens Studio plugin to create, manage and theme components. Tokens Studio connects to GitHub to sync to a repository within our publisher tool. This allows GitHub to be in sync with the theme in Figma and allows designers to have access to the latest theme from within the plugin.Tokens Studio pluginTokens Studio documentationEditing Newskit styles in Tokens Studio (internal)
Guidance
Get the best out of NewsKit with comprehensive, easy-to-follow documentation and guidelines, including:
Components guidance
Guidance for all web components. Includes details on anatomy, variants and usage.
Components guidance
Patterns guidance
Guidance for solving common problems, like onboarding users to a product or feature.
Patterns guidance
Accessibility guidance
Guidance for designing inclusive experiences.
Handoff guidance
Guidance on how to communicate a design to the product team for engineers to build.
Handoff guidance (internal)