Brand Bible

We Are

"Any sufficiently advanced technology is
indistinguishable from magic."
Arthur C. Clarke


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.

As a group of creative individuals we should be communicating that we are contantly translating raw information into a creative solution and presenting that result in a unique way to the viewer.

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.


Brand Attributes




"Absorb what is useful, reject what is useless,
add what is specifically your own."
Bruce Lee

Visual Alphabet

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.

Visual Alphabet
Inspiration, creativity, speed
Direction, accuracy, dynamics
Hard work, sweat, reliability
Secret ingredient, magic, speciality
Authority, loyalty, standards
Vision, foresight, perspective
Authenticity, connection
Strength, initiative
Leadership, unity, dedication
Quality, value, excellence
Exploration, discovery, journey
Grounded, stable, vital
Communication, messaging, storytelling
Commitment, readiness, effort
Global, world-building, open
Strategy, tactics, maneuverability
Unity, team work, power
Persistence, depth, precision
Goals, planning, ascension

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.

We are Tiny Giants, small details and big ideas
We work as a group, a collective, a co-op, all together
Always remember where we’ve come from
North Rhine-Westphalia
New South Wales
We just love coffee

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.

Translation of Logotype


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.



Font Weights

Web Typography

For web, if Avenir Next is unavailable, use the Google Font “Lato".


We are a creative agency


A band of misfits and legends


Adding their touch of magic


And tackling challenges

Like batman
The end

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.

Block Quote
I am batman.
Text Link
Get in Touch
Watch Showreel


Text Colours

0 / 0 / 0
75 / 68 / 67 / 90
190 / 190 / 190
0 / 0 / 0 / 25
Light Grey
128 / 128 / 128
0 / 0 / 0 / 50
Dark Grey
255 / 255 / 255
0 / 0 / 0 / 0

Brand Colours

5 / 157 / 165
80 / 18 / 36 / 0.5
Giant Blue
24 / 110 / 125
87.5 / 44 / 42 / 13
Giant Shadow


"You do not really understand something unless you can explain it to your grandmother."
Albert Einstein

File Management

Folder Hierarchy

Hierarchy of our main server is by client first, followed by job number and name.

J000000 - Project 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.

J000010 - GCO Design Work
RN00001 - Social Media & Web

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.


The Holy Trinity

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.

J000010 - GCO Design Work

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:

  • Supplied by the client (even working files like InDesign, as long as we have not worked on them previously)
  • Footage, photos, or recordings that we have made, directly coming from the capturing device
  • Images, textures, design elements, or stock that we have not manipulated or integrated into a project
  • Production documents like call sheets or shot lists

Since this folder can conceivably contain any file type, it is sorted rather by origin and usage.

You must never add in an asset that is located locally on your computer (Downloads, Desktops, Documents, etc).

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.

Project Files

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.

Common Assets

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).


Keeping it Organised

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

IACCW - 2020 Gala - Flyer.indd

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:

Project File -
Project File -
Project File -

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:

TGCo - Client Name - Video Project -
TGCo - Client Name - Design Project - PRINT.pdf

Setting Up Jobs

Video Jobs

It’s important to follow these steps in order to ensure nothing is lost.

  • Create Job folder that matches WFM job number and name
  • Create ASSETS, EXPORTS, and PROJECT FILES folders
  • Begin dropping in everything you have that relates to the job into ASSETS, organizing it as necessary.
  • Create a file in the most effective software for the job (Pr, Ae) and name it following the proper naming procedures. If updating a working file supplied by the client, open what they delivered from ASSETS and save it immediately under our naming system to PROJECT FILES before making any changes.
Footage Management

Any footage captured needs to be put in the ASSETS folder following this structure.

Setting up a Project in Premiere Pro
  • Create a folder structure using ASSETS and SEQUENCES as a base
  • For anything brought into the ASSETS folder mirror the folder structure used in Finder
  • Create folders for any other elements created in Premiere, such as TITLES
  • Any other elements that may not fit into any of those groups (such as ADJUSTMENT LAYERS, SOLIDS, etc.) should be put in a TOOLS folder

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


