Styleguide TABLE
OF
CONTENTS
Typography Logo . . Primary logos . . . Secondary logos . Utility logos . Logo marks . Overview Titles Headings Body Accent colors . Logo colors . Color palette Logo Example layouts
LOGO PRIMARY
LOGOS
LOGOS The Mosaic Studios logo come in two primary forms:

The stacked logo should be used as a baseline, especially in layouts where the logo will appeared centered onscreen or on the page.

The horizontal logo can be used when a wider layout is beneficial.

For both, the full color version is preferred. The mono version should only be used in instances where color is not available (for instance b/w printing).
SECONDARY
LOGOS
LOGOS There are also two secondary logos that should be used very sparingly:

A mosaic-only logo which does not include the “studios” typography. This should be used only in instances where 2 logos are featured on the same page and where it might otherwise feel redundant.

And a stacked logo. This is a legacy logo that may be retired in the future. If used, it MUST be in a left justified layout. Use only if absolutely necessary and let the Creative Director know so that we can assess its ongoing usefulness.
UTILITY
LOGOS
LOGOS Lastly, there is also a utility version of both the centered logo and the horizontal logo.

These are meant to be used in the rare instances where a single logo may appear over both a light and a dark background, for instance in an email signature where the same logo image must function over both light and dark themed background. Or in UI applications where a low-constrast image is required.

These logos should only be used after consulting with the Creative Director.
LOGO
MARKS
LOGOS The Mosaic Studio logo also includes a logo mark.

Marks can be used anywhere, however, note that they are always used as a standalone element, they are never accompanied by “Mosaic Studio” typography.

Note that the marks include some transparency in the colors. If they are applied over and image, the image should be somewhat visible behind it.
COLOR
PALETTE
LOGO COLOR PALETTE The Mosaic Studios logo includes 4 colors and 2 neutrals. However, because the lower panes of the logo (the dusk and dawn colors) are semi-transparent, they appear slightly different over dark and light background. In applications where the logo must be screen printed or where spot color values are necessary, make sure to provide the correct color set. NOTE: In instances where layouts will be printed, it maybe be necessary to use a full white (255, 255, 255) as the background color to avoid printing large expanses of off-white from desktop printers. And as a result matching whites may have to be adjusted for consistency. COLORS COLOR PALETTE The Mosaic Studios color palette for typography and other graphic elements are similar to the logo colors but adjusted for legibility. Logo color should never be used for type or other graphic elements.

The color palette consists of 4 accent colors, 1 secondary color, and 2 base colors. Only one color from each category should, at most, appear on screen at any one time, and in many instances only one of the primary or secondary colors will appear at any given time as an accent color.

In general, dark backgrounds should be favored for layouts that will appear on screens and white backgrounds should be favored for layouts that will be printed.

When used over an image, the primary and secondary colors can and should be used with opacity to allow the underly image to show through.

We want, wherever possible, to allow the work to show through our graphics.
NOTE: In instances where layouts will be printed, it maybe be necessary to use a full white (255, 255, 255) as the background color to avoid printing large expanses of off-white from desktop printers. And as a result matching whites may have to be adjusted for consistency.
TYPOGRAPHY OVERVIEW TYPOGRAPHY The Mosaic Studios brand is meant to feel bold, clean, and sophisticated without feeling fussy or rigid.

Try to keep layouts clean, with lots of negative space. It’s always better to break up large blocks of type onto multiple slide.

Always use images and graphic to illustrate your points where possible. And when using images, use the very best available. Each page should look like a final version of one of our shots.

Layout is clean and grid based, but it is meant to be a bit ragged and unconventional. You are encourage to offset type and use idiosyncratic indents and margins. Graphics can overlap and abut one another. Use a border matching the background color to clean up the layout.
TITLES TYPOGRAPHY Titles can be styled in one of 3 sizes and as either solid or outlined variations.

Over a dark background, solid titles appear only in white, while the outlined titles can appear in several possible accent colors.

Try to keep accent colors consistent, at least within a given section or chapter. The various accent colors should be used to designate large blocks of information, not varied per page.

And as discussed in the color section of this guide, no more than one accent color should be used for titles per page.
TITLES TYPOGRAPHY Titles can be styled in one of 3 sizes and as either solid or outlined variations.

Over a dark background, solid titles appear only in white, while the outlined titles can appear in several possible accent colors.

Try to keep accent colors consistent, at least within a given section or chapter. The various accent colors should be used to designate large blocks of information, not varied per page.

And as discussed in the color section of this guide, no more than one accent color should be used for titles per page.
HEADINGS TYPOGRAPHY Subtitles are generally used in conjunction with titles. They can appear above or below.

They are always solid and while they can appear in a number of colors, it is always determined in relation to the title styling: if the title is white, the subtitle should be one of the other accent colors; if the title is itself one of the non-white accent colors, the subtitle should always be white.

The subtitle and the title should never be the same color.

Headings are used normally as ways of breaking up and differentiating blocks of text. They are always grey.
HEADINGS TYPOGRAPHY Subtitles are generally used in conjunction with titles. They can appear above or below.

They are always solid and while they can appear in a number of colors, it is always determined in relation to the title styling: if the title is white, the subtitle should be one of the other accent colors; if the title is itself one of the non-white accent colors, the subtitle should always be white.

The subtitle and the title should never be the same color.

Headings are used normally as ways of breaking up and differentiating blocks of text. They are always grey.
BODY TYPOGRAPHY BODY TYPOGRAPHY EXAMPLE
LAYOUTS