Style Guide

Table of Contents

Typography

Good typography adds personality to an application, and can help set tone in the absence of visual elements. Practis uses DM Sans for heading fonts and all body copy.

Font Family: DM Sans

Heading Weight: 600 (700)

Body Weight: 400 (600)

Font Size (Body): 18px

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis dolor vitae vestibulum faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis dolor vitae vestibulum faucibus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis dolor vitae vestibulum faucibus.

Colors

Hunter Green
HEX: #246D53
RGB: 36, 109, 83
Yellow Gold
HEX: #FECB00
RGB: 254, 203, 0
Dark Gray
HEX: #484848
RGB: 72, 72, 72
Black
HEX: #202020
RGB: 32, 32, 32
Light Gray
HEX: #E9EAEE
RGB: 243, 239, 230
Yellow-Orange
HEX: #FBB005
RGB: 251, 176, 5

Gradients

Green Gradient
#246D53 - #00563c
Dark Gradient
#202020 -#484848
Gold Gradient
#FECB00 - #FBB005

Widgets

Icons

We leverage icons from FontAwesome 6 library. Our style guide maintains we use “Light” or “Thin” icon styles when we leverage icons.

Icon Box

Compliant Websites

Ensure that every aspect of your website is functional for patients with a wide range of needs and limitations.

Noticable Results

Appear within the top search results of targeted locations for patients seeking specialized care in your area.

Reporting

Receive regular updates and insights pertaining to the performance of your website and other online properties.

Customer Service

Our support staff and account managers are always here to help address client questions and concerns.

Accordion

White/Light Backgrounds

SEO is a service designed to improve search results for a particular business. This concept applies to any number of unique brands, companies, and even to medical professionals. While many physicians can achieve some notoriety in their community for their expertise and specialty services, SEO is able to broaden that reach across entire cities, states, or even the country.

When you’re building a new site or just looking to freshen up your current one, content should always be at the top of your list. While the importance of content doesn’t decrease dependence on the industry, there’s a lot to say about the strength of it when determining a healthcare website’s performance. From getting your rankings for a specific procedure up to page one, to making sure that you’re fully compliant, there are many steps that providers and practices need to consider when curating high quality content for their website.

 

If new patients are not able to find you online it is a huge loss for you and your practice, plain and simple. Even individuals who may be searching for you by name may only be able to find a few snippets of information, which rarely allows them to determine if you possess the qualities that they are looking for in their next doctor.

Dark Backgrounds

With over 80% of patients using online reviews to evaluate physicians, it’s important to understand how you are portrayed overall online, and not just through your primary website. These comments and evaluations are uniquely valuable to patients looking at how one provider compares to another, meaning that you are being directly measured against your top local competitors.
Fully optimizing a website that receives top marks from Google does not happen overnight. It of course takes time for our team members to build beautiful sites that function to the very best of their capacity, and then it takes a bit more for the pages within that site to prove their worth to search engines. SEO typically requires roughly 3-6 months before clients will begin to see their results reaching desired levels, though this can be expedited with a little help from online advertisements.
Anyone can create a Google Ads campaign and throw enough money at it to make their ads appear to users, but there are many important factors that healthcare providers should be fully aware of in order to make their ad campaign a success. Our specialists have a unique understanding of each and every one of these factors, which is what ultimately makes us the ideal choice for medical professionals seeking assistance with their online branding.

Block quote

"I had been working with a web design company for over 12 months and never had active site. We engaged with Practis for our medical practice website and in less than one month we will be rolling out an awesome product."
Darryn Band, MD
Capital Women's Care

Images

  • Images are cropped at 4×5 aspect ratio (800x1000px)
  • Images have a box shadow (see example below
    • Box shadow uses our green or yellow colors, with no blur (see code snippet)
				
					box-shadow: -10px 10px #fecb00
				
			
man researching doctors on laptop
woman on ipad

Design Specs

Content Margin (margin between page content and header/footer)

  • Desktop: 80px
  • Tablet/Mobile: 60px

Row Margin (margin between rows with backgrounds and white 

  • Desktop: 80px
  • Tablet/Mobile: 60px

Background Rows (rows with a background image with a color overlay)

  • Desktop/Tablet/Mobile:
    • 60px Top & Bottom padding
    • 15px Left & Right Padding