ATX Website Style Guide

This page was created and maintained by Jake Wakefield at Wakegraphic up to January 2025. It is useful as a digital brand-book containing all relevant website branding and style documentation. Following the rules outlined on this page will help ensure a properly functioning and well-branded website.

Typography

ATX Robotic Surgery’s fonts are Crimson Text (Google Webfont) and Roboto (Google Webfont). Roboto Condensed (Google Webfont) may be used, when needed.

H1

H1 Sample — Lorem ipsum dolor sit.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

H2

H2 Sample — Lorem ipsum dolor sit amet elit.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

H3

H3 Sample — Lorem ipsum dolor sit amet elit.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

H4

H4 Sample — Lorem ipsum dolor sit amet elit.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

The H4 Header is used in the following —

  • Mikado Dividers w/Text (Forces resize)

H5

H5 Sample — Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

The H5 Header is used in the following —

  • Team member’s Name on Mikato Team and Team List elements

H6

H6 Sample — Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

The H6 Header is used in the following —

  • Team member’s role/job on Mikato Team and Team List elements
  • Titles for Mikado Accordion and Toggle elements.

Paragraph and Body Copy Styling

Basic Paragraph Sample — Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Bold Sample — Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Italic Sample — Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Link Sample — Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Bullet List Sample —

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
  • When an unknown printer took a galley of type and scrambled it to make a type specimen book.

Numbered List Sample —

  1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  2. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
  3. When an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Blockquote— Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Preformatted— Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Logos

ATX Robotic Surgery and ATX Hand Surgery logos were created in 2024 for ATX Robotic Surgery by Jake Wakefield at Wakegraphic.com.

ATX Robotic Surgery Logos

ATX Hand Surgery Logos

Website Colors

Light Copy — #f4fbfe

Light Blue — #eaf7fe

Inactive Blue (light)— #d9e4ee

Medium Blue — #7eb1d2

Light Blue Line — #4192d4

CTA Blue — #23679f

Medium Blue 2 — #2b53a1

CTA Hover Blue — #1c3664

Inactive Blue (dark) — #39475f

Body Copy — #363e4b

Dark Blue — #202937

Blue Hue Black — #0d1016

Accessibility Compliance Colors

Text Links — #1d5786

Header and Body Copy — #333

Buttons

Active Solid Button

Uses classic button type, rounded corners, and classic blue for color.

Inactive Solid Button

Uses classic button type, rounded corners, and classic grey for color.

Active Outline Button

Uses outline button type, rounded corners, and classic blue for color.

Inactive Outline Button

Uses outline button type, rounded corners, and classic grey for color.

Active Solid Button

Uses classic button type, rounded corners, and blue for color.

Alternate Inactive Solid

Uses classic button type, rounded corners, and grey for color.

Active Outline Button

Uses outline button type, rounded corners, and blue for color.

Alternate Inactive Outline

Uses outline button type, rounded corners, and grey for color.

Custom HTML Sidebars

As of site launch, WPBakery strips out “onclick” attributes in links on pages. Q1Media is tracking ad engagement on all “Request a Consult” and “Call Us / Phone Number” CTAs. Tracking this way requires the and onclick attribute added to links/buttons. These work-around custom HTML widgets allow for that, and allow for easy placement of pre-built CTA buttons on pages.

Reviews

There is no review auto-aggregation functionality at time of launch. Reviews are represented by the “five-star-review” class applied to plain text blocks. The name should be right justified and the quote should be contained in quotation marks. The stars and source, listed after the name, should be linked to the original review on google.

★ ★ ★ ★ ☆

“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”

— Full Name (Original)

★ ★ ★ ★ ☆

“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”

— Full Name (Original)

★ ★ ★ ★ ☆

“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”

— Full Name (Original)

Call to Actions

Call to Action (Blue)

Heading — Lorem Ipsum

Subheading — Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Body Text — I am promo text. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Call to Action (Grey)

Heading — Lorem Ipsum

Subheading — Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Body Text — I am promo text. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Call to Action (Black)

Heading — Lorem Ipsum

Subheading — Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Body Text — I am promo text. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Mikado Call To Action

I am test text for Call to Action shortcode content

Information Organization

Dividers

Mikado comes with a selection of divider styles under the Separator and Separator With Text elements. While there are many options within this element, only the following should be used on the site.

Line

Dotted

Line

Dotted

Mikado Accordion (Accordion)

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Mikado Accordion (Toggle)

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

VC Accordion / FAQ Toggle

Toggle Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Toggle Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Toggle Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Toggle Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tables

