Colors

These are the colors used throughout our apps and websites. If a color that is not listed here appears in a design, simply pick the closes color.

Primary Colors

Orange is the main brand color and represents links and only the most important highlights. #FF641A is used widely to highlight things. Yellow can be used very sparingly.

$orange

#FF641A

$green

#28B47A

$blue

#33A5F6

$yellow

#FFAF1C

$red

#EC1A34

Shades Palette

Use shades to soften up the interface. Mainly used in separators and background colours for contrast.

$darkgray

#262626

$gray

#666666

$quartergray

#BFBFBF

$lightgray

#EBEBEB

$slightgray

#F5F5F5

$orangeshade

#F9F3F0

$greenshade

#F1F9F6

$lightgreenshade

#FAFFFD

Typography

Avalon paired with the OS system font is used throughout. This section is about the mobile app, much rather than the website. A supplemental guide for the website can be found here.

Headings

A quick brown 32pt/40pt Demi
A quick brown fox 24pt/27pt Demi
A quick brown foxs jumps 20pt/26pt Demi

Paragraphs

14pt is the default body font, while 15pt and 13pt serves to de- or emphsasize text.

A quick brown fox jumps 15pt/20pt Regular
A quick brown fox jumps on a 14pt/19pt Regular
A quick brown fox jumps on a lazy dog 13pt/18pt Regular

Label

A label is a header of a cell view and is used when multiple cells appear in one view.

Preferences
12pt/18pt Semibold

Grid

A simple grid is used to take out the guessing out of a few spacing decisions in the apps. It's not a very complete grid by any means but it helps.

1 of 1

A simple 1 of 1 grid is used that has a padding on each side of 16pt to give the content breathing room to the edge of the screen.

Icons

Every icon starts with the the prefix icon- followed by the name documented here. All icons come in SVG as well as in PNG. All icons are the same height here for simplicity's sake.


end-call

camera

bell

calendar

chevron-back

chevron-forward

close

cogwheel

credit-card

close-shape

edit

facebook

reverse

google-plus

heart-outline

heart

incoming-call

instagram

linkedin

minus

more

mute

outgoing-call

phone

play

plus-24

profile

reject-call

search

speaker

star

star-outline

switch

transcript

trend

camera-off

twitter

unavailable

video

Buttons

Call to actions are separated in large, medium and small and are being used based on the hierarchy and importance of the action.

CTA LARGE + CTA MEDIUM + CTA SMALL

OTHER

Input Fields

There is a pre-defined set of input fields that can be used when appropriate. It consists of a large cell, which is being used when cells are used for a menu, and default cells which are used in most cases.

DEFAULT PLACEHOLDER + FILLED

Inactive
Active

TITLE + VALUE PLACEHOLDER + FILLED

TitleValue
TitleValue

TOGGLE ON + OFF

Title
Title

LINK

Title

LARGE + LARGE WITH ICON

Preferences
Preferences

Avatars

We use both round and rectangular avatars. When an avatar is isolated in a profile or modal, it is round. If it is inside a layout of other avatars it is a rectangle to provide a better vertical rhythm.

Avatar Rectangular

Avatar Circle

Avatar Placeholder

Other

There is a pre-defined set of input fields that can be used when appropriate. It consists of a large cell, which is being used when cells are used for a menu, and default cells which are used in most cases.

PRICE INDICATOR Big

Price Indicator Small

Tag Pill

Status Indicator Offline

Status Indicator Offline

Tab Bars

Both the provider and consumer interface are made up of three tabs. Orange is active while grayed out indicate inactive.

Tab Bar Default

Category

There is an active and inactive category card depending on the availability of each category. Use them accordingly. The button used is a CTA small.

Category - Available

Category - Unavailable

Calls - Consumer

Upcoming calls feature the topic as well as time of call. In addition to that a "o o o" CTA small is added to supply with additional actions. Previous calls feature a call or schedule button.

Call Upcoming - Paid

CALL UPCOMING – FREE

CALL PREVIOUS – AVAILABLE

CALL PREVIOUS – UNAVAILABLE

Calls - Provider

Providers call cards are slightly different. In addition, there is a hero card that displays the next call in a more prominent way.

PROVIDER CALL UPCOMING HERO

PROVIDER CALL UPCOMING – FREE

PROVIDER CALL UPCOMING – PAID

PROVIDER CALL HISTORY – FREE

PROVIDER CALL HISTORY – PAID

Favorites

The same card is being used just as under calls but with different content. Name and subtitle paired with a call or schedule button, based on the availability of the user.

FAVOURITES – AVAILABLE

FAVOURITES – UNAVAILABLE

Availability

Availability blocks feature the start and end time as well as the appointments. Every 15 minutes adds 20pt in height, or every 60 minutes add 80pt in height. Minimum height is 55pt.

AVAILABILITY – 45 MINUTES

AVAILABILITY – 3 HOURS

Notifications

Availability blocks feature the start and end time as well as the appointments. Every 15 minutes adds 20pt in height, or every 60 minutes add 80pt in height. Minimum height is 55pt.

Notification – READ

Notification – Unread

Toolbar

Toolbars are used to prominently display actions that can be applied to an entity such as a conversation, call or similar. This is only used when the action should be highly visible.

Toolbar – 2+ Items

Toolbar – One Item

Time Stepper

Time steppers are used where a user has to define a time window. It is easier to use than an input field as it avoids user input with the keyboard. An alternative is a date wheel.

Stepper

Lists

We mainly use lists. It gives users more space and creates a clear vertical rhythm to browse content. Lists can exist in isolation or with a title. Grids can be used sparingly to change things up.

List with Title

Lists without Title

Modals

We have a set of modals that can be used when an information must be displayed or action must be taken. Use modals for small inputs or messages and not as replacement for whole screens.

No Action

No Action w/ Avatar

Single Action

Single Action w/ Avatar

Double Action

Double Action w/ Avatar

Spacings

We use a baseline of 8px and spacings increase in 8px increments from there. If there is a spacing that does not fit in to the scale, match it to the closest value. E.g. if you find 5px, make it 8px.

8PX

16PX

24PX

32PX

48PX