WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS

Size: px
Start display at page:

Download "WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS"

Transcription

1 WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS

2 WEB COLORS 1.0 PRIMARY COLOR PALETTE HEX #f0b323 HEX #d22730 HEX #004c97 HEX #00a9e0 HEX # HEX #f45712 SECONDARY COLOR PALETTE HEX #f4c24f HEX #d84f57 HEX #3670ac HEX #3abae7 HEX #3bad6f HEX #f68656 NEUTRAL COLOR PALETTE HEX #6b7570 HEX # HEX # HEX #eff0f0 UPDATED TYPEFACE OPEN SANS FAMILY A B C D E F G H I J K L M N O P Q R S T abcdefghijklmno A B C D E F G H I J K L M N O P Q R S T U abcdefghijklmno A B C D E F G H I J K L M N O P Q R S a b c d e f g h i j k l m A B C D E F G H I J K L M N O P Q R a b c d e f g h i j k l The Open Sans family is the closest Google Font to the Lowell School brand standard Frutiger font family. In the redesign Regular, Semibold, and Bold are used. The font can found at: fonts.google.com/specimen/ Open+Sans

3 HEADER px 245 x 97px 30px 29px 19px 36px NAV-MENU-ITEM NAV-UTILITY-ITEM SEARCH-ICON 35px 26px 296px H1 HEADLINE (COLORED) BREADCRUMB 160px

4 PAGE SAMPLE px NAV-TITLE NAV-LINK-ACTIVE H1 HEADLINE (COLORED) BREADCRUMB TILE-SM NAV-LINK H2 HEADLINE (WHITE) (CONSISTENT GUTTER) 26px H2 HEADLINE (COLORED) INTRO NAV-DIVIDER BODY

5 VARIOUS PAGE ELEMENTS 2.3 H3 HEADLINE NAV-SUB-LINK BTN-SIDEBAR H4 HEADLINE CONSISTENT WITH BTN-SIDEBAR VIDEO CAPTION 26px MARGIN EACH SIDE CAL-SIDEBAR-TITLE CAL-SIDEBAR-TXT CAL-MONTH CAL-DAY BTN-SM

6 FOOTER px Between the lowest content on the page and the footer 190 x 78px Logo FOOTER-LOGO-TXT FOOTER FOOTER-LINKS-HEADER SOCIAL-ICON FOOTER-LINKS-TXT 401px

7 TEXT & STYLE TREATMENTS 3.0 Nav Title size: 21pt Nav-link size: 17pt Nav-link-active color: Primary Color corresponding to tab [!important;] Nav-sub-link size: 17pt leading: 25pt Nav-Divider height: 1px color: # Footer footer height: 401px color: #6b7570 Body & Other H1 size: 32pt color: Primary Color corresponding to tab Breadcrumb size: 17pt color: # H2 Caption size: 15pt leading: 18pt Btn-sidebar width: 298px height: 38px size: 21pt background-color: Primary Color corresponding to tab or white size: 24pt color: Primary Color corresponding to tab or white H3 Btn-sm width: varies w size of text (use padding) height: 28px padding-left & padding-right: 8px size: 21pt size: 16pt color: # H4 background-color: Primary Color font: Open Sans Bold corresponding to tab or white size: 18pt Cal-sidebar-title color: Primary Color corresponding to tab or # size: 17pt Intro size: 22pt leading: 38pt Body size: 18pt leading: 26pt Video width: 298px height: 194px Cal-sidebar-txt size: 16pt Cal-month size: 17pt Cal-day size: 21pt footer-logo-txt footer-links-header footer-links-txt size: 14pt size: 14pt size: 14pt leading: auto leading: 25pt leading: 18pt padding-bottom: 8pt

8 WEBSITE REDESIGN: HOMEPAGE STYLESHEET

9 HOME PAGE OVERVIEW 4.0

10 HOME PAGE SECTION x 35px MENU-ITEM MENU-ITEM-UTILITY 85px 506px (SAME AS PREV. DESIGN) CAROUSEL 230px (SAME AS PREV. DESIGN) QUOTE 1440PX

11 HOME PAGE SECTION px 406 x 405px (WITH GRADIENT OVERLAY) TILE-LG 29px TILE-LG-HEADLINE TILE-LG-TEXT 22px 24px 22px 26px

