Powers Interactive — Design Guide

01The Logo

Anatomy & variations.

The mark pairs a red P with a navy i — Powers Interactive, locked into a single form. Use the primary lockup whenever space allows; reserve the standalone icon for favicons, app tiles, and avatars.

P

The Red PThe outer form. Represents "Powers" — the firm and the people. Drawn as one continuous stroke.

i

The Navy iThe inner form. Represents "Interactive" — the technology layer that makes the firm distinctive.

●

The LockupMark on the left, lowercase "powers" wordmark with tracked-out "INTERACTIVE" underneath.

Primary · LightFor white & bone

Primary · KnockoutFor navy & dark

Icon · StandaloneFavicons, avatars

Vector SourceSVG · scalable

02Clear Space & Sizing

Give the mark room.

The minimum clear space on every side equals the height of the inner navy i counter — referred to as X. Nothing — text, imagery, edges, or other marks — should enter this zone.

X

Min Size · Digital

Primary lockup: 120 px wide
Standalone icon: 24 px square

Min Size · Print

Primary lockup: 1.0 in wide
Standalone icon: 0.25 in square

Backgrounds

White / bone → full color. Navy → knockout. Photography → navy overlay first. Never on Interactive Red.

03Color System

Two colors, held tight.

Powers Navy carries authority and depth — our dominant brand color. Interactive Red brings energy and emphasis — used in accent only. Bone and Ink round out the system for surfaces and text.

Powers Navy

HEX #013668

PMS 295 C

RGB 1, 54, 104

CMYK 99, 78, 27, 12

Interactive Red

HEX #EE3A43

PMS 1795 C

RGB 238, 58, 67

CMYK 0, 88, 75, 0

Supporting Palette

Ink

#333333

Slate

#6B6B6B

Bone

#F5F4F1

Paper

#FFFFFF

Color Ratio

Aim for 60% navy, 30% white / bone, 10% red. Red is for emphasis only — never as a background behind body copy.

Accessibility

Powers Navy on white passes WCAG AAA. Interactive Red on white passes AA for large text only. White on either brand color passes AA.

04Typography

One display, one body.

Nunito is our display face — a humanist sans with rounded terminals that matches the wordmark itself. Set big headlines in Black (900). Inter handles body, UI, and data. Both are open-source via Google Fonts.

Display · Headlines · Wordmark

Nunito · Black 900 / ExtraBold 800

powers interactive.

Display44 / 1.0 / -2%

Section title30 / 1.05 / -1%

Subhead20 / 1.2 / 0

Eyebrow / Caption15 / 1.4 / +14% upper

USE FOR · Hero copy · Section titles · In-product page headers · Sub-brand wordmarks

Body · UI · Data

Inter · Regular 400 / Semibold 600

Powers Interactive is a digital advertising firm built on a decade of experience across political, advocacy, and corporate sectors. We bring strategy, buying, analytics, and custom technology under one roof.

USE FOR · Body 16 / 1.65 · Captions 13 · Microcopy 11 · Avoid italics in product UI; use weight to differentiate

Fallbacks · Office & System

When brand fonts aren't available

Display → Trebuchet MS Bold · Body → Arial / Helvetica · Mono → SF Mono / Consolas