Brand Bible
"Any sufficiently advanced technology is
indistinguishable from magic."
As a digital media agency who's strength comes from its portfolio, our goal above all else to showcase the high quality work that we produce. For that reason the vast majority of our branding is, and should be
In the rare occasion where we design or brand something that is entirely our own we want to remain fluid and dynamic. This means that this brand guide is by no means a bible or set of mandatory design laws but rather a toy box of elements to be used and played with in any unique and creative way that serves the function of intended source.
The way in which we design should always communicate two main ideals. First by using plenty of negative space in our margins, typography tracking, and layout, we communicate intentionality in everything that is on the 'page' while maintaining a sense of stage that again highlights the work above all else. Secondly there should be a sense or impression of deeper structure. Elements, typography, visual alphabet, and layout should convey a sense that the design is actually an interactive user interface, where pieces of the design correspond or are dependent on each other.
Above all have fun, play with these toys and keep experimenting!
We believe it's the little things that make big ideas great.
As our name suggests we balance and center ourselves between the opposite ends of the creative spectrum. We value and honor the small details in everything we do, while always keeping a steady course on the larger picture and greater vision. Through strategy, creative, and production, we’re dedicated to building a strong and empathetic team culture while going the extra mile to achieve wonder for our clients. We’re the friendly neighborhood creatives, but our neighborhood is global.
We’re a creative force dedicated to producing high quality content to transform brands into dynamic and innovative communicators. Fueled by the perfect formula carefully developed over a decade ago by our scientists, we’re a high performing team that finds meaning in everything we do.
Tiny Giants Co is a call to action for every individual or business that believes they should be defined by their potential for growth, not just what they do right now. It’s a belief that relying on each individual’s strength makes the team mighty, and no matter the size of our endeavours, it’s the little details that set us apart.
We always offer our expert advice to clients in a respectful and clear manner. We always want to recommend the best solutions and make sure that we’re delivering within reasonable expectations to make sure we’re always on the same page.
We’re always looking at the big picture and want to dream alongside our clients, never settling for the obvious or ‘easy-out’ solution. We want to find something unexpected or unique that showcases the full potential in your brand, which is why we never use templates or presets for final delivery. Everything is custom-built just for that specific client, and only for that client.
We work hard to ensure that every project results in a ‘win-win’ for everyone involved. We stay flexible and adaptable to fulfill the client’s vision and make sure that we are in a position to offer our best work and honest advice. Every creative process is a collaborative process and we want to be able to celebrate every outcome.
Strategy, creative, production
We’re a team of dedicated creatives that believe it’s the little things that make big ideas great.
For over a decade, the team at Tiny Giants Co has been creating high-quality content to inspire, move and share the stories of the incredible people and brands around us. We are experts in creative content, global production and marketing strategy. Spread across 3 continents, speaking 6 languages and having worked on projects in over 30 countries, our global shared time makes us a mighty force.
We are a full service creative agency that offers high quality content to transform brands into dynamic and innovative storytellers.
"Absorb what is useful, reject what is useless,
add what is specifically your own."
This is our custom logo typeface, only to be used in the main logo. If a situation arises where more characters are needed in this typeface, additional symbols can be created using the rules of font construction below.
The visual alphabet should be used primarily in a pattern. However, as each symbol corresponds to a characteristic, belief, or core value we hold as a company, they can also be used individually to embellish or enhance the experience of any design when a specific message is needed or intended.
Along with the symbols that represent what we want to offer our clients or how we approach creative work, some of the symbols are there to reinforce our own identity.
In addition the symbols can also be used to “translate” letterforms to create unique interpretations of our branding and core words. This reinforces the purpose of our design style to create the sense of a highly creative abstract system that nonetheless is logically structred even though we never quite reveal the inner mechanics.
Emphasis should always be on showing our work as a primary source of imagery. For instances when our own branding needs to take the forefront we want to show the diversity in how different creative expressions of our brand can take place. Different styles, different colors, different mediums. If the main medium necessary is photography we want to use images that incorporate our brand color in some way, have a wide range of tones, and contain dramatic lighting. Since the context is essential here, imagery can be diverse, so always check with your creative director if it fits the usage.
For web, if Avenir Next is unavailable, use the Google Font “Lato".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
I am batman.
"You do not really understand something unless you can explain it to your grandmother."
Hierarchy of our main server is by client first, followed by job number and name.
The job name should be written in exactly the same format as what appears in our time tracking platform (WorkflowMax) to make things simple to follow and allow for creating a new job with accuracy. That format includes a “-“ between the job number and job name, and the job name being in title case.
The only exception to this is clients who have with us a retainer agreement. Those jobs within the retainer are added as tasks within WorkflowMax, but listed as separate jobs on the Global Share. They should follow the same format as the naming for standard jobs with the exception of beginning with a RN followed by a 5 digit number instead of 6.
Each and every job is broken down into 3 folders: ASSETS, EXPORTS, and PROJECT FILES. These should be written in all caps and there’s should be no project/job that does not contain these 3 folder at the first level besides our internal TINY GIANTS CO folder. These folders should only appear once per job and only immediately following the job name.
Should a job have multiple deliverables within it, say for example an event that requires a flyer, an invitation, and a presentation. Each file type folder (ASSETS, EXPORTS, PROJECT FILES) should contain a folder for each deliverable when necessary.
The file type folders (ASSETS, EXPORTS, and PROJECT FILES) are defined by the type of file contain within them and the most common use for said files. However PROJECT FILES and EXPORTS should be nearly identical in terms of folder structure and name as they are the most closely linked.
These are files are most easily defined as those that are either flat (unworkable), originated outside of our company or work machines, or supplies that serve the creation or manipulation of a job. These files may fall under the following categories:
Since this folder can conceivably contain any file type, it is sorted rather by origin and usage.
Anything we want to bring into a project file (Adobe Software, etc.) must first be placed in ASSETS before being linked or placed within the project.
This does not include animation artwork. Since those files are done in Illustrator and will periodically be changed they should be in Project Files in an ARTWORK or AI folder.
Large amount of assets should be sorted into subfolders of their own. Common subfolders are:
These files are also most easily defined as flat files (unworkable) that are either for external delivery to the client, internal delivery for review and revisions. Most common file types for this folder are flat video (.mp4, .mov, etc), flat images (.jpg, .png, .tiff*), or flat documents (.pdf).
There are a few exceptions for this folder within the design services. Occasionally we will be asked to deliver working files to the client. Even though they are also in Project Files, we need to package them, zip them, and place them into the EXPORTS folder before sending them to the client. These should not replace our internal working files but be a duplicate of them solely for sending to the client.
Another exception would be something like a Powerpoint presentation. This will be sent to a client even though there is no “flat” version of it, and therefore the presentation file will stay within the PROJECT FILES folder. However if you save it as a PDF to send to the client as a proof, then that should be located within EXPORTS.
*.tiff files can be saved to contain layers and are therefore ‘workable’. As a rule we save layered image files from Photoshop as .psd and use .tiff only as a lossless flat image format.
These files are most easily defined as the base for all work created as a company. They may be compiling software built out of external assets (.indd, .pr, .ae), files or single asset creation (.psd, .ai, .doc). The basic rule here is that if you can, have, or will manipulate that file for a project it should be in here.
This is another file type folder, but it is unique as it only appears once in every client, and above all the individual jobs. This folder should contain client specific assets that will be used across multiple jobs or be referenced regularly. These most commonly contain the client’s core branding assets (logo files, typefaces, branding guidelines, etc) but also may include a client supplied image, video, or graphics library that isn’t for one project in particular (see AACo).
Not all jobs require extra organization beyond the 'Holy Trinity' listed above. However projects can grow in scope and complexity so it is important to use common sense when adding additional steps of organization. When necessary or when the file count grows beyond 5 for PROJECT FILES you can create an OLD VERSIONS folder to keep the most recent files easily accessible, or create folders to separate software types like PSD or AI. This is especially important in jobs that cross departments and require both video and design deliverables within one project name. In all things its important to ask at all times:
If I knew nothing about this project, could I still locate this file and understand what it is?
We never work from a place of ‘this makes sense to me’ rather ‘this will make sense to anyone’.
Folders: All folders should be named in ALL CAPS always, with the only exception being the Job Number and Name folder.
File Names: File names should be in Title Case with a “-“ separating each important segment of information. File information should also be in order of importance loosely following the order in which we follow for our folder structure.
For example:
If you are making a flyer for the Italian American Chamber of Commerce West, for their 2020 Gala, a file name should look something like
File names should end in a clear V# to note the latest version. This is separated into decimals for internal exports and whole numbers for external exports. Meaning that clients will only ever receive a 'whole' version like V1 or V2 while we use decimal points to differentiate internal versions when necessary. For some design projects that don't need to be exported every time you may use less internal versions than say a video project.
For example:
Delivery files may contain a V# to help the client distinguish past versions but once final delivery is given it must note that in all caps. For a final version of a video you can use FINAL or if its a particular format, something like PRORES or WEB can apply. For design you will may also use FINAL unless something is more applicable like PRINT, DIGITAL, or MASTER for branding files. These final versions would take the place of a V# and so it should not be included. Additionally for delivery to clients the final file name should include a TGCo at the beginning of the file. This is not necessary anywhere but final delivery.
For example:
It’s important to follow these steps in order to ensure nothing is lost.
Any footage captured needs to be put in the ASSETS folder following this structure.
Duplicate a sequence when making any significant changes to a version / taking over from a previous editor.
Exports should be identical to the sequence name
In general a branding job follows 3 main stages: Concepting, Collaboration, and Execution. However as branding is immensely personal to each business, this process can be heavily customized to fit the unique and individual needs of each client. Final structure of the overall process is determined by the Creative Director on the project or the relevant Producer, this should serve simply as a rough guide for when in doubt, etc.
In this stage we take all information from the client that we acquired through questionnaires and in-person meetings and discuss internally important milestones we need to meet visually to accomplish their goals.
We then develop concepts individually rough ideas through references and mood boards of the direction we’d like to take the brand. These should not be fully developed stylescapes but rather loose “sketches” and references of design direction. This can be in any software that is necessary.
After discussing again internally we decide which directions have the most potential to develop and then create 3-5 stylescapes to present to the client. This should be developed in InDesign.
Once presented to the client and having received the necessary feedback we refine those ideas into one or two stylescapes refined as a complete design direction. This should be the shortest stage of the overall process, simple to ensure confirmation of the final direction.
The final direction/stylescape is now broken down and distilled into a cohesive set of branding guidelines and layouts are developed for all collateral included within the package. A final package is delivered to the client containing all finalized assets.
It’s important to follow these steps in order to ensure nothing is lost.
When beginning a job it is important to assess what softwares should be used for what portion of the project as often you will need to use multiple in any given project. There are exceptions to every rule but in general you should follow these guidelines:
This is the dominant software for most design projects, and will compile assets from other Adobe software. If the project requires equal amounts of text, imagery, and design elements then InDesign is the only real option. Additionally if the design is heavily text dominant, then InDesign is the best software.
This software is best used for vector based graphic elements and custom artwork and illustrations. It’s best to let the design ‘live’ here, but in delivery to the client when it needs to be placed on a company branded page, then it should placed into InDesign to accomplish this.
Though PS has expanded it capabilities over the years its still best at photo manipulation. Use this to edit colors, effects, and re-touching photos to be used within designs. Because it is raster based you’re extremely limited in changing the size down the road so ensure you have made your project large enough that it will be high quality across all platforms. This software should be used to create single compositions, like a photo or element, never for a layout of multiple elements. The one exception is for web ads, because they are very precise in pixel sizing and output and treated as a single image once exported.
When building a website in Webflow, follow these steps to make the development process as efficient as possible.
Once you’re logged into the TGCo Webflow account, select the three dot ••• menu of the Launchpad project. Then duplicate the project. Since we adjust settings for each project individually, we won’t copy any of the settings so deselect all three checkboxes.
Before you start working on the pages, head over to the Project Settings and make the following changes:
Go through the entire Style Guide page and style the html tags and classes according to the visual design. With html tags, make sure to select the pink tag within the class selector and not create a new class (blue tag). Adjust sizes for all smaller breakpoints, if needed.
From the Figma or Adobe XD file, export all the icons, logos and images you need for the web project. Figma layer names should always include the name of the enclosing folder. For example, a logo for the home page specifically would be named ICONS/1. Home/client-logo-dark. This creates a 1. Home folder within the ICONS folder. The export destination is the WEBSITE folder in ASSETS. See Folder Structure and File Naming for more information.
Use JPG for images with no transparency. The file size should be as small as possible and as large as necessary for image quality. Smaller images shouldn’t exceed 150kB while large images (like hero images or banners) can be up to 300kB. If it looks too low-quality, the size can be increased to around 400kB.
Images with transparency should be PNGs. During the export, make sure to only include colors in the color profile that are necessary, to keep the file size as small as possible.
Icons and logos should be uploaded as SVGs. Typography must be expanded to shapes before exporting an SVG.
Structure website asset folders on the Global Share as follows. The first ASSETS folder on the left is the one located inside the job folder inside the client folder.
Any working files for images or animations (e.g. Photoshop, Illustrator or AfterEffects files) are stored inside the PROJECT FILES folder inside the job folder. The folders should be structured as follows. See 01C Keeping It Organised for general file naming conventions.
Keep file names as short as possible while being descriptive. Everything should be written in lowercase.
For logos and icons, the names go from general to specific. Icon file names start with icon (general) - social (more specific) - linkedin (more specific). Include company/organization name, type of logo and the color for logos.
There are some basic components set up as Symbols that are going to be used throughout the website. Add copy, links, logos and adjust styling on mobile if necessary.
When naming CSS classes in Webflow, use the Client-first method. To learn more, look at the documentation and videos here: https://www.finsweet.com/client-first/
Depending on the use case, a grid or a flex box will make more sense to use. Make sure boxes within the grid/box are responsive and don't look squished up on narrow desktop browser. For more element flexibility, use Children Wrap on flex boxes and Auto-fit on grids.
Name interactions using the element name and a description of what it does. When creating universal interactions that will be applied to multiple elements, leave out the element name. To minimize the amount of interaction, utitlize the parent & children property where possible and apply interactions class-wide.
To ensure the website is accessible to as many people as possible, go through the following list and check if the design and functionality of the website line up.
"Best practices usually aren't."
Calls to action motivate the customers to convert, whether by purchasing a product, subscribing to a newsletter and booking an appointment. So it’s important to make those as powerful as possible by optimizing wording, color and positioning. Apply the following rules when creating CTAs on a website and keep the brand personality and website purpose in mind every step of the way.
The navigation is the starting point for a lot of users who want to explore the website and find out more about the product or service. That’s why it should be designed to be as intuitive as possible so users won’t have to worry about where they may or may not land when clicking on a link.
There are a few ways to build SEO-friendly websites, to get as much organic traffic as possible. In addition to utilizing relevant keywords throughout, the website has to speak to what the user is after and specifically target their search intent.