SupaHumans — Visual Identity Guidelines

Work in progressStrategy content — still being refined and not yet final. The visual identity system is the source of truth for now.← Back to Visual Identity

WIP Foundation

What the design has to prove.

Every visual choice earns its place by making the brand feel more credible, not more decorated. The system is confident, clean, and evidence-first — the opposite of hype.

Positioning

Proof over Promise

We show the work, not the pitch. Design leans on real proof — outcomes, faces, specifics — and skips the stock-photo optimism.

Voice

Sage + Caregiver

Knowing and grounded, protective of the people we serve — with a rebel's willingness to name what's broken. Warm, never cute. Direct, never cold.

What we say, and why it lands.

The words are downstream of one idea: proof beats promise. This is the angle, the positioning, and the message architecture the visual system exists to carry — drafted for review.

Mission & Vision

Vision · where we're going

To become the premier healthcare BPO while strengthening 4,444 families in the Philippines within the next 10 years.

Mission · why we exist

To build and strengthen families across the globe by bridging the gap between talented virtual assistants and private practice owners.

The mission is the everyday purpose; the vision is the measurable 10-year destination. The specific figure (4,444) is a proof point in itself — set it in IBM Plex Mono wherever it appears.

The angle

Practice owners don't have a hiring problem. They have a seeing problem — they can't tell who can actually do the work until the wrong hire has already cost them. SupaHumans replaces the theater with proof, so the right operator is obvious before Day One.

Positioning statement

For private-practice owners who can't afford a wrong front-office hire, SupaHumans is the talent intelligence platform that places operators proven to do the work — not people who interview well. Unlike staffing agencies and VA marketplaces that sell resumes and hope, we lead with proof, match on evidence, and stand behind the fit from Day One™.

Value proposition — by audience

For practices (Client / CX)

Stop gambling on resumes. Get an operator who's already proven they can do the job.

See proof of real work before you commit — no interview theater.
Matched by the Hiring Brain™ across the dimensions that predict fit.
Proven on Day One™, backed by a team that has your back.
Get back to caring for patients — we hold the rest.

For talent (Unicorns / UX)

Get seen for what you can actually do — and paid what proven work is worth.

No resumes, no theater. Your work speaks first.
You name your rate. Proven work sets its price, not a bidding war.
Permanent remote, real time off, profit sharing as we grow.
A vetted community of operators who get it. You're never alone.

Message pillars

The Proof Advantage

Proof beats promise. We show the work before anyone commits — the whole model runs on evidence, not assurances.

Both audiences

The Invisible Ceiling

Great operators go unseen because hiring rewards who performs in interviews, not who performs in the work. We remove the ceiling.

Talent-led

The Standard, Earned

A standard you can't fake — earned through vetting that means something, not claimed on a profile.

Both audiences

The Rare Market

Rare talent for a rare kind of practice. Not a marketplace to browse — a matched network, one world owned.

Client-led

Reasons to believe

Hiring Brain™Matches on scored evidence, not gut feel.

Proven on Day One™Fit is demonstrated before they start.

Earned vettingEvery operator screened to the standard.

Fresh Eyes™A two-week reflection that surfaces what works.

Vetted communityA network of operators who get it.

One world ownedTalent intelligence across every region.

Signature lines

Proof over Promise.Master line · everywhere

Talent intelligence, one world owned.Platform descriptor

There's a difference in being chosen and being seen.Brand campaign

Get seen for what you can actually do.Talent hero

No resumes. No theater. Just proof.Recruitment

Proven on Day One™.Product proof point

