Styleguide TABLE
OF
CONTENTS
Color Logo Primary logos Secondary logos Utility logos Logo marks Overview Titles Headings Body Accent colors Logo colors Typography Logo Example Layouts Graphics Graphic Intro Bug Lower Third
LOGO PRIMARY
LOGOS
LOGOS The Mosaic Studios logo comes 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) or where the full color logo mark is being used elsewhere on the same page.
Click to go to downloads
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.
Click to go to downloads
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.
Click to go to downloads
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 of the lower two panes. If they are applied over and image, the image should be somewhat visible behind it.
Click to go to downloads
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. 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 colors 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. 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. 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.

The 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 GRAPHICS GRAPHIC
INTRO
GRAPHICS The Graphic Intro can be used as a branded introduction to any piece of content and is always used at the start of any Mosaic reel.

A generic version is available for studio-wide content. Custom versions can be created on request for show-specific content. See the VFX Creative Director for more information.
AVAILABLE DOWNLOADS Click to go to downloads Generic Intro UHD (mov)

Generic Intro HD (mov)
BUG GRAPHICS The Mosaic bug is availalble as both a static M mark and an animated version that starts on the Mosaic logo before transitioning to the M mark.

The bug is designed to fill a 60px by 60px box in HD (120px by 120px in UHD). Use the templates provide to position.

The bug is designed so that the M mark aligns with the top of the Show Title and the bottom of the Studio / Network. If for any reason either the bug or the lower third needs to be relocated they should be moved together to maintain this alignment.
AVAILABLE DOWNLOADS Animated UHD Bug (mov)

Animated HD Bug (mov)
Static UHD Bug (png)

Static HD Bug (png)
Click to go to downloads
LOWER THIRDS GRAPHICS Lower Thirds are sized to work with full screen and letterboxed footage. They should appear above a 2:1 letterbox, but fully below a 2:35 or 2:39 letterbox.

Use the positioning guide as the default alignment, but if, for any reason, a letterbox does not fall cleanly, adjust the position. If the lower third cannot sit fully above or below the letterbox, in rare instances the lower third can be positioned so that the letterbox can be aligned between the Show Title and the Studio / Network.

The lower third is designed so that the M mark aligns with the top of the Show Title and the bottom of the Studio / Network. If for any reason either the bug or the lower third needs to be relocated they should be moved together to maintain this alignment.
AVAILABLE DOWNLOADS UHD Layout Guide (png)
HD Layout Guide (png)
Click to go to downloads
EXAMPLE
LAYOUTS