Brand Guidelines

Logo & brand assets

Everything you need to represent ThisCom accurately: our logo and its variations, colors, type, and the words we use. Please follow these guidelines so the brand stays consistent everywhere it appears.

Download assets Request a format

Logo Lockups The mark Clear space Backgrounds Misuse Color Type Iconography Boilerplate Naming Downloads

The Logo

Wordmark & variations

The ThisCom wordmark pairs This in brand orange with Com in neutral gray, set in Space Grotesk. Use the full color version wherever possible. The variations below cover dark backgrounds and single color printing. Always use the supplied files instead of retyping it.

Primary, full color

Default logo. Use on white and light backgrounds.

SVG ↓

Reverse

On dark and photographic backgrounds.

SVG ↓

Monochrome black

One color contexts: print, engraving, fax.

SVG ↓

Monochrome white

One color on dark backgrounds.

SVG ↓

Lockups

Mark + wordmark

When there is room, the horizontal lockup pairs the mark with the wordmark. The stacked lockup spells out the full legal name for footers and narrow spaces.

Horizontal lockup

Mark plus wordmark. Preferred when there is room.

SVG ↓

Horizontal lockup, reverse

For dark backgrounds.

SVG ↓

Stacked lockup

Full legal name. Footers and narrow columns.

SVG ↓

The Mark

Mouse icon

Our mark is a clean line drawing of a computer mouse: a nod to clicks, traffic, and the web. Use it where a square or compact icon is needed, such as avatars, app icons, and favicons.

Mark, orange

Default mark on light backgrounds.

SVG ↓

Mark, black

Single color contexts.

SVG ↓

Mark, white

On dark backgrounds.

SVG ↓

App icon tile

Avatars, app icons, favicons.

SVG ↓

Spacing

Clear space & size

Clear space

Keep padding around the logo at least the height of the capital “T”. Don’t crowd it with other elements.

Minimum size

Don’t show the wordmark below 90px wide on screen, or the mark below 24px, so it stays legible.

Placement

Approved backgrounds

Keep strong contrast between the logo and its background. These are the approved surfaces and which logo version to use on each.

White #FFFFFF

Use: Primary, full color

Off-white #F7F7F7

Use: Primary, full color

Ink #111111

Use: Reverse or white

Orange #FF5A00

Use: White only

Usage

Please don’t

A few things that break the brand. When in doubt, use the logo exactly as supplied.

Don’t stretch, squash, or distort the logo.

Don’t recolor the wordmark outside the brand palette.

Don’t add shadows, gradients, or outlines.

Don’t rotate or set the logo at an angle.

Don’t place the logo on busy or low contrast backgrounds.

Don’t recreate the wordmark in a different typeface.

Palette

Colors

Orange leads. Black and white carry the weight. Tints add warmth without competing with the brand color.

primary

#FF5A00

ThisCom Orange

Primary brand color. CTAs, links, accents.

#E05A00

Orange Pressed

Hover and active state for primary actions.

neutral

#111111

Ink

Dark sections and high contrast surfaces.

#000000

Black

Primary headings and body text.

#777777

Logo Gray

The “Com” in the wordmark. Secondary mark color.

#FFFFFF

White

Default background and reversed type.

Tints & Surfaces

#FFF0E6

Peach Tint

Icon chips and subtle highlights.

#F7F7F7

Off-White

Alternating section backgrounds.

#EFEFEF

Muted

Quiet surfaces and dividers.

Type

Typography

Space Grotesk gives the brand its voice. Geist keeps copy clean and readable. Geist Mono handles anything technical.

Space Grotesk

Display & Brand

Logo, headings, and brand moments. Weights 400 to 700.

ThisCom

Geist

Body & UI

Paragraph copy, labels, and interface text.

The quick brown fox jumps over the lazy dog.

Geist Mono

Code & Data

Code, metrics, and technical content.

const brand = "#ff5a00";

Icons

Iconography

We use Font Awesome solid icons for interface and marketing. Keep icons single color in brand orange or a neutral, sized to match the text beside them.

Voice

Boilerplate

Approved copy for press, partners, and directories. Use it verbatim so our description stays consistent.

Short

ThisCom is an employee-owned digital marketing and technology partner for small and medium businesses.

Long

ThisCom is an employee-owned, full-service digital marketing and technology partner for small and medium businesses, based in Los Altos, California. Since 1999 we have helped owners grow online through digital marketing, creative, web design, and custom software, all under one roof.

Words

Naming & capitalization

ThisCom

One word, capital T and capital C. This is the everyday brand name.

This Communications Company

The full legal name. Use on contracts and the stacked lockup.

Thiscom · THISCOM · This Com

Don’t lowercase the C, set it in all caps, or split it into two words.

Files

Downloads

Official ThisCom assets. SVG is preferred for crisp scaling. PNG icons are provided for app and favicon use.

Wordmarks

Wordmark, color

SVG

Wordmark, reverse

SVG

Wordmark, black

SVG

Wordmark, white

SVG

Wordmark, stacked

SVG

Lockups

Lockup, color

SVG

Lockup, reverse

SVG

Marks & app icons

Mark, orange

SVG

Mark, black

SVG

Mark, white

SVG

App icon tile

SVG

App icon 512

PNG

