LT Design System

Overview

Background

This design system was created as a project for a design system bootcamp by Molly Hellmuth, who is the creator of UI Prep.

Structure

Styles
- Color
- Typography
- Container
- Grid & Layout
Icons
Components

Color

Color Key

To set up a color style palette, I created a color key that included a wide range of tints and shades (10) for each color and addressed accessibility.

The quickest and easiest way to do this was by copying/pasting existing color palettes from popular design systems such as:

For customization, I updated each color category by its hue value (with the help of a Figma plugin called Batch Styler, but colors have to be added as styles for this to work) for each tint/shade while keeping the brightness and saturation values as they are (assuming accessibility contrast passes, otherwise brightness and/or saturation should adjust slightly).

I made my Primary and Neutral colors feel related by using the same hue value for each (ex. 207). The large difference in brightness and saturation will make them appear distinct while still sharing the same coolness.

Warning colors are usually yellow, which is a tricky color to work with since it's very light naturally — making it hard to see and appearing “muddy” when the brightness is lowered. As a workaround, I adjusted the hue of tints towards 40 (yellow) and shades towards 30 (orange).

To ensure every color was accessible, I tested their contrast ratio with off-black (Neutral 900) or white text. When a color did not meet or exceed contrast ratio 4.5:1 for AA, I slightly adjusted the brightness and/or saturation values until it did.

Color Styles

To identify the base and tints/shades needed for the design system, I considered which color variation is required to support backgrounds and different interaction states (ex. Default, Hover, Pressed, etc.).

The next step would be to turn each of these into Color Styles so they can be applied across my designs, but I already did it beforehand to use Batch Styler plugin to adjust hues. So, I simply removed any that were not necessary.

For proper naming convention and organization, I named each style with forwarding slashes (”/”) to create a nested hierarchy. In addition, I added a helpful description for each. For example:

Primary/100 (Background)
Primary/600 (Default)
Primary/700 (Hover)

There were some extra styles I added along the way, which were:

Neutral/0 for white (#FFFFFF)

Text+Icon palette for primary, secondary, and disabled
Gradients (example use case could be for charts)
Images for profile avatars

Typography

Font family

Gotham for headings
Inter for subtitles, body paragraphs, button, and label

Type scale

1.200 - Minor Third

Weights

Bold for headings and subtitles
Regular for body paragraphs and label
Medium for button.

Letter spacing

-1% for headings
0 for subtitles and body paragraphs
2% for buttons and label

Line heights

Divisible by 4

Container

For simplicity, I went with a few basic elevations and changed shadow color to Neutral 1000 (0F1D29).

Grid & Layout

XL

Columns: 12
Type: Stretch
Width: Auto
Margin: 32px
Gutter: 24px

L

Columns: 8
Type: Stretch
Width: Auto
Margin: 32px
Gutter: 24px

M

Columns: 4
Type: Stretch
Width: Auto
Margin: 16px
Gutter: 16px

S

Columns: 2
Type: Stretch
Width: Auto
Margin: 16px
Gutter: 16px

Icon

To setup icons, I chose Material Design, specifically sharp tone version at 24x24 as a default size. The icons I added were selected to cover common use cases. Afterwards, I categorized similar icons as component sets and renamed components, properties, and values accordingly. Furthermore, I changed almost all of the icons' color to Text+Icon Primary Black, except for the Alert set (each variant has its own color).