H1 – a Hero Row Has a Minimum Height of 40 vh

A hero row H1 doesn’t always have to be backed up by a subtitle, but it can help the marketing message. Hero Row – Vertical Align: Middle; Background Colour: Gradient Verple Dark to Verple at 135°. Block name: Page Hero

Primary CTA Secondary CTA

H2 – Heading Element Image Right

The image holds the 64px margin on this row. This row would look funny with a top aligned text box

Paragraph Text: A marketing row with an image needs the text area to be flex aligned middle. A marketing row with an image needs the text area to be flex aligned middle. A marketing row with an image needs the text area to be flex aligned middle. A marketing row with an image needs the text area to be flex aligned middle.

A marketing row with an image needs the text area to be flex aligned middle.

H2 – Heading Element Image Left

The image holds the 64px margin on this row. This row would look funny with a top aligned text box

Paragraph Text: A marketing row with an image needs the text area to be flex aligned middle. A marketing row with an image needs the text area to be flex aligned middle. A marketing row with an image needs the text area to be flex aligned middle. A marketing row with an image needs the text area to be flex aligned middle.

A marketing row with an image needs the text area to be flex aligned middle.

Tackle tasks like no other

Keep all aspects of your work in Kanban Boards containing lists and cards, which you can move around easily to show progress or store in their rightful place so you can stay on top of managing what matters. 

Build up to three Workspaces for free, containing as many Kanban Boards as you need, containing a total of 250 cards. For an unlimited Workspace experience, contact us to upgrade. 

Tackle tasks like no other

Keep all aspects of your work in Kanban Boards containing lists and cards, which you can move around easily to show progress or store in their rightful place so you can stay on top of managing what matters. 

Build up to three Workspaces for free, containing as many Kanban Boards as you need, containing a total of 250 cards. For an unlimited Workspace experience, contact us to upgrade. 

Tackle tasks like no other

Keep all aspects of your work in Kanban Boards containing lists and cards, which you can move around easily to show progress or store in their rightful place so you can stay on top of managing what matters. 

Build up to three Workspaces for free, containing as many Kanban Boards as you need, containing a total of 250 cards. For an unlimited Workspace experience, contact us to upgrade. 

Verto has fully configurable workflow so that workspaces and projects can move through defined stages and approvals. The workflows can be set up in multiple ways by different teams and departments across the organisation according to project size and complexity. They can be customised to incorporate approvals and a complete audit trail.

  • Verto boasts powerful reporting at multiple levels
  • Export in different formats including Word, Excel, PDF, CSV, TIFF etc
  • All reports are run in real-time, so only the latest information is presented
  • Use ‘tags and filters’ to ‘slice and dice’ the data as much as required
  • And use our data extracts for tools such as PowerBI, Tableau and QlikView

Verto’s benefits realisation feature records quantitative and qualitative benefits which are then tracked and reported against at multiple levels, via the dashboard and comprehensive reports.

Financial management allows users to track cost profiles over time, providing full transparency on project spend. Financial integrations with systems such as SAP, Oracle, Pegasus, Agresso,

  • Manage and track scheduled and planned resources including heatmap views
  • See where each resource is planned and current utilisation percentages
  • Actively monitor resource allocation and capacity for any given day
  • Assign rate cards to resource roles and specific time periods
  • Full Timesheet management and approvals down to task level
  • Link project outputs to performance outcomes and KPIs across the organisation
  • Create performance groups and objectives to ease the management of multiple KPIs
  • Compare performance against other departments, services and organisations and track progress
  • Produce custom reports, plans and graphs tailored to suit each organisation’s needs

This Row Has Vertical Align Middle

The image holds the 64px margin on this row. This row would look funny with a top aligned text box

Now we have an actual paragraph of copy about the thing we just introduced and supported with a subheading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Colour

Typeface

#1A202C

Verple Dark

#251274

Verto Blue Dark

#00699B

Hero Gradient

Verple Dark to Verple at 135°

Only on top row

Verple

#31189B

Verto Blue

#008CCf

Tomato

#F04E32

Orange

#FBAD18

Green

#7AB867

Table Borders

#87858D

Verple Light

#5A46AF

Verto Blue Light

#66BAE2

Tomato Light

#f3715b

Orange Light

#fdce74

Green Light

#AFD4A4

Verple Washed

#ADA3D7

Verto Blue Washed

#99D1EC

Tomato Washed

#FCDCD6

Orange Washed

#FDDEA3

Green Washed

#CAE3C2

