00Brand guidelines

How PropMingle looks, sounds, and tells a story.

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

01Foundation

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.

02Logo

A P that opens the door.

A bold navy “P” for Prop, with a green house roof and four-pane window across its base: the home every campaign is ultimately about. The mark sits beside a two-weight wordmark, bold “Prop” and medium “Mingle”, set in Outfit.

Minimum clear space: half the mark’s height on all sides
Minimum display size: 16px square
Use the full-color mark on light backgrounds and the reversed mark (white letter) on dark
Never place on emerald or gold — insufficient contrast

PropMingle

Primary lockup

PropMingle

Reversed, for dark backgrounds

03Color

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

A vivid emerald (growth, the fix) is the primary accent. A warm gold marks problems: the highlighter swipe behind a pain point, leak badges, struck-through before values. Both sit on an Oatmeal Cream canvas with ink text and the same dark neutral ramp. There is intentionally no reddish-brown anywhere in the system.

Neutrals

background / navy-50 #f7f5f0

Oatmeal Cream — the page canvas on every page

white #ffffff

Alternating chapter bands, cards, and panels

night #111410

Footer and the deepest dark surfaces

foreground / navy-950 / ink #20241d

Primary text color, and dark ink bands (stats, contact details)

navy-900 #2f342a

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, on ink or dark surfaces only

accent-100 #dcf5e3

Light mint tint — subtle backgrounds

Secondary pop

gold #e28200

The problem color — highlighter swipes, leak badges, struck-through “before” values. Never text on cream.

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 ink or another dark surface.
Gold means “problem.” Use it as a highlight, tint, dot, or strike-through behind ink text; never as text on cream and never as a CTA.
No reddish-brown or rust hues anywhere. If a “warning” color is needed, use gold, not red.

04Typography

Unbounded for display, Outfit for everything else

Unbounded (Google Fonts) sets h1/h2 headings, big numbers, and the wordmark. Outfit carries sub-headings, body, nav, and buttons. No third typeface without updating this document and the font loader.

List more. Close faster.

Unbounded at semibold (600) with -0.035em tracking gives display lines their wide, confident shape. Outfit at regular weight (400) reads clean and modern for body copy at 1.6 line-height.

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 or text-navy-700

05Storytelling

Every page is a story: problem, leaks, fix, proof

Pages follow one narrative arc so a visitor always recognizes their own problem before they meet our solution.

Lead with the problem

Every page opens on the reader's pain, in their words, with the costliest phrase marked by the gold highlighter.

Show a scene, not a claim

Real moments with times and details: a 9:14 PM inquiry, an unread inbox, a receipt nobody can trace.

Number the chapters

Prologue, numbered chapters, epilogue. The problem, the leaks, the fix, the proof, the next step.

Resolve in emerald

Gold marks what's broken; emerald marks the fix. Before values are struck through in gold, after values set in emerald.

In practice

Your next closing just reached out. Nobody answered.

Next morningSeconds

06Shape & 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.

07Guardrails

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 as a CTA color, or as text on the cream background (it fails contrast) — keep it behind or beside ink text

Open a page with the solution — lead with the reader's problem, then resolve it

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")

08Reference

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, highlighter	`src/app/globals.css`
Story page parts (hero, chapters, scenes, before/after)	`src/components/story/page-parts.tsx`
ICP and service narrative copy	`src/data/industry-stories.ts, src/data/service-stories.ts`
Real-estate motifs (skyline, listing card, SOLD sign, map, ticker)	`src/components/realestate/`
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