Self-initiated concept

Wolfpack

Building a B2B SaaS brand around one uncomfortable question: are your priorities actually resourced?

B2B SaaS  ·  Brand  ·  Web  ·  Marketing  ·  2026

The Wolfpack reception: the wolf mark and wordmark on a navy wall behind a stone desk

The concept

Wolfpack is a self-initiated resourcing-intelligence concept for growing teams. The product connects company priorities to the capacity actually available to deliver them — revealing gaps before they become delivery problems.

My role

I developed the concept from the ground up across brand strategy, visual identity, marketing website, product-marketing visuals, campaign and social, event design, and collateral.

The Wolfpack Priorities screen on a tablet: capacity coverage at 73%, and three company priorities with their staffing

01  /  The company

Are your priorities
actually resourced?

Most work-management tools tell you what’s happening. Wolfpack asks whether the priorities leadership says matter most actually have the capacity behind them.

Work management with resourcing intelligence.

02  /  The product story

See the work. See the people. See the gap.

Three views turn resourcing into a simple story: what matters, who can support it, and where the plan breaks. Together, they expose delivery risk before deadlines slip.

  • See the work

    Projects, priorities, and what the business is asking teams to deliver.

  • See the people

    The real capacity, allocation, and availability behind that work.

  • See the gap

    The shortfall between what the priority needs and what the organization can actually support.

01  ·  ENTERPRISE READINESS  ·  Q4

24

NEEDED

20

ALLOCATED

4

MISSING · ENGINEERING

1 block = 2 full‑time equivalentsTarget 15 October  ·  at risk

03  /  Identity

A mark built around alignment.

I built the Wolfpack mark from five straight geometric fragments and a constrained angle set, using negative space to form the wolf. The same angular logic carries into supporting brand details and applications.

The identity is intentionally restrained: precise, direct, and calm enough to deliver uncomfortable information without drama.

  • The Wolfpack mark — a wolf formed from five straight fragments, navy on bone
  • The stacked lockup — mark above the WOLFPACK wordmark
  • The horizontal lockup — mark beside the WOLFPACK wordmark
Clear-space diagram: the mark, with a margin of twice its negative-space unit
The mark’s negative space, doubled.
Clear-space diagram: the horizontal lockup, with the same margin measured from the wordmark
The same gap, measured from the wordmark.

Correct usage

  • Do: the off-white logo on navy

    Off-white on navy

    Correct

  • Don’t: the logo in blue on navy

    Blue mark

    Blue is for coverage

  • Don’t: the logo in orange on navy

    Orange mark

    Orange is for risk

04  /  Color

Color always has a job.

Deep navy and a pale cool tint create a calm, analytical foundation. Blue marks alignment and coverage; orange isolates discrepancy and risk. The accents are intentionally limited — Wolfpack should never look alarmist, even when the information it delivers is uncomfortable.

  • Navy#0B1E38
  • Pale tint#EEF3FB
  • Blue#005DF5
  • Orange#C0451B

One accent, two values

Neither accent meets contrast requirements across both grounds, so each has a base value and an accessible shifted value. The meaning stays consistent; only the value changes.

  • Blue on light

    #3B72FF  ·  4.17 : 1

    Large text + UI only

  • Blue on dark

    #5B9BFF  ·  6.03 : 1

  • Orange on light

    #C0451B  ·  5.11 : 1

  • Orange on dark

    #EC6E46  ·  5.48 : 1

05  /  Conceptual product visuals

Making an invisible problem visible.

Conceptual product UI  ·  responsive views

Capacity became a visual language. Bright blue shows effective capacity, muted blue shows capacity allocated elsewhere, and orange isolates the gap. The same logic carries from product UI into marketing.

Surfaces
Desktop · Tablet · Mobile
Visual unit
Capacity blocks
Primary action
Open capacity plan

Design process

  1. STEP 1

    Define the unit

    One block = 2 FTE. Every figure on every surface resolves to the same block.

  2. STEP 2

    Measure the gap

    73% covered isn’t the story. 4 full‑time equivalents short is.

  3. STEP 3

    Author per width

    A desktop dashboard can’t stay legible on a phone. Each width got the technique it could carry.

  4. STEP 4

    Prove it moves

    Fills steadily, hesitates half a second, then the shortfall arrives.