Apple touch icon

PNG

All wordmark, lockup, and mark SVGs are outlined vector paths, so they render identically everywhere with no font required. Need EPS, PDF, or raster (PNG) exports? Email [email protected].

Working with our brand?

Press, partners, and collaborators: reach out if you need a specific format or have a usage question.

ThisCom

Brand Guidelines

Logo & brand assets

Download assets Request a format

Logo Lockups The mark Clear space Backgrounds Misuse Color Type Iconography Boilerplate Naming Downloads

The Logo

Wordmark & variations

Primary, full color

Default logo. Use on white and light backgrounds.

SVG ↓

Reverse

On dark and photographic backgrounds.

SVG ↓

Monochrome black

One color contexts: print, engraving, fax.

SVG ↓

Monochrome white

One color on dark backgrounds.

SVG ↓

Lockups

Mark + wordmark

When there is room, the horizontal lockup pairs the mark with the wordmark. The stacked lockup spells out the full legal name for footers and narrow spaces.

Horizontal lockup

Mark plus wordmark. Preferred when there is room.

SVG ↓

Horizontal lockup, reverse

For dark backgrounds.

SVG ↓

Stacked lockup

Full legal name. Footers and narrow columns.

SVG ↓

The Mark

Mouse icon

Our mark is a clean line drawing of a computer mouse: a nod to clicks, traffic, and the web. Use it where a square or compact icon is needed, such as avatars, app icons, and favicons.

Mark, orange

Default mark on light backgrounds.

SVG ↓

Mark, black

Single color contexts.

SVG ↓

Mark, white

On dark backgrounds.

SVG ↓

App icon tile

Avatars, app icons, favicons.

SVG ↓

Spacing

Clear space & size

Clear space

Keep padding around the logo at least the height of the capital “T”. Don’t crowd it with other elements.

Minimum size

Don’t show the wordmark below 90px wide on screen, or the mark below 24px, so it stays legible.

Placement

Approved backgrounds

Keep strong contrast between the logo and its background. These are the approved surfaces and which logo version to use on each.

White #FFFFFF

Use: Primary, full color

Off-white #F7F7F7

Use: Primary, full color

Ink #111111

Use: Reverse or white

Orange #FF5A00

Use: White only

Usage

Please don’t

A few things that break the brand. When in doubt, use the logo exactly as supplied.

Don’t stretch, squash, or distort the logo.

Don’t recolor the wordmark outside the brand palette.

Don’t add shadows, gradients, or outlines.

Don’t rotate or set the logo at an angle.

Don’t place the logo on busy or low contrast backgrounds.

Don’t recreate the wordmark in a different typeface.

Palette

Colors

Orange leads. Black and white carry the weight. Tints add warmth without competing with the brand color.

primary

#FF5A00

ThisCom Orange

Primary brand color. CTAs, links, accents.

#E05A00

Orange Pressed

Hover and active state for primary actions.

neutral

#111111

Ink

Dark sections and high contrast surfaces.

#000000

Black

Primary headings and body text.

#777777

Logo Gray

The “Com” in the wordmark. Secondary mark color.

#FFFFFF

White

Default background and reversed type.

Tints & Surfaces

#FFF0E6

Peach Tint

Icon chips and subtle highlights.

#F7F7F7

Off-White

Alternating section backgrounds.

#EFEFEF

Muted

Quiet surfaces and dividers.

Type

Typography

Space Grotesk gives the brand its voice. Geist keeps copy clean and readable. Geist Mono handles anything technical.

Space Grotesk

Display & Brand

Logo, headings, and brand moments. Weights 400 to 700.

ThisCom

Geist

Body & UI

Paragraph copy, labels, and interface text.

The quick brown fox jumps over the lazy dog.

Geist Mono

Code & Data

Code, metrics, and technical content.

const brand = "#ff5a00";

Icons

Iconography

We use Font Awesome solid icons for interface and marketing. Keep icons single color in brand orange or a neutral, sized to match the text beside them.

Voice

Boilerplate

Approved copy for press, partners, and directories. Use it verbatim so our description stays consistent.

Short

ThisCom is an employee-owned digital marketing and technology partner for small and medium businesses.

Long

Words

Naming & capitalization

ThisCom

One word, capital T and capital C. This is the everyday brand name.

This Communications Company

The full legal name. Use on contracts and the stacked lockup.

Thiscom · THISCOM · This Com

Don’t lowercase the C, set it in all caps, or split it into two words.

Files

Downloads

Official ThisCom assets. SVG is preferred for crisp scaling. PNG icons are provided for app and favicon use.

Wordmarks

Wordmark, color

SVG

Wordmark, reverse

SVG

Wordmark, black

SVG

Wordmark, white

SVG

Wordmark, stacked

SVG

Lockups

Lockup, color

SVG

Lockup, reverse

SVG

Marks & app icons

Mark, orange

SVG

Mark, black

SVG

Mark, white

SVG

App icon tile

SVG

App icon 512

PNG

Apple touch icon

PNG

All wordmark, lockup, and mark SVGs are outlined vector paths, so they render identically everywhere with no font required. Need EPS, PDF, or raster (PNG) exports? Email [email protected].

Working with our brand?

Press, partners, and collaborators: reach out if you need a specific format or have a usage question.