Ably UI

Colour

Primary

  • Cool Black

    hex #03020D

  • Active Orange

    hex #FF5416

  • White

    hex #FFFFFF

Secondary

  • Electric Cyan

    hex #4AD4FF

  • Zingy Green

    hex #08FF13

  • Bright Red

    hex #FE372B

  • Jazzy Pink

    hex #FF17D2

Neutrals

  • Extra Light Grey

    hex #F8FAFC

  • Light Grey

    hex #F4F8FB

  • Mid Grey

    hex #C6CED9

  • Dark Grey

    hex #667085

  • Charcoal Grey

    hex #2B303B

  • Neutral 500

    hex #C6CED9

  • Neutral 900

    hex #39414E

GUI

  • Default (Light)

    hex #006EDC

  • Hover (Light)

    hex #0862B9

  • Active (Light)

    hex #074095

  • Default (Dark)

    hex #4DA6FF

  • Hover (Dark)

    hex #2894FF

  • Active (Dark)

    hex #0080FF

  • Visited

    hex #4887c2

  • Focus

    hex #80B9F2

  • Focus Outline

    hex #80B9F2

  • Unavailable

    hex #a8a8a8

  • Success

    hex #11CB24

  • Error

    hex #FB0C0C

Buttons

Different size buttons can be achieved by using padding and text utilities, see examples below.

Standard

Inverted

With icons

Extra small

Small

Large

Chips

Different size chips can be achieved by using padding and text utilities, see examples below.

On light background

On dark background

Typography

Type definitions do not include margin as it can be contextual. Figma and the below list include recommended margins.

The below list is created with ui-text-* helpers which include properties beyond the standard font-size and line-height that text-* includes.

Title - this is a title

H1 - this is an h1

H2 - this is an h2

H3 - this is an h3

H4 - this is an h4

H5 - this is an h5

Paragraph 1

Paragraph 1 (strong)

Paragraph 2

Paragraph 2 (strong)

Paragraph 3

Paragraph 3 (strong)

This is a figure caption style

Quote

Sub-header

Overline 1

Overline 2

Menu label 1

Menu label 1 (strong)

Menu label 2

Menu label 2 (strong)

Menu label 3

Menu label 3 (strong)

Code 1 font for code blocks

Code 2 font for code blocks

Text, then styling for inline code, within paragraphs.

Links

The default text color is inherited from the surrounding text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lists

Note that lists support having li items and li items with children, while keeping the same margin (in these examples, the ordered list has paragraphs).

Unordered

This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.

  • Pellentesque consequat elit eget tristique sagittis. Etiam et erat et lorem elementum commodo. Aenean congue diam a nibh accumsan tincidunt.
    • In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.
      • Etiam et erat et lorem elementum commodo.
      • Etiam et erat et lorem elementum commodo.
  • Etiam et erat et lorem elementum commodo.

This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.

Ordered

This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.

  1. Pellentesque consequat elit eget tristique sagittis. Etiam et erat et lorem elementum commodo. Aenean congue diam a nibh accumsan tincidunt.

    1. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.

      1. Etiam et erat et lorem elementum commodo.

This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.

Forms

Checkboxes

Checkboxes with P1 size text

Checkboxes with P2 size text and tighter spacing

Textarea

Example of additional text beneath the textarea.

Example HTML