Alfresco Brand Guidelines
Brand Messaging | Our Voice | Brand Visual Identity | Digital Experience | Conclusion
Table of Contents
01
Brand Messaging
02
Our Voice
03
Brand Visual Identity
04
Digital Experience
Vision & Mission
Tone of Voice
Logo
Fonts
Who We Are & Tagline
Terminology
Tag Line
Typography
Values
Fonts
Web Elements
Our Customers
Colors
Mobile Elemnets
Our Solution
Images
Copy Blocks
Flow Wave Icons
05
Conclusion
Resources
Brand Messaging
“People don’t buy what you do they buy why you do it.” - Simon Sinek
Corporate Messaging
Vison & Mission | Who We Are & Tag line | Values | Company | Customers | Solution | Copy
Table of Contents
01
Alfresco Brand
Our Vision & Mission
Our Vision We make business flow faster, more seamlessly, and more intelligently—so that content finds users when and where they need it, processes directly improve outcomes, and organizations achieve more than they ever thought possible.
Our Mission We strive to create a better, more effortless way to unite people with the information and processes they need to continuously adapt, share, and achieve.
Table of Contents
01
Alfresco Brand
Who We Are & Tagline
Who We Are Alfresco is an enterprise open-source software company focused on advancing the flow of digital business.
Tagline make business flow
Table of Contents
01
Alfresco Brand
Values & Personality Traits
Because we value achievment
Because we value transparency
We are empowering
We are open
We define achievement as continually sharing, collaborating, and improving. We strive to empower our employees, partners, and customers to do just that.
Openness is at our core, in the name of our company and in our founding principles. We’re open with each other and transparent in how we operate.
Because we value passion
We are driven
Our passion to disrupt old ways of thinking drives us to question the existing and imagine the next. We’re smart about asking the right questions and coming up with better solutions.
Because we value commitment
Because we value empathy
We’re deeply committed to each other and to the customers we serve. In our diligence, we focus intently on getting the job done to the highest possible standard.
We’re made up of diverse people, and we feel empathy for each person’s unique perspective. Working together, supporting each other, and making each other better are at the heart of everything we do.
We are diligent
We are respectful
Table of Contents
Who We Serve
01
Alfresco Brand
Our Customers
Our customers are global organizations in highly regulated industries who seek solutions to increase their responsiveness, customer focus, and competitive advantage. partners, and customers to do just that.
What They Need Our customers need solutions that make it simple to engage with content, seamless to participate in key business processes and easy to adapt to changing business information needs. The key industries we serve include: Government agencies that need to provide essential services with greater speed and efficiency, and: • Contend with an explosion in the amount of information created through digital channels • Meet government mandates to digitally manage documents and records • Address a new focus on information-sharing and collaboration • Lower TCO from outdated and redundant systems and technology platforms • Improve operational efficiencies by updating work processes • Protect against privacy violations and data breaches • Avoid substantial fines and penalties for discovery failures (in civil or administrative cases) or criminal sanctions for obstruction of justice (in government investigations) • Respond appropriately to FOIA requests, congressional inquiries, etc.
Healthcare companies that need to deliver a higher quality of care and better outcomes, and: • Consolidate data from multiple systems so that there is a single record, cradle-to-grave, for every patient, in which any type of file can be accessed and viewed • Reorganize patient data around the patient, not the system it’s stored in • Improve clinical collaboration; join up care so that all providers have access to the latest information about every patient • Demonstrate “Meaningful Use” Meaningful Use of Electronic Health Records (EHR) • Streamline workflows and automate repetitive processes
Table of Contents
01
Alfresco Brand
Our Customer Challenges
Key Customer Challenges The primary challenge our customers face is making information seamlessly accessible to the people who need it and available for the processes that require it. Additionally, our customers are challenged by:
1 2 3
User and customer demands for immediacy and transparency. In a digital world, workers must be able to instantly access, share, and act on information. At the same time, businesses need visibility into their data—who accesses it and what they do with it.
Requirements to provide access but also secure information. Every business has to contend with the tension between making information instantly accessible and keeping it secure. Highly regulated industries like government, healthcare, and finance have the additional burden of exceptionally high standards of security and compliance.
Business mandates to improve efficiency and productivity. Businesses are under pressure to do more with less. When work is digital, that translates to creating the most efficient processes possible for surfacing, sharing, routing, and iterating around content.
Table of Contents
What We Deliver
01
Alfresco Brand
Our Solution
Alfresco provides the most flexible, scalable, and open platform that intelligently activates content and processes, delivering the fastest path for people to interact with information and for companies to respond to changing business needs.
How We’re Different (Key Messages) Unlike other solutions that don’t have enterprise scale and security, can’t quickly adapt to business changes, and require extensive IT support, the Alfresco platform:
1 2 3
Is the easiest to deploy and use and the fastest to deliver value. Alfresco solutions are built on the most advanced open source foundation, giving our customers complete deployment flexibility, faster time to value, and the ability to continuously adapt to business and technology changes.
Solves complex problems for the largest organizations in the world. From document management to case management to information governance, Alfresco helps organizations build tailored, enterprise-class solutions that make it effortless to use, share, and integrate content with the flow of business. And we guarantee their success with our commitment to world-class support and services.
Understands how to put information to work. By focusing on users and their work streams, the Alfresco platform is able to intelligently activate content and processes based on who someone is, what they’re working on, who they’re working with, and what they’re trying to accomplish. It’s about the right information finding the right users, not the other way around.
Why It’s Important In a world where data is exploding and employees and customers expect work to be digital, businesses need to reinvent themselves. It’s more important than ever to empower users by connecting them with the right content at the right time in the right way. Alfresco helps organizations create intelligent, seamless processes that advance the way business gets done.
Table of Contents
01
Alfresco Brand
Copy Blocks
25 Word Alfresco provides a better, more effortless way to work by delivering the fastest path for people to interact with—and act on—the information that drives their business.
50 Word Alfresco provides a better, more effortless way for people to work by making sure they have the information they need, exactly when they need it most. Our open platform is the most flexible and scalable on the market, delivering the fastest path for people to interact with, and act on, the information that drives their business.
100 Word Alfresco provides a better, more effortless way for people to work by making sure they have the information they need, exactly when they need it most. Our open platform is the most flexible and scalable on the market, delivering the fastest path for people to interact with, and act on, the information that drives their business. By focusing on users and what they need to accomplish, we help the largest, most complex organizations build solutions where content finds users when and where they are, processes dynamically adapt to changing business needs, and the organization as a whole is more responsive and competitive.
Our Voice
“Branding is the art of differentiation.� - David Brier
Tone of Voice
Tone of Voice | Terminology
Table of Contents
02
Tone of Voice
Overview & Guide
Tone of Voice Our tone of voice is used to guide our verbal expression. And it’s not just about how we speak; it’s also about how we make you feel. Our tone has the following attributes:
1 2 3
Our voice is SMART. It inspires CONFIDENCE. What we do is extremely complex, but we make it simple, with a very smart approach. We work with important global enterprises. We solve diverse challenges. We support high-stakes endeavors. As a result, we speak with intelligence and authority. We know what we’re doing, and we convey that confidence in our communication.
Our voice is PASSIONATE. It inspires BELIEF. Whether we’re helping doctors deliver better care at hospitals, speeding the implementation of government programs, or making it easier for businesses to get products to market, what we’re doing matters. As a result, we speak with passion. We believe in what we’re doing, and our voice has the energy to show it.
Our voice is OPEN. It inspires CONNECTION. We listen. We’re inquisitive. And we engage. That means we value the perspectives, beliefs, and feelings of others. We build connections with influencers and customers, working together to achieve great things. We take responsibility for driving the community forward. And we never forget to balance our open-source roots with the people whose livelihoods we support.
Table of Contents
Terminology
02
The new positioning requires a complete shift in the terminology we use.
FROM
TO
company
ECM + BPM
Flow of digital business
one word
Simple, smart and open
Flow
one line
Connecting people, content and processes
Unite people with the information and processes they need
promise
Accelerate digital transformation
A better, more effortless way to work
value prop
Create efficient connected processes that present content in context
Intelligently activate content and processes
audience
Developers
Digitally-driven organizations
What we do:
Why we do it:
Lead the convergence of ECM and BPM
Help companies and their people achieve more
how
Create efficient connected processes that present content in context
By delivering the fastest path for people to interact with information and for companies to respond to changing business needs
marketing
Products
Impact
emotion
Trust
Empowerment
Tone of Voice
Terminology
pov
Brand Visual Identity
“Strong brands opens hearts — and wallets” - Laura Busche
Visual Style
Logo | Tag line | Fonts | Colors | Images | Flow Wave | Icons
Table of Contents
03
Visual Style
Logo
Main Logo
This is the Alfresco full color logo. This a registered trademark and should be the primary asset used to represent our company in all internal and external collateral.
Table of Contents
03
Visual Style
Logo Padding & Sizing Spacing Off of Flower Icon
Minimum Height 20px
This is the standard sizing and spacing criteria for the main logo. The logo should never be scaled smaller than 20 px in height. There should always be spacing of at least an “A� from any other asset; whether that be from copy, an image, a border, etc. Spacing should always be made based on the outer most dimensions of the logo. Whenever scaling this logo never alter the aspect ratio; meaning do not stretch, squish or rotate the logo.
Locked Ratio
Minimum Width 73.6px
Table of Contents
03
Visual Style
Logo Variations Gray Logo
Always default to using the full color version of the logo, however depending on printing requirements or background colors you may need to use other versions of the logo for readability. All of these options are approved versions of the original logo. Use the ‘grayscale logo’ on any documents that will be printed in black and white. Use either of the ‘one-color logos’ whenever one-color or two-color printing is required.
Reversed White Logo
Grayscale Logo
Logo One-Color White
Table of Contents
03
Visual Style
Logo Don’ts
These are a few examples of how the logo should not be used or manipulated. Do not change the size, placement, spacing or color of the Alfresco Flower or the word Alfresco. Also, please do not use word Alfresco by itself without the flower. The standard logo includes the Alfresco Flower the word Alfresco and the registered trademark symbol. If ever in doubt please refer back to the Logo page of this document.
Table of Contents
03
Visual Style
Logo Icon & Explaination
This is the full color Alfresco Flower icon. It was created to represent a fresh outdoor landscape. The orange petals represent the sun, the green petals represent the grass, and the blue petals represent the sky. These three sections of the Alfresco Flower are the inspiration for the brand color palette.
Main Icon Icon Meaning
Table of Contents
03
Visual Style
Logo Icon Padding Minimum Height 20px
This is the standard sizing and spacing criteria for the Alfresco Flower icon. This icon should never be scaled smaller than 20 px in height. There should always be spacing of at least an “A� from any other asset; whether that be from copy, an image, a border, etc. Whenever scaling this icon never alter the aspect ratio; meaning do not stretch, squish or rotate the icon.
Locked Ratio
Minimum Height 20px
Table of Contents
03
Visual Style
Logo Icon Variations Grayscale Icon
Icon on Colored Background
Always default to using the full color version of the icon, however depending on printing requirements you may be required to use other versions of this icon. All of these options are approved versions. However, because the icon has a white stroke around it, it can be used on any background no matter the color. Only use the other versions when when doing one-color or two-color printing.
Icon One-Color White
Table of Contents
03
Visual Style
Logo Icon Don’ts
These are a few examples of how the icon should not be used or manipulated. The Alfresco Flower should never be altered; that includes the petal colors, the stroke width and the stroke color. The icon should always be positioned with the orange petal on the top right and green petals on the bottom. If ever in doubt please refer back to the Icon page of this document.
Table of Contents
03
Visual Style
Tag Line
Main Tag line - Custom font design
This is the Alfresco company tag line. This should be used as a secondary visual element to the main logo.
Table of Contents
03
Visual Style
Tag Line Padding & Sizing Minimum Height 7px
Locked Ratio
This is the standard sizing and spacing criteria for the Alfresco tag line. This tag line should never be scaled smaller than 7 px in height. There should always be spacing of at least a “m� from any other asset; whether that be from copy, an image, a border etc. Whenever scaling the tag line never alter the aspect ratio; meaning do not stretch, squish or rotate.
Minimum Width 94px
Table of Contents
03
Visual Style
Tag Line Variations
Always default to using the Alfresco standard logo to represent the Alfresco brand. However, the tag line can be used with or without the Alfresco logo. Whenever using the tag line with the Alfresco logo make sure you are using one of the approved versions of the Alfresco logo and tag line pairings shown here. All of these options are approved versions. For darker background colors use the white logo and tag line options.
Table of Contents
03
Visual Style
Tag Line Don’ts
These are a few examples of how the tag line should not be used or manipulated. The Alfresco tag line should never be altered; that includes the petal colors, the stroke width and the stroke color. Do not change the color, position or font of the tag line. Please note that typing the tag line is only acceptable in written copy. In all other cases use one of the approved variations. If ever in doubt please refer back to the tag line page of this document.
Table of Contents
03
Visual Style
Fonts
These are the two approved Alfresco typefaces. Museo slab is Alfresco’s personality typeface and should only be used for headlines, titles, or to distinguish a certain set of text from another. Museo slab comes in a number of family options, but you should only use either Museo 700 or Museo 300. Museo 100 is allowed in certain situations that require a thinner font. Helvetica Neue is Alfresco’s body typeface. It should be used for any and all designed copy including subtitles, body copy, etc. Helvetica Neue comes in a variety of families, but you should only use either Helvetica Neue Light or Helvetica Neue Bold.
Aa Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Museo Slab
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Helvetica Neue
Table of Contents
03
Visual Style
Colors
This is the Alfresco color palette. There are three main Alfresco color groups, each with it’s own secondary color palette. Green is the primary Alfresco color, it should always be the first choice when choosing a color to represent Alfresco. Blue is the secondary Alfresco color which should be used after Alfresco green. Orange the tertiary Alfresco color and should be used for actions or to call out emphasis. This color palette is in alignement with Google Material Design in order to create consistency with Alfresco product design.
Green
Blue
Orange
#8bc34a R:139 G:139 B:74 C:51 M:2 Y:94 K:0
#2196f3 R:33 G:150 B:243 C:71 M:34 Y:0 K:0
#ff9901 R:255 G:153 B:1 C:0 M:47 Y:100 K:0
Dark Green
Dark Blue
Dark Orange
#43a047 R:67 G:160 B:71 C:76 M:13 Y:100 K:1
#01579b R:1 G:87 B:155 C:98 M:72 Y:9 K:1
#e65100 R:230 G:81 B:0 C:5 M:83 Y:100 K:1
Jade Green
Aqua Blue
Gold Orange
#22be73 R:34 G:190 B:115 C:73 M:0 Y:76 K:0
#00bcd4 R:0 G:188 B:212 C:70 M:1 Y:16 K:0
#f2b20f R:242 G:178 B:15 C:5 M:32 Y:100 K:0
Pear Green
Baby Blue
Sunlight Orange
#cddc39 R:205 G:220 B:57 C:24 M:0 Y:94 K:0
#81d4fa R:129 G:212 B:250 C:34 M:1 Y:0 K:0
#ffd600 R:255 G:214 B:0 C:1 M:13 Y:100 K:0
Dark Gray
Harbor Gray
Silver Gray
#36373a R:54 G:55 B:58 C:71 M:64 Y:59 K:53
#e3e3e4 R:227 G:227 B:228 C:10 M:7 Y:7 K:0
#eef0f0 R:238 G:240 B:240 C:5 M:3 Y:3 K:0
Gray
Fog Gray
Silk Gray
White
#727174 R:114 G:113 B:116 C:57 M:49 Y:46 K:13
#e6e6ec R:230 G:230 B:236 C:8 M:7 Y:3 K:0
#f9f9f9 R:249 G:249 B:249 C:2 M:1 Y:1 K:0
#ffffff R:255 G:255 B:255 C:0 M:0 Y:0 K:0
Table of Contents
03
Visual Style
Brand & Product Color Alignment
To create a strong brand it is key for the handoff from marketing into the product line feel cohessive and align as much as possible. This helps create a more seemless experince for our users throughout their entire journey. In order to help achieve this we recommend to align our three main colors accordingly. Please use your best judgment when trying to align these colors. For example look for natural sections of content to apply the different colors.
Main color alignment between brand & product.
Content Services (ECM)
Process Services (BPM)
Actions / Emphasis
Blue
Green
Orange
#2196f3 R:33 G:150 B:243 C:71 M:34 Y:0 K:0
#8bc34a R:139 G:139 B:74 C:51 M:2 Y:94 K:0
#ff9901 R:255 G:153 B:1 C:0 M:47 Y:100 K:0
Table of Contents
03
Visual Style
Image Style
This is the Alfresco image style. Images should always be treated in this style and used to help support the content or concept being conveyed.
Table of Contents
03
Final Image
Visual Style
Image Style Treatment
Shape Mask Image Duplicate High Pass Filter: Blend Mode: Overlay Fill Shape Color Opacity: 20% Blend Mode: Multiply This is the process of how we create the Alfresco image style. These style steps were created using Adobe Products.
Original Image B/W Filter Contrast Filter: 47%
Table of Contents
03
Visual Style
Photogaphy Style Access to Content
Photography used in representation of Alfresco should fall into these categories: Access to Content, Collaboration, and Interaction Sets. Access to Content photography style should depict a business professional using a device. This person can be in a variety of spaces but they should always be using a device to help assist them in their work. Photography should feel candid and always exclude images that show individuals looking directly at the camera. A couple examples are shown here.
Table of Contents
03
Visual Style
Photography Style Collaboration
Photography used in representation of Alfresco should fall into these categories: Access to Content, Collaboration, and Interaction Sets. Collaboration style photography can be in a variety of settings, but should always have two or more business professionals collaborating on a project or engaging in conversation with one another. Although no device is necessary in this set of photography, it is strongly recommended. Photography should feel candid and always exclude images that show individuals looking directly at the camera. A couple examples are shown here.
Table of Contents
03
Visual Style
Photography Interaction Sets
Photography used in representation of Alfresco should fall into these categories: Access to Content, Collaboration, and Interaction Sets. Interaction sets are a great way to create consistancy throughout a content experience. These are ideal because they allow you to gather a multitude of images that include the same group of individuals engaging in various activities. Interaction sets will often have Access to Content style and Collaboration style within as well.
Table of Contents
03
Visual Style
Flow Wave Styles
These are the Alfresco “Flow Wave” styles. These are used to support the Alfresco tag line and company focus: “make business flow.” There are two different styles of Flow Waves: Bold and Subtle Styles.
Flow Wave - Bold Style
Flow Wave - Subtle Style
Use: Bold Style is to be used when making a strong statement supporting our corporate messaging tag line: “make business flow” and is the primary focal point.
Use: Subtle Style is to be used when wanting to hint the idea of our corporate messaging tag line “make business flow” but it is not the primary focal point.
Table of Contents
03
Visual Style
Flow Wave Bold 1 Green
Flow Wave Bold 1 Blue
Flow Wave Bold 1 Orange
Flow Wave Bold 2 Green
Flow Wave Bold 2 Blue
Flow Wave Bold 2 Orange
Flow Wave Bold Style
These are the different variations of the Flow Wave - Bold Style. There are two versions for each of the three main colors. When using the Flow Wave - Bold Style it should always be used by itelf and on a white background to support content. Do not mix it with imagery or other graphic elements. For the Flow Wave always use the same color palette together do not mix the colors together.
Table of Contents
03
Flow Wave - Subtle 1 Green
Flow Wave - Subtle 1 Jade Green
Flow Wave - Subtle 1 Dark Green
Flow Wave - Subtle 2 Green
Flow Wave - Subtle 2 Jade Green
Flow Wave - Subtle 2 Dark Green
Visual Style
Flow Wave Subtle Style
These are the two different variations of the Flow Wave - Subtle Style. These can be used within each of three main color palettes: green, blue, and orange. When using the Flow Wave - Subtle Style it should always be used over a color background. Do not mix it with imagery or other graphic elements. Always use the same color palette together do not mix the colors together. Example: if using Flow Wave - Subtle 1 Green, use other greens and not blue or orange.
Blue Color Palette
Orange Color Palette
Table of Contents
03
Icon Color Palette
Visual Style
Gray: #717174 Business Process Management Icon
Case Management Icon
Collaboration Icon
Compliance Icon
Content Management Icon
Business Process Management Filled Icon
Case Management Filled Icon
Collaboration Filled Icon
Compliance Filled Icon
Content Management Filled Icon
Icon Style
Gray Icons use on Light Background Examples:
These are examples of the Alfresco icon style. Each icon has a solid fill and an outlined version. Each icons may be used with gray or white. Use gray if icon is over a light background and use white is icon is over any color background.
White Icons use on Color Background Examples:
White: #ffffff
Digital Experience
“Start with Why!” - Simon Sinek
Visual Style
Fonts | Typography | Web Elements | Mobile Elements
Table of Contents
04
Digital Style
Fonts
These are the two approved Alfresco typefaces for web. Museo slab is Alfresco’s personality typeface and should only be used for headlines, titles, or to distinguish a certain set of text from another. Museo slab comes in a number of family options, but you should only use either Museo 700 or Museo 300. Roboto should be used for any other copy on the website which includes subtitles, body copy, etc. Roboto comes in a variety of families, but the main two options that should be used for web are Roboto Regular or Roboto Bold.
Aa Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Museo Slab
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Roboto
Table of Contents
04
Digital Style
Headline Text
Headline Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
Headline Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
Headline
All Headline text should be in the font Museo slab. These are the different sizes of headline fonts that can be used.
H1 Font: Museo 700 Weight: 36 pt
H2 Font: Museo 700 Weight: 30 pt
Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
H3 Font: Museo 700 Weight: 24 pt
Headline Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
H4 Font: Museo 700 Weight: 18 pt
Headline Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
H5 Font: Museo 300 Weight: 24 pt
Table of Contents
04
Digital Style
Body Text
Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
Size: Normal Font: Roboto Regular Weight: 16 pt
Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
Size: X Small Font: Roboto Regular Weight: 13 pt
Ratur sum endamet estota dolorio ribusandis por as dolore volor seque volorit, ipsam ex eum.
Size: Small Font: Roboto Regular Weight: 14 pt
Ratur sum endamet estota dolorio ribusandis por as dolore volor seque
Size: Medium Font: Roboto Regular Weight: 18 pt
Ratur sum endamet estota dolorio ribusandis por as dolore
Size: Medium 2 Font: Roboto Regular Weight: 22 pt
Ratur sum endamet estota dolorio ribusandis por as
Size: Medium 3 Font: Roboto Regular Weight: 24 pt
Ratur sum endamet
Ratur sum endamet
Ratur sum endamet All body text for web should be Roboto Regular. These are the different sizes of body fonts that can be used.
Size: Large Font: Roboto Regular Weight: 30 pt Size: X Large Font: Roboto Regular Weight: 32 pt Size: XX Large Font: Roboto Regular Weight: 36 pt
Table of Contents
04
Digital Style
Inline Links
In-Line links should always be the same size and font as surrounding body copy. Links should always be underlined and use one of the three main brand colors. When choosing a link color, please match the corresponding palette of the section or page. Please note the specified color change for each rollover hover state.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Natural State #ff9901
Natural State #8bc34a
Natural State #2196f3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor i ncididunt ut labore et dolore magna.
Hover State #e65100
Hover State #43a047
Hover State #01579b
Table of Contents
04
Digital Style
Content Section Example
Headline Divider 1px
Body Copy
In-Line Link
Here is an example of how to use all the font styling guidelines to properly create a block of text. Please note that the headline and copy is separated by a 1px divider.
Table of Contents
04
Digital Style
Web Illustrations Shape Fill #eef0f0 Icon Fill Color per Section
Stroke: 1px #727174
Web illustrations are used to help support the explanation of a product or service. Illustrations are always 500px x 500px @ 72dpi. Each illustration uses white and gray shapes to help convey the idea and then uses one of the Alfresco main colors to highlight a specific action to help call out the specific concept. A couple examples are shown here.
Grounded Shapes Add Drop Shadow
Flat Illustration Style
Table of Contents
04
Digital Style
Web Animtations Frame 1
Web animations are the same as Web illustrations but they are animated. All animations should be acompanied by a static web illustration as backup in case an animation does not load. Animations should be simple and only used to help support the concept being conveyed. An animation storyboard example is shown here.
Frame 2
Frame 4
Frame 3
Frame 5
Table of Contents
Main Buttons
04
Digital Style
Button Styles
Fill: #ff9901 Stroke: 1px Color: #e65100
Button Museo Medium Color: #ffffff Fill: #8bc34a Stroke: 1px Color: #43a047
Button Museo Medium Color: #ffffff Fill: #2196f3 Stroke: 1px Color: #01579b
Button Museo Medium Color: #ffffff
There are two sets of button styles, filled and outlined. Always use the main color buttons first. If readability is an issue then use the secondary buttons.
Main Buttons Hover
Stroke: 1px Color: #ff9901
Button Museo Medium Color: #ff9901
Stroke: 1px Color: #8bc34a
Button Museo Medium Color: #8bc34a Stroke: 1px Color: #2196f3
Button Museo Medium Color: #2196f3
Secondary Buttons Fill: #e65100 Stroke: 1px Color: #c04400
Button Museo Medium Color: #ffffff Fill: #43a047 Stroke: 1px Color: #056219
Button Museo Medium Color: #ffffff Fill: #01579b Stroke: 1px Color: #002e82
Button Museo Medium Color: #ffffff
Secondary Buttons Hover
Stroke: 1px Color: #e65100
Button Museo Medium Color: #e65100
Stroke: 1px Color: #43a047
Button Museo Medium Color: #43a047 Stroke: 1px Color: #01579b
Button Museo Medium Color: #01579b
Table of Contents
04
Fill HEX: #ffffff Stroke: 1 px HEX: # e3e3e4
Digital Style
Card Style
Drop Shadow: Multiply Opacity: 35% Angle: 90 Distance 3px Size: 4px
Fill HEX: #eef0f0
Action
Here is an example of the card style. All cards are white with a 1px stroke and an outer shadow. All cards, no matter the size should always float on top of a gray filled background. These styles pull inspiration from Google Material Design.
Table of Contents
Drop down action area
04
Selection notification
Digital Style
Drop down hover state Underline Fill Color: #2196f3
Menu Style Multi-selection toggles Fill Hex: #ffffff Stroke: 1px Hex: #e3e3e4 Drop Shadow: Multiply Hex: #000000 Opacity: 35% Angle: 90 Distance 3px Size: 4px
Here is an example and breakdown of a website menu. These styles pull inspiration from Google Material Design.
Table of Contents
Link action area
04
Drop down hover state Underline Fill Color: #2196f3
Digital Style
Navigation Style
Fill HEX: #ffffff
Stroke: 1px Hex: #e6e6ec
Stroke: 1px Hex: #e6e6ec Drop Shadow: Multiply Hex: #000000 Opacity: 35% Angle: 90 Distance 8px Size: 9px
Here is an example and breakdown of the main website navigation.
Fill HEX: #eef0f0 Stroke: 1px Hex: #e6e6ec
Table of Contents
04
Table Header Sub-Category #727174
Digital Style
Table Style
Table Background #ffffff
Stroke: 1px #e3e3e4
Divder Background #eef0f0
Divider Stroke: 1px #e3e3e4
Table Header Color Options #8bc34a
All tables should follow the Alfresco color palette. To make each row easier to read, please make every other row light gray. There should always be a stroke around each table to distinguish it from the background.
#2196f3
#ff9901
Table of Contents
04
Form Digital Style
Form Style
Form Field Stroke 1px #e3e3e4
Form Header
Form Field* Form Field* Form Field*
Form Field Text Roboto Regular
Stroke 1px #e3e3e4
Form Field* Form Field* Form Field*
Button *Required Field
Styled Green Button
Alfresco respects your privacy
Form Background #ffffff
Form Header Color Options #8bc34a All forms should follow the Alfresco color palette. Please follow the standard card styling for all form backgrounds as well as standard button styling for all buttons used within a form. Please note that the button should follow same color as the form header and other styling.
#2196f3
#ff9901
Table of Contents
04
Digital Style
Web Tool Icons Style
Close Icon
These are examples of the Alfresco web icon style. These are simple outlined icons that help represent basic web menu functions.
Menu Icon
Search Icon
Email Icon
Language Icon
Table of Contents
04
Card Normal State not touching device
Digital Style
Mobile Card Style
Here is an example of how a card style looks on a mobile device.
Card Touch State touch card
Table of Contents
04
Dropdown Normal State menu closed
Dropdown Open State item touched to open menu
Digital Style
Mobile Menu Style
Dropdown Selected State item selected
Here is an example of how a menu looks on a mobile device.
Dropdown Notification State clicked out of menu, selection notification
Dropdown Touch / Click State item touched showing action
Table of Contents
04
Mobile Normal State not touching menu
Digital Style
Mobile Navigation Style
Here is an example of the navigation looks on a mobile device.
Mobile Open State touched hamburger menu to open
Mobile Dropdown State touched menu item to open dropdown
Conclusion
“Unify. Simplify. Amplify.” - Ken Cartone
Resources
Why Alfresco | Resources
Table of Contents
05
Conclusion
Why Alfresco
Our Vision We make business flow faster, more seamlessly, and more intelligently—so that content finds users when and where they need it, processes directly improve outcomes, and organizations achieve more than they ever thought possible.
Our Mission We strive to create a better, more effortless way to unite people with the information and processes they need to continuously adapt, share, and achieve.
Table of Contents
05
Conclusion
Brand Asset Library
Visit the Brand Asset Library
The Brand Asset Library on Alfresco TS is an internal resource that has images, icons, logos etc. that were discussed in this guide. Please visit this site for more information or to gather any necessary brand assets.
© 2017 Alfresco Software, Inc. All Rights Reserved.