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.

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.

Motion is used to create movement and narrative within a product. Timely animated interface elements don't just attract attention, they enhance user experience and help guide user flow. They reveal the functionality and process of a user interface by communicating where to focus, what to do next and offering tactile feedback.

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 improve the overall aesthetics, add levels of depth and realism to the user’s visual experience and improve the UI visual hierarchy. This helps users discover and interact with UI elements.

Sizing is one of the biggest influences in creating a distinguishable brand. It provides the foundation for harmoniously and consistently setting the space and positioning elements onscreen and setting.

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