typography

Just Create

H1: Gilmer Black / 3.6em / 58px / 1em spacing

Extreme Ownership

H2: Gilmer Black / CAPS / 3em / 48px / 1em spacing

Lead with Gratitude

H3: Gilmer Black / 2.4em / 38 px / 1em spacing

Share something greater than yourself.

H4: Gilmer Bold / 1.8em  /  28px  /  1.2em spacing
Pursue what is meaningful, not what is expedient.
H5: Gilmer Medium / 1.2em / 18px  /  1.2em spacing

Just Create

H1 ALT: Gilmer Outline Normal / CAPS / 3.6em / 58px

Extreme Ownership

H2 ALT: Gilmer Outline Normal / 3em / 48px

Lead with Gratitude

H3 ALT: Gilmer Outline Normal / CAPS / 2.4em / 38px
this is a large subtitle
Large Sub: Space Grotesk Normal / 2.1 em / 34px / 1.2em spacing
this is a small subtitle
Small Sub: Space Grotesk Medium / 1.4em / 22px / 1.2em spacing
"Our vision is to support brands by amplifying their mission and vision through the power of video storytelling, pushing the boundaries of creativity, and using data driven results."
Block Quote:
Architects Daughter Normal / 1.4 em / 24px / 1.4em spacing

When I first started in the video production business 15 yrs ago...Little did I know that small interest (at the time many thought would be a hobby) would quickly grow into a company that is working with some of the biggest brands, working with amazing small businesses that are all in pursuit of making a large impact in people's lives.

Paragraph: Inter Light / 1em / 16px / 1.8em spacing
Text Link: Inter Normal – Underlined / 1em / 16px / "selected" box hover
Button Link: Hover interaction will swap colors based on the background color and necessary contrast for accessibility.

logo options

TD Films' film primary logotype features a stylized typeface surrounded by a bounding box. This bounding box creates a rectangular logo that should fit most use cases – digital, film, print, web, etc. This primary logotype should always be prioritized for use – especially in display type settings.

The alternate has been provided for instances when the logo may need to be smaller and the word 'Films' will require assistance in legibility.

Additionally, the wordmark has been provided when minimalism is required or preferred (think: letterhead, film bug, etc.).

primary (light bg)
primary (light bg)
primary (light bg)
alternate (light bg)
Alternate (light bg)
primary (light bg)
wordmark (light bg)
wordmark (light bg)
primary (light bg)
TD Films Main Logo
primary (dark bg)
primary (Dark bg)
primary (light bg)
alternate (DARK bg)
Alternate (Dark bg)
primary (light bg)
Wordmark (DARK bg)
Wordmark (Dark bg)
primary (light bg)

