Document Design | Style Guide

Document Design | Style Guide

Professional Print Documents & Website: marcellamoss.weebly.com

Typography

Quicksand, Lato, & Droid Serif are

Google fonts that can be downloaded.

Quicksand

Sans Serif

Quicksand is a geometric serif font

used for the main design elements
throughout web and print
documents. It is simple, modern, and
elegant and also easy to read,
especially when font size is large. It is
used for the website's headline,
sub-headline, and navigation bar.

Headline: 52 pt., regular

Sub-headline: 18 pt., light
Navigation: 16pt., regular, all caps

Lato

Sans Serif

Lato is the primary text used for

body paragraphs throughout the
website (body text 2) and other
documents published online (i.e. this
Style Guide). Sans serif fonts are
easier to read online than serif fonts
and Lato is also easier to read than
Quicksand in large bodies of text.

Heading 1: 16 pt., bold

Heading 2: 14 pt., regular
Body text 1: 12 pt., regular

Droid Serif

Serif

Droid Serif is the primary body text

for web and print based documents.
The font was designed to make
reading easier for content online,
especially mobile devices. Given the
limitations to Google fonts for
Weebly and Google Docs it is a
simple, modern text that is adaptable
in many designs.

Header: 8 pt., regular

Heading 1: 14 pt., bold
Heading 2: 12 pt, regular
Body text: 10 pt., regular

Web & Print

Web

Web & Print

marcellamoss.weebly.com | 1

Document Design | Style Guide

Colors
Neutrals
These colors are for the background
and foreground of the website and
print documents. They provide a
sleek backdrop that allows emphasis
to remain on the content of the
website or print document.

Accents
These colors are the main colors
used in the branding of the website
and print documents. The logo uses
the colors
tyrian purple
and
lima.
These colors can also be used for
accent text throughout the website
such as links (
disco
) and print
documents. The shades of purples
and green are complementary colors
that pop on the clean slate of whites
and greys.

marcellamoss.weebly.com | 2

Document Design | Style Guide

Graphics
Logo
The logo contributes to the overall
simplicity of the brand. Two fonts
were used in the design of this logo,
Quicksand and Marion. The first was
applied to the large M and Moss, the
latter applied to marcella. The
orientation of the logo should never
be changed and it should always be
proportionately scaled.
a. This is the main logo and
should always be used on the
web when there is a white
background.
b. This variation should be used
when printing in black and
white.
c. This variation should be used
when printing in grayscale is
available.
d. This variation should be used
when the background is silver,
for web or print.
e. This variation should be used
when the background is tyrian
purple, for web or print.

a.

b.

c.

d.

e.

Images
Images, documents, and files
uploaded to the website are to
proceed its correlating text. Each
entry (image and text) will be defined
by horizontal lines. The images are
not restricted to a set dimension.

marcellamoss.weebly.com | 3

Document Design | Style Guide

Tables

List

Format

Format

Every table should be labeled

with a title in bold and
italicized font.
All content should be double
spaced and the same size text
as the body.
There should be horizontal
lines enclosing the table with
no visible vertical lines.
The column headers should
be underlined.
All titles and headers should
be clear and concise.
The columns should be left
justified unless, the input is
strictly numbers, then it
should be centered.
The content of the first
column should be bold to
allow for easier reading.

If title is necessary, it should be listed

in bold letters and left justified.
Bullets
are to be used when the order

of the content is not important.

Fact one
Fact two
Fact three
Numbers
are to be used when the list
follows a specific sequence or give
instructions.
1. Step one
2. Step two
3. Step three
Letters
are to be used when the

individual is prompted to make a

decision or when the content will be
referenced.
A. Option one
B. Option two
C. Option three

marcellamoss.weebly.com | 4