top of page

{Troy Web Consulting Style Guide}

Image by Roger Lipera

Heading 1 (League Gothic Reg 72x)

Heading 2 (League Gothic Reg 60x)

Heading 3 (Permanent Marker 26px)

Heading 4 (Open Sans Bold 26px)

Heading 5 (Open Sans Bold 24px)

1. Typography

Heading 6 (Open Sans Bold 18px)

I'm a paragraph 1. I should be used on cards and to make big impact statements.

I'm a paragraph 2. I should be used on paragraphs of copy found within a page.

I'm a paragraph 3. I should be used within photo captions. 

Note: For paragaph text, the line height should not be set to automatic, but rather to 1.6 to prevent it from becoming too blocky and increase scanability.

2. Color

Troy Web Orange

#E77436

Troy Web
Slate

#51525B

Troy Web Yellow

#FFCD4F

Light Grey

#EFEFEF

White

#FFFFFF

Charcoal

#303030

Note: Yellow should be used only as an accent color in relation to Troy Web's orange. In order to compliment it. E.g. yellow border on orange button hovers and linear elements on orange background below.

3. Buttons

Button hover states, enhance text size by 2 pts, and 

Note: Buttons should all have a 10px corner radius to reflect the round edges of the {tw} icon.

Note: Button height should be consistently 48px high

Note: Primary buttons should use the Permanent Marker font, League Gothic is too condensed to be advisable for smaller text situations like buttons and is thus only utilized for H1's. The permanent marker font is meant to be used in calls to action and express the scrappiness of starting a project with a drawing on a cocktail napkin. This idea is also evoked with the 'torn' section transitions

TW-Website-Background-1.jpg

4. Components

Coding

Heading

Amazon Web Services (AWS) has helped thousands of organizations, including global enterprises, migrate their business to the cloud. These companies benefited from substantial IT costs savings, as well as improvements in productivity, business agility, and operational resilience. Combining the expertise of AWS, along with Troy Web’s 20 years of experience, AWS and Troy Web Consulting provide a complete and proven approach for migrating to the cloud so that you can achieve cloud benefits faster.

Note: Round corners of containers and tabs meant to emulate structure of the Troy Web monogram {tw}

Note: Galleries should be set to stretch the full width of the page, with a subtle and quick fade in animation

Content in cards should have a consistent 30px of padding

Content at max should live within a 3 column grid to accommodate friendly larger text.

Card with a button attached to it example

Coding

Mobile App
Development

Check out what our team put together over a few months in Vue.JS.

bottom of page