HumaresoHumareso
LoginLet’s Talk
Let’s Talk

Humareso

Brand Guide.

The official voice, image, and style guide of Humareso.

Last updated: June 2026

01

Foundation.

We are

Humareso

Since 2012, Humareso has been the strategic HR partner that growing companies deserve but rarely find. We offer human-centered HR outsourcing & award-winning technology solutions for companies like yours.

Expert HR consulting and powerful HR technology together, designed to simplify compliance, boost engagement, and help businesses thrive.

02

Voice & Tone.

Voice · Values

Six values, and the voice that carries them.

Six values define what we believe. Four traits describe how that shows up on the page. Four more describe how it never should.

Six values
  • ✓Integrity
    Do what you say. Say what you mean. Rare, and not complicated.
  • ↻Consistency
    Anyone can show up once. We show up every single time.
  • →Follow Through
    A plan means nothing without execution. We finish what we start.
  • ⚡Proactivity
    We are already three steps ahead, building the solution.
  • ◆Collaboration
    The best ideas come from smart people building together.
  • ★Joy
    Work should energize you. If it does not, we fix that.
How we sound
  • HumanWe sound like a person who has done the work, not a policy document.
  • ModernCurrent, plain, and clear. No corporate fog, no dated jargon.
  • JoyfulThere is warmth and lift in how we speak. The work is serious; the tone need not be grim.
  • PassionateWe care, and it shows. Conviction without volume.
How we never sound
  • PompousNo talking down, no self-importance, no jargon for its own sake.
  • AggressiveWe persuade with clarity, never with pressure or alarm.
  • Hyper-legalWe are not a disclaimer. Plain language over defensive hedging.
  • Overly goofyWarmth is welcome; clowning is not. We are still a trusted partner.

How we present ourselves

people. with passion.

People come first, always. The work we do is technical, we measure the outcomes, and the systems are real, but every line of this brand starts from a person on the other end of it. Humareso puts the human first, and everything else flows from that.

Voice · In Practice

The mechanics

The values define what we believe; these seven rules turn that belief into copy anyone can write. Apply them to every sentence, and the voice stays consistent no matter who is writing.

Write in the active voiceMake the subject do the action. Write "we cut their onboarding time in half," not "onboarding time was cut in half."
Write in complete sentencesHumareso speaks in full sentences, each with a subject, a verb, and an object. Avoid sentence fragments, manifesto cadence, and parataxis. The clipped staccato style, as in "The arms split. The brand does not. Every company. Without exception.", reads as AI-flavored swagger rather than Humareso voice. Use a semicolon only when it earns its place, and let the substance carry the line rather than the rhythm.
Never use em-dashes or double hyphensEm-dashes are a tell of AI-flavored writing. Rewrite the sentence, use a period, or use a semicolon instead.
Double-space between paragraphsSingle line breaks collapse when copied. Two blank lines keep the spacing intact wherever the text lands.
Lead with the pointCut the preamble and the throat-clearing. The first sentence carries the message, and everything after it supports that message.
Choose plain over cleverShort sentences are welcome, but sentence fragments are not. Choose familiar words over rare ones. If a reader has to reread a line, rewrite it.
Bold what mattersEmphasis guides the eye to the decision or the number. Use it on the substance, not as decoration.

The Name

Humareso

Humareso fuses two words: Human and Resources. We always set the name in Marion, with even letter-spacing. The name set in Marion is the wordmark, and we never render it any other way.

Acceptable
  • HUMARESO
  • Humareso
  • Humareso, LLC.
  • humareso.com
Never
  • HumaReso
  • HumanReso
  • humareso

What’s in a name

How to use the wordmark

The Humareso name is the wordmark on its own, set in Marion. Three finishes cover three surfaces, and the wordmark stands alone whenever the icon would crowd the space, including print mastheads, footers, and single-line attributions.

Wordmark — Black
Wordmark — Black/brand/logos/humareso_logo_text.png
Wordmark — Red
Wordmark — Red/brand/logos/humareso_logo_text_red.png
Wordmark — White on Red
Wordmark — White on Red/brand/logos/humareso_logo_text_white.png
Wordmark — White on Dark
Wordmark — White on Dark/brand/logos/humareso_logo_text_white.png

Wordmark · Use + Sizing

How to set the name

