Naming

The name and how to use it consistently across all touchpoints.

Pronunciation

Messa /ˈmɛ.sə/

Tagline

See talent clearly. Built on a hiring playbook.

Product Names

Named product surfaces are capitalized as proper nouns. Everything else stays generic and lowercase.

  • Sidekick · The live interview copilot. Guides every conversation in real time.
  • Smart Shortlists · AI-scored candidate shortlists, with reasoning per candidate.
  • Scorecards · Structured evaluations drafted from the conversation. Edit, never start from scratch.

Do

  • Capitalize the M. Always "Messa".
  • Use as a proper noun, never as a verb.
  • Keep it standalone. No "the" prefix.

Don't

  • Don't write "MESSA" in all caps.
  • Don't abbreviate to "MS" or "M.".
  • Don't hyphenate or split across lines.
  • Don't misspell "Mesa" (common typo).

Colors

Two coexisting palettes. The default palette uses neutrals + electric brand blue. The cream landing palette ( .messa-cream-landing) overrides tokens on a scoped wrapper, softening every surface and accent for the illustration system on the marketing site.

Core

Accent (Default)

#3C4BE6

--color-accent

Brand electric blue. Default landing.

Accent (Cream Landing)

#5A6B8F

MUTED_ACCENT

Muted slate blue for cream / illustration context.

Cream BG

#FBF0E6

CREAM_BG

Primary surface on the illustrated landing.

Cream Border

#E8D9C5

CREAM_BORDER

Warm border on cream surfaces.

Text Primary

#0A0A0B

--color-text-primary

Headlines + body.

Text Secondary

#6E6B68

--color-text-secondary

Descriptive copy.

Text Muted

#A3A19E

--color-text-muted

Captions, timestamps.

Accent Foreground

#FFFFFF

--color-accent-foreground

Text on accent backgrounds.

Semantic

Success

#69B982

--color-success

Success Strong

#2E7A4D

--color-success-strong

Sage

#7AA582

SAGE

Sage Strong

#4A7552

SAGE_STRONG

Warning

#D9924A

--color-warning

Warning Strong

#8C530A

--color-warning-strong

Problem

#CE6B52

--color-problem

Problem Strong

#8B3A24

--color-problem-strong

Atmosphere

Non-token colors used inline for the sky gradients, stepper accent, and fraud-privacy callout.

Sky Blue

#D4E3F0

Top of hero + product gradient peaks.

Sky Mid

#E4E6E2

Neutral mid-tone in gradient transitions.

Sky Warm

#F0E6D8

Warmer gradient step between blue and cream.

Warm Brown

#8B6F4E

Hero conveyor signage (Decide station).

Fraud Navy

#1B2240

Privacy / fraud callout top gradient.

Fraud Navy Mid

#2C3766

Privacy / fraud callout gradient step.

Gradients

Two signature sky gradients run through the marketing site. Both are linear and top-down: the sky wrap rises from cream into blue, the landscape wrap settles from blue back to cream, so neighbouring sections merge seamlessly.

Sky Wrap — ATS → Product

Cream → warm steps (6–12%) → blue hold from 24%. The ATS “Works with your existing stack” strip and the Product dashboard float in the sky; the wrap ends blue so the underground section below meets the sky.

Landscape Wrap — Comparison → FAQ → CTA → Footer

Blue hold (0–78%) easing back to cream at the horizon, layered behind the landscape illustration. Wraps the comparison table, FAQ, fraud card, and the closing CTA; the same wrap closes every subpage via SiteFooter.

Fraud / Privacy Card

135° linear gradient on the dark privacy-first fraud callout.

Typography

Two roles, each with a clear voice. Perfectly Nineties is the display serif (Untitled Serif loads as its fallback), Messina Sans covers every functional surface. Only weight 400 is loaded. Emphasis comes from size and color, not weight.

Perfectly Nineties

font-serif

Headlines, hero display, testimonials, and marketing moments. Falls back to Untitled Serif, then Georgia.

See talent clearly.

The part nobody built.

Every hire sharpens the next one.

