Skip to content

Design System

Posted on:November 14, 2023

Figma file with type and layout systems.

Table of contents

Open Table of contents





When I first joined Altum, I quickly learned that the “design system” was a bare bones color palette.

Old design system cluttered with unrelated components.

A screenshot of the old “design system”. The only part of it in use when I first joined was the color palette.


I believed that starting a design system would result in faster launch time by way of less time spent designing while providing a more consistent visual branding across the experience/platform.


The steps of Altum’s design process are:

A graphic showing a loop around Define and Ideate. Test and Observe aren't looped.

The Altum design process.


I began by researching what exactly a design system is and the minimum I needed to make to get it going.


Before I left Altum, I finished three fundamental aspects.

Closeup of the type system in Figma.

A type system on an 8 point grid with a 4 point baseline.

Closeup of the layout system in Figma.

A layout system using a combination of a modular grid and baseline grid.

Conceptual card model sheet with inspirations and rough mockups.

A rough draft of a conceptual model that provided a common metaphor to use during discussions.


Testing saw me incorporating the design system’s new additions into my workflow. I also self-gauged using my designer’s intuition to check the feel of using the design system.


Overall the design system foundation I created for Jenni was a start in the right direction:


Learning to create a design system was a challenging yet rewarding endeavor that showed me how difficult it can be to create a set of standards for a product’s visual design.

Next steps

My next move with growing the design system would have been to: