Device

hover: none
hover: hover
any-hover: none
any-hover: hover
pointer: none
pointer: course
pointer: fine
any-pointer: none
any-pointer: course
any-pointer: fine

Colours

Aero Blue

–c-aero-blue

Alto

–c-alto

Athens Gray

–c-athens-gray

Black

–c-black

Deep Cove

–c-deep-cove

Dove Gray

–c-dove-gray

Egg Sour

–c-egg-sour

Jacarta

–c-jacarta

Matisse

–c-matisse

Mercury

–c-mercury

Mine Shaft

–c-mine-shaft

Ocean Green

–c-ocean-green

Picton Blue

–c-picton-blue

Seashell

–c-seashell

Silver

–c-silver

Silver Chalice

–c-silver-chalice

Slate Gray

–c-slate-gray

Stratos

–c-stratos

Texas Rose

–c-texas-rose

Torch Red

–c-torch-red

White

–c-white

Gradients

–g-athens-gray-to-white-50

–g-matisse-to-aero-blue-226

–g-matisse-to-aero-blue-23

–g-matisse-to-aero-blue-40

–g-white-to-athens-gray-50

–g-radial-deep-cove

Fonts

Aa

Inter

–f-regular

Buttons

 
transparent
texas-rose
matisse
white
standard (a)

transparent standard (a)

Button Text

texas-rose standard (a)

Button Text

matisse standard (a)

Button Text

white standard (a)

Button Text
standard (button)

transparent standard (button)

texas-rose standard (button)

matisse standard (button)

white standard (button)

standard (input)

transparent standard (input)

texas-rose standard (input)

matisse standard (input)

white standard (input)

lozenge (a)

transparent lozenge (a)

Button Text

texas-rose lozenge (a)

Button Text

matisse lozenge (a)

Button Text

white lozenge (a)

Button Text
lozenge (button)

transparent lozenge (button)

texas-rose lozenge (button)

matisse lozenge (button)

white lozenge (button)

lozenge (input)

transparent lozenge (input)

texas-rose lozenge (input)

matisse lozenge (input)

white lozenge (input)

Text Styles

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet

H3: Lorem ipsum dolor sit amet

H4: Lorem ipsum dolor sit amet

H5: Lorem ipsum dolor sit amet
H6: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet sapien blandit, semper odio vehicula, elementum libero. Maecenas sit amet ultricies eros. Integer eget magna sapien. Vestibulum ornare, lorem eu eleifend varius, urna est congue quam, id luctus dolor mi at dui. Fusce mattis velit interdum ante viverra pellentesque. Vestibulum volutpat sapien eu odio vehicula, et feugiat urna sagittis. Vestibulum tempor nisi at ultricies malesuada. Sed ultricies purus massa, non tempor justo hendrerit vel. Vestibulum viverra in neque quis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec pulvinar odio. Integer id elit ut tortor tincidunt fringilla. Suspendisse potenti. Nam lacus turpis, sollicitudin nec mauris eu, egestas cursus tellus. Aenean sem leo, pretium id scelerisque a, aliquet nec metus.

Lorem ipsum dolor sit amet consectetur adipiscing elit

Lorem ipsum dolor sit amet consectetur adipiscing elit

Lorem ipsum dolor sit amet consectetur adipiscing elit

Lorem ipsum dolor sit amet consectetur adipiscing elit

Lorem ipsum dolor sit amet consectetur adipiscing elit

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Fusce nec pulvinar odio. Integer id elit ut tortor tincidunt fringilla. Suspendisse potenti. Nam lacus turpis, sollicitudin nec mauris eu, egestas cursus tellus. Aenean sem leo, pretium id scelerisque a, aliquet nec metus.
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet
  6. Lorem ipsum dolor sit amet
  7. Fusce nec pulvinar odio. Integer id elit ut tortor tincidunt fringilla. Suspendisse potenti. Nam lacus turpis, sollicitudin nec mauris eu, egestas cursus tellus. Aenean sem leo, pretium id scelerisque a, aliquet nec metus.

Forms

Tables

NB. There’s JavaScript that auto-wraps all tables to allow overflow

Heading AHeading BHeading CHeading DHeading EHeading FHeading GHeading H
Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn H
Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn H
Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn H
Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn H
Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn H
Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn H

Pagination

Standard Section w/ margin spacing

Standard Section w/ margin spacing

Standard Section w/ padding spacing

Standard Section w/ padding spacing

Slim Section w/ margin spacing

Slim Section w/ margin spacing

Slim Section w/ padding spacing

Slim Section w/ padding spacing

Get a demo