UI Pattern Library

Adstream

Wayfinder

Wayfinder

Grid system

The Adstream grid system is made up of 12 columns. Designs are to be made using 1280px width to ensure optimal viewing for the majority of our user base in agency/studio environments.

Each column within the grid has a gutter width of 15px which adds up to 30px between columns. On either side of the main content this 15px gutter still applies. The columns are fluid to allow for responsive viewing but the gutter woidhts remain consistent.

.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-2-12
.col-2-12
.col-2-12
.col-2-12
.col-2-12
.col-2-12
.col-3-12
.col-3-12
.col-3-12
.col-3-12
.col-4-12
.col-4-12
.col-4-12
.col-5-12
.col-7-12
.col-6-12
.col-6-12
.col-7-12
.col-5-12
.col-8-12
.col-4-12
.col-9-12
.col-3-12
.col-10-12
.col-2-12
.col-11-12
.col-1-12
.col-12-12

Typography

Rem base 16px

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 ? ! . , - + / * =

Effra Light – .font-weight-light

h1Deliver ads with Adstream

h2Deliver ads with Adstream

h3Deliver ads with Adstream

h4Deliver ads with Adstream

h5Deliver ads with Adstream

pDeliver ads with Adstream

p.captionDeliver ads with Adstream

p.smalltextDeliver ads with Adstream

Effra Regular (default)

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Effra Medium – .font-weight-medium

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Effra Bold – .font-weight-bold

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Deliver ads with Adstream

Colours

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum massa vel dui dignissim suscipit. Maecenas volutpat imperdiet felis vel vulputate.

Primary

These swatches are to be used for headlines and primary actions only. Rules - use complimentary colours where possible and use alternative dark and light primary and secondary colours to create contrast and focus.

#ffffff

White

#00703b

Fun Green

#0899c6

Pacific Blue

#3e7bbf

Adstream Blue

#73459b

Affair

#b02441

Deep Carmine

#eb6908

Clementine

#e8b32a

Fuel Yellow

#000000

Black
Secondary

These swatches are only used to support primary swatches for components such as sub-headings.

#78ba7d

De York

#46ac4e

Chateau Green

#1495ee

Dodger

#008cba

Ad_s Blue

#2c61ac

Azure

#e67d84

Light Coral

#d02630

Engine Red

#e7c673

Honey

#e98941

Biscuit
Shades of grey

#f9f9f9

Alabaster

#cecece

Celeste

#a5a7aa

Dark Grey

#81858a

Smoke

#393e42

Ship

#202326

Night

#222222

Darkside
Uncategorised

#e1e1e1

Light Grey

#d3e6fb

Light Blue

#2c61ac

Adstream :hover

#3C4147

Dark2

#33383D

Dark1

#1a1a1a

Dark3
Behaviour
Light UI vs Dark UI

The colours in the Primary and Secondary pallettes offer high contrast against both types of backgrounds and in most cases don't need to be swapped out. However, colours in the Shades of Grey pallette may have to be swapped out when a component or element changes from being placed against a light or dark UI background.

You can follow this table as a rule of thumb when converting from the Light UI to Dark UI and vice-versa.

Icons

Complete set of icons to be used across all Adstream products. These icons come in two visual styles, filled and outlined. In any one component, these two styles should not be mixed. Icons in this set should be made to be clear in their objective as to be understood as standalone elements. Icons should always be drawn head-on for maximum clarity with no 3D elements.

Outlines
Fills
Only available as outlines
Different sizes (64, 56, 48, 40, 32, 24, 18, 16px)
Avatars (64, 56, 48, 40, 32, 24, 18, 16px)

Transition speeds

Duration system

In order to keep consistency while giving us flexibility, all transitions used throughout the UI components are based on these key values.

The aim is to make the interface feel responsive to the user, while providing visual cues that improve the overall experience.

It's important to use transition durations that respond quickly to the user input and make the UI feel as snappy as possible.

Duration options
$base-duration: 100ms
$duration-instantly: 0ms $duration-immediately: 50ms $duration-quickly: 100ms $duration-promptly: 300ms $duration-slowly: 500ms

Animation classes

xxxx.

.wayf-animation_spin
.wayf-animation_fade
.wayf-animation_slide
.wayf-animation_scale

Buttons

These buttons are used for the primary action within the UI where applicable. This may be to start a project, upload, share and save. Filled or outline styles can be used but :hover and :active have fixed styles. Outlined buttons have a style of 2px solid #hex.

Small
xxxxx

xxxxx.

