Brand Guidelines

How PropMingle Looks, Sounds, and Moves.

This is the single source of truth for the PropMingle brand — logo, color, typography, motion, and voice — derived directly from the live design system so it never drifts from what actually ships.

Foundation

Who we are

PropMingle combines AI-driven development, precision performance marketing, and strategic RevOps to help real estate agents, brokerages, developers, and property managers list more, close faster, and scale revenue.

Trait	Means we...	Doesn’t mean we...
Poppy / energetic	Use vivid color, motion, and confident type at full strength	Look cluttered, loud for its own sake, or juvenile
Precise	Talk in outcomes — leads, closes, revenue — and back claims with numbers	Hide behind vague marketing-speak ("synergy," "holistic solutions")
Global-first	Speak to real estate markets everywhere, not just the US	Use region-specific idioms, US-only currency/units, or US-centric case framing
Technical but human	Explain AI and automation in plain, concrete terms	Show off jargon or hide the human outcome behind the tech

Voice & tone

Direct. Lead with the outcome (“List more. Close faster. Scale revenue.”) before the mechanism.
Active voice, short sentences. Avoid passive constructions and hedging.
Confident, not hyperbolic. Say what we do; let specificity persuade. Avoid unsubstantiated superlatives.
No filler. Cut “leverage,” “utilize,” “synergy,” “cutting-edge.”
Global phrasing. No “nationwide,” no US-only references unless the page is explicitly US-scoped.

Logo

Two homes, one node.

Two roof strokes meeting at a single connecting node — a home (“Prop”) joined to another home (“Mingle”) — reduced to the fewest strokes that still read clearly at 16px. The mark is a single-color glyph that always inherits currentColor.

Minimum clear space: half the mark’s height on all sides
Minimum display size: 16px square
Never recolor individual strokes or apply gradients
Never place on emerald or gold — insufficient contrast

Primary lockup

Monochrome, currentColor

Color

A vivid emerald, a warm gold pop, no reddish-brown

A vivid emerald (growth, energy) is the primary accent, with a warm gold used sparingly for contrast moments — status dots, highlights. Both sit over the same dark neutral ramp and an Oatmeal Cream background. There is intentionally no reddish-brown anywhere in the system.

Neutrals

background / navy-50 #f7f5f0

Oatmeal Cream — page background

foreground / navy-950 / ink #20241d

Primary text color

navy-900 #2f342a

Dark surfaces, logo badge, secondary buttons

navy-800 #414738

Secondary button hover

navy-700 #58604e

Dark neutral, mid-contrast text on light

navy-600 #7b907a

"Sage Green" — muted decorative neutral

navy-100 #e6e6dd

Subtle fills, dividers on dark-adjacent surfaces

muted #6b6f61

Secondary / body-muted text

line #e3e0d5

Borders, hairlines, dividers

Emerald (primary accent)

accent-700 #0c4423

Darkest emerald, rarely used directly

accent-600 #0f5c2e

Button / link hover state

accent-500 #14793d

Primary accent — buttons, links, focus, underlines

accent-400 #34c759

Bright green — decorative, dark surfaces only

accent-100 #dcf5e3

Light mint tint — subtle backgrounds

Secondary pop

gold #e28200

Secondary pop — status dots, small highlights only

Usage rules

Primary CTA color is accent-500, hover accent-600. Only color used for primary buttons.
accent-400 is decorative-only and must sit on a dark (navy-900+) surface.
Gold is an accent of an accent — one status dot, badge, or highlight per view, never a primary CTA color.
No reddish-brown or rust hues anywhere. If a “warning” color is needed, use gold, not red.

Typography

Outfit, everywhere

Outfit (Google Fonts) is the sole typeface for the entire site — headings and body both. No second typeface without updating this document and the font loader.

List more. Close faster.

Outfit at regular weight (400) reads clean and modern for body copy at 1.6 line-height, while headings run bold (700) with tight -0.02em tracking for a confident, compact feel.

400 Regular500 Medium600 Semibold700 Bold800 Extrabold

Role	Weight	Notes
Headings (h1–h4)	700 (bold)	line-height 1.1, letter-spacing -0.02em — tight, confident
Nav / CTA labels	700 (bold)	Always bold, never regular, for anything clickable
Body copy	400 (regular)	line-height 1.6 for readability
Secondary / blurb text	500–600	text-sm / text-xs, text-muted

Shape & motion

Soft, rounded, ease-out-expo

Corner radius

Buttons are always fully rounded pills. Cards and dropdown panels use a large soft radius. Never sharp corners on containers.

Elevation

Primary buttons use an emerald-tinted shadow, not neutral gray. Panels float on a soft, low-opacity ink shadow with large blur.

Motion

Default easing is ease-out-expo. Interactive elements lift on hover and scale down on press. All motion respects prefers-reduced-motion.

Guardrails

What not to do

Introduce reddish-brown, terracotta, or rust tones — retired direction, explicitly excluded

Add a second typeface

Use sharp / square corners on cards, buttons, or icon containers

Use accent-400 (bright green) as text or fill on the light/cream background

Use gold for more than one focal element per screen, or as a primary CTA color

Use US-only phrasing, currency, or regulatory references on globally-scoped pages

Ship new motion that ignores prefers-reduced-motion

Use generic CTA copy ("Learn More," "Submit," "Contact Us")

Reference

Source of truth

Any change to brand fundamentals should update this page and the corresponding source file in the same change.

Element	File
Color tokens, motion easing, keyframes	`src/app/globals.css`
Font loading	`src/app/layout.tsx`
Logo mark	`src/components/ui/logo-mark.tsx`
Button / CTA styles	`src/components/ui/button.tsx`
Header/nav patterns, icon badge treatment	`src/components/header.tsx`
Site name, description, canonical URL	`src/lib/site-config.ts`

Have a question about applying the brand to a new page or campaign?

Talk to the Team