{

Style Guide

}

Brand Stylesheet

A reference for the NextPlay Jobs visual system: color, typography, logo usage and how to write. Every value here matches the website’s styles and the NPJ.DS design system in Figma, so what you see is what ships.

01 / Colors

Two brand colors and a clean set of neutrals. Navy anchors, Green moves, and the neutrals keep everything quick to read. Use the tints and shades for depth and states, never as replacements for the brand colors.

Accessibility: Navy on white passes AA at any size (about 11:1). Green on white is about 4.3:1, so use it for text only at 24px and up, or 19px bold. For small green text on light backgrounds, use Green 700.

Brand colors

Navy

#283287 · RGB 40 50 135

The anchor. Dark surfaces, headings on light backgrounds, links and the logo wordmark.

Green

#348C00 · RGB 52 140 0

The next play. Calls to action, eyebrows, step numbers, the spark, and the one word that matters most.

Neutrals

Ink

#1F1F24 · RGB 31 31 36

Headings and strong text. Framer: Grey 250.

Body

#545454 · RGB 84 84 84

Body copy. Framer: Grey 200.

Muted

#757575 · RGB 117 117 117

Secondary copy, captions, placeholders. Framer: Grey 150.

Border

#D4D4D7 · RGB 212 212 215

Dividers, card and input borders. Framer: Grey 100.

Background

#FCFCFC · RGB 252 252 252

The default page background.

Background Alternate

#F2F3F7 · RGB 242 243 247

Alternate sections, inputs and soft cards.

Grey 50

#F2F2F2 · RGB 242 242 242

Light surfaces; labels on Navy.

White

#FFFFFF · RGB 255 255 255

Cards on alternate backgrounds; text on Navy and Green.

Navy shades

300

#A9ADCF · RGB 169 173 207

400

#757CB2 · RGB 117 124 178

500

#485199 · RGB 72 81 153

600 · Navy

#283287 · RGB 40 50 135

700

#222A71 · RGB 34 42 113

800

#1B225C · RGB 27 34 92

900

#151A46 · RGB 21 26 70

Green shades

300

#AED199 · RGB 174 209 153

400

#7DB55C · RGB 125 181 92

500

#529D26 · RGB 82 157 38

600 · Green

#348C00 · RGB 52 140 0

700

#2C7600 · RGB 44 118 0

800

#235F00 · RGB 35 95 0

900

#1B4900 · RGB 27 73 0

Status (UI only)

Success

#059669 · RGB 5 150 105

Warning

#D97706 · RGB 217 119 6

Destructive

#DC2626 · RGB 220 38 38

02 / Typography

Three typefaces with clear jobs. Zilla Slab Bold for headlines and statements, Inter for reading, Geist Mono for labels. Keep to one headline style and one body style per block, and let size do the work.

Sizes are shown desktop / phone. The styles below are live: they are the same text styles the website uses.

Document fonts

In Word, Google Docs and slides, use Zilla Slab Bold for titles and Inter for body. If they aren’t installed, fall back to Rockwell and Segoe UI. Georgia and Arial are always safe.

Zilla Slab · Headings

Hire the right person.

Page heading · 95 / 64 px · Bold · 100% · −3.2%

Page heading · 95 / 64 px · Bold · 100% · −3.2%

Heading 2

H2 · 80 / 40 px · Bold · 105% · −2.5%

H2 · 80 / 40 px · Bold · 105% · −2.5%

Heading 3

H3 · 64 / 40 px · Bold · 110% · −1%

H3 · 64 / 40 px · Bold · 110% · −1%

Heading 4

H4 · 48 / 36 px · Bold · 100% · −4%

H4 · 48 / 36 px · Bold · 100% · −4%

Heading 5

H5 · 32 / 24 px · Bold · 100% · −1.6%

H5 · 32 / 24 px · Bold · 100% · −1.6%

Heading 6

H6 · 24 / 14 px · Bold · 100% · −1.6%

H6 · 24 / 14 px · Bold · 100% · −1.6%

Body XL statement

Body XL · 40 px · Bold · 105% · −2.5%

Body XL · 40 px · Bold · 105% · −2.5%

Body L card title

Body L · 31 px · Bold · 110% · −1.6%

Body L · 31 px · Bold · 110% · −1.6%

Inter · Body

We find the candidates who never apply.

Body M · 25 px · Regular · 150%

Body M · 25 px · Regular · 150%

