Skip to content
Altitude Standalone Components

Layers Of Abstraction

The Altitude Design System is made up of multiple layers of abstraction. This allows us to change all the themes from a handful of variables, while also giving us complete control of the styles at a more granular level.

Layers

The Altitude Design System can be broken down into a site, extended, alias and semantic level, as detailed below.

Site

These are the only variables that need explicitly defining by the user, although if none are provided, the package defaults will be use as a fallback.

These include:

  • Colours
    • Primary Colour --color-primary
    • Secondary Colour --color-secondary
    • Tertiary Colour --color-tertiary
    • Neutral Colour --color_neutral
    • Success Colour --color-success
    • Attention Colour --color-attention
    • Error Colour --color-error
    • Promotion Colour --color-promotion
    • White --color-white
    • Black --color-black
  • Radius --radius-site
  • Shadow --shadow-site
  • Typography

Extended

From the site variables, a range of extended variables are generated. These are unlikely to need to be overwritten by the user, but as is the nature of the purely CSS based implementation of the package, they can be over written if desired.

  • Colour Shades
    • Each site colour will generate 11 shades through OKLCH colour calculations
  • Responsive Typography
    • Mobile or Desktop typography are responsively used based on screen resolution

Alias

For the colour shades, alias values are assigned to make it easier to consistently reference a shade. For example, from the primary shades, alias values include --primary-light, --primary-dark, --primary-default, --primary-hover and --primary-hover-dark

Semantic

Ÿ Styles are applied semantically to the components. In the current implementation, semantic colours are only provided for colours, through the skin system. Colours should only ever reference these semantic skins in order to avoid visually similar, yet semantically different styles becoming coupled.

Component

Each component has a number of CSS variables that are used to style it, detailed in their respective pages within the documentation. Where applicable, these reference variables from the above layers of abstraction, such as the site radius. Additional variables that control the contents layout are also provided.

(These do not form part of the Altitude Design System, but more details of this can be found in the component overview)

Interactive Explainer

Click through the interactive explainer below to understand how the layers of abstraction work together with the colour palette and skin system to create a unified design system.

Theme Playground

Explore the way that themes are applied, and build your own in the Altitude Design System playground. Coming Soon