The secondary emblem is intended to replace the primary logotype and wordmarks when necessary. Use of the emblem is discretionary based on use case (example: apparel) and the emblem with tagline should only be used when the tagline is fully legible (minimum of 2.5" in size).

Emblem only (light bg)
Emblem (light bg)
primary (light bg)
w/ Tagline (light bg)
w/ Tagline (light bg)
primary (light bg)
Emblem only (dark bg)
Emblem (Dark bg)
primary (light bg)
w/ tagline (Dark bg)
w/ Tagline (Dark bg)
primary (light bg)

The tagline should be used to promote and compliment the brand. It is best used via social media, as a possible bookend in videos, or in other practical applications where TD Films' ethos – "Create Something Greater Than Yourself" – can best serve the content.

Tagline (light bg)
tagline (light bg)
primary (light bg)
Tagline (dark bg)
Tagline (dark bg)
primary (light bg)

The step and repeat features the pattern starter icon in a rotating pattern. The step and repeat is intended for use as a subtle (mostly transparent) background pattern.

The pattern starter icon is not intended to be used in an isolated fashion, but can be utilized in various step and repeat patterns utilizing different icons (than the star) or across brands (for promotion for example).

Pattern (light bg)
pattern (light bg)
primary (light bg)
starter (light bg)
Starter (light bg)
primary (light bg)
pattern (dark bg)
pattern (dark bg)
pattern (dark bg)
starter (light bg)
starter (Dark bg)
starter (light bg)

color palettes

The TD Films brand boasts a wide array of colors where each draws inspiration from the great state of Arizona. With focuses on turquoise, crimson, and copper as the primary, secondary, and tertiary colors, the other brand colors support the main colors through a natural gradiation across the entire visible spectrum.

Copy to clipboard button.

Note: Click the 'Copy to Clipboard' icon on each color swatch to copy the hex code to your clipboard for use.

Turquoise
#00ffda
Copy to clipboard button.Copy to clipboard completed.
Robin Egg
#00CBEF
Copy to clipboard button.Copy to clipboard completed.
Canyon Water
#005499
Copy to clipboard button.Copy to clipboard completed.
Midnight
#000056
Copy to clipboard button.Copy to clipboard completed.
Crimson
#d30032
Copy to clipboard button.Copy to clipboard completed.
Sunset
#aa0065
Copy to clipboard button.Copy to clipboard completed.
Monsoon
#7c005f
Copy to clipboard button.Copy to clipboard completed.
Indigo Bush
#460077
Copy to clipboard button.Copy to clipboard completed.
Cardinal
#ff1229
Copy to clipboard button.Copy to clipboard completed.
Citrus
#ff5206
Copy to clipboard button.Copy to clipboard completed.
Sparky
#ff9700
Copy to clipboard button.Copy to clipboard completed.
Copper
#c45800
Copy to clipboard button.Copy to clipboard completed.

The natural colors have been selected to provide flexibility in accommodating accessibile reading when possible.

Please note that the primary black is not a pure black color – this is to follow the latest guidelines pertaining to "dark mode" style websites. Pure black should be avoided when possible.

All body copy should utilize the Copy Primary color provided below. For secondary use over a darker background, the Copy Secondary color has been provided as an option.

Grey 1, 2, and 3 have been provided as options when text may overlay on top of an image or background. Use these to provide enough contrast for easier readability.

Copy to clipboard button.

Note: Click the 'Copy to Clipboard' icon on each color swatch to copy the hex code to your clipboard for use.

Primary – Black
#0a0a0a
Copy to clipboard button.Copy to clipboard completed.
Primary – White
#FFFFFF
Copy to clipboard button.Copy to clipboard completed.
Copy (Light BG)
#363636
Copy to clipboard button.Copy to clipboard completed.
Copy (Dark BG)
#dadada
Copy to clipboard button.Copy to clipboard completed.
Grey 1
#ebe7e7
Copy to clipboard button.Copy to clipboard completed.
Grey 2
#bec7c6
Copy to clipboard button.Copy to clipboard completed.
Grey 3
#848686
Copy to clipboard button.Copy to clipboard completed.

Feedback colors (also known as 'signal' or 'semantic' colors) are provided as a guide for any web-related content. These colors are generally earmarked for success, warning, or failure type prompts when the user has created an action that would warrant feedback from the system.

Copy to clipboard button.

Note: Click the 'Copy to Clipboard' icon on each color swatch to copy the hex code to your clipboard for use.

Success
#9de47c
Copy to clipboard button.Copy to clipboard completed.
Warning
#ffc972
Copy to clipboard button.Copy to clipboard completed.
Error
#e96565
Copy to clipboard button.Copy to clipboard completed.
Info
#5c8aff
Copy to clipboard button.Copy to clipboard completed.

imagery (backgrounds)

The wide spectrum of brand colors may best be seen in relationship as gradients. From left to right, the wide spectrum of colors are segmented into three separate gradients: blues, purples, and reds. Please note that – from left to right – each gradient begins with the color the previous gradient ended with. Note: the neutral gradient may be used sparingly as needed (possibly for image overlays or as label BGs as seen in this style guide.

Robin Egg
Canyon Water
Midnight
Indigo Bush
Indigo Bush
Monsoon
Sunset
Crimson
Crimson
Cardinal
Citrus
Sparky
Black
Grey 3
Grey 2
Grey 1

TD Films' brand lives between the realms of order and chaos. It is...colorful, architectural, full of textures. The colors of each category should (at the very least) be complimentary to the brand's array of colors – bold, moody, and saturated, the imagery should err on the side of high contrast when possible.

Copy to clipboard button.

Note: Click the 'Copy' icon on each image category to view a folder of other royalty-free related images for use.

Architectural image thumbnail for brand images.
Architectural
use sparingly
Copy to clipboard button.
Chaos
Use Often
Copy to clipboard button.
Brand Image: Color
Color
complimentary
Copy to clipboard button.
Brand Image: Order
Order
Use Often
Copy to clipboard button.
Brand Image: Texture
Texture
backgrounds
Copy to clipboard button.

Below is a series of wallpapers for desktop, mobile, and social. Use these examples for inspiration about how and when to place the logos, and how and when to use the colors to complement brand imagery.

Note: Clicking any of the images will open the full-size version in a new tab so it can be copy/pasted or saved.

back to top