## Consul Web UI Style Guide

This is style guide for the Consul Web UI. When possible, it's best to follow this guide modifying the UI.

Some reasoning behind choices:

- Colors. Bright colors were chosen to allow for easy "scanning" of information.
- Icons will accompany most "actions", those are still pending
- Layout. The layout will be primarily 2 columns with the header at the top for navigation.

## Header

Services
Nodes
Key/Value
5 checks failing
us-east-1

## Colors

## Headings

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

Paragraph text. Consul makes it simple for services to register themselves and to discover other services via a DNS or HTTP interface. Register external services such as SaaS providers as well.

Small note text, if you need to include anything extra.

## Panels

Panels are for displaying data in the 2nd (right) column. They show extensive information and are flexible, but also use the highlight colors to allow for scanning.

### HTTP Server Accessible httpAccess critical

Sends an HTTP request to the HTTP routers /health endpoint. This should return 200 OK. If it returns anything else, the headers are dumped.

##### OUTPUT

    HTTP/1.1 503 SERVICE UNAVAILABLE
    Content-Type: text/html; charset=utf-8
    Date: Sun, 20 Apr 2014 15:40:03 GMT
    Server: gunicorn/0.17.4
    Content-Length: 0
    Connection: keep-alive

### Mux Accessible muxAccess passing

Makes a TCP connection to the muxer, dumps a relevant error if the connection fails.

##### OUTPUT

    Socket connect Successful

### Router Accessible routerAccess warning

Makes a TCP connection to the router, dumps a relevant error if the connection fails.

##### OUTPUT

    Socket connect timed out

## Loaders

Pending...

## Icons

Pending...

## Buttons

Default button Primary button Success button Warning button Danger button

## Lists

Lists are used primarily for the first (left) column view. They are designed as a quick summary, with links embedded for the top-level item as well as sub-items ( such as a list of nodes, as below).

#### vagrant-cloud-http vagrant-cloud-http
5 passing

- node-10-0-109
- node-10-0-109
- node-10-0-109
- node-10-0-109

#### vagrant-cloud-http vagrant-cloud-http
5 passing

- node-10-0-109
- node-10-0-109
- node-10-0-109
- node-10-0-109

#### vagrant-cloud-http vagrant-cloud-http
1 failing

- node-10-0-109
- node-10-0-109
- node-10-0-109
- node-10-0-109

#### vagrant-cloud-http vagrant-cloud-http
2 failing

- node-10-0-109
- node-10-0-109
- node-10-0-109
- node-10-0-109