Guidelines

All text with this color is solely for website development. Delete these text blocks before giving client access.

This style guide is here to allow the creation of faster, more unified websites by styling base HTML elements, creating universal classes, and providing a brand guideline for the website.

This design system helps us work together to build a great user experience with the brand.

Brand

These are sample logo files that can be downloaded straight from the site, or linked to the packaged Google Drive folder for the Client. Add-on and replace as needed for final site.

One stop shop to download logos, fonts, and more. Need anything that's not here? Email web@anntoine.com.

Logos

Logos! Download them, use them where you use logos. You know the rules, no putting it upside down, stretching it, or doing anything else funky.

Primary

Logo Color
SVG, JPG, PNG, EPS, AI, PDF
Logo Black
SVG, JPG, PNG, EPS, AI, PDF
Logo White
SVG, JPG, PNG, EPS, AI, PDF

Secondary

Logo Color
SVG, JPG, PNG, EPS, AI, PDF
Logo Black
SVG, JPG, PNG, EPS, AI, PDF
Logo White
SVG, JPG, PNG, EPS, AI, PDF

Fonts

Upload non-Google Fonts to a password protected page. Disclose the non-sharable nature of Adobe fonts.

Open Sans
Open Sans
Google Fonts

Colors & Palettes

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch. These colors can also be used for chaining classes to change background color on any element. Add-on, rename, and replace as needed for final site.

Be sure to check color combinations to ensure contrast accessibility and general legibility using WebAIM's Contrast Checker.

Tools for building color palettes:
- ColorBox
- HTML CSS Color
- Palx: Automatic UI Color Palette Generator

Default color references from the Open color project.

The brand palette uses a combination of 10 shades and tints per color to provide a wide variety of options, while staying on brand.

Brand Colors

Primary: Blue

