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
Dr. Alex Einbinder
Dr. Alex Einbinder
DDS
A woman's avatar is shown in a gray background.
Dr. Danielle Carmel
DMD
A white silhouette of a man's face.
Dr. Thomas Tsang
DDS
A white silhouette of a man's face.
Dr. Matt Nourmand
DMD
Offering stress-free dental visits starts with empathy and understanding. At Grace Dental Smiles, we listen to and address every patient's concerns."

Your Trusted Implant Dentists in West Babylon

Over 2000 implants successfully placed! Experience unparalleled expertise with Dr. Einbinder and his team, transforming smiles with precision dental implants tailored to your unique needs and goals.

Anxiety-free Sedation Options

Don't let dental anxiety keep you from receiving the care you need. Experience comfort and peace of mind with our sedation options. Enjoy a stress-free, painless dental visit tailored to your comfort level and needs.