12 HOME PAGE SECTION 3: REFRESH 4.3 REFRESH-HEADLINE 20px 28px x various BTN-SM

13 HOME PAGE SECTION (SAME AS 3.0) CAL-DAY (SAME AS 3.0) CAL-MONTH 12px CARD-TITLE CARD-IMG CARD-HEADLINE CARD-TEXT 14px 14px 28px x various BTN-SM 354px SAME AS PREV. DESIGN) (SAME AS 3.0) BTN-SM

14 HOMEPAGE SECTION 5: MEGAMENU x 17px 55px 16px 17px 19px 341px 73px 1 x 240px MM-LINK MM-FEATURE-TEXT MM-FEATURE-HEADLINE 254 x 308px 12px

15 HOMEPAGE TEXT & STYLE TREATMENTS 5.0 Section 1 Section 2 Section 3: Refresh Section 4 menu-item size: 15pt ; menu-item-utility size: 14pt color: #199e4b; tile-lg-headline size: 32pt ; tile-lg-text size: 24pt ; refresh-headline size: 38pt leading: 46pt ; card-title size: 24pt color: #636363; card-img max-height: 201px width: auto; padding-top: 12px; padding-bottom: 15px; card-headline size: 16pt color: #000000; card-text size: 15pt leading: 21pt; color: #000000; Mega Menus mm-feature-headline size: 17pt ; mm-feature-text font: Open Sans Light size: 14pt mm link size: 16pt

Brand Guide Template 1 BRAND STYLE GUIDE

Brand Guide Template 1 BRAND STYLE GUIDE Brand Guide Template 1 BRAND STYLE GUIDE Brand Guide for THE WHOLE BEAN 2 Mission Statement Who We Are We are part of the local community, providing a space for friends and family to share in products

More information

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS: WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters

More information

project / date / JANUARY 20, 2012

project / date / JANUARY 20, 2012 project / date / JANUARY 20, 2012 MONTREAT COLLEGE THIRD-PARTY WEBSITE STYLE GUIDE contents / 1 / GRAPHIC ELEMENTS OVERVIEW 2 / NAVIGATION TOP HEADER WITH NAV 3 / EXAMPLES PORTAL 4 / PHOTO TREATMENT PHOTOGRAPHY

More information

UNSW Global Website Branding Guidelines. Website Brand Guidelines

UNSW Global Website Branding Guidelines. Website Brand Guidelines Website Brand Guidelines I Contents 1 Introduction... 1 2 Website Structure... 1 2.1 Page structure overview... 1 2.2 Home page structure... 1 2.3 Secondary page structure... 4 3 Page elements... 6 3.1

More information

Installation and Activation of Foody pro theme

Installation and Activation of Foody pro theme Installation and Activation of Foody pro theme Installation 1. Install Word Press from http://codex.wordpress.org/installing_wordpress. 2. Upload via Word press Admin: - Go to your WordPress admin panel,

More information

Digital Brand Guidelines 2015

Digital Brand Guidelines 2015 Contents Item Item Item Item Digital Brand Guidelines 2015 Version 1.2 / Updated September 2015 Digital Brand Guidelines Contents Introduction How to use these guidelines 2. Building blocks 2.1 Logo 3.

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

Brand Guidelines. version

Brand Guidelines. version Brand Guidelines version 2017.1 Primary Logo The OPSWAT logo is a universal signature spanning all of our communications. Because it is such a recognizable and highly visible asset, it s important that

More information

MUSE Web Style Guide DRAFT v3

MUSE Web Style Guide DRAFT v3 MUSE Web Style Guide 2016 DRAFT v3 STYLE GUIDE CONTENTS STYLE GUIDE PURPOSE COLOR PALETTE TYPOGRAPHY MOOD BOARD IMAGERY FOR CONCEPTUALIZING HEADER, FOOTER, NAVIGATION HOMEPAGE and DROP DOWN NAVIGATION

More information

Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER

Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER WEB STYLE GUIDE School of Medicine Styleguide LAYOUT Responsive Grid Built with responsive 12 column grid, layouts and components. Grid Variations One Column LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER

More information

The American Legion. Visual Style Guide

