DESIGN SYSTEM FOR MEDIA BRANDS

News Corp NewsKit

The open-source design system News UK built so every media brand can ship a distinct product on the same components.

DESIGN SYSTEM FOR MEDIA BRANDS

News Corp NewsKit

The open-source design system News UK built so every media brand can ship a distinct product on the same components.

NewsKit is News Corp’s design system, built by News UK and published for anyone to use. It gives product teams React components, design tokens, themes, and patterns so The Times, The Sun, talkSPORT, and the rest of the portfolio do not each invent a button. Gensten’s write-up covers the system as it is documented in public: foundations, components, theming, and the brands it serves.

Engagement Overview

NewsKit’s own line is “an open source design system built by News UK, for everyone.” Foundations cover colour, type, space, motion, borders, and breakpoints. Components cover actions, forms, feedback, layout, media, and navigation. A theme applies a brand’s tokens to those components, in Figma and in code, so a designer can hand an engineer a publication-themed component instead of a one-off mock. NewsKit went open source in 2022 and is on the public web at newskit.co.uk, with the library on GitHub.

Goal: Ship more digital products, for more News Corp brands, without rebuilding the same interface or breaking accessibility each time.

Approach: Treat the design system as a product. Tokens and presets carry the visual decisions. Components carry the interaction and accessibility decisions. Each brand theme is a layer on top, not a fork. Teams adopt it in slices, which is how NewsKit describes its own sustainability principle: upgrade bit by bit.

Many famous brands, one product organization

News UK’s portfolio includes The Times, The Sunday Times, The Sun, talkSPORT, Virgin Radio, Times Radio, and Talk. Each has its own readers and its own visual identity. A single hard-coded stylesheet would make them look the same. A fully separate codebase for each title would make every redesign slower. NewsKit is the middle path: agnostic components, brand themes, and shared guidance.

What We Deliver

Foundations for borders, breakpoints, colours, fonts, gradients, icons, motion, opacity, overlays, shadows, sizing, and spacing.
Style, transition, and typography presets that bundle tokens into reusable decisions.
Components for buttons, forms, selection controls, cards, grids, modals, drawers, and media.
Theming in Figma and in code, including component defaults for a brand.
Patterns for repeating user problems, documented next to the components.
Public docs for designing, engineering, contributing, and understanding why a media company would adopt it.

Service Scope

Design-system adoption across brand sites and apps
Theme setup from tokens through component defaults
Accessible component implementation in React
Contribution workflow for teams extending the system
Alignment between Figma libraries and production code

Expected Business Impact

Design and engineering share one language, from a Figma theme to a React component.

Brands keep a distinct look while sharing buttons, forms, cards, grids, and navigation.

Accessibility is built into the components: WCAG and WAI-ARIA, keyboard, screen readers, and touch.

Open source means a fix lands once and every team on the system can take it.

Delivery Roadmap

Foundations

System base

Tokens for colour, type, space, and motion, shared by every brand theme.

Components

System base

Accessible React building blocks for forms, navigation, layout, feedback, and media.

Brand themes

Per title

A theme per publication so The Times and The Sun can share code and not share a look.

Open system

Since 2022

Public documentation, GitHub, and a contribution path beyond the original News UK teams.

Frequently Asked Questions

Is NewsKit only for News UK?

No. News UK built it for its own brands and then open-sourced it. The public site invites other teams to design and develop with it, and News Corp has talked about adoption beyond News UK.

What problem does a theme solve?

A component stays structurally the same. The theme swaps colour, type, motion, and component defaults so a brand stays recognizable. Designers create that theme in Figma; engineers apply it in code.

How does this show up for readers?

Readers never see “NewsKit.” They see The Times, The Sun, talkSPORT, and the other News UK products. The system is what lets those sites and apps move faster while staying accessible.