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
Gradients
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
What Will SEO Do for My Practice?
Why is Content So Important for Healthcare Websites?
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.
Why Should I Worry About My Rankings?
Dark Backgrounds
How Important Are Reviews for My Medical Practice?
How Long Does SEO Take?
How Are Google Ads for Healthcare Different from Any Other Campaign?
Block quote
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



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