Verto Blue Faded

#C2E3F4

Verto Blue Hint

#E7F4FB

Row Background Colour

#F7FAFC

Image Files

In order to take advantage of modern display technology, all images for the website must be produced to somewhere near enough double the pixel resolution of the maximum bounding container the image will be placed into.

Display Size Can Be the Following:

  • Full Width Background (Row): 4k resolution minimum
  • Full Width Background (Full Width Column): Content container is 1400px; minimum width for image is 2800px
  • 1/2 Width (Two Column Row): Default multi purpose image size minimum width of 1000px
  • 1/3 Width (Three Column Row) Default multi-purpose 1/3 column image size minimum width of 800px
  • 1/4 Width (Four Column Row) Default multi-purpose 1/4 column image size minimum width of 800px
  • 1/5 Width (Five Column Row) Default multi-purpose 1/5 column image size minimum width of 800px

Note: Minimum resolution to accommodate retina display is 800px. This is to accommodate mobile column collapse and doubling of vertical mobile display width of 400px.

This Row Has a 4K Background Image

Width is minimum, height is constrained on content requirement

Note: this row has exaugurated padding to illustrate example.

This Column Has a Background Image at 20:13

Image Ratios:

In order to maintain consistent image production, only the following ratios for inner column content are approved:

20:13

1:1

20:13

Note: 3 column rows to have 20:13 images for mobile collapse.

1:1

1:1

20:13

Note: 4 column rows to have 20:13 images for mobile collapse.

1:1

1:1

1:1

20:13

Note: Dynamic content carousel will have artwork produced at 1:1

There is a rare use case for images of this size, and will mostly be within dynamic content lists and carousels (blogs, events, calendar items)

1:1

1:1

1:1

1:1

Artwork Files

To ensure consistent row and column padding/margin, it’s necessary to create artwork files that extend to the edges of the artboard both at the top and bottom. For instance, consider the provided example of a 20:13 ratio, with an image size of 1000px x 650px. This extension guarantees that the desired spacing remains uniform across rows and columns while maintaining the intended visual proportions.

Artwork Style

Our illustration style blends the fundamental design components of the Verto application’s user interface (UI) with the inclusion of Verto “people,” used selectively to portray individuals engaging with the UI elements in a supportive manner. This approach is particularly employed when highlighting the advantages of Verto, as demonstrated in the following example: illustrating a scenario where a “User is getting things done.”

It’s important to note that the primary focus of these illustrations is on simplifying the Verto Kanban Cards’ user interface. The Verto person assumes a supportive role in the illustration, enhancing the reader’s ability to connect with the visual content and envision themselves as the user.

Colour Use in Images

Images produced need to have relatable colour connections throughout to connect with the colour palette.

Headings

Font: Avenir Medium
Sizing Unit: em

H1 – This Tag is Used Once on Page and Only in Page Hero Rows

Size: 2.5 rem
Line Height: 1.2 em
Margin Bottom: 0.5em
Important info: All Headings Must Use Title Case Conversion Output From Https://convertcase.net/title-case-converter/

H2 -This Tag is Used to Introduce New Topics on the Page. This May Be Used More Than Once Per Page.

Size: 2 rem
Line Height: 1.2 em
Margin Bottom: 0.5em
Important info: All Headings Must Use Title Case Conversion Output From Https://convertcase.net/title-case-converter/

H3 – This Tag is Used to Support H2 Tags on Page but Only When Relating to Subjects of the H2. This Tag is Rarely Used Outside of Blog Posts.

Size: 1.4 rem
Line Height: 1.2 em
Margin Bottom: 0.5em
Important info: All Headings Must Use Title Case Conversion Output From Https://convertcase.net/title-case-converter/

H4 – Unused

Size: 1.3 rem
Line Height: 1.2 em
Margin Bottom: 0.5em

H5 – Unused

Size: 20 px
Line Height: 1.2 em
Margin Bottom: 0.5em

H6 – Unused

Size 18 px
Line Height: 1.2 em
Margin Bottom: 0.5em

Subtitle

Font: Lato
Size: 1.3 rem
Line Height: 1.4 em
Margin Bottom: 2em (when followed by another text element)

This is a subtitle. A subtitle will go directly below an H1 or H2 tag, but not an H3 or smaller tag.

Paragraph

Font: Lato
Size: 16px, 1 rem
Line Height: 1.6 em
Margin Bottom: 2em (when followed by another text element)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Bringing Heading, Subheading, and Paragraph Text Together