Large
xxxxx

xxxxx.

Small with icons
xxxxx

xxxxx.

Large with icons
xxxxx

xxxxx.

Icon only
xxxxx

xxxxx.

Icon only - round
xxxxx

xxxxx.

Input fields

Forms play an important part of the Adstream platform, allowing us to collect essentail metadata for projects and assets. On actual forms no more than two fields should be displayed in a row to ensure understandability.

Text
Date
Number
Text Area
Dropdowns
Draggable - inset
Draggable - outset
Fieldsets

Legend

This is a description of what this fieldset contains.

Input toggles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum massa vel dui dignissim suscipit. Maecenas volutpat imperdiet felis vel vulputate.

Checkboxes
Radio buttons
Switches
Other

Range sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum massa vel dui dignissim suscipit. Maecenas volutpat imperdiet felis vel vulputate.

Single
Dual
Other

Menus

xxxx.

List only
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
With icons
  • Edit
  • Download
  • Lock
  • Share
  • Delete
With users
  • Name Surname
  • Name Surname
  • Name Surname
  • Name Surname
  • Name Surname
With subsections and scrollable
Regions
  • North America
  • Latin America
  • E-IMEA
  • Greater China
Countries
  • United States
  • United Kingdom
  • Brazil
  • Russia
  • India
  • China
  • South Africa
With checkboxes
With submenus
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
With nubbin
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Nubbin position


.wayf-nubbin--top
Behaviour and usage

Nubbins can be used to indicate where a menu – ie. a popover – came from.

Tables

First Name Last Name Phone Email Date of Birth
James Matman (713) 123-8965 jmatman@stewart.com 01/13/1979
Johnny Smith (713) 584-9614 jsmith@stewart.com 06/09/1971
Susan Johnson (713) 847-1124 sjohnson@stewart.com 08/25/1965
Tracy Richardson (713) 245-4821 trichard@stewart.com 03/13/1980

Accordions

Behaviour and semantics

The purpose of an accordion is to contain secondary, non-essential information that may be useful to the user in their journey.

Accordions are comprised of a visible area called a <summary> that triggers the expansion / collapsion of its contents. Semantically, any text element – ie. <h2>, <h3>, <h4>, etc. – can reside within a <summary>, although it should preferably be a <p>.

The default behaviour is that expanded accordions stay expanded when new ones are expanded, although there may be scenarios where only one accordion can be expanded at a time, usually due to vertical space constraints.

Chevron on the left

About us

Adstream connects the world’s marketing and advertising ecosystem. We started small in Australia in 2001, and are now the worlds leading ad workflow, management, and cross-media distribution provider, with 500 employees and offices in 30 countries worldwide.

We manage your media content two ways

First, through powerful applications and intuitive user interfaces that create elegant connections between people, systems, and destinations.

Second, through the dedicated staff supporting our services 24/7. We’ve turned troubleshooting into an art form. We know the exact requirements for media campaigns. Ultimately, we allow you to spend more time thinking creatively and acting competitively.

One global brand

We know you’re busy and that you’d rather spend time doing what you do best: being strategic. We at Adstream have built a simple, cloud based content collaboration and distribution platform accessible anytime from anywhere.

24/7 people power

The Adstream network spans 42 offices in 30 countries and we speak 44 languages. We know the industry and how best to connect people. And by supporting locally, we enable brands and the agencies they work with to become more global.

Chevron on the right

About us

Adstream connects the world’s marketing and advertising ecosystem. We started small in Australia in 2001, and are now the worlds leading ad workflow, management, and cross-media distribution provider, with 500 employees and offices in 30 countries worldwide.

We manage your media content two ways

First, through powerful applications and intuitive user interfaces that create elegant connections between people, systems, and destinations.

Second, through the dedicated staff supporting our services 24/7. We’ve turned troubleshooting into an art form. We know the exact requirements for media campaigns. Ultimately, we allow you to spend more time thinking creatively and acting competitively.

One global brand

We know you’re busy and that you’d rather spend time doing what you do best: being strategic. We at Adstream have built a simple, cloud based content collaboration and distribution platform accessible anytime from anywhere.

24/7 people power

The Adstream network spans 42 offices in 30 countries and we speak 44 languages. We know the industry and how best to connect people. And by supporting locally, we enable brands and the agencies they work with to become more global.

Pills

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum massa vel dui dignissim suscipit. Maecenas volutpat imperdiet felis vel vulputate.