Messina Sans

font-sans

Body, UI labels, navigation, every functional type surface.

Messa reads every CV, guides every interview, and writes every scorecard. Built on a hiring playbook.

Software paired with a methodology built by recruiting experts, and a partner who helps your team apply it. Messa doesn't hand you a blank template. It shows up with the answers.

Trusted by teams at Satellogic, Craftsman+, Workana.

Type Scale

72pxAaDisplay (Hero) · Perfectly Nineties
48pxAaHeading L · Perfectly Nineties
32pxAaHeading · Perfectly Nineties
24pxAaSubheading · Perfectly Nineties
18pxAaBody Large · Messina Sans
15pxAaBody · Messina Sans
13pxAaSmall / UI · Messina Sans
11pxAaCaption / Pill · Messina Sans

Illustration

The marketing surface is an illustrated world. A warm cream palette, a hiring-pipeline isometric hero, and hand-drawn cloud puffs drifting across sky gradients. Never use stock HR imagery or AI sci-fi visuals.

Hero Illustration

Isometric hiring pipeline. Three stations: Prepare, Interview, Decide. CVs in, evidence-backed decisions out.

/images/hiring-factory-hero.png

Landscape (Footer)

Painted horizon with path, hills, and distant city. Bookends every page as the ground line below CTAs.

/images/landscape.webp

Cloud Set

Five cropped cloud PNGs with natural transparency. Scatter across sky gradients at varied sizes, positions, and drift animation offsets. Keep off of text and UI components.

cloud01
cloud02
cloud03
cloud04
cloud05

Spacing

Tailwind's 4px base scale. These are the most commonly used values across the product and marketing site.

4px
2xs · spacing-1
8px
xs · spacing-2
12px
sm · spacing-3
16px
md · spacing-4
24px
lg · spacing-6
32px
xl · spacing-8
48px
2xl · spacing-12
64px
3xl · spacing-16
80px
4xl · spacing-20
128px
section · spacing-32

Motion

Motion is atmospheric or purposeful — never decorative. Three tiers: functional (hover/toggle), ambient (cloud drift, pill cycling), and reveal (scroll-triggered fades).

Functional

150–200ms · ease-out

Hover, toggles, state transitions

Reveal

500–800ms · cubic-bezier(0.16, 1, 0.3, 1)

ScrollReveal blur-in, cloud entry fade

Ambient

18–36s · ease-in-out infinite

Cloud drift, rotating Trusted-by names

Cloud Choreography

Each cloud gets a unique animation seed so the sky never feels uniform.

  • 6 keyframes (heroCloudA…heroCloudF) with translateX 22–48px.
  • Durations 19–34s, delays 0–11s, randomly assigned per cloud.
  • Entry: cloudEntry opacity 0→1 over 1.8s, staggered +0.12s per cloud.

Tactile Button

The hover-glow utility adds inset highlight + neutral drop shadow at rest, lifts 2px and brightens on hover, compresses on active.

Voice

Real hiring experience meets a low tolerance for buzzwords. Straightforward, clever, conversational, specific, opinionated, occasionally funny. Never corporate, gimmicky, salesy, vague, or preachy.

Straightforward

Name the problem like someone who has lived it. No hedging.

“Your stack is full. Your hiring is still guesswork.”

Specific

Concrete over abstract. Numbers, scenarios, role types.

“Messa reads every CV, guides every interview, and writes every scorecard.”

Opinionated

Messa has a point of view. Decide with evidence, not vibes.

“The part nobody built.”

We say

  • “See talent clearly.”
  • “Built on a hiring playbook.”
  • “Shows up with the answers.”
  • “Live transcription, not recording.”
  • “Decide with evidence. Not impressions. Not vibes.”
  • “The part nobody built.”

We don't say

  • “AI-powered” / “cutting-edge” / “revolutionary”
  • “Seamless” / “innovative” / “synergize”
  • “Leverage” anything.
  • “We believe” / “perhaps” / passive voice.
  • Em dashes — they're banned in every copy surface.
  • AI sci-fi imagery or stock HR photos.