Newskit Logo
View Github

Theme

NewsKit offers a robust and flexible theming system, enabling brands to retain a unique identity while building consistent, accessible products.

Foundations

NewsKit foundations define the look and feel of digital products. Foundations include borders, breakpoints, colours, fonts, motion, shadows, sizing and space.

Breakpoints

Breakpoints set a visual point on a screen to alter the layout of content (responsive design), ensuring consistency across different screen widths.

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

Design tokens are the design decisions of the design system. They are used in place of hard-coded values to maintain a scalable and consistent system for UI.

Fonts define the font family, boldness, size, and style of the text. These inform typography rules to convey the appropriate sentiment to guide users through their experience.

Gradients is a visual representation of a colour. It is used to convey meaning and communicate a brand.

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. Timely animated interface elements attract attention, provide guidance and enhance user experience.

Opacity is used to create a visual layer between elements.

Overlays are used for styling UI elements. They can be decorative, but often have a functional use like communicating state on images or increasing the contrast backgrounds when a component is layered upon each other, e.g. a modal.

Shadows provide visual cues about the distance between layers. They add levels of depth and realism to the user’s visual experience and improve the UI visual hierarchy.

A simple, standardised approach to size increases consistency and visual rhythm. Appropriate sizing is important for providing an inclusive experience.

Considered use of space can improve communication: reducing visual clutter, providing hierarchy or helping show a relationship between elements on a screen.

Presets

A collection of related foundational design tokens combined into a preset to define reusable styles, typography or transitions. There are three categories of presets:

A collection of foundational design tokens combined into a preset to define reusable styles for specific interface elements and their interactive states.

A collection of motion attributes combined into a preset to define reusable motion transition from one state to another.

A collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.

Creating and using themes

Learn how to create NewsKit themes in Figma and code, and unlock the power of presets and component defaults to further customise NewsKit components.

Creating a theme enables the brand identity to be managed from a single location across multiple products.

A guide covering how to populate and apply a brand’s theme.

Each component in NewsKit has defaults that can be overridden to enhance the experience.