Design Guide

This is the design guide for The Blog of Tracy A.

It contains my logo, color palette, and font selections. I then apply those components to various post elements, and code snippets. I have tried to represent every style element here. These are all currently defined in styles.css in the current theme.

Writing Style

As of April 2020, the site will follow AP Style, as best as possible (I’m human).

Logo

This is my logo. I have two versions, logo only:

and logo plus text:

Fonts

I use Adobe Text Pro for my body font, Bebas for the titles and subheads, and Helvetica Neue for the sidebar text.

Colors

Photos

Generally, the first paragraph uses a drop cap and a larger font (as I am doing here). This is designed to pull the reader into the content. Then I follow immediately with an image.

PHOTO FULL SIZE HERE. Photo courtesy of ©iStockphoto.com/RTimages

The image should be about 1200 pixels wide. My them will then scale the photos to fill the width of the content well, depending on the device being used to display the post. It will be displayed in-line (rather than floating to the right or left). The theme will also create the necessary thumbnails that are used in various widgets on the site.

Note that the photo has a caption with a reference to iStockPhoto and the photographer. This must be included with each photo I use from them.

Post Title

This site uses the <H2> head as the single Post Title heading. Therefore, do not use it within the body of the post. Note that it has no space above it.

A-Level Subhead

I use the <H3> tag to designate A-Level Subheads within a post—as I have done here.

B-Level Subhead

If I want an additional level of organization, I use the <H4> tag to designate B-Level Subheads.

Bulleted List

In HTML this is called an unordered list. Thus it uses the <ul> tag.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can optionally put a line space between each line item. It won’t affect the appearance, but in longer items that wrap, it may make it more readable in the HTML code.

If you have a list of short items, I use the “singlespace” class with the <li> tag, like this: <li class=”singlespace”>. It looks like this:

  • Lorem ipsum dolor.
  • Ut enim ad minim veniam.
  • Duis aute irure dolor.

Numbered List

In HTML this is called an ordered list. Thus it uses the <ol> tag.

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Like the Bulleted List, you can optionally put a line space between each line item. It won’t affect the appearance, but in longer items that wrap, it may make it more readable in the HTML code.

If you have a list of short items, I use the “singlespace” class just as I do with a bulleted list. It looks like this:

  1. Lorem ipsum dolor.
  2. Ut enim ad minim veniam.
  3. Duis aute irure dolor.

This is back to body text.

Nested Lists

This is an example of a numbered list that has a bulleted list nested inside it. I often do this in my writing:

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote

This is a <blockquote>.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Note the lack of beginning quote and the actual ending open quote. The theme inserts a graphic opening quote.

Blockquote with Citation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”—Michael S. Hyatt
New York Times Bestselling Author

Note that you can use the <br> tag to create separate lines in the citation.

Callout

I use the Callout shortcode for setting off a block of text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Note also that this shortcode uses Helvetica Neue to differentiate it off from body text.

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

I use the <Pre><Code> HTML tag for code samples, etc. If you are using HTML, you can’t use the left and right angle brackets. You have to use the HTML greater-than and lesser-than tags.

<h3>Logo</h3>

This is my logo. I have two versions, logo only:

<img src="https://michaelhyatt.com/wp-content/uploads/2009/02/mh-logo-only-200-x-164.png" alt="MH Logo Only" width="200" height="164" class="alignnone size-full wp-image-23401" />

and logo plus text:

<img src="https://michaelhyatt.com/wp-content/uploads/2009/02/mh-logo-plus-text-500-x-68.png" alt="MH Logo Plus Text" width="500" height="68" class="alignnone size-full wp-image-23402" />

Endorsements

Table

This is a table example. Note that you will have to adjust the columns and rows. But note the background color. This is the standard for tables.

StrengthsFinder 1.0StrengthsFinder 2.0
1. Achiever1. Achiever
2. Intellection2. Intellection
3. Connectedness3. Strategic
4. Strategic4. Futuristic
5. Input5. Relator

Tweetable Quotes

[shareable cite=”HENRY DAVID THOREAU”]The world is but a canvas to the imagination.[/shareable]

Two Columns

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.

Three Columns

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.

Buttons

Button
OUtline Button

Blockquotes & Pullquotes

Good design is as little as possible. Less, but better, because it concentrates on the essential aspects. Back to purity, back to simplicity.


Dieter Rams

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt USD91973087 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.