Branding Jobs

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.


Design Jobs

It’s important to follow these steps in order to ensure nothing is lost.

  • Create Job folder that matches WFM job number and name
  • Create ASSETS, EXPORTS, and PROJECT FILES folders
  • Begin dropping in everything you have that relates to the job into ASSETS, organizing it as necessary.
  • Create a file in the most effective software for the job (Ps, Id, Ai) and name it following the proper naming procedures. If updating a working file supplied by the client, open what they delivered from ASSETS and save it immediately under our naming system to PROJECT FILES before making any changes.
  • Layer standards for Photoshop, Indesign, Illustrator and what to use each for
  • Grouping, aligning
  • Delivery standards for print, color management, DPI for email etc
  • Rules of design

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.

  • Set up your document with the correct size, bleeds (if for print), and a margin. If the size is unknown ask the producer of the job for their best estimate and use a standard size for whatever region the client is most likely to use the asset in (A4, A5, US Letter, etc).
  • Double check your proof setup and transparency blend space is in the correct view for what you are creating.
    Proof Setup
    Document CMYK - U.S. Web Coated (SWOP) v2
    Document CMYK - Adobe 1998
  • Setup layers correct. The default blue layer should be labelled TEXT. Then create two new layers, the default colors will be green and red. Move both underneath the TEXT layer and relabel green to GFX and red to BG. Order and descriptions below:
  • TEXT should be all the heading, title, and paragraph copy for a design that will be most commonly updated by the client or copywriting team. This layer is never outlined until final print delivery.
  • GFX can contain images, design elements, or outlined text. Basically anything that does not fall into the above layer or would be considered a background like below can be placed here.
  • BG should contain large items or images that cover a dominant portion of the design and are always behind most elements. This layer is most commonly locked to allow for better control over other element selection.
  • You Should Import RGB Images Into InDesign and Convert to CMYK On Export. Current print workflows perform excellent conversions of RGB to CMYK, and some printing processes — such as digital presses and large-format inkjet output provide better and more vibrant output when fed with RGB content.

    Tip: In the Swatch Options dialog box, InDesign and Illustrator both warn you if an RGB color falls outside what CMYK printing inks can reproduce (called the CMYK “gamut”). Click the yellow alert triangle to convert to the closest in-gamut RGB value, so you won’t be shocked when the color is converted to CMYK.

Web Development

When building a website in Webflow, follow these steps to make the development process as efficient as possible.

Before development
Project Setup

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:

General settings
  • subdomain
    This is the domain used for staging and client feedback. Remove the pre-defined subdomain and give it a name. Usually this would be the client name or an acronym. Avoid other terms like “staging” or “preview” because the backend will involve that domain even after the website is published to the final domain.
  • Favicon & webclip
    Upload a favicon (icon next to URL in browser) and a webclip (icon in browser bookmarks). If you’re not sure how to create those or what type of logo or image to use best, ask your creative director or a web designer.
  • Time zone & language code
    Set the time zone to the one the client is located in. The language code should correspond to the language used on the website. See the following documentation on ISO 639-1 codes used in HTML:
SEO settings
  • Disable subdomain indexing
    To prevent Google from indexing the (unfinished) staging website, make sure to disable subdomain indexing.
Font settings
  • Add fonts
    Add any fonts you need for the project based on the visual design. You can select Google fonts from the selector, choose an Adobe Fonts project or upload custom fonts. Name the fonts correctly and choose only the font weights you need for the website. For custom font uploads use .woff or .woff2 files.
Website Styles

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.

Asset Export & Management

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.

Image file criteria

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.

Folder Structure

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.

File Naming

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.

  • Primary, secondary and tertiary buttons
  • Navbar & footer
During Development
CSS Classes

When naming CSS classes in Webflow, use the Client-first method. To learn more, look at the documentation and videos here:

