AB Web Style Guide

Autobooks Web Style Guide

Text Styles

Eyebrow text

Used above headlines

Pre-formatted text

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks

Code text

this is text in a code element

New Tag

NEW

H1 Style

Used for headlines in the hero section

H2 Style

Used minimally for headline text in the page content

H3 Style

Used for section headers with a horizontal line in the page content. Example of bold text.

H4 Style

Used for headline text in the page content. Example of bold text.

H5 Style

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph. Example of bold text.

H6 Style

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph. Example of bold text.

Paragraph Style

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, nihil. Provident excepturi accusamus minus distinctio autem recusandae repellendus? Atque obcaecati repellat consectetur magni sequi! Eaque explicabo quia saepe esse non!

Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh.

Pull Quote Style

Pull quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius lorem lorem, nec volutpat ante venenatis non. Proin mattis non dui nec ullamcorper. Etiam finibus sodales nisl, vel posuere urna dignissim eget.

Text Styles, Dark Mode

Eyebrow text

Enter text here

H1 Style

Used for headlines in the hero section

H2 Style

Used minimally for headline text in the page content

H3 Style with Horizontal Line

Used for section headers with a horizontal line in the page content

H4 Style

Used for headline text in the page content

H5 Style

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

H6 Style

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

Paragraph Style

Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh.

Colors

Black

#060E21

Default text color, backgrounds

Navy

#0B3B5D

Teal

#018AAC

H5 text, backgrounds

Light Blue

#96D4E8

Accent color, background

Light Blue 30%

#DFF2F8

Light Blue 15%

#ECF7FA

Tan

#A39888

Tan 25%

#EAE7E4

Tan 10%

#F7F6F4

Yellow

#F3E504

Light Orange

#F3A912

Orange

#F36D21

Eyebrow text

Light Green

#B8D260

SMB color

Green

#019663

SMB color

Light Gray

#F6F7FB

Product/BG color

New Blue

#0C56AF

Example FI/Accent Color

Modules

Optional subheadline text goes here

Optional subheadline text goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna et aliquyam erat, sed iam voluptua. At vero eos et accusam et justo duo dolores et ea rebum a diam sit amet mi ullamcorpe.

Optional subheadline text goes here
Optional subheadline text goes here

Non-breaking hyphen

‑

Get Paid with Autobooks - Invoice Only Form

H1 Hero Title Lorem Ipsum

Send Yourself an Invoice.

See how easy it is to receive an invoice and make a payment. Send yourself a test invoice now!