Chainlink UI Style Guide

01 Colors

Darkest Purple

#160432
Use:
-Page Background

Command Tab

#25114d

Data Tab

#36036e
Use:
-In Page Tabs
-Darker Offset

Marketing Tab

#5600c4
Use:
-Most UI Elements
-Highlight Color

Attribution Tab

#651fff
Use:
-Highlight Boxes

Performance Tab

#7c4dff

Light Grey

#ebebeb

Dark Grey

#b0b0b0
Use:
-Table Rows
-Gray Text

02 Typography

Heading 1 - Raleway, 42 Pt, Title Case

Heading 2 - Raleway, 30 pt

Heading 3 - Open Sans, 20 pt

Body Text- Opens Sans, 14 px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed urna sed neque blandit gravida vitae bibendum dictum, nisl nisi.

Bold Semi Bold link Gray Text
Formatting
Dates: Month/Day/Year (1/9/17)
Headings: Title Case (Each Word Capitalized)
Time: #:## AM/PM (3:43 PM)

Checklist



Radio Buttons



Ordered List

  1. Item
  2. Item
  3. Item

03 Buttons

Flat (Used WIthin Overlays)

BUTTON TEXT BUTTON HOVER TEXT BUTTON CLICK TEXT BUTTON DISABLED TEXT

Neutral Button (Purple Text)




Neutral Button (Black Text)




Color Button







Inactive Text Expand Button

Active Text Expand Button

Message text.

04 Icons

Featured Icon

Font Awesome Size: 45 pt
Uses:
-Icons within Headline 2s

Standard Icon

Size: 20 px x 20 px
Uses:
-Tables

05 Text Fields

06 Dropdown Fields

Inactive Dropdown Field with No Default Selection



Active Dropdown Field


Active Dropdown Field (Color)


Dropdown for Tables




Inactive Dropdown Field with No Default Selection

Active Dropdown Field with Selection (Color)





07 Box Styles

Normal Shadow Box

shadow effect 1 shadow effect 2
opacity: 19% opacity: 20%
distance: 6 px distance: 6 px
size: 20 px size: 17 px

Weak Shadow Box

shadow effect 1 shadow effect 2
opacity: 16% opacity: 26%
distance: 2 px distance: 2 px
size: 10 px size: 5 px

Strong Shadow Box

shadow effect 1 shadow effect 2
opacity: 19% opacity: 24%
distance: 17 px distance: 12 px
size: 50 px size: 15 px

Color Overlay Box with Shadow

White Overlay Box with Border and Shadow

Object Borders

Color: #5600c4

Width: 3 px

Corner Radius: 10 px

Options Dropdown

Statistics List Box

  • Section Label
  • Section Item: #
  • Section Label 2
  • Section Item: #
  • Section Item 2: #
Card With Shadow
IMPORT
Category

Tags:

sample tag, sample tag 2

Card With Strong Shadow
IMPORT
Category

Tags:

sample tag, sample tag 2

Card With Option Icon
IMPORT
Category

Tags:

sample tag, sample tag 2


8 UI Elements




Switch
(Active, Inactive)

Search Box

09 Date Picker

Standard Inactive Date Picker

Standard Active Date Picker (Selecting)

Standard Active Date Picker (Selecting) (Color)

10 Time Picker

Standard Inactive Time Picker

Standard Active Time Picker (Selected)

Standard Active Time Picker (Selected) (color)

11 Tool Tips

Hover Text Box (Color)


Hover Text Box (Gray)

12 Popovers

Hover Text Box (Color)

Hover Text Box (Gray)

13 Progress Trackers

Arrow Stepper (Color)

Arrow Stepper (Gray)



Point Stepper (Color)

Point Stepper (Gray)



Frame Page Scroll

Table Page Scroll



Material Design Tabs with Icons

I'm in Section 1.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Howdy, I'm in Section 2.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

Howdy, I'm in Section 3.

Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Material Design Tabs with Icons

I'm in Section 1.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Howdy, I'm in Section 2.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

Howdy, I'm in Section 3.

Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Builder Tab Style

Howdy, I'm in Section 1.

Howdy, I'm in Section 2.

Howdy, I'm in Section 3.




Slider






14 Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

15 Shadow Effect Depth Levels

  • Flat
  • Weak
  • Boxes
    (Standard)
  • Raised 1
  • Raised 2
  • Raised 3

16 Spacing Guidelines

70 px (4.4 em, base 16 px) between Headline 1 and Page Content

70 px (4.4 em, base 16 px) between Page Sections (Sections with Headline 2 or Headline 3)

35 px (2.2 em, base 16 px) between Headline 2 or Headline 3 and Section Content

35 px (2.2 em, base 16 px) between Elements in a Sectiion (ie. Text Fields)

17 Highlight/Statistics Boxes

0
Emails Sent Today
Progress
x%
0
Emails Sent Today
0
Emails Sent Today
View Email Reports



0
Emails Sent Today
View Email Reports
0
Segments Included
View Segments



#
Statistics Text
Text
#
Statistics Box with Two
Lines of Text
Text


Square Tabs with Icons

List and Card Format Toggle


18 Tables

Table With Filters Off



Table With Filters On, Scroll Bars



19 Drag and Drop Filter

Filter Header

Instructions or description of filter fields.

Box Header 1

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Box Header 2

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5