Skip to Content
Brand & Design System

Brand Guidelines

How we present Flatiron Networks across the web, print, and product. Logo usage, color palette, typography, and the design patterns that power flatironnetworks.com.

Brand Overview

Flatiron Networks is an SDVOSB-certified enterprise IT solutions provider based in Colorado. We deliver hardware procurement, software licensing, implementation, and managed services to enterprise and government clients. These guidelines ensure our brand is represented consistently across every touchpoint, from the website to proposals to print collateral.

Brand Name Usage

"Flatiron Networks" is the only correct way to write our name. Consistency in how we present our brand name is crucial for brand recognition and professionalism.

Flatiron Networks  Flatirons Networks  Flatiron Network  Flatirons   


Logo Usage

Our logo is the primary visual representation of the Flatiron Networks brand. It consists of a mountain icon paired with our wordmark. The logo is available in multiple formats and should appear on every page and document without modification.

Logo Variations

Use the appropriate logo variation based on the background color and available space

Primary Logo - Rectangle

Use on light backgrounds. This is the preferred version for most applications including websites, documents, and presentations.

Inverted Logo - Rectangle

Use on dark backgrounds. Maintains brand consistency while ensuring readability on darker surfaces.

Primary Logo - Square

Use when space is limited or a square format is required, such as social media profile images and app icons.

 Inverted Logo - Square

Square format for dark backgrounds. Ideal for social media avatars and app icons on dark themes.

Logo Do's and Don'ts​

To maintain brand integrity, please follow these guidelines when using the Flatiron Networks logo.

​Do: Use the logo at its original proportions
Don't: Stretch or distort the logo
Do: Use on clean, uncluttered backgrounds
Don't: Place on busy or distracting backgrounds

Do:

Maintain proper spacing around the logo

Always link the logo to https://flatironnetworks.com

Use high-resolution logo files

Don't:

Don't change the logo colors

Don't add effects like shadows or glows

Don't rotate or tilt the logo

Clearspace & Minimum Size

Logo Clearspace

Always maintain adequate clearspace around the logo to ensure visibility and impact. The minimum clearspace should equal the height of the mountain icon in the logo. This space should be kept clear of text, graphics, and other visual elements.

Minimum Logo Size

To maintain legibility, never reproduce the logo smaller than the minimum sizes shown below.

Print: 1.5 inches wide

Digital: 160 pixels wide

Color Palette

Our color palette reflects the professionalism, trust, and innovation that Flatiron Networks represents. Use these colors consistently across all brand materials to maintain a cohesive visual identity.

The Flatiron Networks palette is a teal-forward system anchored by deep and bright teal for dark surfaces, with Flatiron blue carrying interactive elements. These colors are used consistently across every page, from hero gradients to buttons to section accents.

Primary Teal Gradient

Deep Teal
HEX#004d73RGB0, 77, 115RoleGradient stop

Start and end stop of the hero/CTA gradient. Dark surface anchor.

Bright Teal
HEX#0077b6RGB0, 119, 182RoleGradient stop / accent

Middle stop of the hero gradient. Also used for teal icon tiles, table headers, and brand card heads.