The wordmark earns its weight from breathing room and consistent letter-spacing. Treat it like a piece of editorial type, never UI chrome.

ClearspaceKeep a margin equal to the cap-height of the H on every side of the wordmark. Nothing enters that frame, whether it is type, photo, or graphic.
Minimum sizeThe wordmark is set no smaller than 140px wide on screen or 1.25 inches in print. Below that size, switch to the lockup or to the bare HR mark.
Surface matchThe black wordmark belongs on light surfaces, and the white wordmark belongs on dark ones. The red wordmark is reserved for editorial accents and is never used as a UI label.
Humareso wordmark

The Icon

The HR mark

The HR mark is an interlocking serif “HR”, used as the standalone symbol wherever the full lockup would not fit. Three finishes are available, one for every surface.

HR Mark — Red
HR Mark — Red/brand/logos/humareso_hr_icon_red.png
HR Mark — Black
HR Mark — Black/brand/logos/humareso_hr_icon_black.png
HR Mark — White on Red
HR Mark — White on Red/brand/logos/humareso_hr_icon_white.png
HR Mark — White on Dark
HR Mark — White on Dark/brand/logos/humareso_hr_icon_white.png

Icon · Use + Sizing

How to set the mark

The HR mark is the brand at its most compact. It carries the most weight at small sizes, so the rules around it are the strictest.

ClearspaceThe minimum spacing around the HR mark is equal to X on every side, where X is the small reference square shown at the bottom-left of the diagram. X measures half the height of the mark, and nothing enters the frame it defines, whether it is type, photo, or graphic.
Minimum sizeThe HR mark on its own is set no smaller than 24px on screen or 0.4 inch in print. At app-icon and favicon sizes, the white mark goes inside the classic red container.
HR mark
1×
0.5×
White HR on red, stand-alone rectangle
Stand-aloneThe default red container, used across app, web, and most marketing surfaces.
Humareso original mark, square
Square*Standard, everyday use, most applications.
Humareso original mark, circle
CircleAvatar surfaces and social profile marks.
Humareso app icon
App IconReserved for HTS APIs and dev ops tooling. Not currently used in marketing or client-facing work.

Where possible, we slightly round the corners of squares to introduce softness.

The Lockup

The mark with the wordmark

The lockup pairs the HR mark with the Humareso wordmark, and it is the public face of the brand. It is also the default for marketing, sales, decks, and any surface a client first meets us on.

Original lockup
Original lockupOn light surfaces.
All white on navy
White lockup, dark fieldOn the official navy gradient.
White lockup on photo
On photographyOver a dark, on-brand image.
All white on red
On the red fieldThe classic red treatment.
White on ink
For black-and-white useSingle-ink and grayscale surfaces.

Lockup · Use + Sizing

How to place the lockup

The lockup is the most-seen version of the brand. Pick the finish that fits the surface, keep the clearspace honest, and let it lead.

ClearspaceKeep a margin equal to the height of the H in the wordmark on every side of the lockup. Nothing enters that frame, ever.
Minimum sizeThe lockup is set no smaller than 120px wide on screen or 1 inch in print. Below that size, drop the wordmark and use the HR mark on its own.
Surface matchLight surfaces take the black lockup or the red-on-black lockup. Dark surfaces take the all-white lockup or the red-on-white lockup. A light-finish mark is never set on a light surface for contrast effect.
Humareso lockup

Logo Misuse

Never do this

The six examples below show common mistakes, paired with the rule each one breaks. The lockup serves as the example for most of them, because the lockup is the version of the mark most often misused.

Stretched
StretchedNo distortionThe mark and lockup hold their proportions, always. Never scale one axis without the other.
On a photo
On a photoNo bare mark on imageryThe lockup never sits directly on photography. When a photo is the surface, the lockup goes inside the red container or onto a solid block, never floating on the image itself.
Crowded
CrowdedNo tight cropsGive the mark clearspace equal to the height of the H. Nothing enters that frame, whether it is type, photo, or graphic.
Icon at the misused scaleWordmark forced to the icon’s full height
Mismatched proportionsNo H-height driftThe icon and the wordmark are proportionate by design: the H in the icon and the H in the wordmark are exactly the same height. The wordmark is never scaled to match the full height of the icon, and the icon is never scaled to match the full height of the wordmark.
04

Color.

Color

