Newskit Logo

Foundations

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

Categories

The NewsKit Foundations are structured into the following categories:

Borders

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.

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.