Hero Gradient Preview
linear-gradient(135deg, #004d73 0%, #0077b6 50%, #004d73 100%)

Interactive & Accent

Flatiron Blue
HEX#337ab7RGB51, 122, 183RoleButtons, links, CTAs

All buttons, CTAs, and interactive elements. Primary action color.

Flatiron Blue Hover
HEX#5a9fd4RGB90, 159, 212RoleHover, lighter accent

Hover state for Flatiron Blue buttons. Also used for lighter accent fills.

Pale Cyan
HEX#7dd3fcRGB125, 211, 252RoleAccent on dark

Hero headline accent word and uppercase microlabels on dark gradient backgrounds. Pops off teal.

Neutrals

Navy Heading
HEX#1a1a2eRGB26, 26, 46RoleHeadings on light

Section H2 headings on light backgrounds. Near-black navy, readable but not pure black.

Body Text
HEX#212529RGB33, 37, 41RoleBody copy

Body copy. Also #555 for subdued descriptions.

Muted
HEX#8b96a5RGB139, 150, 165RoleSecondary text

Secondary text on dark sections, footer metadata, timestamp lines.

Backgrounds & Tints

White
HEX#ffffffRGB255, 255, 255RoleSection background

Primary section background. Alternates with #f8f9fa in section rhythm.

Off-white
HEX#f8f9faRGB248, 249, 250RoleAlternate section background

Alternate section background. Used between white sections to create rhythm.

Light Tint
HEX#e8f4fdRGB232, 244, 253RoleIcon tile background

Light cyan tint for icon square backgrounds on value prop cards.

Flatiron Tint
HEX#e8f0f8RGB232, 240, 248RoleSoft highlight

Lightest Flatiron blue tint. Used sparingly for callouts and card image gradient starts.

Color Accessibility

All color combinations used in Flatiron Networks materials must meet WCAG 2.1 Level AA contrast ratios. These are the approved pairings.

Flatiron Blue on White
Pass AA
#337ab7 on #ffffff. Use for links and CTA buttons.
White on Flatiron Blue
Pass AAA
#ffffff on #337ab7. Primary button label pattern.
White on Teal Gradient
Pass AAA
Hero and CTA band text. Both gradient stops pass.
Pale Cyan on Deep Teal
Pass AAA
#7dd3fc on #004d73. Hero accent word and uppercase microlabels.
Navy Heading on White
Pass AAA
#1a1a2e on #ffffff. Section H2 pattern.
Body Text on Off-White
Pass AAA
#212529 on #f8f9fa. Alternate section body copy.

Typography

Typography plays a crucial role in our brand identity. We use two carefully selected fonts that complement each other and reflect our brand values of professionalism and clarity.

Typography
Oswald
HEADERS & TITLES
Regular (400)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
SemiBold (600)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Open Sans
BODY TEXT
Regular (400)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

The quick brown fox jumps over the lazy dog. Open Sans is highly legible and works perfectly for body copy, captions, and user interface text.
SemiBold (600)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

The quick brown fox jumps over the lazy dog. Use for emphasis, subheadings, and important callouts within body text.
Bold (700)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

The quick brown fox jumps over the lazy dog. Use sparingly for maximum impact and important highlights.

Typography Hierarchy

Consistent typography hierarchy ensures clear communication and professional presentation across all materials.

Heading 1
Main Page Heading
Oswald SemiBold / 48px / Line-height: 1.2
Heading 2
Section Heading
Oswald SemiBold / 36px / Line-height: 1.3 / Color: Flatiron Blue
Heading 3
Subsection Heading
Oswald SemiBold / 24px / Line-height: 1.4
Body Text
This is body text used for paragraphs and general content. It should be easy to read and comfortable for extended reading. Open Sans provides excellent legibility at various sizes and works well across digital and print media.
Open Sans Regular / 16px / Line-height: 1.6
Small Text / Captions
Small text for captions, footnotes, and secondary information.
Open Sans Regular / 14px / Line-height: 1.5 / Color: #666

Web Typography

Both Oswald and Open Sans are available as free web fonts through Google Fonts. When implementing our brand typography on websites and digital properties:

  • Oswald should be used for all headers, titles, and navigation elements
  • Open Sans should be used for body text, paragraphs, and user interface elements
  • Both fonts are optimized for screen display and provide excellent readability across all devices
  • Import both fonts from Google Fonts to ensure consistent rendering across browsers

Design Patterns

The reusable components and section patterns that shape every page on flatironnetworks.com.

Buttons

Primary buttons use Flatiron Blue (#337ab7) on both light and dark backgrounds. Secondary buttons are outlined in the current text color on light surfaces, and in translucent white on dark gradient surfaces. Hover state shifts primary to #5a9fd4.

Section Rhythm

Hero (dark gradient)
Content (white)
Content (off-white)
Content (white)
CTA (dark gradient)

Dark bookends (hero + CTA) with alternating white and off-white (#f8f9fa) light sections in between. Never place two identical backgrounds adjacent to each other.

Card Patterns

Value Prop Card

Icon + Label + Copy

Used in Why Flatiron sections. Light cyan icon tile, navy heading, muted gray description.

Brand Logo
Product / Brand Card

Teal Head + Body

Teal gradient header with brand logo, white body with bright-teal title.

CategoryExplore →
Hero Side Card
Glassmorphic list item
Glassmorphic list item
Glassmorphic list item

Hero SVG Grid Overlay

Every dark gradient section (hero and CTA) uses the same SVG network-grid overlay at 6% opacity. The pattern includes a 60x60 repeating grid with a 10-node network topology. The overlay is consistent across every vendor page and service page.

Grid overlay shown at 18% for visibility (production uses 6%)

Canonical file: attachment id 246201, path /web/image/246201/fn-grid-overlay.svg

Downloads

Choose the appropriate file format based on your use case. For questions about custom versions or tailored assets, please contact us.

📦 Complete Logo Pack

All logo variations in PNG, SVG, and EPS formats. Includes light and dark versions in both rectangle and square layouts.

Download

File Format Guide

SVG (Scalable Vector Graphics)

  • Best for: Web, digital applications
  • ​Benefits: Scalable without quality loss, small file size

PNG (Portable Network Graphics)

  • Best for: Web, presentations, documents
  • Benefits: Transparency support, good quality

EPS (Encapsulated PostScript)

  • Best for: Print, professional design software
  • Benefits: Vector format, industry standard

PDF (Portable Document Format)

  • Best for: Print, sharing, archiving
  • Benefits: Universal compatibility, preserves quality

Have Questions?

For questions about brand usage or to request custom assets, please contact us.