Design System

Produced for Chainlift, 2022

Layout

Rules for responsive, scalable, and accessible design

The layout system establishes a set of parameters that ensure the proportions of element sizes remain constant as they scale. Originally produced for Chainlift, the system enables faster production times and higher fidelity when moving from Figma to Webflow.

Anatomy

Layouts consist of sections. Within sections are containers, which in turn contain the body content.

Each of these components plays a different role in keeping layouts responsive.

Section

Controls top-level CSS like background and text color. Always 100vw.

Container

Controls padding, margins, and scaling of body content.

Body

Holds and aranges the content. May be a grid, flex box, or block.

Scaling Behavior

How it works

Designs and mockups assume a 1600px viewport width and a base font size of 16px.
The <body> tag is given a font size of 1vw
With this setup, the size and spacing proportions in the design will appear identical on a 1600px viewport in Webflow, where 1vw = 16px.
Containers are all given a class of "container," and all elements within the container scale accordingly
The following CSS is applied to ensure content doesn't get too large or too small

Sections

Sections grow and shrink to always match exactly 100vw on both desktop and mobile. They have no padding or margins.

Container

The container grows and shrinks within a maximum and minimum width at each breakpoint. It auto-centers using margin: auto.

Body

Body width is controlled by the container padding. When padding is lowered, it fills the container completely. All content is housed in the body.

Color

The Brand Palette

Brand colors define the spectrum of hues and tones for use in illustrations, diagrams, and interactive UI elements like buttons and text links. Swatch names indicate their position in the hierarchy.

Primary

#001866

Secondary

#feccff

Tertiary

#ffdc99

a balanced spectrum

The Chainlift system is derived from Material 3, but with slight modifications. Whereas Material 3 generates muted tonal variations, the Chainlift system creates a balance between bright accents, soft tints, and deep shades.

generation method

Tones are derived from altering the luminance value of each key hue. By altering saturation and brightness from a center value of hsb(hue, 100, 100), the generated palette provides a nice balance of energetic accents and subdued tints and shades.

Omissions

Since luminance values 100 and 0 are always pure white and pure black, they've been ommitted from the palettes here. However, since every palette accounts for a pure white and pure black, they are implicitly permissible.

Environment Palette

Environment colors define the neutral tones used in backgrounds, text, cards, and miscellaneous UI elements like dividers, input fields, and drop shadows.

If a design does not call for both a “light” and “dark” mode, both variants must still be provided for the following swatches for optional use in footers, announcement bars, navigation rails, and other miscellaneous use cases.

Light Background

#f6f8fa

Light Background Variant

#e6ebf1

Dark Background

#141719

Dark Background Variant

#2f3539

Light Surface

#fefefe

Light Surface Variant

#fbfbfb

Dark Surface

#2f3539

Dark Surface Variant

#373f44

Shadows (On Light)

#131c215A

Outlines (On Light)

#f1f1f1

Shadows (On Dark)

#0f1222

Outlines (On Dark)

#6c6c6c

Text (On Dark)

#edf0f6

Text (On Light)

#1d1e20

Communication

Communication colors are used in UI elements that provide direct feedback to the user, such as confirmation messages, error alerts, and tooltips. Success and Error must always be some hue of green and red, respectively. Warnings may be either orange or yellow.

Neutrals may be any color that’s clearly distinguishable from the other three. Avoid “border” colors like seafoam, burgundy, or lime green.

Success

#62d991

Warning

#ffbc57

Error

#e47373

Neutral

#77c6ff

Typography

The type system used for Chainlift is a modified version of Material Design's system. However, some important changes have been made to keep it responsive.

Font size and letter spacing (i.e. "tracking") are measured in em units, in lieu of pixels.
Line heights are unitless
Sizes are scaled always assuming a base font size of 16px during the design process. The proportions are maintained in production by converting to em units.
The default scale coefficient is always 1.25 on desktops and 1.2 on tablets and below.
Base font sizes are hard capped at a 16px maximum and 14px minimum. These limits are established by the global CSS described in Scaling Behavior.

slide

tag/class

typeface

size

weight

line height

tracking

Heading 1

Inter

3.815em

200

1.5

-0.07em

Heading 2

Inter

3.052em

200

1.25

-0.05em

Heading 3

Inter

2.441em

200

1.25

-0.05em

Heading 4

Inter

1.953em

400

1.25

-0.04em

Heading 5

Inter

1.563em

400

1.25

-0.04em

Heading 6

Inter

1.25em

400

1.25

-0.03em

.subtitle

Quicksand

1.5em

500

1.5

-0.03em

.subtitle--small

Quicksand

1.25em

500

1.5

-0.025em

Body Text, Paragraphs, and List Items

Nunito

1em

400

1.5

.body--small

Nunito

0.9em

400

1.5

Overline

Nunito

0.8em

500

1.25

0.075em

Label

Nunito

0.9em

600

1.25

0.125em

Caption

Nunito

0.9em

400

1.25

Button Text

Nunito

1.125em

600

1.5