The palette is led by Red and Navy.

Two colors carry the Humareso brand. Humareso Red and Humareso Navy do the work everywhere they show up, and every other color in the palette exists to support, deepen, or extend what those two leads already do.

Humareso Red#EF2E24rgb(239, 46, 36)--humareso-redThe brand. Used as a field and a mark, never as type.
Humareso Navy#032F46rgb(3, 47, 70)--humareso-navyThe voice of every header and dark surface.
Red family
Red Dark#670204rgb(103, 2, 4)--humareso-red-dark
Red Muted#C9261Crgb(201, 38, 28)--humareso-red-muted
Red Light#F9DEDErgb(249, 222, 222)--humareso-red-light
Navy family
Navy Black#050707rgb(5, 7, 7)--humareso-navy-black
Navy Light#CFD8E5rgb(207, 216, 229)--humareso-navy-light
Navy Off-White#F4F6F9rgb(244, 246, 249)--humareso-navy-off-white
Text
Ink#1F3440rgb(31, 52, 64)--color-textDefault body and headers on light surfaces.
Ink Secondary#3B4B56rgb(59, 75, 86)--color-text-secondarySupporting copy and captions.
Inverse#FFFFFFrgb(255, 255, 255)--color-text-inverseAll type on navy and red surfaces.

Color · Brand Surfaces

The four gradient fields

The standard backgrounds the brand composes against. Decks, slide masters, marketing heroes, and app shells. Pick the field that fits the surface and let the rest of the design sit on top of it.

Navy — defaultThe default brand surface. Decks, slide masters, marketing heroes./brand/gradients/humareso-grad-bg.jpg
Navy — deepDarker variant for editorial moments and high-contrast covers./brand/gradients/humareso-grad-bg-dark.jpg
RedThe brand field at its loudest. Section dividers, single-statement covers, never long-form./brand/gradients/humareso-grad-bg-red.jpg
PurpleThe Leave surface. Used wherever Leave fronts the work./brand/gradients/humareso-grad-bg-purple.png
05

Typography.

Typography

Our core font collection

Section headings in Haboro Condensed. Sub-headings in Elza Black. Everything else in Elza. Three faces, an honest hierarchy.

Ag

Haboro Condensed

Display. Section headings and the loudest editorial moments. Set in Black weight.

Ag

Elza Black

Sub-headings. The working title face beneath every section head, including labels, card titles, and callout heads.

Ag

Elza

Body. All running copy, captions, and UI text. Reads quietly, never shouts.

Special-purpose only

Four faces with narrow remits. Each appears only when its role calls for it, and never as a workhorse or in place of the primary three.

Ag

Marion

The Humareso wordmark and rare expressive lines. Never a UI font.

{Ag}

JetBrains Mono

Code, tokens, and technical specimens only. Never editorial.

"Ag"

Marion Italic

Pull-quotes and editorial moments, including testimonials, blog leads, and the rare line that wants to breathe.

— Ag

Elza Italic

Small annotations and asides, including captions, footnotes, and callout notes. Quietly different from the body face.

06

Imaging.

Imaging · Philosophy

What our photography looks like.

A short list, in voice. The reader of this section is most often a designer briefing a photographer or selecting stock; these are the words they need to hear before they pick the first image.

A conversation between two colleagues
Real conversation. Real warmth. Workplaces, not stock-photo offices.
A quiet moment at a window
Private, considered, human. Personal moments without being staged.
Working from a café
People who are working, but not always at work. Cafés, home offices, the field.
A leader in conversation
Modern but human. Focused subjects, considered surfaces, no posing.
A moment of progress
Things in motion. Active without being chaotic. Forward, not frantic.
A modern, considered workplace
Real surfaces, real light. Modern interiors that feel lived in, not staged.

Image Guidelines

The look is cool, deep, and alive. If a photo feels staged, flat, or washed out, it is not ours.

Acceptable
  • Navy-graded color: cool, deep, considered
  • People mid-motion: walking, working, talking
  • Real workplaces: floors, sites, the field, not a posed desk
  • Candid moments over staged ones
  • One warm red accent against the navy cast
  • Motion blur as energy, kept intentional
Unacceptable
  • Flat, fluorescent office stock photography
  • Posed handshakes and staged "teamwork" shots
  • Washed-out or faded imagery with no depth
  • Dark text set over light or faded photos
  • Competing accent colors fighting the red
  • Sterile, empty, peopleless rooms