blue-0
.bg-color-primary-0
blue-5
.bg-color-primary-5
blue-10
.bg-color-primary-10
blue-20
.bg-color-primary-20
blue-30
.bg-color-primary-30
blue-40
.bg-color-primary-40
blue-50
.bg-color-primary-50
4.5:1 (#000) ↑
4.5:1 (#FFF) ↓
blue-60
.bg-color-primary-60
blue-70
.bg-color-primary-70
blue-80 (Brand)
.bg-color-primary-80

Secondary: Orange

orange-0
.bg-color-secondary-0
orange-5
.bg-color-secondary-5
orange-10
.bg-color-secondary-10
orange-20
.bg-color-secondary-20
orange-30
.bg-color-secondary-30
orange-40
.bg-color-secondary-40
orange-50
.bg-color-secondary-50
orange-60
.bg-color-secondary-60
orange-70
.bg-color-secondary-70
4.5:1 (#000) ↑
4.5:1 (#FFF)
orange-80 (WCAG AA)
.bg-color-secondary-80

Interactive: Digital Blue

This “Digital” blue has a separate Global Swatch to function as a utility color for links and clickable items. If you change this “Digital Blue,” choose an accessible color that works with both black and white. Make sure it stands out!

4.5:1 (#000)
4.5:1 (#FFF) ↓
Digital Blue
.bg-color-interactive
Digital Blue Hover
.bg-color-interactive-hover

Neutral Colors

The neutrals palette contains 12 shades going from full white to full black with a couple more eye-pleasers in the middle. Grays are used for regular paragraphs.

WHITE
.bg-color-white
GRAY 0
.bg-color-gray-0
GRAY 1
.bg-color-gray-1
GRAY 2
.bg-color-gray-2
GRAY 3
.bg-color-gray-3
GRAY 4
.bg-color-gray-4
GRAY 5
.bg-color-gray-5
4.5:1 (#000) ↑
GRAY 6
.bg-color-gray-6
4.5:1 (#FFF) ↓
GRAY 7
.bg-color-gray-7
GRAY 8
.bg-color-gray-8
GRAY 9
.bg-color-gray-9
BLACK
.bg-color-black

Text Colors

These colors are can be used by chaining classes to change text color for any element. Add-on, rename, and replace as needed for final site.

This is primary colored text
blue-80 (Brand)
.text-color-primary
This is secondary colored text
orange-80 (WCAG AA)
.text-color-secondary
This is black text
BLACK
.text-color-black
This is dark colored text
GRAY 8
.text-color-dark
This is light colored text
GRAY 5
.text-color-light
This is white text
WHITE
.text-color-white

Typography

You'll see that some of these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting the base tag, so that it will effect all the elements on the site. E.g. Body (All Pages), All H1 Headings, All Paragraphs, etc.

Your body copy font should always be set via Body (All Pages).

For rich text elements, use the class para rich to style child tags.

Custom code in Settings > Custom Code and an embed symbol, HTML Text Scale, control the responsive scale of type for devices. Delete these in-line codes if you do not want to use this typography approach. Learn more here.

Headings & Large Texts

The brand uses a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used. Don’t use units for line-heights. Keep it unitless.

Heading Text

.h1-large
3.75rem / 1.1

Heading Text

H1
3.125rem / 1.1

Heading Text

H2
2.375rem / 1.2

Heading Text

H3
2rem / 1.3

Heading Text

H4
1.25rem / 1.3
Heading Text
H5
1.1rem / 1.2
Heading Text
H6
0.9rem / 1.3

Paragraphs & caption

Identify the different fonts and their usage in the below text box.

Open Sans is the standard typeface for the brand on the web for large texts, headings and paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed.

.para-xl
1.5rem / 1.539

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed.

.para-large
1.15rem / 1.539

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed.

p | .para
1rem / 1.539

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas sed tempus. Vel pharetra vel turpis nunc eget lorem dolor sed. Volutpat est velit egestas dui id ornare. Purus in mollis nunc sed id semper.

.para-small
0.9rem / 1.539

Lorem ipsum dolor sit amet.

.caption
0.707rem / 1.539
Text Link
a | .link

Rich Text

Italic Text: State step the seeing house. Queen, thoughts wanted first collection the suggests the a picture different worries the to this were was ocean. The few to I by leaders, the four to is way, let shall legs don't as slowly my a ever the seven date live on it's but.

H1: The screen always hopes

Proportion down board travelling, you he far the depend warned theoretically sleep for now entire shine. Mail about magicians of many see privilege my we even the bad oh, for success in too allowed he with interesting magazine about in rationale to what the succeeding, derived was devotion failing.

Into the to feel to there's that those shortcuts. Click this link to learn more.

H2: Make solider, were as moving into

Hearts to parks. The that the horn bold, to days, noting it the and frequency, payload apart or be his irregular the he moving belly, rank redesigns. Point didn't in present getting this arches approved to afforded pouring initial payload common during shall, discipline's systems values, from chosen and the to about the my a either highly title made felt present their not and have peacefully clarinet and him.

Bold Text: Select life is the ducks. Maybe been for we've the

Caption: Brief don't grammar. Go here.

H3: He mechanic. Text they harder of a texts. That instruments

Hired tuned were I to timing that it themselves let which implemented what duties week knowing dream.

Un-ordered List

  • Not the in design finger.
  • His and you our text
  • Who century then breakfasts. Precipitate

The concepts his out accounts more quickly own, one time but have ever room allowed that researches happening, was saw and the free texts up little may function.

H4: Get my and than are line though, behind chest that about to the and go the

For conduct, loyalty. Two distribution or queen hologram invitation or write at on office.

Ordered List

  1. And ambushed the a as
  2. First logbook getting purer have
  3. As the he even river
  4. Be and loyalty. Saw material.
  5. A are and, curiously, during

Were the date to the worn they the so duck that an and clear like that box travelling the identification the examples this project I frequency, discipline period, could his in dresses and common wouldn't to texts attentive knowing the respect human precipitate, roman lively.

H5: For conduct, loyalty. Two distribution or queen hologram invitation or write at on office.

As of such decisions, cheating the her for or to her she phase notice the expected to else of perception flows to asked smaller heaven he theoretically voices their texts.

Block Quote

To won't furnished him, viable feedback the turner. Phase real holding harmonics. Of harmonics, the where name

Which where the toys my however careful want can been she has indeed evening. Offer, to essential he presented. Be even steps is to sublime little these viewer. Been explain first, prior seeing in I parents task.

Other Text Classes

Here are special text classes for specific website layouts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Paragraph Center
Centered paragraphs read better at larger font size than normal body copy. This class handles alignment and increases font size by 15%.
.para-center | .para-rich .rich-center

Font awesome

Font Awesome Free Version 5.14.0

Use vector icons and social logos with Font Awesome, the web’s most popular icon set and toolkit. Search the Gallery or use the Cheatsheet to copy and paste your icon of choice.

Preset Classes
- For Font Awesome Solid use the class combo fontawesome fa solid
- For Font Awesome Regular use the class fontawesome
- For Font Awesome Brands use the class fontawesome brand

Buttons

The default button color uses a "Digital Blue", same for default links.

Buttons have in two size: The standard version and the small version. These sub-classes can be combined to alter button size and design as needed.

Button Text
.button .btn-small
Button Text
.button .btn-disabled
Button Text
.button .btn-fill
Button Text
.button .btn-fill .btn-disabled
Button Text
.button .btn-black
Button Text
.button .btn-black .btn-small
Button Text
.button .btn-black .btn-disabled
Button Text
.button .ghost
Button Text
.button .ghost .btn-small
Button Text
.button .ghost .btn-disabled
Button Text
.button .btn-white
Button Text
.button .btn-white .btn-small
Button Text
.button .btn-white .btn-disabled
Button Text
.button .ghost-white
Button Text
.button .ghost-white .btn-small
Button Text
.button .ghost-white .btn-disabled

Buttons with Alternate Colors

Button Text
.button .btn-primary
Button Text
.button .btn-secondary

Grid

Below you will find classes for standard div blocks... TBA

This is a .section which centers all child blocks and text. By default it has a top padding of 60px and bottom padding of 80px. Adjust and style as needed.
This is a .container which has a set width of 90% and max width of 1200px

Alignment

This text is right aligned with .text-right
This text is center aligned with .text-center
This text is left aligned with .text-left

This paragraph is centered within the container with .auto-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.