Flex Box & Grid

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.

  • Check the contrast for all borders, icons, text and text overlays on images or videos
  • Add alt text to all images
  • Use subtle animations and avoid excessive motion behind text
  • Add descriptions to instructions that rely solely on characteristics like shape, color, size, visual location, orientation, or sound
  • Make sure the website remains legible when zoomed 400%
  • Optimise responsiveness for both portrait and landscape
  • Make sure color isn’t the only way information is conveyed
  • Ensure legibility throughout the website
  • Use unique and descriptive link labels and avoid links like “click here”
  • Links blocks should contain either text or an image with alt text
  • Add role="navigation" aria-label=“Main" to the logo link in the nav
  • Avoid using text images
After Development
Before Launch
  • Select hosting plan
  • Turn off Webflow branding (General settings)
  • Set up 301 redirects if necessary
  • Minify code and use secure frame headers
  • Create robots.txt and add pages we don't want Google to index
  • Set global canonical URL
  • Set up form notifications and recipient email
  • Enable reCAPTCHA and add key if necessary
After Launch
  • Set up collaborators in Editor
  • Set up Google Search Console & Bing Webmaster tools
  • Set up Google Analytics & Tag Manager
  • Submit sitemap in GSC and BWT
  • Check Google Search Console for errors
  • Make sure that the website is indexed


"Best practices usually aren't."
Christopher Locke

Web Design

Calls to action

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.

  • Short & sweet
    If possible, use a maximum of 4 words for the call to action and stick to the point. To get the most out of it include strong verbs (e.g. Get started, Learn more, Join free, Buy now). 
  • Make it urgent
    One effective way to boost conversions is creating a sense of urgency or scarcity around the product or service. You can do this either by using time-related words like now or today or including words that express limitedness (limited, reserve your spot, last chance).
  • Responsiveness
    Make sure CTA buttons on mobile screens don’t look like a shrunk down desktop version. They have to be visible, easily accessible and large enough for the user to be able to tap on.
  • Contrast & White Space
    Place the CTA in a button that has enough contrast and visibly stands out from the rest of the content. Use enough white space inside of the button to make it easy for users to click on.
  • Button hierarchy
    When there is a secondary CTA leading users to more information before they convert, the button hierarchy should be clear. The secondary CTA is typically styled with outlines, whereas the primary one has a solid fill.


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.

  • Clear language
    When it comes to language inside the navigation it’s best to use established and known terms like About, Services, Contact, etc. If you make use of unique language in the navigation, to fit the brand for example, there should be a valid reason for it, as it might confuse website visitors.
  • Strategic order
    Statistically, people remember the first and last items of a navigation the most. Depending on what the website is supposed to achieve, structure the navigation accordingly. For instance, if you want to point visitors to the Service page before they fill out a form on the Contact page, you would place those items first and last, respectively. Optionally, you can highlight the Contact button or put the primary CTA at the end of the navigation.
  • Customization
    Tailor the navigation to the website type and size. Some websites only might need a few links in the navigation while others have a lot of pages. If so, it can be useful to create a navigation hierarchy and a mega menu for navigation.
  • Breadcrumbs
    If necessary, use breadcrumbs above the fold to indicate the user’s location on a website and let them trace back their steps. This can be especially handy for large websites.

SEO-friendly Design

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.

  • Responsive design
    Make sure the website is designed in a mobile-friendly way and the mobile view is not a shrunk down version of the desktop site. Here are the 4 main criteria Google considers as mobile-friendly:
    Avoids software that is not common on mobile devices, like Flash
    Uses text that is readable without zooming
    Sizes content to the screen so users don't have to scroll horizontally or zoom
    Places links far enough apart so that the correct one can be easily tapped
  • Relevant headings
    The H1 is the main headline of a page or the title of a blog post. Search engines target the H1 tag for keywords to determine what the page is about, so use relevant keywords while keeping it natural by avoiding keyword stuffing. It’s all about the balance between SEO performance, clarity and style. Please note, that there should be only one H1 tag per page. The rest of the content should be sensibly structured with H2-H6 tags and a content hierarchy in mind.