Template Style Guide

This style guide is an overview of the different colors, typography styles, buttons & other elements used in the template.

Colors
  • Colors defined here are global.
  • Please edit the colors below to match the office color scheme. If you need to add more color, save them as swatches and add them here.
  • You can use this "Coolors" Tool to generate the palette.
White
White 050
Text
CTA
CTA Hover
Primary Darker
Primary Dark
Primary
Primary Medium
Primary Light
Primary Light Medium
Primary Soft
Primary Soft Medium
Primary Overlay
Secondary
Overlay
Shadow
Body gray
Text Color
Text White
Text Primary
Text Size
Text Large
Text Small
Typography
  • Default font is Arial. This is to prevent loading unused fonts in the project.
  • Default font size is 16px for Desktop, Tablet and Mobile. 18px for Large Desktops.
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Headings: Section Headings Class

Section Heading

Section Subheading

Section Subtitle

Section Subheading + Smaller (combo class)

Section Subheading + Larger (combo class)

pre title

Other Elements

Paragraph

  • List Item 1
  • List Item 2
  1. List Item
  2. List Item
Blockquote
Grids
  • Grids are created to be reused throughout the project.
  • Grids with gap default value is 2rem, modify as needed.
Grid: 1 Column
Grid 2 Columns
  • Tablet & Mobile Landscape: 2 columns
  • Mobile: 1 Column
Grid 2 (No Gap) Columns
  • Tablet & Mobile Landscape: 2 columns
  • Mobile: 1 Column
Grid 3 Columns
  • Tablet, Mobile Landscape, Mobile: 1 column
Grid 3 (No Gap) Columns
  • Tablet, Mobile Landscape, Mobile: 1 column
Grid 4 Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 4 (No Gap) Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 5 Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 5 Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 6 Columns
  • Tablet: 3 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 6 Columns
  • Tablet: 3 columns
  • Mobile Landscape & Mobile: 1 Column
Helpers
Text Alignment: Text Center
Text Center
Text Center Tablet
Text Center Landscape
Text Center Mobile
Text Alignment: Text Left
Text Left
Text Left Tablet
Text Left Landscape
Text Left Mobile
Text Alignment: Text Right
Text Right
Text Right Tablet
Text Right Landscape
Text Right Mobile
Margin: X
MX-Auto: Margin X Auto
Margin: Y
MY-0: Margin Y 0
Margin: Top
MT-0: Margin Top 0
MT-0: Margin Top 0
MT-1: Margin Top 1 Unit
MT-2: Margin Top 2 Units
MT-3: Margin Top 3 Units
MT-4: Margin Top 4 Units
MT-5: Margin Top 5 Units
MT-6: Margin Top 6 Units
MT-7: Margin Top 7 Units
MT-8: Margin Top 8 Units
Margin: Bottom
MB-0: Margin Bottom 0
MB-0: Margin Bottom 0
MB-1: Margin Bottom 1 Unit
MB-2: Margin Bottom 2 Units
MB-3: Margin Bottom 3 Units
MB-4: Margin Bottom 4 Units
MB-5: Margin Bottom 5 Units
MB-6: Margin Bottom 6 Units
MB-7: Margin Bottom 7 Units
MB-8: Margin Bottom 8 Units
Display: Responsive
Display Desktop
Display Tablet
Display Tablet
Display Landscape
Display Landscape
Display Mobile
Display Desktop
Display: Hide
Hide
Icons
  • In order to avoid impacting on the page speed load we will now use SVG icon with the "currentColor" feature.
  • Below you can find some of the icons use, feel free to include any additional icon if needed.
Forms
Form: Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form: White
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sections
Section: General Section
General Section: Setup with margins. Margin top and bottom: 4 units
Section: Filled Section
Filled Section: Base for filled sections, setup with padding. Padding top and bottom: 4 units
Combo Class: Filled Section + Background Main Darker +  Color:White;
Combo Class: Filled Section + Background Main +  Color:White;
Combo Class: Filled Section + Background Main Soft Medium
Combo Class: Filled Section + Background Gradient + Text White
Combo Class: Filled Section + Background Gradient + Text White
Combo Class: Filled Section + Background Image Overlay + Text White
Combo Class: Filled Section + Filled Section Padless + Background Main Dark+  Color:White;
Boxed Content
Boxed Content: Normal
Boxed Content: Base for boxed sections, setup with padding. Padding top and bottom: 4 units
Boxed Content + Background Main Dark + Text White
Boxed Content: Medium
Boxed Content: Base for boxed sections, setup with padding. Padding top and bottom: 2 units
Boxed Content MD+ Background Main Dark + Text White
Containers
Container: Max Width: 1600px, Padding X: 2rem
Container + Container Full on Mobile: Max Width: 1600px, Padding X: 2rem / Padding X on mobile: 0
Container Full on Desktop
Container + Container Full on Desktop: Max Width: none, Padding X: 4rem / Padding X on mobile: 0
Container + Container Narrow: Max Width: 800px;
Container + Mobile: Max Width: 800px;
Actions
Open Book Modal
Open Bio 1 Modal
Open Bio 2 Modal
Open Bio 3 Modal
Open Bio 4 Modal
Open Bio 5 Modal
Sample Image

A top-rated clinical team

Cras tincidunt lobortis feugiat vivamus. Pulvinar sapien et ligula ullamcorper malesuada libero nunc consequat.
MEet  [DOCTOR] 2→

We’re reinventing dentistry

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi.

We have decades of clinical experience

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi.
Sample Image

A top-rated clinical team

Cras tincidunt lobortis feugiat vivamus. Pulvinar sapien et ligula ullamcorper malesuada libero nunc consequat.
MEet  [DOCTOR] →

We’re reinventing dentistry

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi.

We have decades of clinical experience

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi.
Emma
Emma
Dental Assistant

Emma is a passionate Dental Assistant who has been enriching the field for a year. Her role is crucial in ensuring efficient and compassionate patient care, from preparing patients for procedures to assisting during treatments. Emma's dedication to improving patient smiles and confidence is evident in her hands-on approach and warm interactions. Originally from Upstate New York and now a proud resident of Caddo Mills, Texas, Emma balances her professional life with pursuing a dental hygiene degree and exploring new hobbies, including diving into the car scene. Her calm demeanor, technical skills, and genuine care make her a valuable asset to our practice and a comforting presence for our patients.

Kimmy
Kimmy
Practice Manager

Kimmy is a dedicated member of our team with over 8 years of experience in the dental field. Her passion for helping others shines through in every aspect of her role as Practice Manager. Kimmy ensures a smooth scheduling process and maximizes patient benefits by navigating insurance options with expertise. She takes pride in working under Dr. Steven, whose genuine care for patients inspires her daily. With a keen eye for detail and exceptional customer service skills honed over 14 years, Kimmy contributes to an outstanding patient experience by preparing thoroughly and working effectively under pressure. Licensed as an RDA and Cosmetologist, Kimmy is committed to community support and enhancing patient comfort.