The American Legion. Visual Style Guide The American Legion Visual Style Guide 04.15.2015 Table of Contents Communicating the American Legion Brand 3 The Legion Emblem 4 Emblem 5 Logo Type 6 Standard Typefaces 7 Myriad Pro 8 Minion Pro 9 Color

More information

BRAND GUIDELINES + UPDATED

BRAND GUIDELINES + UPDATED + UPDATED NOVEMBER 2015 Primary Mark Guidelines Vertical Lockup is the primary style and should be used across all applications. Do not change the color unless using one of the alternate logos provided

More information

McMaster Brand Standard for Websites

McMaster Brand Standard for Websites McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors

More information

Custom design themes

Custom design themes Custom design themes We support your strategic goals Media Education Businesses Organizations Build audience Engage students Strengthen brand Increase reach By reaching your tactical goals Increase reach

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

NACE LOGO. NACE Plate. NACE Title. Both plate and title must always be shown. NACE Brand Identity NACE Logo 1

NACE LOGO. NACE Plate. NACE Title. Both plate and title must always be shown. NACE Brand Identity NACE Logo 1 NACE BRAND IDENTITY JUNE 2013 NACE LOGO NACE Plate NACE Title Both plate and title must always be shown. NACE Brand Identity NACE Logo 1 NACE LOGO Orientation & Size Vertical Logo Minimum size 1.5 Horizontal

More information

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

IDENTITY SYSTEM GUIDELINES

IDENTITY SYSTEM GUIDELINES IDENTITY SYSTEM GUIDELINES Whether you re starting out, moving up or starting again WE RE READY WHEN YOU ARE August 2014. Version 1.5 Contents 02 CONTENTS 03 Our brand 04 Our Identity 04 Our logo 05 Logo

More information

BRAND GUIDE Indianapolis Classical Schools

BRAND GUIDE Indianapolis Classical Schools Indianapolis Classical Schools This guide is designed to assist with the general appearance and application of the Indianapolis Classical Schools (ICS) brand logomark and its related branding elements.

More information

Santa Tracker. Release Notes Version 1.0

Santa Tracker. Release Notes Version 1.0 Santa Tracker Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen and on the right sidebar click on Manage in the App Parameters area. Edit any

More information

Provider Application User Interface Guidelines. Page 1

Provider Application User Interface Guidelines. Page 1 Provider Application User Interface Guidelines Page 1 Typography The Provider application includes one typeface: Lato ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@ $%^&*()-?/Æ Lato

More information

Brand Guidelines 2017

Brand Guidelines 2017 Brand Guidelines 2017 1. INTRO Signifyd was founded to make fraud-free e-commerce available to every business. Signifyd solves the challenges that growing e-commerce businesses persistently face: billions

More information

Digital Media, UX-UI Design > Website Principles

Digital Media, UX-UI Design > Website Principles Contents At a glance: Page layout header To ensure the correct appearance of our brands in a broad spectrum of applications with a web front end, uniform treatment of design elements is an absolute necessity.

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

Dover Signature Theme (1190)

Dover Signature Theme (1190) Dover Signature Theme (1190) Complete this form for the Dover Signature Theme. Upon completion email your logo and image files to your sales representative. #1 Note: this form does not auto-save. If you

More information

FRESNO STATE. Web Publishing STYLE GUIDE

FRESNO STATE. Web Publishing STYLE GUIDE FRESNO STATE Web Publishing STYLE GUIDE Web Style Guide Table of Contents INTRODUCTION Fresno State Web Publishing Guidelines Resources Quick Start Web Design Template Kits Quick Start Banner Design Catalog

More information

For web design questions, please contact: Christopher McComas Manager, Web Communications

For web design questions, please contact: Christopher McComas Manager, Web Communications WEB DESIGN GUIDE For web design questions, please contact: Christopher McComas Manager, Web Communications 304-696-5720 chris.mccomas@marshall.edu MARSHALL UNIVERSITY BRAND GUIDELINES WEB DESIGN GUIDE

More information

Print Media > Newsletters

Print Media > Newsletters Contents At a glance: Title pages, headers Content pages Templates as a design foundation Corporate design guidelines: Designing the header and title page Newsletters make it possible to inform customers

More information

LOGO AND COLOR STANDARDS

