Newskit Logo


NewsKit foundations define the visual elements that inform the look and feel of UI components.


The NewsKit Foundations are structured into the following categories:


Borders direct attention, identify components, communicate state, and express a brand.

Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.

Fonts form an important part of the interface, establishing styles for content such as headlines, sub-headlines or paragraphs, as well as more functional styles for items such as labels, tags and messaging.

Icons provide additional context to information, provide a visual cue, or visually reinforce the interaction.

Motion is used to create movement and narrative within a product. Animated interface elements don’t just attract attention, they enhance user experience and help guide user flow

Design tokens are the design decisions of the design system — specifically, they are named entities that store visual and functional attributes. They are used in place of hardcoded values (such as hex values for colour or pixel values for spacing) to maintain a scalable and consistent system for UI.

Shadows provide visual cues about the distance between layers.