This is an Awesome Heading Element Telling the World About All the Cool Stuff We Do! (H1)

We have to back this up with some words! But let’s not make it too long or it will take away from the key messaging.

Now we have an actual paragraph of copy about the thing we just introduced and supported with a subheading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Another Short Snappy Example

We have to back this up with some words!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is an H2 Heading Element

We have to back this up with some words!

Now we have an actual paragraph of copy about the thing we just introduced and supported with a subheading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Rows (H2)

All content to be placed into rows. How content is nested within the row depends on the design and marketing needs. These variations are explored later.

Width: Full Width
Content Container Max-Width: 1400px
Padding: All Rows default top and bottom padding to be 64px . This value is a minimum. If the Row has Flex align and justify centre an element may be centred for design reasons. This will mostly apply to Hero and title rows on a page.

Content container, and container padding illustrated in this row with by the red border

Row Columns (H2)

Columns separate rows. A maximum of 5 columns may be used inside a row.
Column gutter: 1.5rem default for all columns illustrated by distance between the two columns of this row

Column2 – This row has vertical flex of centre

Mobile Break Points

Less than 768 px = Mobile
Less than 1024 px = Tablet
Greater than 1024 = Desktop

  • There are three breakpoints baked into the site
  • These break points affect how columns collapse
  • Collapse order can be reversed, which is useful for image first rows
  • Columns below are labelled with their individual breakpoint, as quantity of columns will increase break sensitivity

R1 Column – Less than 768 px

R1 Column2 – Less than 768 px

R2 Column – Less than 768 px

R2 Column2 – Less than 768 px

R2 Column3 – Less than 768 px

R3 Column – Less than 768 px

R3 Column2 – Less than 768 px

R3 Column3 – Less than 768 px

R3 Column4 – Less than 768 px

R4 Column – Less than 1024

R4 Column2 – Less than 1024

R4 Column3 – Less than 1024

R4 Column4 – Less than 1024

R4 Column5 – Less than 1024

Row 1 Considerations

Decide which column needs to be first on mobile collapse if content is being used in mobile. Information in R1 will generally work very well in Tablet – Desktop in any orientation (landscape portrait)

Row 2 Considerations

Consider the flex of the content and use dynamic font sizing (s, m, l, xl) inside these columns to help with display resolution scaling.

Row 3 Considerations

As this row shares the same breakpoints, consider the content that would be required to be placed inside 4 columns and how it will scale visually from tablet to desktop.

Row 4 Considerations

This row collapses entirely at < 1024 px. Consider duplicate content inside two, two-column rows to have smoother transitions to mobile. This does not apply to dynamic content such as posts / gallery carousels.

Parent and Child Row Use Cases and Examples (H2)

100% Height Internal Columns (H3)

When marketing copy needs to address points that may cross two columns, but also requires a heading (H2), the initial content row will have two rows nested within in it.

It can become nessessary to set internal columns to 100% when columns may share background colours as if they are not set to 100% then they look wrong. This 100% column height rule does not apply to a row which experiences a mobile break points.

Due to the default row padding of 64px, the lower padding of the initial row must be removed to ensure smooth content padding between the container row.

Content in column container is limited, but container matches all in row. Here the top. Bottom row padding has been removed to have a smooth 64px between each row element

Parent and Child Rows (H2) Row 1 Column 1

Dark Theme Multiple Row Example (H3)

Row 2 Column 1 – When using a coloured, gradient, or image background on a row. Nesting Rows and Columns is nessessary to maintain uniform background consistency. This allows us to segment like marketing information or relative content together visually.

Row 2 Column 2 – child rows need to have default padding value of 32px to match the column gutter. This allows nested rows to collapse on mobile with accurate spacing.

Row 2 has top padding of 64px this works for the heading row. Row 3 has top padding of 32px to match column gutter. The parent row has the default padding value of 64px

Row 3 Column 1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Row 3 Column 2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lists & Call to Actions

Lists

There are two types of list on the website:

  • Affirmative checklists: Affirmative checklists are used to validate the marketing message and showcase benefit or solution oriented copy.
  • Menu lists: Menu lists use the UI familiar chevron to indicate a destination. These have a text decoration of underline to denote a destination.

Example: Affirmative Checklist

Non-linking Lists

  • Affirmative marketing message
  • A very good example of solution oriented marketing
  • Benefit driven affirmation to the UX

Example: Menu List

Linking Lists