LOGO AND COLOR STANDARDS LOGO AND COLOR STANDARDS DWFI LOGO OPTIONS Spot or 4 - C Process Logo (Main Logo) HORIZONTAL VERTICAL DO NOT Restack type Resposition droplet Change typeface Add effect to logo Distort logo Add Drop Shadow

More information

Cascade V8.4 Website Content Management for the Site Manager UMSL

Cascade V8.4 Website Content Management for the Site Manager UMSL Cascade V8.4 Website Content Management for the Site Manager UMSL Contents Purpose & How to Use This Guide... 5 Getting Started and Logging In... 5 Login... 5 Dashboard... 5 Notifications... 5 Setting

More information

KSB Online-Styleguide

KSB Online-Styleguide KSB Online-Styleguide Guide Stand Version November August 204 203 Design guidelines for online presence 2 In addition to print media, KSB also has an online presence. This style guide documents the main

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

Web Style Guide. Version 2.0

Web Style Guide. Version 2.0 Web Style Guide Version 2.0 Document Overview Reflecting Ryerson s new visual identity, Ryerson's Web Style Guide is a tool to create visual consistency and simplicity across all Ryerson websites. This

More information

Why have branding guidelines?

Why have branding guidelines? Branding Guidelines This This identity identity and brand brand system system has been has been created created to help to help you you present present GÉANT GÉANT in a consistent in a consistent and and

More information

VISUAL GUIDELINES. Communicating EGNOS. Precise navigation, powered by Europe

VISUAL GUIDELINES. Communicating EGNOS. Precise navigation, powered by Europe VISUAL GUIDELINES Communicating EGNOS Precise navigation, powered by Europe COMMUNICATING EGNOS 1. VISUAL IDENTITY: The Logo EGNOS 1.1 Colors 1.2 Security zone 1.3 Minimum size 1.4 Additional logos 1.5

More information

Table of Contents. Projects 10. Typography 3. Summation 13. Corporate Mark 5. Membership Seals 8. Meetups 9. Current Project Logos 10.

Table of Contents. Projects 10. Typography 3. Summation 13. Corporate Mark 5. Membership Seals 8. Meetups 9. Current Project Logos 10. Brand Guidelines Table of Contents Typography 3 Typefaces 3 Typographic Styles 4 Projects 10 Current Project Logos 10 Project Logo Creation 12 Corporate Mark 5 Colors 5 Scalability 5 Variations 6 Summation

More information

Brand Overview COLORS / FONTS / LOGOS rd Street, Suite 210 Denver, CO communityengineeringcorps.org

Brand Overview COLORS / FONTS / LOGOS rd Street, Suite 210 Denver, CO communityengineeringcorps.org Brand Overview COLORS / FONTS / LOGOS 1031 33rd Street, Suite 210 Denver, CO 80205 720 204-3194 Color Palette PRIMARY COLORS PRIMARY PALETTE For most situations, it is important to utilize the two main

More information

PUBLISHER SPECIFIC CSS RULES

PUBLISHER SPECIFIC CSS RULES PUBLISHER SPECIFIC CSS RULES Solita Oy Helsinki Tampere Oulu 26.1.2016 2 (24) Document History Version Date Author Description 0.1 August 17, 2015 J. Similä First draft 0.2 January 26, 2015 A. Autio Fixed

More information

Moore Stephens digital guidelines

Moore Stephens digital guidelines Moore Stephens International PRECISE. PROVEN. PERFORMANCE. Contents Introduction 1 Typography 2 Colour palette 3 Logo and mast 4 Buttons, icons & tags 5 Images 7 Navigation 8 Rolling banner 10 Widgets

More information

Brand Standards 2014

Brand Standards 2014 Logo The logomark consists of the Texas state seal and the logotype. There is a vertical and horizontal version both utilize a two-color palette and a black and white palette. The horizontal format is

More information

BRAND & STYLE GUIDELINES SECTION TITLE 1

BRAND & STYLE GUIDELINES SECTION TITLE 1 BRAND & STYLE GUIDELINES SECTION TITLE 1 2 SECTION TITLE Table of Contents Intro... 4 Company Name and Usage.... 5 Primary Logo and Usage... 6 Secondary Logo and Usage.... 12 Product Branding.... 13 Color

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web Mark Scheme Edexcel Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first candidate in exactly

More information

Brand Identity Guide

