Typography

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Blockquote typography style

Caption

Paragraph text porro quisquam italic and bold est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Inline link qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Tqui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Swatch X Omega

Moonshine Cold Moon

A watch for watch lovers

If you like swatch and if you like Omega, you'll hate the Cold Moon watch

A plain list:

  • First item
  • Second item

A plain list with paragraph fonts:

  • First item

  • Second item

An ordered list:

  1. First item
  2. Second item

An ordered list with paragraph fonts:

  1. First item

  2. Second item

Font Awesome Iconography

  • wheat-awn

  • cow

  • bag-shopping

  • check

  • circle-check

  • circle-xmark

  • xmark

  • tag

  • circle-exclamation

  • magnifying-glass

  • magnifying-glass-plus

  • magnifying-glass-minus

  • question

  • user

  • angle-down

  • box

  • carrot

  • clipboard

  • directions

  • external-link

  • map-marker

  • marker

  • pause

  • play

  • remove

  • share

  • clipboard

  • filter

  • hamburger

  • minus

  • eye

  • fire

  • heart

  • leaf

  • lock

  • plane

  • recycle

  • ruler

  • shirt

  • truck

  • close

  • hamburger

  • plus

  • facebook

  • instagram

  • pinterest

  • snapchat

  • tiktok

  • tumblr

  • twitter

  • x-twitter

  • vimeo

  • youtube

Legacy Iconography

  • check_mark

  • clipboard

  • apple

  • banana

  • bottle

  • box

  • carrot

  • chat_bubble

  • check_mark

  • clipboard

  • dairy

  • dairy_free

  • dryer

  • eye

  • fire

  • gluten_free

  • heart

  • iron

  • leaf

  • leather

  • lightning_bolt

  • lipstick

  • lock

  • map_pin

  • nut_free

  • pants

  • paw_print

  • pepper

  • perfume

  • plane

  • plant

  • price_tag

  • question_mark

  • recycle

  • return

  • ruler

  • serving_dish

  • shirt

  • shoe

  • silhouette

  • snowflake

  • star

  • stopwatch

  • truck

  • washing

  • account

  • arrow

  • caret

  • cart-empty

  • cart

  • checkmark

  • clipboard

  • close-small

  • close

  • discount

  • error

  • facebook

  • filter

  • hamburger

  • instagram

  • minus

  • pinterest

  • plus

  • remove

  • share

  • snapchat

  • success

  • tick

  • tiktok

  • tumblr

  • twitter

  • unavailable

  • vimeo

  • youtube

  • zoom

Colours

  • Solid button label ()
    Used as foreground color on accent colors.
  • Accent 1 ()
    Used for solid button background.
  • Accent 1 gradient ()
  • Accent 2 ()
  • Accent 2 gradient ()
  • Text ()
    Used as foreground color on background colors.
  • Outline button ()
    Also used for text links.
  • Background 1 ()
  • Background 1 gradient ()
  • Background 2 ()
  • Background 2 gradient ()

Buttons

    • Forms

    Form error message
    Multiple options
    Radio (input + label)