icon-align: top
Icon-color: #31189B
line-width: 2px
icon height / width: 1em (variable icon size to match font size
font-size: 1em (paragraph)
horizontal icon / label spacing: 10px
list container padding-bottom: 32px (medium)

List Considerations

Lists can be split into three columns. Items will be in order across the top row, starting at item 4 on the second row. Keep multi column list content short.

There Are Several Types Links on the Website

Theses all accomplish very different things, and are linked to destination / information hierarchy intentions within a page. All pages have different functions & purposes which is why there needs to be this distinction.

  • Primary CTA
  • Secondary CTA
  • Tertiary CTA
  • Internal Link

Primary CTA

The Primary CTA is the main focus and ultimate goal of a page. This should be the most prominent button, with the highest contrast value on the page.

Secondary CTA

A Secondary CTA might be required to encourage users that are not “ready” for the Primary CTA to explore the site further. A secondary CTA when near a Primary CTA must always have less of a visual weight and dominance. If it is on it’s own on part of a page not near the Primary CTA, the Secondary CTA can share the design elements of the Primary CTA.

Tertiary CTA

The Tertiary CTA will always be in relation to informational marketing elements. This will never be an outlined, solid button as it focuses to move users within subject specific content. This is not a sales, contact, and closing CTA but will lead to more of that type.

Internal Link

The primary driver for internal links will be SEO, these will be text based in paragraph links and are required to create the internal structure which supports good SEO.

Primary CTA

These call to actions variations should be few and far between on a page. They must have the HIGHEST contrast value in an light or dark element to show importance to the user. A hard limit on their use is not possible because long form content articles may need to have them spaced across the length of the content based on analytics data. Their use on page will be responsive to user behaviour and heat maps. A Primary CTA will always get a user into the APP first.

  • Pricing page
  • Book a demo
  • Contact sales

Light Theme

color: #FFFFFF
background-color: #31189B
border: 1px solid #31189B
border-radius: 6px
Padding: 0.4em 1em
Margin-top: 32px (all buttons)
Line-height: 1.6

Hover
color: #31189B
background-color: #FFFFFF
border: 1px solid #31189B

Hover: All

All buttons have a scale and box shadow transformation.

transform: scale(1.05)
box-shadow: -1px 9px 15px -4px rgba(0,0,0,0.30)
-webkit-box-shadow: -1px 9px 7px -4px rgba(0,0,0,0.30)
-moz-box-shadow: -1px 9px 15px -4px rgba(0,0,0,0.30)
Curser: pointer
transition: all 0.2s ease

Dark Theme

color: #31189B
background-color: #FFFFF
border: 1px solid #FFFFFF
border-radius: 6px

Hover
color: #FFFFFF
background-color: #7F3B9F
border: 1px solid #FFFFFF

Secondary CTA

Secondary CTAs are used to re-engage, or attract users in the “unsure” phase of the information sales cycle. Mostly these are there to direct users to additional information and not a sales page, but the secondary CTAs will be a major part of the sales cycle. A secondary CTA can sit directly next to a Primary CTA if Analytics drive us to determine the users require more sales cycle options. Destinations can include:

  • Pricing page
  • Book a demo
  • Contact sales

Light Theme

colour: #31189B
background-colour: #FFFFFF
border: 1px solid #31189B
border-radius: 6px
Padding: 0.4em 1em
Line-height: 1.6

Hover
colour: #FFFFFF
background-colour: #7F3B9F
border: 1px solid #7F3B9F

Dark Theme

colour: #FFFFFF
background-colour: #1A202C
border: 1px solid #FFFFFF
border-radius: 6px
Padding: 0.4em 1em
Line-height: 1.6

Hover
colour: #1A202C
background-colour: #FFFFFF
border: 1px solid #FFFFFF

Tertiary CTA

Tertiary CTAs generally live next to Secondary CTAs , information about a feature, role profile, use case, or any other benefit driven marketing language. The chevron indications we are going somewhere, and relates to the menu chevrons. a:hover text-decoration: underline (note: commit css to site if accepted, its on page script only)

Light Theme

left: 3px
margin-top: -10px
colour: #31189B
Line-height: 1.6
Curser: pointer

The left / and margin adjustments allow button block with manual Aria label / icon management Tertiary CTA is a modified button element on .tertiary-cta. This maintains the 32 px spacing with preceding elements.

Dark Theme

left: 3px
margin-top: -10px
colour: #FFFFFF
Line-height: 1.6
Curser: pointer

All Three CTAs Coming Together

The hierarchy is clear from most important to least important customer destination.

Dark Theme

All Three CTAs Coming Together

Master CTA Buttons

All CTA Buttons and their agreed text and linking are below in Light and Dark themes. All Patterns are put into page with the naming under each button.

button trial first light

button trial second light

button trial third light

button demo first light

button demo second light

button demo third light

button meeting first light

button meeting second dark

button meeting third light

button 30-day first light

button 30-day second light

button 30-day third light

button trial first dark

button trial second dark

button trial third dark

button demo first dark

button demo second dark

button demo third dark

button meeting second light

button meeting third dark

button 30-day first dark

button 30-day second dark

button 30-day third dark

Accordions Help the Story Along

In order to help support better scanning and user engagement with a page. We use tabs and accordions to reduce doom scrolling.

Accordions

Accordions are generally not used by themselves within page but next to a graphic and used to expound the benefit driven marketing language in a way that reinforces the visual message sitting next to it.

General considerations

Top item always in active state on load
Parent row top align
Artwork to be to exported at edges with no bleed (unless nessessary in the case of a bottom drop shadow requiring the buffer

Verto has fully configurable workflow so that workspaces and projects can move through defined stages and approvals. The workflows can be set up in multiple ways by different teams and departments across the organisation according to project size and complexity. They can be customised to incorporate approvals and a complete audit trail.

  • Verto boasts powerful reporting at multiple levels
  • Export in different formats including Word, Excel, PDF, CSV, TIFF etc
  • All reports are run in real-time, so only the latest information is presented
  • Use ‘tags and filters’ to ‘slice and dice’ the data as much as required
  • And use our data extracts for tools such as PowerBI, Tableau and QlikView

Verto’s benefits realisation feature records quantitative and qualitative benefits which are then tracked and reported against at multiple levels, via the dashboard and comprehensive reports.

Financial management allows users to track cost profiles over time, providing full transparency on project spend. Financial integrations with systems such as SAP, Oracle, Pegasus, Agresso,

  • Manage and track scheduled and planned resources including heatmap views
  • See where each resource is planned and current utilisation percentages
  • Actively monitor resource allocation and capacity for any given day
  • Assign rate cards to resource roles and specific time periods
  • Full Timesheet management and approvals down to task level
  • Link project outputs to performance outcomes and KPIs across the organisation
  • Create performance groups and objectives to ease the management of multiple KPIs
  • Compare performance against other departments, services and organisations and track progress
  • Produce custom reports, plans and graphs tailored to suit each organisation’s needs

Active tab

border-radius: 6px
background-colour: 00699B
title colour: #FFFFFF
colour: #1A202C
border-left: 5px #2C578B

Inactive tab

background-colour: vlue-light
colour: #1a202c
border-left: 5px #7AB867

Hover tab

background-colour: #D8E3F1
border-colour: #7AB867
transform: scale(1.01)
box-shadow: -1px 9px 15px -4px rgba(0,0,0,0.30)
-webkit-box-shadow: -1px 9px 7px -4px rgba(0,0,0,0.30)
-moz-box-shadow: -1px 9px 15px -4px rgba(0,0,0,0.30)
transition: all 0.1s ease

Tabs Get Features to the Users

In order to help support better scanning and user engagement with a page. We use tabs and accordions to reduce doom scrolling.

General Considerations

Keep tabs short and sweet. This is an opportunity to segment a market, tell a bit more about a product, or drive users to other parts of the site.

Tackle tasks like no other

Keep all aspects of your work in Kanban Boards containing lists and cards, which you can move around easily to show progress or store in their rightful place so you can stay on top of managing what matters. 

Build up to three Workspaces for free, containing as many Kanban Boards as you need, containing a total of 250 cards. For an unlimited Workspace experience, contact us to upgrade. 

Active tab

border-radius: 6px
background-colour: 00699B
colour: #FFFFFF
border-bottom: 5px solid #7ab867
border-radius: 6px

Inactive tab

background-colour: #E7F4FB
colour: #1a202c
border-right: 5px

Hover tab

background-colour: #F7FAFC
border-colour: #89ACD6
border-bottom: 5px solid #66BAE2
border-radius: 6px
transform: scale(1.05)
box-shadow: -1px 9px 15px -4px rgba(0,0,0,0.30)
-webkit-box-shadow: -1px 9px 7px -4px rgba(0,0,0,0.30)
-moz-box-shadow: -1px 9px 15px -4px rgba(0,0,0,0.30)
transition: all 0.1s ease