The Wolfpack Priorities dashboard at desktop width, on a laptop
Desktop
The same dashboard at tablet width, on an iPad

Tablet

The phone view: 2 of 4 priorities are at delivery risk, with an Open capacity plan button

Mobile

06  /  The marketing site

From product logic to marketing story.

The product can be precise. Marketing has to be immediate. Wolfpack distinguishes needed, allocated, effective and missing capacity, then translates that logic into messages understood in seconds: 24 needed. 20 allocated. 4 missing.

I designed the site around large editorial typography, restrained product proof, and a light frosted interface system that keeps complex information approachable.

MARKETING WEBSITE

Eleven sections ordered as an argument, at three widths and in two modes.

Scope
11 sections  ·  3 widths  ·  2 modes
Primary Action
Book a demo

Design process

  1. STEP 1

    Order the argument

    Eleven sections: problem → proof → belief → objection → close.

  2. STEP 2

    Preserve the hierarchy

    Editorial type leads, product proof supports, and Book a demo stays the one primary action.

  3. STEP 3

    Build both modes

    Light and dark versions of every section, built from the same tokens.

  4. STEP 4

    Hold the ratio

    Type reduces at every breakpoint. The margin‑to‑content ratio doesn’t.

The Wolfpack marketing homepage on a laptop: “Are your priorities actually resourced?”View live build →

Figma → code

The Wolfpack homepage as a live coded web page
The same Wolfpack homepage as designed in Figma

Drag in the build: the Figma master on the left, the coded site on the right — aligned pixel for pixel. Proof, not a claim.

07  /  Campaign + social

One idea, built to travel.

The campaign system turns Wolfpack’s positioning into repeatable messages about priorities, capacity and misalignment. Every asset draws from the same system — capacity blocks, product UI, candid photography and restrained signal color — across education, launches, events and customer stories.

  • Company post: “Are your priorities actually resourced?” over a row of capacity blocks
  • Product launch post: “Introducing What Changed.”
  • Education post: “Four ways resourcing breaks.”
  • Human + product post: “Your team is busy. Your top priority is still under-resourced.”
  • Story post: “What you said matters. What actually got resourced.”
  • Event post: “See you at SaaS Operations Summit.”
  • Data post: “24 needed. 20 allocated. 4 missing.”
  • Customer story post: a quote — “We thought we were short on capacity. Then we realized the capacity already existed somewhere else.”
  • Brand post: “See the work. See the people. See the gap.”

1080 × 1080  ·  9 campaign applications  ·  one visual system

The Wolfpack booth at a conference: “See the work. See the people. See the gap.” on a navy back wall, a branded table and a 24 needed / 20 allocated / 4 missing pull-up

08  /  Event + booth

Built to work from across the room.

At event scale, the message had to get even simpler: See the work. See the people. See the gap. Oversized type, navy surfaces, restrained signal color and focused product proof carry the digital system into a physical environment.

Booth concept

Wolfpack collateral on a navy table: bottles, a folded tee, notebooks and printed one-pagers
Collateral & takeaways
The one-pager, front and back: “Are your priorities actually resourced?”
One-pager · 8.5 × 11 in

3D booth  ·  interactive on the live site

Drag to explore the booth. Each surface uses the final artwork at true size: 10 × 10 ft inline, backlit wall, 6 ft table and pull-up banner.

A 3D render of the 10 × 10 ft Wolfpack booth: backlit back wall, branded table with a laptop, and a pull-up banner

09  /  Physical brand

Taking Wolfpack beyond the screen.

I extended the identity into apparel, stationery, drinkware and print collateral, keeping each application restrained: durable materials, minimal branding and the same navy/off-white system used across the digital work.

Merch

Wolfpack merch: an embossed navy notebook and pen, a cream hoodie with its off-white swatch, a cream cap, an embossed business card, a navy water bottle, and a navy sweatshirt with its navy swatch

10  /  In closing

Self-initiated — built to feel real.

Wolfpack began as a self-initiated SaaS brand concept, but the goal was to build enough of the company behind the identity that every design decision had something real to respond to. The result is one system carried across positioning, product storytelling, web, campaign, event and physical brand.

The company, data, scenarios and people shown are fictional. The strategy, systems and design decisions are original, and shared examples are internally consistent.

NextGLIDE METHOD