Building a Brand That Disrupts

Transforming a generic corporate presence into a bold, cohesive brand that embodies innovation and federal modernization.

Year
2020
Timeline
6 Months
Role
Design Director
Tools
Figma, Wordpress

Summary

Steampunk positioned itself as a disruptive force in federal technology, bringing Silicon Valley innovation culture to government clients under the tagline "Design. Disrupt. Repeat." Its website didn't reflect that. Stock imagery and conventional layouts made it look like any other government contractor. With the company growing fast, it needed an identity as bold as its positioning, along with visual systems for Design Intelligence®, the Labs and Foundry innovation divisions, two client portfolios, and five practice areas. Each needed its own identity that still clearly belonged to Steampunk.

Working in a small internal design team alongside the Chief Marketing Officer and Chief Design Officer, I helped redesign the site page by page over six months. We couldn't rebuild from scratch, so we pushed the Avada theme to its limits to make it feel custom-built. Working one page at a time let us refine the system as it grew, with each page informing the next. The homepage set the tone with video of Steampunk teams at work and bold typography built around the tagline. Practice and portfolio pages got custom iconography and distinct visual treatments, and the whole site put Steampunk's #punklife culture front and center.

In parallel, we built brand guidelines covering logo usage, color, typography, iconography, photography, graphic elements, and voice and tone, written to serve internal teams, external partners, and print vendors alike. We designed logos and visual systems for Design Intelligence®, Labs, Foundry, both portfolios, and all five practices, and carried the brand into swag employees actually wanted to wear.

Outcomes

  • From generic to distinctive. The site went from a template that could belong to any contractor to a cohesive brand experience that stood out in federal tech.
  • One system for the whole company. Design Intelligence®, Labs, Foundry, two portfolios, and five practices each got their own identity under the Steampunk brand.
  • Brand guidelines that scaled. Teams and vendors could apply the brand consistently without design reviewing every touchpoint.
  • Stronger recruiting and sales support. The brand helped attract talent drawn to #punklife culture and gave business development a polished, energetic image to present.
  • A brand employees wore with pride. Swag became a visible marker at conferences and industry events, sparking recognition and conversation.

Artifacts

  • Website Redesign
  • Brand Guidelines
  • Design Intelligence® Identity
  • Labs & Foundry Identities
  • Portfolio Branding
  • Practice Iconography
  • Employee Swag

Methods

  • Iterative Page-by-Page Redesign
  • Stakeholder Reviews
  • Brand System Development
  • Visual Identity Design

Brand guidelines

Pink, charcoal and cyan

Steampunk Pink

#DA10AB
RGB 218, 16, 171
CMYK 20, 91, 0, 0
Pantone 255C

0a000a1f001e4e004694007bda10abfd76e9feb0f9ffebff

Steampunk Charcoal

#1D252C
RGB 29, 37, 44
CMYK 80, 68, 58, 67
Pantone 433C

1d252c343b414a515661666b777c808e9296a5a8abbbbec0d2d3d5e8e9ea

Steampunk Cyan

#00B0E6
RGB 0, 176, 230
CMYK 71, 11, 0, 0
Pantone 306C

00060a00152200375400709d00b0e66dd6fface2ffebf6ff

Brand guidelines

Two open-source type families

The wordmark is set in Avenir. For the website and digital materials like PowerPoint decks, we chose two Google Fonts: Roboto and Nunito Sans

Display & headings

Roboto

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0 ! @ # $ % & * ( )

Used for display text and headings. Title pages, banners and section heads.

Body & extended text

Nunito Sans

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0 ! @ # $ % & * ( )

The main typeface. A clean, modern sans serif for extended text, overlines and lead paragraphs.

design & strategy

Design. Disrupt. Repeat.

We combine technology excellence and personalized service to deliver solutions as straightforward as they are sincere.

Mobile

The redesigned site on a phone.

  • Steampunk AI and Data Exploitation page on mobile, with the capability icon over a black-and-white photo and a pink call-to-action button
  • Steampunk mobile navigation menu with the Capabilities section expanded in pink
  • Steampunk Design and Strategy page on mobile, with a pink job openings button above the practice description
  • Steampunk Portfolios section on mobile, showing the Citizen Service and Defense and Homeland, Commerce and Justice seals

Portfolios

Seals and co-brand lockups for Steampunk's two client portfolios, Citizen Service & Defense and Homeland, Commerce & Justice. CS&D debuted first, in January 2021.

  • Citizen Service & Defense portfolio seal with a star-spangled pentagon
  • Homeland, Commerce & Justice portfolio seal with a scales-of-justice shield
  • Steampunk and Citizen Service & Defense co-brand lockups
  • Steampunk and Homeland, Commerce & Justice co-brand lockups on charcoal

Labs, PunkU & Foundry

Identities for Steampunk's innovation and learning programs. Each one uses the same bold type and swaps in a single custom glyph.

  • Labs logo with a magenta beaker forming the A
  • PunkU logo with a magenta graduation cap and tassel topping the first U
  • Foundry logo with a magenta gear forming the O

Capabilities

A matching set for the five capabilities: the same lowercase wordmark style, each with its own icon.

  • design&strategy capability logo with a magenta and cyan diamond icon
  • digitalplatforms capability logo with a cloud icon
  • devsecops capability logo with a double-chevron icon
  • dataexploitation capability logo with a circular data icon
  • cybersecurity capability logo with a hexagon lock icon

Design Intelligence®

Identity for Steampunk's human-centered design methodology, from the helix mark to a periodic table of design elements.

  • Design Intelligence® periodic table of design elements in magenta, charcoal and cyan
  • Design Intelligence® mark: a magenta and cyan double helix built from interlocking D and I letterforms
  • Design Intelligence® wordmark with the helix mark set between the words