Tokens

Color

  • Light Blue 100
  • #DEF3FF
  • Color contrast
  • Color contrast
  • Multiview Blue
  • #0096ED
  • Color contrast
  • Color contrast
  • Blue 400
  • #007BC2
  • Color contrast
  • Color contrast
  • Blue 500
  • #0067A3
  • Color contrast
  • Color contrast
  • Navy
  • #1C314B
  • Color contrast
  • Color contrast
  • Light Green 100
  • #D4F7E5
  • Color contrast
  • Color contrast
  • Green 400
  • #16864C
  • Color contrast
  • Color contrast
  • Green 500
  • #137344
  • Color contrast
  • Color contrast
  • Light Grey
  • #F2F2F2
  • Color contrast
  • Color contrast
  • Grey 300
  • #CCCCCC
  • Color contrast
  • Color contrast
  • Medium Grey
  • #686868
  • Color contrast
  • Color contrast
  • Black
  • #000000
  • Color contrast
  • Color contrast

Buttons

Arrow Right Streamline Icon: https://streamlinehq.com
Button Variant 1
Button Variant 2
Arrow Right Streamline Icon: https://streamlinehq.com
Button Variant 3
Arrow Right Streamline Icon: https://streamlinehq.com
Inspired Layouts
Arrow Right Streamline Icon: https://streamlinehq.com
Inspired Layouts
Arrow Right Streamline Icon: https://streamlinehq.com
Inspired Layouts
Arrow Right Streamline Icon: https://streamlinehq.com
Inspired Layouts
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 2
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 3
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1 ALT BLACK
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 2
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 3
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1 ALT BLACK
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT 1
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT
Arrow Right Streamline Icon: https://streamlinehq.com
VARIANT

Buttons

Arrow Left Streamline Icon: https://streamlinehq.com
Button

Primary

button
icon-leading
Button

Primary

button
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Primary

button
icon-trailing
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Primary

button
icon-trailing
black
Arrow Left Streamline Icon: https://streamlinehq.com
Button

Secondary

button
icon-leading
Button

Secondary

button
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Secondary

button
icon-trailing
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Secondary

button
icon-trailing
white
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Symbol

button
icon-leading
Email Action Unread Streamline Icon: https://streamlinehq.comclose
Button

Symbol

button
Email Action Unread Streamline Icon: https://streamlinehq.comemail-action-unread
Button

Symbol

button
icon-trailing
Arrow Left Streamline Icon: https://streamlinehq.com
Button

Symbol

button
icon-trailing
white
Arrow Left Streamline Icon: https://streamlinehq.com
Button

Text Link

button
icon-leading
Button

Text Link

All Links
button
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Text Link

All Links
button
icon-trailing
Arrow Right Streamline Icon: https://streamlinehq.com
Button

Text Link

All Links
button
icon-trailing
black

Accordion

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.