Tetra Trust’s Design System

A thoughtful design system can unlock a designer’s full potential, allowing them to focus on rich customer experiences rather than specific details of brand implementation and cross-application consistency.

Design System Overview

Tetra Trust’s system is based on a decade of lessons learned building and contributing to design systems at EventMobi, Aubs & Mugg, and Reflectivity. It is comprised of principles, base styles, components, and patterns.

  • Principles

    Design principles are the universal beliefs the design team holds. They establish a consistent framework for designers to contribute to the system. Key principles include accessibility, a writing voice and tone guide, function vs. form prioritization, and usability heuristics such as system status visibility and error prevention and recovery.

  • Base Styles

    Base styles define the design system brand book, including typography, colours, and icons. They are an extension to the broader brand guidelines and are applied to all levels of the component hierarchy.

  • Components

    Components are the fundamental blocks that combine to form the interface. Components are designed to be as simplistic as possible, doing one thing very well. Individual components often combine many other components.

  • Patterns

    Patterns provide preferred solutions to common design layouts, for example a table view with filters or an object detail view.

Illustrative staked layers of a design system

Component Style Layering

The component system is split into five layers of styling, each building upon the layer below.

0. Elements

Each HTML element (<h1>, <p>, <img>, etc.) has a base set of styles. This ensures consistency when HTML elements are used outside components.

1. Objects

Objects are agnostic to brand specific visual styles. They may be used repeatedly, layering brand styles as needed for specific contexts. Examples include grids, horizontal and vertical stacks, media objects, boxes, and islands.

Stacks

Stacks are very simple but also the most fundamental and useful objects. A large number of other objects and components utilize them at their core. Stacks come in two variants: horizontal stack (HStack) and vertical stack (VStack).

An HStack allows a designer to easily group elements within a single row, applying consistent spacing between elements:

1
2
3

A VStack applies consistent vertical spacing to elements in a column:

1
2
3

Stacks (and other objects) are particularly valuable when combined to create complex layouts. For instance, utilizing a VStack to arrange form fields vertically within a form, and an HStack to group related form fields.

Name

First

Last

We’ll only email you about matters relating to your account.

2. Components

The component layer applies the brand specific styles, including fonts, colours, borders, radii, etc.

3. Themes

Themes allow for multiple visual representations of a component based on user preferences, for example light and dark mode. Each component has it’s own set of theme styles, one for each theme supported by the system.

4. Utilities

Components occasionally require contextual overrides to very specific styling. This is the purpose of utilities. They are guaranteed to do a single thing, for example removing margins from the bottom of a component. Application of utilities should be scrutinized, as heavy usage may indicate a larger issue with the design system.

Managing Responsiveness

Design systems need to adapt to a wide range of contexts, screen sizes, and environments. When working with responsive styles, there are a number of principles Tetra’s system follows.

  1. Components are primarily built to be context agnostic; they will adapt to their surroundings automatically.
  2. Responsive cases are best handled at the pattern level (e.g. page, navigation, or state patterns).
  3. There are dedicated components intended for adding responsive properties (e.g. grid component). Using these components is preferred when composing other components that require responsive properties.
  4. Only in rare cases should a component require dedicated responsive styles.

Tooling

Tetra’s design system is built with TypeScript using the React.js library. TypeScript reduces code errors by ensuring accuracy in types passed to and used by components. Hooks in React.js provide an easy, efficient, and performant method for handling state and lifecycle changes within individual components. Hooks also make the code easier to read and maintain by logically grouping functionality together. CSS in the system is primarily vanilla, leveraging CSS custom properties (variables) for many of the shared properties like spacing and colours. Sass is used as a pre-processor in select places to make quick work of applying iterable styles such as defining grid widths, indentation for a tree view, or applying multiple size variants for a component (xs, sm, md, lg, and xl).