Colors

Every color is a CSS custom property mapped to a Tailwind class. The marketing site scopes an override palette under .messa-cream-landing that replaces core tokens with warmer, calmer values for the illustration system.

Core — Default Palette

BG Primary#FEFEFE
bg-bg-primaryPage background, base cards
BG Secondary#F8F7F5
bg-bg-secondaryNav pill, sections, inset cards
BG Tertiary#F0EFEC
bg-bg-tertiaryTags, subtle fills
Text Primary#0A0A0B
text-text-primaryHeadlines, body
Text Secondary#6E6B68
text-text-secondaryDescriptive copy
Text Muted#A3A19E
text-text-mutedCaptions, metadata
Border Default#E6E5E2
border-border-defaultCards, dividers
Accent#3C4BE6
bg-accent / text-accentDefault electric blue

Cream Landing — Scoped Overrides

Cream BG#FBF0E6
bg-bg-primary (scoped)Every surface on /factory and /about
Cream Border#E8D9C5
border-border-default (scoped)Card borders on cream
Muted Accent#5A6B8F
bg-accent / text-accent (scoped)Desaturated slate blue. CTAs, pills, stepper
Sage#7AA582
text-success (scoped)Success state on cream
Sage Strong#4A7552
text-success-strong (scoped)AA body text on cream

Atmosphere — Inline

Sky Blue#D4E3F0
inlineGradient peak, hero pill fill
Sky Mid#E4E6E2
inlineGradient transition step
Sky Warm#F0E6D8
inlineGradient transition step
Warm Brown#8B6F4E
inlineHero conveyor signage
Fraud Navy#1B2240
inlinePrivacy / fraud callout top
Fraud Navy Mid#2C3766
inlinePrivacy / fraud callout mid

Typography

Component-level type scale. Samples use current landing copy. Use Tailwind tokens and @utility classes — never arbitrary font sizes.

Display

Hero H1

See talent clearly.

Heading L

Differentiation

The part nobody built.

Heading M

Section titles

Step 1 sets the bar.

Subheading

Callout headlines

Catches fraud without recording a single call.

Body L

Lead paragraphs

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

Body

Default body

Software paired with an expert-built assessment playbook.

Small

UI labels

Trusted by hiring teams at Satellogic.

Caption / Pill

Pills, overlines

PRIVACY-FIRST FRAUD DETECTION

Pills & Badges

Every marketing section opens with a pill tag. Three variants cover the full narrative arc. The hero uses a rotating Trusted-by pill.

Section Pills

The ProblemBreakdownThe ProductFAQ
section-pill section-pill-infosection-pill section-pill-success

Hero Accent Pill

Trusted by hiring teams at Satellogic
border-accent/30 bg-accent/5 text-accent rounded-full

Chips — Inside Callouts

Credential mismatchesInflated timelinesApplication fraud

Buttons

Primary + outline pair for every CTA. Both use the hover-glow utility for a tactile 2px lift, subtle inset highlight, and neutral drop shadow — no bright accent glow.

Primary

bg-accent text-accent-foreground rounded-full hover-glow

Outline — Accent

See how it works
border-accent/30 text-accent rounded-full hover:bg-accent/5

Nav Link — Pill Hover

ProductAboutLog in
hover:text-accent hover:bg-accent/8 px-3 py-1.5 rounded-full

Cards

Four card patterns cover the marketing site and app UI moments.

Cream Card (Values / Team)

Evidence over opinion

Hiring decisions backed by structured signal.

Messa Column Card

Messa column

Featured comparison column. Translucent white + accent border + subtle drop shadow.

bg-bg-secondary border border-accent shadow

Dashboard Card (App)

Candidates

Glass surface used inside the ProductSection mockup.

FAQ Accordion Item

No. Messa doesn't record audio or video. Sidekick guides interviewers in real time without capturing the call.

Callouts

Section-ending moments that need extra weight. Keep them rare.

Privacy / Fraud — Dark Callout

Privacy-first fraud detection

Catches fraud without recording a single call.

No recording bot. No consent forms. No liability overhead.

System Statement — Quiet Closer

Step 1 sets the bar. Every other step enforces it.

That's why it's a system, not four features duct-taped together.

FAQ Accordion

Single-open accordion. One item expanded at a time. Plus icon rotates 45° to form an × on open. Smooth grid-rows transition for the panel body.

No. Messa doesn't record audio or video. Sidekick guides interviewers in real time without capturing the call.

Messa works alongside your ATS, not instead of it. It's the evaluation layer that makes decisions obvious.

Leaders who are great at their job but have no playbook for the roles they need to hire.

grid-template-rows: 0fr → 1fr transition

Icons

Landing and marketing use line icons only. Lucide by default.strokeWidth=1.75 everywhere. Accent blue inside accent pill badges; text-secondary inside nav hover states.

Scale

Grid3x3

Gem

Home

ShieldCheck

Linkedin

ArrowRight

Plus

The app mockup inside ProductSection uses the local /icons/flex-line/ set via the FLIcon helper. These also render as line icons and match the Lucide stroke weight.

Spacing

Tailwind's 4px base scale. Use the component-level recommendations below.

ContextValueTailwind
Between icon and label6–8pxgap-1.5 / gap-2
Nav link spacing4pxgap-1
Card padding24pxp-6
Large card padding32–48pxp-8 md:p-12
Section padding64–96pxpy-16 md:py-24
Hero padding96–160pxpt-32 md:pt-40
Callout spacing (top/bottom)128–192pxmt-32 md:mt-48
Page horizontal padding16–32pxpx-4 md:px-8

Shadows

Three marketing-surface shadow tiers + the tactile button treatment.

Subtle (Card)

Subtle (Card)

Cream cards (values, team)

Medium (Messa Column)

Medium (Messa Column)

Featured card, nav resting state

High (Callout)

High (Callout)

Privacy fraud dark card

Tactile Button (hover-glow)

Applied via the hover-glow utility. Rest + hover + active states:

Rest / Hover / ActiveHover → 2px lift + brightness(1.08) + stronger shadow. Active → 1px lift + compressed shadow.