Foundations
Foundations (theme for development) describe the visual elements, that form the basis for a consistent layout and style.
Some elements might only be relevant for either React or Figma (notice the icons on the cards) because the approach to building them differs ever so slightly.
Layout
Structuring the page to enable responsive behaviour and to ensure a clear hierarchy.
Breakpoints
Breakpoints describe screen size thresholds and grid structures.
Containers
Containers are widths constraining elements inline with the layout grid.This is only available for consumption within our development packages
Placeholders
Image or content placeholders with defined aspect ratios.This is only available for consumption on Figma
Spacing
Available spacing units and usage.
Styling
The styling ensures digital experiences are on brand and look & feel ‘Sky’.
Colors
The colour palette includes base colours, greyscales and specific product colours.
Gradients
Colour gradients are used for different channels and products.
Radius
List of available radii for styling of corners.
Shadow
Different levels of elevation for static and selectable elements.
Typography
Set of font sizes and weights ensuring consistent typographic styles.
Motion
The motion values give consisten feel to the animations built with Sky UI.