Brand Identity Guide Brand Identity Guide Logos Preferred Logo The official logo for St. Vrain Valley Schools. Use the full-color version of the logo when possible. Logos can be downloaded at http://www.svvsd.org/logos FULL

More information

General Reproduction and Usage Guidelines Bizrate Insights Updated 13 Aug, 2018

General Reproduction and Usage Guidelines Bizrate Insights Updated 13 Aug, 2018 General Reproduction and Usage Guidelines Bizrate Insights Updated 13 Aug, 2018 Table of Contents Introduction Logo Fonts Color Geometry Web -Responsive -Navigation -Buttons -Contact Forms -Footer 3 4

More information

ARAP corporate and visual identity guidelines

ARAP corporate and visual identity guidelines APPENDIX 3 ARAP corporate and visual identity guidelines edited by Ilaria Vescovo / www.iaiastudio.com in collaboration with Riccardo D Emidio 1 ARAP corporate and visual identity guidelines manual INDEX

More information

ASMP Website Design Specifications

ASMP Website Design Specifications Page 1 ASMP Website Design Specifications Page 2 All Pages 130 pixels (background = #ffffff) 100 pixels (background = #000000) Header Bar Use logo provided in PSD file. Match size and placement. AMERICAN

More information

Columbia College Visual Identity. Standards & Guidelines for Print & Electronic Media

Columbia College Visual Identity. Standards & Guidelines for Print & Electronic Media Columbia College Visual Identity Standards & Guidelines for Print & Electronic Media Columbia College Visual Identity Version 2.0 Prepared by: Aaron Pinero, Director, Design & Development Columbia College

More information

2018 Brand Guidelines

2018 Brand Guidelines 2018 Brand Guidelines Logo Final Logo Our logo mark is the benchmark of our brand and one of our most valuable assets. Logo Versions Full Version - Linear A. Full Color The preferred way to use the Kinesics

More information

LOGO CONFIGURATION. The tag line Because Nutrition Matters TM. shall only be alinged to the right hand size of the logo.

LOGO CONFIGURATION. The tag line Because Nutrition Matters TM. shall only be alinged to the right hand size of the logo. BRAND USAGE GUIDE LOGO CONFIGURATION The Jaylor word mark is the most visible component of the overall brand identity. The primary lockup consists of two parts: the Jaylor word mark set in the type family

More information

Joomla! Holiday Apartments template Documentation

Joomla! Holiday Apartments template Documentation Joomla! Holiday Apartments template Documentation www.facebook.com/extensionsforjoomla https://twitter.com/e4joomla All the modules that you see in the Demo website of this template are available on our

More information

At a glance: Digital Media, UX-UI Design > HTML Newsletters

At a glance: Digital Media, UX-UI Design > HTML Newsletters Contents At a glance: Look & Feel Constructing HTML newsletters Technical requirements CD guidelines: Brand and Markings Typography Cover letter Teasers Imprint An HTML newsletter is a circular sent via

More information

CSS Mapping in Advanced Mode for Events. Cvent, Inc 1765 Greensboro Station Place McLean, VA

CSS Mapping in Advanced Mode for Events. Cvent, Inc 1765 Greensboro Station Place McLean, VA CSS Mapping in Advanced Mode for Events 2018 Cvent, Inc 1765 Greensboro Station Place McLean, VA 22102 www.cvent.com Contents CSS Mapping in Advanced Mode for Events... 3 Layout Options and Structure...

More information

Visual Identity Guidelines. October 17, 2016

Visual Identity Guidelines. October 17, 2016 Visual Identity Guidelines Colors NEUTRAL PALETTE Usage Notes: Our neutral palette comprises a family of greys. The greys are not based on the same root hue (i.e. they are not shades and tints of a middle

More information

TABLE OF CONTENTS. NAVIGATION & USABILITY 8 Navigation 9 Links 10 Buttons 10 Tabs 10 Search Boxes 11 Log Ins

TABLE OF CONTENTS. NAVIGATION & USABILITY 8 Navigation 9 Links 10 Buttons 10 Tabs 10 Search Boxes 11 Log Ins the rockefeller university hospital CENTER FOR CLINICAL AND TRANSLATIONAL SCIENCE Web graphic standards manual INTRODUCTION The Rockefeller University Hospital s visual identity was created in early 2012

More information

Logo. Primary. Secondary

Logo. Primary. Secondary Logo The logomark consists of the Texas state seal and the logotype. There is a vertical and horizontal version both utilize a two-color palette and a black and white palette. The horizontal format is

More information

Brand Identity Guide. September 2017

Brand Identity Guide. September 2017 Brand Identity Guide September 2017 Welcome At Canada Drives our goal is to be the number one consumer lending company in Canada by making financing simple and accessible to every Canadian while maintaining

More information

UX Style Guide. Color palette MAIN COLORS

UX Style Guide. Color palette MAIN COLORS UX Style Guide 1 Color palette 1.1 MAIN COLORS 1.2 NEUTRAL COLORS 1.3 UTILITY COLORS 2 Icons 2.1 EXCEPTIONS 3 Typography 4 Content and Language 4.1 CAPITALIZATION & PUNCTUATION 4.2 DATA FORMATS 4.3 LANGUAGE

More information

Modular: Shopify Theme

Modular: Shopify Theme Modular: Shopify Theme Table of Contents Introduction 2 Top Bar 2 Header/Branding 3 Main Navigation 3 Backgrounds 4 Global Colors 4 Fonts 4 Home Slideshow 5 Home 6 Collection Pages 6 Product Pages 7 Blog

More information

Growing Our Own Through Collaboration

Growing Our Own Through Collaboration NWI INITIATIVE NUCLEAR WORKFORCE Growing Our Own Through Collaboration BRAND STANDARDS reference guide Brand Standards 2011 SRS Community Reuse Organization. All rights reserved. Version 1.0-02.10.2011

More information

GRAPHIC STANDARDS MANUAL. Appalachian Trail Conservancy Version 1.0

GRAPHIC STANDARDS MANUAL. Appalachian Trail Conservancy Version 1.0 GRAPHIC STANDARDS MANUAL Appalachian Trail Conservancy 2011 - Version 1.0 THE BRAND LOGO Brand Identity Our logo incorporates colors, typeface and graphic treatments to help solidify this program s brand

More information

limelightplatform.com

limelightplatform.com 1 limelightplatform.com Introduction: Email Template Overview: This document is an example of an email template. It contains the different sections that could be included. Email templates provide a layout.

More information

Style Guide for Websites

Style Guide for Websites Style Guide for Websites Content Content Management Systems 3 Process for Building a New Website 4 Training for Sitecore 5 Capabilities Available within Sitecore Responsive Web Design 6 Social Media Integration

More information

Style guide.

Style guide. Style guide www.nam.org Logo Orientation The orientation of the Manufacturing Institute logo is shown below. The base line of the logo mark and typography should be aligned. The logo mark and typography

More information

Brand Identity Guidelines

Brand Identity Guidelines 1st - 7th November 2018 Brand Identity Guidelines Introduction Week is taking place from 1st-7th November 2018 and is a national, cross-industry initiative to promote responsible gambling. To create a

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Quick Start Guide for Club Websites

Quick Start Guide for Club Websites Quick Start Guide for Club Websites Introduction Quick Start Guide for Club Websites For more than 100 years, Rotary has united leaders committed to applying their expertise to better their communities.

More information

Visual style guidance

Visual style guidance Visual style guidance H 36 H Introduction to the Logo Visual style guidance outlines how to use the program logo, color palette, typography and imagery in print and electronic communication products. The

More information

STYLE GUIDE. Version

STYLE GUIDE. Version STYLE GUIDE Version 1.1 2016 TABLE OF CONTENTS 02 Welcome Using our style guide The Hubdoc visual brand is clean, simple, colorful, and fun. It is designed to be flexible and easily adapted to any medium

More information

Introduction. Please review these usage guidelines to help protect the JGI brand, and always use the identity with great care.

Introduction. Please review these usage guidelines to help protect the JGI brand, and always use the identity with great care. Brand Guidelines Introduction :: 2 Introduction The new Joint Genome Institute logo takes an evolutionary step into the future, while staying true to the strength of its past. It possesses smooth, flowing

More information

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

MEDIA KIT. MARCH 2019 / v. 1

MEDIA KIT. MARCH 2019 / v. 1 MEDIA KIT MARCH 2019 / v. 1 BRAND CONSTRUCTION three elements: the Symbol, the (HOLDINGS). To maintain its impact and immediate visual recognition, no text, graphic element, or edge should interfere with

More information

GRAPHIC STANDARDS SEPTEMBER 2016 EDITION. gs.edu

GRAPHIC STANDARDS SEPTEMBER 2016 EDITION. gs.edu GRAPHIC STANDARDS SEPTEMBER 2016 EDITION gs.edu CONTENTS INTRODUCTION THE LOGO VERSIONS A1 Primary Horizontal Logo A2 Primary Stacked Logo A3 Secondary Logo - Mark Only A4 Alignment/Margins VISUAL APPLICATION

More information

Raspberry Pi. Visual identity guidelines. Version

Raspberry Pi. Visual identity guidelines. Version Raspberry Pi Visual identity guidelines Version 3.1 2018-02-20 Contents... Logo 1... Minimum height 2... Spacing 2... Restrictions 3 Colour... 4... Core palette 4... Alternative palette 5... Decorative

More information

INTRODUCTION. Please respect the integrity of the brand and the careful thought and craft that has gone into it.

INTRODUCTION. Please respect the integrity of the brand and the careful thought and craft that has gone into it. BRAND STANDARDS MAY 2017 INTRODUCTION The Intelligent Office brand is more than a name. It is a complete system of color, typography and artwork that reflects the true spirit of the organization. Using

More information

Website Functionality

Website Functionality PAGE DESCRIPTION VENTUS Website Functionality PAGE 1 PAGE DESCRIPTION Global Elements PAGE 2 VENTUS Global Elements - Header GLOBAL HEADER The site s header houses the Ventus Logo, the main navigation

More information

BRAND IDENTITY STANDARDS GUIDE

BRAND IDENTITY STANDARDS GUIDE BRAND IDENTITY STANDARDS GUIDE JANUARY 2015 TABLE OF CONTENTS This brand identity standards guide was created to help establish the BCIU s visual brand image and bring consistency to all visual representations

More information

GRAPHIC STANDARDS BRANDING GUIDELINES 2

GRAPHIC STANDARDS BRANDING GUIDELINES 2 BRANDING GUIDELINES VERSION 1 OCTOBER 2016 GRAPHIC STANDARDS A brand is more than just a logo. It is a consistent look. It is a consistent feel. It is a consistent voice. And behind every successful brand

More information

Advanced Layout Design

Advanced Layout Design Advanced Layout Design Ron Donaldson Technical Account Manager rdonaldson@smartcommunications.com Agenda Layout Basics CJP Driven Logic Responsive emails What is a Layout? Layouts are responsible for managing

More information

WEBSITE USER GUIDE.

WEBSITE USER GUIDE. WEBSITE USER GUIDE www.thegrangekent.co.uk Crafted by Burning Leaf Creatives burningleaf.co.uk May 2018 Fundraising for the children of Five Acre Wood School ABOUT THIS GUIDE This guide has been crafted

More information

MYGOV.SCOT ASSETS. Design Guide for Developers

MYGOV.SCOT ASSETS. Design Guide for Developers MYGOV.SCOT ASSETS Design Guide for Developers Contents Click on the options below for further information: Typography The mygov.scot font is Roboto, this is an open source, licence free font which can

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

Mark Scheme. June Pearson Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web

Mark Scheme. June Pearson Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web Mark Scheme June 016 Pearson Level Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first

More information

The Fox Documentation

The Fox Documentation The Fox Documentation Hi there! Thank you once again for purchasing The Fox Theme. While installing the item or using it, if you need any help, please open a support question at withemes.ticksy.com. Install

More information

Maxis brand guide. Social guidelines. Version 1.0

Maxis brand guide. Social guidelines. Version 1.0 Maxis brand guide Social guidelines Version 1.0 Bringing it all to life Colour palette for social media This set is the recommended palette. The Primary colours are to be used for fonts; the top two greens

More information

BRAND GUIDELINES XL PT Brand XL Guidelines Axiata. All rights reserved

BRAND GUIDELINES XL PT Brand XL Guidelines Axiata. All rights reserved BRAND GUIDELINES 1 2017 XL PT Brand XL Guidelines Axiata. All rights reserved Brandmark Brandmark Consistent and scalable Whilst optimising the previous brandmark s meaning and recognition, our new brandmark

More information

IEEE Wordpress Theme Documentation

IEEE Wordpress Theme Documentation IEEE Wordpress Theme Documentation Version 1.0.2 2014-05- 16 Table of Contents TABLE OF CONTENTS 2 INITIAL SETUP 3 FRONT PAGE 3 POSTS PAGE 4 CONTACT 5 SITE MAP 6 MENU 7 HOME PAGE 8 PAGE TEMPLATES 10 LEFT

More information

Knightswood Secondary School. Graphic Communication. Desktop Publishing otes. Auto Tracing

Knightswood Secondary School. Graphic Communication. Desktop Publishing otes. Auto Tracing Auto Tracing The process of converting a bit mapped image into a vector image. In a bit-mapped image, each object is represented by a pattern of dots, while in a vector image every object is defined geometrically.

More information

Web Guidelines TABLE OF CONTENTS. Expressing and Protecting the Carnegie Mellon University Identity

Web Guidelines TABLE OF CONTENTS. Expressing and Protecting the Carnegie Mellon University Identity Web Guidelines Expressing and Protecting the Carnegie Mellon University Identity TABLE OF CONTENTS Web guidelines Content management system (CMS) 2 Wordmark 2 Colors 3 Typography 4 Links and buttons 4

More information

IANS Style Guide v.1.0

IANS Style Guide v.1.0 IANS Style Guide v.1.0 1 TABLE OF CONTENTS About Our Styles 3 The Logo 4 Fonts & Colors 5 Icon and Stock Art 6 IANS Website Template 7 2 ABOUT OUR STYLES IANS primary focus is on cyber-security. Our goal

More information

RecordQuest. All rights reserved.

RecordQuest. All rights reserved. 2017-2018 RecordQuest. All rights reserved. Table of Contents 1. The RecordQuest Brand What is a Brand? Our Brand 2. Mission Statement 3. Style & Tone 4. Tagline 5. Logo 5.1 Primary Logo 5.2 Logo with

More information

Additional catalogs display. Customize text size and colors.

Additional catalogs display. Customize text size and colors. Collapsible Skin The collapsible skin option displays the catalogs and categories in a collapsible format enabling enhanced navigation on Qnet. Categories can be expanded to view all of the sub categories

More information

From the dashboard, hover over the + New button, then select Pattern from the drop-down menu.

From the dashboard, hover over the + New button, then select Pattern from the drop-down menu. WORDPRESS Log in here: http://www.quiltworx.com/wp-login From the dashboard, hover over the + New button, then select Pattern from the drop-down menu. An alternative way to create a new Pattern post is

More information

Greater Cincinnati Behavioral Health Services Brand Standards

Greater Cincinnati Behavioral Health Services Brand Standards Greater Cincinnati Behavioral Health Services Brand Standards Greater Cincinnati Behavioral Health Services Brand Standards 2 3 7 10 11 Brand Promise Primary Brand Mark Secondary Brand Mark Color Palette

More information

Our brand guidelines. Our photography

Our brand guidelines. Our photography 1 brand guidelines photography Hello. We re the Motor Ombudsman. Please give this document your full attention. It should help you get to know more about us and our corporate guidelines. 2 This section

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with

More information

QUICK GUIDE. Graphics Standards & Guidelines University of Nebraska at Kearney

QUICK GUIDE. Graphics Standards & Guidelines University of Nebraska at Kearney QUICK GUIDE Graphics Standards & Guidelines University of Nebraska at Kearney 08 2016 Summary The visual identity for the University of Nebraska Kearney is the face the school shows the public. It is representative

More information

Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container

Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container ITU 07204: Fundamentals of Web Technologies Lecture 6: CSS Layouts (Intro) Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: CSS Layout (Box Model) 2 CSS Layout: Box Model All HTML

More information

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML HTML is a markup language for describing web pages HTML is used

More information

Introduction. ThinManager - A Rockwell Automation Technology

Introduction. ThinManager - A Rockwell Automation Technology 1220 Old Alpharetta Road, Suite 390 Alpharetta, Georgia 30005 www.thinmanager.com info@thinmanager.com OFFICE 678-990-0945 Introduction... 1 Logo... 2 Clear space and minimum size... 3 Primary color palette...

More information