STYLE GUIDE

COLORS
Primary Palette
The primary palette is used in the logo, splash screen
background color, buttons and icons. They are the main
colors that represent the brand. VIRTUOSO
#065C84 #FECC46

The secondary palette is used in the Secondary Palette

headers, button text, body text and
arrow buttons.

#000000 #989798 #CCCBCA #3F75BA #FFFFFF

ICONOGRAPHY

The icons will be lined and unfilled.

The weight will be thin.

For the navigation bar, the icons are labeled to explain what it is. When the iconis selected it will be filled solid.

The icons are based off the iOS style guide. Only the navigation,
profile, star rating and search icons will be in the primary palette.
Everything else will be in secondary palette.

TYPOGRAPHY

The typeface used is SF Pro Display and SF Pro Text for a minimal look and reflective of the iOS style guide.
The only time the text is all caps is during the sign up process. The semi-bold weight is only used for alerts,
names and screen labels. Underlining will be used in titles for hierarchy purposes or to emphasize that the text
is a clickable link.

Large Title, SF Pro Display, Regular, 34pt, 41pt

Title 1, SF Pro Display, Regular, 28pt, 34pt
Title 2, SF Pro Display, Regular, 22pt, 28pt
Title 3, SF Pro Display, Regular, 20pt, 25pt
Headline, SF Pro Display, Semi-Bold, 17pt, 22pt
Body, SF Pro Text, Regular, 17pt, 22pt
Subhead, SF Pro Text, Regular, 15pt, 20pt

IMAGERY

The incoming call screen is The splash screen has an illustrative icon of a lightbulb. While the page
a shift of blue to yellow. It’s loads, the icon changes from 10% to 100% opacity.
based off of the iOS style guide.

Profile photos are cropped in circles to create

a softer and approachable appearance.

UI ELEMENTS AND STYLES

INPUT FIELD

When entering information, the text is a light grey. Once content is entered, the text becomes black.

Drop down menus for booking video BUTTONS

calls. Once the date is selected a
date, it becomes highlighted with a
blue background and shifts from grey
to black text.
For the sign up screen, the button The continue reading
is grey until the page is ready for buttons will be blue,
submission. When the user hovers once it’s clicked it will
over or clicks it, it becomes yellow be faded to 50% opacity.
and bolded.

In the topics selection

screen, the selection will
be grey at #999999. Once
selections are made, it will
become blue.

GRID For the user selection screen, there’s

two varieties of grey to create contrast
The mobile layout follows a 9 column grid. between the novice and the expert.
Once selected, it becomes yellow.

All buttons are yellow at 100% opacity.

ACCESIBILITY

Virtuoso will be accessible for everyone above the age of 18.

TONE OF VOICE

Virtuoso’s tone is casual and human. It´s familar and straightforward. The focus is to create an easy to use
platform that where users will find the solutions to their life’s problems.

DOS & DON’TS

No black and white photos Text cannot be placed on images

X
Ruth Biel
Nutritionist

X
Only use colors in the palette

#065C84 #FECC46 #000000 #989798 #CCCBCA #3F75BA #FFFFFF