How we say it: Sage sets the frame (what's true), Caregiver sets the warmth (we've got you), Rebel sharpens the edge (we won't play the theater). Plain verbs, sentence case, specifics over adjectives. If a line could run on any staffing site, it isn't ours yet.

01 Logo

The mark.

The glyph is a "U" resolving into an upward-right arrow — the Assistantly submark and the Virtual Rockstar mark merged into one forward motion. It reads as growth, momentum, and moving into the future of hiring.

See the mark come together

Construction

Left: the glyph, used alone for avatars, favicons, app icons, and tight spaces. Right: the primary lockup — glyph + wordmark in fixed proportion. This is the master artwork; don't retype, respace, or rebuild it — use the supplied files.

Clear space & minimum size

Keep clear space equal to half the glyph height on all sides. Nothing — type, edges, other logos — enters this zone.

24px · glyph min

16px · favicon

120px · lockup min width

Below these sizes, use the glyph alone. Never render the wordmark so small it loses its counters.

Colorways — the only approved versions

The full lockup runs one of five ways only: three solid (whole lockup in dark pine, dark grey, or white) or two mixed (lime glyph with the wordmark in dark grey or white). No other color combination is permitted.

Solid — one color

Dark pine — #183A33, default on light.

Dark grey — #333333, neutral / print.

White — on pine, ink, or photography.

Mixed — lime glyph + wordmark

Lime glyph + dark-grey word — on light.

Lime glyph + white word — on pine / dark.

Misuse

✕ Don't invent new color combos (e.g. amber glyph).

✕ Don't put lime on the word or swap the mix.

✕ Don't stretch or distort the lockup.

✕ Don't rotate or tilt the mark.

✕ Don't add shadows, outlines, or effects.

✓ Do use an approved version with clear space.

02 Color

Green, with discipline.

Pine carries the brand; lime is the spark. Neutrals do the quiet work. Aim for a roughly 60 / 30 / 10 balance — pine & neutrals as the base, generous white space, lime reserved for the moments that matter.

Primary — Pine family

Primary

Pine

#183A33

Titles, buttons, nav, glyph, base of dark gradients.

Pine Soft

#22483F

Hover states, secondary labels, captions.

Pine Deep

#0E2A25

Gradient end, ticker band, deepest fills.

Ink

#10201C

Near-black text on light; 1-color logo.

Accent — Lime family

Accent

Lime

#C6E79E

Highlights, checks, chips, "Start hiring" base, FAQ open.

Lime Deep

#AEDA7E

Accent dots, hover arrows, tag text pairing.

Lime Soft

#E6F3D4

Tile fills, focus rings, gentle highlights.

Lime Wash

#F1F7E8

Lightest section tint, callout backgrounds.

Neutrals

Body

#333333

Default body copy on light surfaces.

Sage

#C9D2CE

Muted strokes, disabled, quiet dividers.

Mist

#E7EAE8

Card borders, table rules, surfaces.

Paper

#F9F9F9

Default page background.

Gradients

Dark card

linear-gradient(155deg, #20463E → #0E2A25)

Feature cards, hero, dark panels.

Lime button

linear-gradient(120deg, #D8EEB8 → #B6DE86)

Primary CTA fill only.

Text & contrast pairings

Pine on paperAAA · headings

Body on paperAA · copy

White on pineAAA · dark UI

Lime on pineAA · accents

Pine on limeAAA · bright panels

Lime-deep on deepAA · tags

Pine-soft on whiteAA · captions

Pine on washAAA · callouts

Never set lime text on white or paper, or lime on lime — it fails contrast every time. Lime earns its brightness against pine and ink.

Special accents — used rarely

Amber (#B45309) and the handwritten Caveat script are not core palette colors — they're special accents that appear only in rare, high-signal moments: a status avatar on a notification, a single hand-drawn aside. Treat them as seasoning; most surfaces never use them at all.

Notification avatar accent

Front Office ReceptionRiverbend PT · Remote

Proven · Day One™ 94Maria R.

Amber tiles and rings mark a live, human moment on cards. The amber ring sits on white or ink only — never on a green fill.

Handwritten aside (Caveat)

We got answers

One handwritten line near a headline or FAQ — warmth and personality, at most once per page.

Rule of thumb: if amber or the handwritten script appears more than once in a layout, remove one — their power is scarcity. And never mix amber with green: amber only ever sits on white or ink, never touching pine or lime.

03 Typography

Neue Montreal, set with intent.

Neue Montreal is the brand face, used in Medium and Light. Medium runs every title, label, button, and UI element; Light handles captions and small print. Inter Light does the reading — body copy and long-form. IBM Plex Mono handles anything that is data. Type color is always darkest green or the #333333 body grey — never mid-greys that muddy the page.

Neue Montreal — the two weights

AaNeue Montreal Light · 300
Captions & small print AaNeue Montreal Medium · 500
Titles, UI & emphasis

Type scale

Display XLMedium 500
clamp 42–74px
tracking −3%

Get seen for what you can do.

Display L / H1Medium 500
clamp 40–66px

Being seen is structural.

Section / H2Medium 500
clamp 30–48px

The Hiring Brain, one world owned.

SubheadMedium 500
24px

Proof, not theater.

BodyInter Light 300
18px · 1.6

We place vetted operators — Unicorns — with private practices that need real help. No resumes, no theater. You see proof of the work before you ever commit, which is the whole point.

Small / captionNeue Montreal Light 300
14px

Full-time remote · Latin America & the Philippines

EyebrowMedium 500
12px · +16% tracking
UPPERCASE

Careers at SupaHumans

The type roles

Neue Montreal Medium carries the personality — headlines, buttons, labels, UI. Inter Light does the calm, legible work of body and long-form: it is the reading weight. Neue Montreal Light handles captions and small print. IBM Plex Mono takes anything that is data. Hierarchy comes from weight, size, and color — never decoration.

Display, UI & captions

Neue Montreal Medium

Neue Montreal Light

Medium for headlines, buttons, labels, UI. Light for captions and small print.

Body & long-form ★

Inter Light

Body copy, dense app screens. The reading weight.

Data & special

IBM Plex Mono

Stats, scores, timestamps, code, rare special items.

Body — Inter Light

Being seen is structural.

Most processes make you feel chosen — warm words around a decision made for reasons you'll never know. We built the opposite. Every operator arrives with proof of the work, matched by the Hiring Brain™ on the dimensions that actually predict fit, so the right person is obvious before Day One. That is what it means to be seen: not flattered, but understood.

Inter Light is the reading weight — neutral, highly legible, and quiet enough that it never competes with Neue Montreal in the headlines. Body runs Light 300 at 16–18px, 1.6 line-height; step up to Medium 500 only for inline emphasis and links. Captions and small print switch to Neue Montreal Light.

Data & special items — IBM Plex Mono

Anything that is a number or a signal goes in Plex Mono: scores, match times, counts, timestamps, code, and the occasional special callout. The monospacing makes figures line up and feel measured, which reads as proof. This is also where the Sage comes alive visually in the brand — but reserve it for the moments where verified knowledge, the "something we know that they don't," is essential.

Avg. Day One™ score

72h

Median match time

Resumes required

World owned

PROVEN Day One™ 94 MATCH 72h median REGION PH · LATAM STATUS 3 roles live SINCE 2026-07

Data label

DAY ONE™ · 94/100

Spec / code line

--pine: #183A33;

Timestamp

matched · 2026-07-09 14:22

Mono is not body text. Never set sentences or paragraphs in Plex Mono. Keep it to figures, labels, code, and the rare special item — its job is to make data feel precise, not to be read in bulk.

Font files: Neue Montreal (licensed, Pangram Pangram) is the brand face, in Medium and Light — self-host the licensed .woff2 files in a /fonts folder beside this file, or it falls back to General Sans (Fontshare). Inter (body), IBM Plex Mono (data), and the Caveat accent are all free via Google Fonts.

04 UI / UX Kit

The working components.

Everything is built on pill geometry, soft rounded cards, and a single 8-point rhythm. Interactive elements lift 1px on hover; focus is always a lime-soft ring. Copy on controls says what happens: "Start hiring," "Get seen," never "Submit."

Buttons

Get started now Start hiring See the proof

Get seen Browse roles

Lime = one primary action per view (gradient fill, optional arrow chip). Pine = solid primary on light. Outline = secondary, borders adapt to surface. Radius 100px, weight 500.

Chips, tags & nav pill

Proven on Day One™ Fresh Eyes™ Physical therapy Proof over Promise

Cards

Light card

Default surface. 22px radius, 1px mist border, soft shadow.

Icon box

14px radius, pine fill, lime glyph — for feature and lobe icons.

Dark card

155° gradient, deep shadow. Reserved for feature moments and the hero.

Form fields

Work email

Focus (click to see focus ring)

Radius scale

6px · inputs-tight

14px · fields, icons

20px · panels

22px · cards

100px · pills

50% · avatars

Elevation

Soft0 20px 40px −24px / .35

Medium0 24px 48px −30px / .40

Dark card0 54px 120px −60px / .75

Spacing rhythm — 8pt base

Iconography

1.5px stroke · flat caps & sharp joins · line style · lime on pine boxes.

05 Iconography

Icons built for us.

A custom set, not a stock library — so the marks are unmistakably SupaHumans. Every icon follows the same construction rules, which is what makes them read as a family.

Construction rules

24px grid · 1.4 strokeDrawn on a 24-unit grid, single consistent stroke weight.

Flat caps, sharp joinsLine style throughout — crisp and precise, never filled silhouettes.

Up-and-to-the-rightOne element lifts toward the corner, echoing the glyph.

One colorMonochrome — pine on light, lime on dark. Never two-tone.

The library

Growth

Hiring Brain

Proof

Day One

Fresh Eyes

Match

Talent

Remote

Care

Practice

Vetting

Community

The Standard

In the lime tile

For feature moments and product UI, icons sit in a rounded tile — lime line on a faint lime-bordered tile over pine (the treatment used across the site), or pine on lime-soft for light surfaces. One color per icon, always.

Usage: one color per icon — pine on light, white or lime on dark, lime inside the tile. 1.8 stroke, round caps, minimum size 20px. Don't two-tone them, add shadows or gradients to the icon itself, recolor half an icon, or mix in stock icons from another set.

Work in progressImagery direction is still being developed — treatments and examples here may change before they're final.← Back to Visual Identity

WIP Imagery

Real rooms, real people.

Photography is warm, human, and unmistakably private-practice — clinics, chairs, faces mid-conversation. Two treatments carry the brand over an image: the pine duotone and the lime headline.

There's a difference in being chosen and being seen.

Most processes make you feel chosen. Being seen is structural.

This is how we use Headline typography.

On real photography

Physical therapy

Care that gets seen, not just staffed.

Proven on Day One™

Veterinary

One standard, every kind of practice.

Talent intelligence, one world owned

The pine duotone carries any practice type — PT, dental, veterinary, wellness. Multiply pine over a grayscale base, keep the highlights, one lime accent line. Consistent treatment is what makes a mixed photo library feel like one brand.

Pine duotone

Multiply a pine gradient over the photo, keep whites in the highlights, drop the glyph top-left, headline in white, one line of lime for the turn.

Lime headline

Darken the image, set the headline in lime. Used sparingly for hero moments and campaign cards.

Do / Don't

Do use authentic clinic photography. Don't use gimmicky stock, heavy filters, or faces that read as generic corporate.

The look of proof over promise.

What the design has to prove.

What we say, and why it lands.

For practices (Client / CX)

For talent (Unicorns / UX)

The Proof Advantage

The Invisible Ceiling

The Standard, Earned

The Rare Market

The mark.

Green, with discipline.

Neue Montreal, set with intent.

The working components.

Icons built for us.

Real rooms, real people.

There's a difference in being chosen and being seen.

This is how we use Headline typography.

Care that gets seen, not just staffed.

One standard, every kind of practice.

Room to breathe.

Take the files.

What the design has to prove.

What we say, and why it lands.

For practices (Client / CX)

For talent (Unicorns / UX)

The Proof Advantage

The Invisible Ceiling

The Standard, Earned

The Rare Market

The mark.

Green, with discipline.

Neue Montreal, set with intent.

The working components.

Icons built for us.

Real rooms, real people.

There's a difference in being chosen and being seen.

This is how we use Headline typography.

Care that gets seen, not just staffed.

One standard, every kind of practice.

The system, out in the feed.

There's a difference in being chosen and being seen.

Get seen for what you can actually do.

Proof over Promise

Care that gets seen, not just staffed.

Average Day One™ score, before they start.

The invisible ceiling, removed.

Median time to a proven match.

Great work keeps losing to great interviews.

Hiring rewards the room. Not the work.

That gap has a name.

Proof is how you break it.

Room to breathe.

Take the files.