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
Secondary
Fonts
Upload non-Google Fonts to a password protected page. Disclose the non-sharable nature of Adobe 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
Secondary: Orange
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!
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.
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.
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
Heading Text
Heading Text
Heading Text
Heading Text
Heading Text
Heading Text
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.
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.
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.
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.
Lorem ipsum dolor sit amet.
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

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
- And ambushed the a as
- First logbook getting purer have
- As the he even river
- Be and loyalty. Saw material.
- 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.
Centered paragraphs read better at larger font size than normal body copy. This class handles alignment and increases font size by 15%.
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
Grid
Below you will find classes for standard div blocks... TBA
Alignment
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.