Tone reference
Humareso Navy#032F46
Chocolate Dark#4F1D0B

Imaging · Use Of

How to place a photo

Two treatments cover almost every brand surface. A full-bleed hero with type sitting in a navy scrim; a smaller accent crop set alongside text. Anything more elaborate than these is usually a sign the layout is fighting the photo.

Full-bleed hero
Type sits in the dark side of the frame.
Accent crop

Accent crops sit beside body copy, never on top of it.

How to tint and blur

The same photo, treated three ways. A navy tint cools the cast, and a slight blur turns a busy image into a surface that can hold type without fighting it.

Original photograph
OriginalUntouched. Reads as a photograph, not a brand surface.
Tinted photographType sits here.
TintedNavy scrim across the frame. The cast feels Humareso.
Tinted and blurred photograph with sample textType sits here.
Tinted + blurredReady for type. Slight blur removes the busy edges that fight a headline.

What not to do

Three habits that read as off-brand the moment they ship. Avoid every one.

Dark text on a washed-out photoDark text on a faded photo is unreadable.
Dark text on faded white photoThe worst of both worlds. Photo lost, type unreadable.
Untreated photo with text directly on topHeadline copy directly on a busy photo.
Text on an untreated photoNo scrim, no tint. The type and the image fight each other and the reader loses.
Photo with an off-brand color scrimOff-brand scrim color.
Off-brand scrim colorAny wash other than navy reads as a competing brand layered on top of ours.
07

Our Offerings.

HRO + HTS

The People. The Platform.

Humareso runs as two complementary arms. The brand is one; the work splits. The same wordmark fronts both.

HRO

Human Resources Outsourced

The HR outsourcing and consulting practice. Real people working alongside our clients on the hard parts of HR, including compliance, employee relations, hiring, and the things software alone never solves.

  • HR
  • Payroll
  • Leave
  • Benefits
  • Recruiting
  • Audits
Who it serves
Growing companies that need senior HR firepower without building it in-house.
How it sounds
Direct, warm, modern. The Humareso voice with a face on it.
HTS

Humareso Technology Solutions

The platform and product engineering arm. Builds and runs the Humareso software our clients use every day: Engage (with Lead360° and Perform) and Leave.

  • Engage
  • Lead360°
  • Perform
  • Leave
  • Portal
  • Verify
What it ships
Engage (with Lead360° and Perform) and Leave. Each one is its own sub-brand inside the family.
How it sounds
Confident, practical, plain. Product copy that earns trust without overselling.
Employee Engagement Platform

Know What Your
People Need—Before They Walk
Out the Door

A continuous pulse on employee sentiment. One-minute weekly surveys that spot disengagement, predict turnover, and give leaders clear next steps.

✓90%+ participation rates✓90-day turnover prediction✓Live in 24 hours

HTS · Engage family

What Engage powers

Two sub-offerings sit underneath Engage and share its pulse data. Each one carries its own purpose; together they round out the employee-experience picture.

Lead360°

Structured 360° feedback for leaders.

Calibrated multi-rater feedback that turns scattered impressions into trend lines a leader can act on, review after review.

  • Configurable rater sets across peers, reports, managers, and self
  • Calibration to keep scores honest across cohorts
  • Trend lines across cycles, tied back to Engage pulse data

Perform

The review loop, finished.

Reviews, goals, and 1:1s in one place, tied back to the pulse data so feedback is always grounded in what was actually happening.

  • Performance cycles run from goal-set to review without leaving the app
  • Goals and 1:1 notes carry forward between cycles
  • Every conversation grounded in the underlying pulse and 360 data

Leave is hard enough. We handle it so your team doesn’t have to.

Humareso Leave pairs a dedicated specialist with purpose-built software to manage every case from first request to return date, for companies of any size.

Learn more at humareso.com/leave

leave
Humareso mark

Leave

Leave

Handle leave with care.

The Humareso leave-of-absence platform. It is built for the moments that are personal and often hard (medical, family, bereavement) and for the HR teams quietly carrying employees through them.

What Leave does
  1. 01

    Eligibility and case management

    Across every leave type, every state, and every plan.

  2. 02

    Employee portal

    Clear status, what to expect next, and who to talk to.

  3. 03

    HR workflow

    Tasks, deadlines, and compliance built in.

