Getting Started

Foundations

Color Palette Typography Iconography Theming Breakpoints

Modal Components

Modal ScrollLock

Popover

Slider

RangeSlider Slider

Utilities

borders color getPaletteColor getTextColorOn getLinkStylesOn

Resources

Motion Layout Contributing GitHub

Color

The design system includes a color palette of several primary colors, along with light and dark variations.

#000

#fff

#e8f2ff

#99c3f9

#0068ef

#0055c4

#049

#002f6d

#ecf7ec

#80d580

#0a0

#080

#060

#040

#fbebeb

#eb9999

#c00

#b80000

#800

#6d0000

#fef2e7

#faaf69

#f68013

#b74600

#f06f20

#923800

#fff3c0

#fee875

#fedc2a

#cbb022

#806e0e

#665811

#f5ebfa

#c28ce0

#70b

#5f0096

#530083

#410067

#fff0f5

#ffa0c4

#fe3e81

#d02962

#9e1f4b

#701b39

#edf0f3

#fff

#4f6f8f

#3f5972

#001833

#001023

#003c8a

#d0f1ac

#b9ea85

#8cdd36

#66be20

#2e9000

#017000

#fff

#f4f6f8

#d5dce4

#edf0f3

#879db3

#4f6f8f

#354b60

#001833

#eceff2

#e0e5ea

#c0cad5

#868d95

#5e6872

#1a1d20

#f4f6f8

#4f6f8f

#364049

#c0cad5

Getting Started