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

Palette

The design system includes a palette that can be used to theme components.

primary

#e8f2ff

#99c3f9

#0068ef

#0055c4

#049

#002f6d

secondary

#ecf7ec

#80d580

#0a0

#080

#060

#040

text

#fff

#4f6f8f

#3f5972

#001833

#001023

#003c8a

highlight

#d0f1ac

#b9ea85

#8cdd36

#66be20

#2e9000

#017000

success

#ecf7ec

#80d580

#0a0

#080

#060

#040

error

#fbebeb

#eb9999

#c00

#b80000

#800

#6d0000

warning

#fbebeb

#eb9999

#c00

#b80000

#800

#6d0000

alert

#fef2e7

#faaf69

#f68013

#b74600

#f06f20

#923800

caution

#fff3c0

#fee875

#fedc2a

#cbb022

#806e0e

#665811

notify

#fff3c0

#fee875

#fedc2a

#cbb022

#806e0e

#665811

pricePrimary

#ecf7ec

#80d580

#0a0

#080

#060

#040

priceSecondary

#e8f2ff

#99c3f9

#0068ef

#0055c4

#049

#002f6d

strike

#c00

promoPrimary

#f5ebfa

#c28ce0

#70b

#5f0096

#530083

#410067

promoSecondary

#fff0f5

#ffa0c4

#fe3e81

#d02962

#9e1f4b

#701b39

border

#eceff2

#e0e5ea

#c0cad5

#868d95

#5e6872

#1a1d20

background

#fff

#f4f6f8

#d5dce4

#edf0f3

#879db3

#4f6f8f

#354b60

#001833