Leave · Color & Voice

A palette and a tone of its own

Leave is the one product that steps away from red and navy. Its palette is purple, its voice is gentler, and both decisions follow its audience.

Leave Purple#5A3584rgb(90, 53, 132)--leave-purpleThe Leave brand. Calm, personal, distinct from the core.
Purple Mid#7A52A8rgb(122, 82, 168)--leave-purple-mid
Purple Dark#3D2260rgb(61, 34, 96)--leave-purple-dark
Purple Soft#F6F2FArgb(246, 242, 250)--leave-purple-soft

Why purple?

Humareso Red#EF2E24Leave Purple#5A3584Humareso Navy#032F46

When we first built the Leave platform, we started designing it in purple almost by accident. As soon as it was on screen, the reason held up. Leave is a product whose users skew heavily female, and it lives inside personal, often hard moments. A softer color and a gentler tone fit the audience and the situation in a way the brand red and navy could not.

Purple sits naturally between the two brand leads. Calm where red is urgent, warm where navy is cool. It says, clearly and quietly, that the work is still Humareso, and that this corner of it is built for a more comforting environment.

Leave Imaging

A father lifting his young son in a quiet home

Leave imaging follows the same principles as the parent brand: real people, real warmth, and the navy-graded cast that ties everything together.

Leave then leans further toward home and family contexts. Kitchens, bedrooms, backyards, and quiet rooms appear more often than meeting rooms and desks. Where the parent brand reaches for a workplace, Leave reaches for a kitchen table or a moment between people who are not at work.

08

Appendix.

Appendix · Buttons

Button design

Buttons share one shape: a fully rounded pill at every size, with a two-pixel border and a tight transition on hover. The Primary and Frosted pair is the canonical hero combination.

PrimaryRed gradient pill. Always the page’s primary action. One per view.
Frosted hollowTranslucent fill, thin white border, blurred backdrop. Pairs with Primary on photo and navy surfaces.
SecondaryRed outline on white. Second-rank action on light surfaces.
GhostNo fill, no border. Tertiary action and inline link affordance.

Appendix · Scales

Type and spacing

The numerical backbone of the design system, kept here so designers and engineers can find it without searching.

Type scale

--text-6xl3.75rem / 60pxDisplay / H1
--text-5xl3rem / 48pxHero secondary
--text-4xl2.25rem / 36pxH2
--text-3xl1.875rem / 30pxH2 (mobile)
--text-2xl1.5rem / 24pxH3
--text-xl1.25rem / 20pxLead
--text-lg1.125rem / 18pxSubtitle
--text-base1rem / 16pxBody
--text-sm0.875rem / 14pxCaption
--text-xs0.75rem / 12pxFine print

Spacing scale

--space-10.25rem / 4px
--space-20.5rem / 8px
--space-30.75rem / 12px
--space-41rem / 16px
--space-61.5rem / 24px
--space-82rem / 32px
--space-123rem / 48px
--space-164rem / 64px
--space-205rem / 80px
--space-246rem / 96px
--space-328rem / 128px

Appendix · HTML elements

How the standard tags render

The default cascade for every common HTML element on a content surface. Drop unstyled markup onto a page and this is what you get.

<h1>

Heading level one

<h2>

Heading level two

<h3>

Heading level three

<h4>

Heading level four

<h5>
Heading level five
<h6>
Heading level six
<p>

Body paragraph. The default reading surface for long-form copy. Set in Elza at the base size, with leading tuned for comfortable continuous reading.

<strong>

Inline emphasis with strong weight on the important phrase inside running copy.

<em>

Inline italic for a subtle shift in voice or a borrowed phrase.

<a>

An inline anchor link carries the underline and the brand red on hover.

<blockquote>
A blockquote sets a pulled passage off from the main flow. Marion italic at a small step up; left rule in red.
<ul>
  • Unordered list item.
  • Each item leads with a small red square.
  • Spacing tuned for scannable rows.
<ol>
  1. Ordered list item.
  2. Numeric counter in navy, set in Elza.
  3. Used for sequence, not just bullets.
<code>

Inline code spans use JetBrains Mono on a faint tinted surface.

<small>Small print for legal lines, captions, and footnotes.