Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

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)

Need Help?

Can’t find what you’re looking for?

Get in touch

Need Help?

Can’t find what you’re looking for?