Name only
Megan Liu
Pierre Marie
Norberta das Neves
Marta Henke
Leta Nguyen
Helena Nickel
Mikal van Griensven
Etelvina Dias
Carlindo Farias
Felix Lewis
With avatars
Megan Liu
Pierre Marie
Norberta das Neves
Marta Henke
Leta Nguyen
Helena Nickel
Mikal van Griensven
Etelvina Dias
Carlindo Farias
Felix Lewis
Removable
Megan Liu
Pierre Marie
Norberta das Neves
Marta Henke
Leta Nguyen
Helena Nickel
Mikal van Griensven
Etelvina Dias
Carlindo Farias
Felix Lewis

Toasts

When a user performs an action we are required to give them feedback on their action. This happens in the form of a bar that appears at the bottom left of the window. Only one bar can appear at any given time. Alert bars typically contain a message and a close icon although where applicable a button to restore/undo an action can also appear. Bars come in 3 colours indicating completed actions (dark grey), system errors (red) and system warnings (yellow).

Default

2 files uploaded.


Error

Error - File could not be saved. Please try again.


Warning

Warning - You are reaching your maximum file storage limit.


With action

4 files have been deleted.Restore

Try it out

Toast type

Tabs

xcxcxcxcxcxcx.

Left aligned
  • Tab Item 1
  • Tab Item 2
  • Tab Item 3
Centered
  • Tab Item 1
  • Tab Item 2
  • Tab Item 3
Spread out
  • Tab Item 1
  • Tab Item 2
  • Tab Item 3

Zero states

When the user has no items to review, filter or action then we show them a blank slate to help them instigate the key function of that part of the platform. The blank slate is made up of an 64x64px icon from the system icon set, a h3 heading (Effra light 21px #000000), a primary action button and if required, some additional paragraph copy (Effra regular 14px #000000) to explain features or direct to more helpful.

Looks like there are no files here yet.

Don't know how to add files? Learn how.

Loading states

When the user has performed an action that requires some processing time, The feedback given is a #ffffff overlay with an opacity of 10%. A pre-loader and message also appear to indicate something is happening. The same pre-loader can be used for loading more items where infinite scroll is used.

Loading... please wait a moment.

We're going as fast as we can.

Loading more...

Avatars

xxxxxxxx.

User blocks - Horizontal
User blocks - Vertical
Selectable avatars
Behaviour
xxxxxx

xxxxxx.

xxxxxx

xxxxxx.

xxxxxx

xxxxxx.

xxxxxx

xxxxxx.

Progress bars

When the user has performed an action that requires some processing time, The feedback given is a #ffffff overlay with an opacity of 10%. A pre-loader and message also appear to indicate something is happening. The same pre-loader can be used for loading more items where infinite scroll is used.

Horizontal
Radial

Modals

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum massa vel dui dignissim suscipit. Maecenas volutpat imperdiet felis vel vulputate.

Comments

Users can add comments to files in projects and these comments travel with the files once it is moved to the library. The comments are viewable from within the files/assets details pages as to keep the audit trail correct and easy to find.

Today

Mike Dallas

8:10am

YES! Let’s keep talking about this! I have so much to share!

Hey Sally, you still there?

Mike Dallas

8:13am

How do you feel about cooking for one? Is it as fun as cooking for a group of people?

James Callan

8:25am

Hey Mike, did you get a chance to look at that report?

Sally Andrews

8:27am

It is often frustrating to attempt to plan meals that are designed for one. Despite this fact, we are seeing more and more recipe books and Internet websites that are dedicated to the act of cooking for one.

Hope that clarifies.

James Callan

8:32am

Uh... yes, it does.

Behaviour
Sorting and new comments

Comment lists are sorted top to bottom, with the most recent comment at the bottom of the stack. When new comments are added, the comment must be transitioned in.

Consecutive comments

If a user submits consecutive comments, ie within 30 seconds or less from his previous comment, the new comment gets appended to the previous comment which means no username, timestamp, user avatar or nubbin is needed.

Available actions

As a user hovers over their own comment bubble, the timestamp shifts and displays the icon. Clicking this icon exposes a context menu with the following options.

  • Edit comment
  • Delete
Failure to submit

If a comment fails to be submitted due to the network connection or other circumstances, a toast can be used to display an error message with an appended action to 'retry'.

The message failed to send.Retry

Navigation

xxxx.

Type 1

These can also be used as scrollspies that follow the user as they scroll down the page.

Activity

xxxx.

Tooltips

xxxx.

Wizards

xxxx.

Downloads

xxxx.

This is a modal

This is a brief description of what this modal contains.