Two candidates, not thirty. One relationship manager, start to finish.

Body S · 20 px · Regular · 150%

Body S · 20 px · Regular · 150%

Your P&L doesn’t care about job specialties. It cares whether the seat is filled with someone who can do the work.

Body XS (Line 1.5) · 16 px · Regular · 160% · default body copy

Body XS (Line 1.5) · 16 px · Regular · 160% · default body copy

Supporting copy and captions.

Body XS · 16 / 12 px · Regular · 120%

Body XS · 16 / 12 px · Regular · 120%

Emphasis in body copy.

Body M (Bold) · 25 px · Semibold · 150%

Body M (Bold) · 25 px · Semibold · 150%

Geist Mono · Labels

Built by LinkedIn insiders

Eyebrow · 12 / 11 px · Bold · Uppercase · +10%

Eyebrow · 12 / 11 px · Bold · Uppercase · +10%

Start a conversation

Eyebrow 2 · 14 / 12 px · Bold · Uppercase · +24%

Eyebrow 2 · 14 / 12 px · Bold · Uppercase · +24%

How we work

Eyebrow 3 · 18 / 16 px · Bold · Uppercase · +24%

Eyebrow 3 · 18 / 16 px · Bold · Uppercase · +24%

03 / Logo usage

The logo is the nextplayjobs wordmark with the play mark and its green spark. Always use the master files from the Assets page. Never redraw, recolor, stretch or rebuild it.

Primary lockup · use this by default

Primary lockup · color variations

Full color · on light backgrounds

On Navy · dark surfaces and photos

On Green · green fields only

Secondary lockup (stacked) · tight or square spaces

Full color

On Navy

On Green

Icon · avatars, favicons and small spaces

Full color

On Navy

On Green

Clear space and size

Keep clear space equal to the height of the play mark on every side of the logo. Nothing else (type, edges, other logos) goes inside it.

Recommended minimum: primary lockup 120 px wide on screen, 1 in (25 mm) in print. Below that, switch to the icon (24 px minimum).

Don’t

Recolor the wordmark or the spark.

Stretch, rotate, skew or outline it.

Add shadows, glows or other effects.

Put the full-color logo on a photo or busy background; use the On Navy version over a navy overlay.

Separate the spark from the play mark, or rebuild the wordmark in another typeface.

04 / How to write

If you remember one thing: write like a mid-market CFO’s smartest peer. Plainspoken, confident, and contrarian about the industry’s clichés without being defensive about it. Never salesy.

The four themes · every asset ladders to one

01 · Speed

The right person in thirty days.

Answer when before how. The timeline is the job to be done.

02 · Precision

Two candidates, not thirty.

Insider knowledge makes the list smaller and sharper. Say less, prove more.

03 · Operator focus

Written for operators, not TA.

Peer to peer with a CFO scanning between board meetings. Never HR to vendor.

04 · The human element

Human read closes what technical fit opens.

Technical match gets us to the shortlist. The human read gets us to the accepted offer.

Words we use

Executive search

Contingent search

Interim and fractional

Contract-to-hire

Project resources

Operators

Hunting

The seat

Thirty days

One relationship manager

Words we avoid

Staffing

Consulting

Recruiting agency

Talent partner

White glove

Concierge

Elite

AI-powered talent matching

Our team of specialists

Strategic talent partnerships

World-class outcomes

Voice by channel

Website: “we.” Founder-led, peer to peer.

Founder LinkedIn: “I.” Steve is edgy and quotable. Christine is warmer and more relational. Both are useful.

Never: third person. No “the NextPlay Jobs team believes.”

Mechanics

American English. Sentence-case headlines that usually end with a period.

Spell numbers out in headlines for rhythm (“thirty days”). Use numerals in proof points (94%, 30 days, 2 candidates).

Use commas, colons or periods instead of em dashes.

Lead with the outcome, then the proof. Cut hedges like “we strive to” and “best-in-class.”

The voice test

Would a CFO scanning between board meetings get it in twenty seconds?

Is there a number or a specific where a claim used to be?

Did we answer when before how?

Would Steve or Christine say it out loud, across the table?

Blurred figures walking past a modern building

{

Conclusion

}

This page is the what.
The Brand Source is the why.

The Brand Source explains why NextPlay Jobs looks and sounds the way it does. The Assets page has the logo files, fonts and source documents.

NextPlay Jobs

Brand Portal

Can’t access the portal? Contact hello@nextplayjobs.com