Table styling uses the .atx-table tag for basic html tables. These tables are non-responsive and, until they are, responsive tables can be created using the wpDataTables plugin using a fall-back styling option.

Raw HTML Table

Aspect Gastric Sleeve Surgery Gastric Bypass Surgery Lap Band Surgery
Procedure Laparoscopic Laparoscopic or open surgery Laparoscopic
Surgical Method Removal of a large portion of the stomach, creating a sleeve-shaped stomach Creation of a small stomach pouch and rerouting of intestines Positioning of an adjustable band around the top section of the stomach.
Recovery Time 2-4 weeks 3-6 weeks 1-2 weeks
Weight Loss 60-70% of excess weight loss in 1-2 years 60-80% of excess weight loss in 1-2 years 40-50% of excess weight loss in 1-2 years
Reversibility Irreversible Partially reversible but very complex Reversible
Need for Foreign Body None One Yes, band and port
Adjustability Non-adjustable Non-adjustable Adjustable (can be tightened or loosened)

wpDataTable Plugin

Aspect Gastric Sleeve Surgery Gastric Bypass Surgery Lap Band Surgery
Procedure Removal of a large portion of the stomach, creating a sleeve-shaped stomach Creation of a small stomach pouch and rerouting of intestines Positioning of an adjustable band around the top section of the stomach.
Surgical Method Laparoscopic Laparoscopic or open surgery Laparoscopic
Recovery Time 2-4 weeks 3-6 weeks 1-2 weeks
Weight Loss 60-70% of excess weight loss in 1-2 years 60-80% of excess weight loss in 1-2 years 40-50% of excess weight loss in 1-2 years
Reversibility Irreversible Partially reversible but very complex Reversible
Need for Foreign Body None One Yes, band and port
Adjustability Non-adjustable Non-adjustable Adjustable (can be tightened or loosened)

Notifications

Notifications use only the outline style and do not use the “classic” color options.

Success — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo risus, mattis ac sagittis vel, aliquam id orci. Nulla vitae finibus mi. Nam condimentum lectus id neque sollicitudin condimentum.

Informational — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo risus, mattis ac sagittis vel, aliquam id orci. Nulla vitae finibus mi. Nam condimentum lectus id neque sollicitudin condimentum.

Warning — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo risus, mattis ac sagittis vel, aliquam id orci. Nulla vitae finibus mi. Nam condimentum lectus id neque sollicitudin condimentum.

Error — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo risus, mattis ac sagittis vel, aliquam id orci. Nulla vitae finibus mi. Nam condimentum lectus id neque sollicitudin condimentum.

Video

ATX Robotic Surgery sometimes posts videos of operations on their site. These videos, while educational, may also viscerally graphic. These videos are hosted on ATX’s Youtube channel at https://www.youtube.com/@ATXRoboticSurgeons. Due to the nature of these videos, they cannot be embedded on a site. The design below is used to mockup a screenshot and should open a new window that leads to the video link on Youtube.

This is a sample of what a content warning may look like above a video.

Video Title — Description to video does not have a link, while title and timestamp do. — 00:00

Video Title — Description to video does not have a link, while title and timestamp do. — 00:00

Location Widgets

Each location widget can be custom made per location that ATX is available.

Austin

Georgetown

Blog Elements

Blog lists use “Mikado Blog List” in a three-column array for full width pages or two-column on pages with a side bar. Preview image is set to landscape to maintain visual consistency. Post info author is turned off, as only ATX will be posting official blogs. The default theme allows for likes and comments on posts but both have been disabled both —

  • In the back end. This can be toggled on or off on each blog’s options
  • In the CSS, the like and comment buttons will be hidden even if enabled on backend.

Additionally, all blog posts after launch will be tagged with the “post” category, which allows old, pre-2024 posts to be hidden on the blog homepage.

Team List

Doctor of Osteopathy

Doctor of Osteopathy

Doctor of Osteopathic Medicine

Doctor of Medicine

Doctor of Medicine

Contact Information

Original site build, branding, and this style guide were created by Jake Wakefield at Wakegraphic.com. If you have questions or need resources relevant to the web build, design, or brand; please reach out to [email protected].

Ongoing SEO work was provided José García and the Cabeza Digital digital marketing team. If you have questions or need SEO-related resources, please reach out Jose at [email protected].

SEM for ATX Robotic Surgery was managed by senior account executive Jaime Lewis at Q1 Media. She can be contacted at [email protected].

Marketing and advertising work was managed by Wendy Garner of WSGStrategies.com.