Better.
Conversion.
The complete system behind how Elequate looks, sounds, and feels. Built for the team, contractors, and partners so every shipped pixel looks like it came from the same company.
The company, in one page.
Every design decision that follows this page — color, typography, component, photo — is in service of these four statements. If a design choice doesn't make one of these more true, it's the wrong choice.
What's inside this guide
14 sections · 1 source of truth- 02FoundationsWho we are · the four values · vision & mission
- 03LogoWordmark · E-mark · clear space · red lines
- 04ColorBlueprint family · semantic palette · contrast
- 05TypographyInter ramp · six roles · pairing patterns
- 06Space & Shape8-point scale · radius ramp · three shadows
- 07MotionTwo curves · four durations · reduced-motion
- 08IconographyLucide stroke-2 · tinted-tile pattern
- 09ComponentsButton · input · badge · every state, both modes
- 10Data VizStat-tile anatomy · delta chips · formatting rules
- 11PhotographyThree groups · agents, property, brand plates
- 12VoiceDo/Don't · forbidden words · headline formulas
- 13AccessibilityContrast matrix · focus rings · tap targets
- 14Exportstokens.css · JSON · PDF · logo pack
Who we are
Real-estate teams don't lose deals because they lack leads. They lose them to a leaky funnel and a CRM that never tells the truth.
Elequate is the intelligence layer on top of your CRM. We don't replace Follow Up Boss, kvCORE, or BoomTown — we make them tell the truth about what your team actually did last week, and what to do about it this week.
We sound like the operator in the room, not the agency pitching them. Diagnostic over decorative. Specific over sweeping. Every number we show has a name, a source, and a next action attached.
The four values
Numbered · ordered by weightDiagnostic over decorative
Every number has a name, a source, and a next action. If it's just a chart, cut it.
The operator's standard
We ship like the people who'll use it on Monday built it. No SaaS cruft, no default chrome.
Name the leak
Speed-to-lead of 6m is called 6m. We don't bury misses in averages. The work shows up.
Better, not more
We don't optimize for leads generated. We optimize for conversations that close.
Vision & Mission
A real-estate team industry where every leader walks into Monday knowing exactly where the week's revenue is hiding — and has a coach in their pocket to go find it.
Make every conversation between a team leader and their agents sharper, more specific, and more actionable than it was the week before.
The mark, the rules, the red lines.
Two lockups and one icon. Built on the E-mark — a stacked right-angle read as both the letter E and a blueprint module. Use them as shown. Don't recolor, don't outline, don't tilt.
Primary lockups
Clear space & minimum size
Rule · One X on every side
"X" equals the height of the E-mark. Nothing — type, imagery, edge of container — enters the cleared zone. The logo breathes or it doesn't work.
Minimum clear space · 1X
What never to do
4 red linesA palette with opinions.
Blueprint Blue builds the trust. Cyan Accent draws the eye. Navy Deep carries the weight. Every swatch below says what it's for, when not to use it, and whether it passes contrast. Click any card to copy its hex.
The Blueprint family
Dark-mode backgrounds
Status & Tone
Used in data viz, alerts, badgesWhite canvas. Navy calls to action. Cyan reserved for live and highlight.
Primary background is pure white or #f8fafc. Body copy sits at #1e3a5f, secondary at #5a7a94. The primary CTA is Navy Deep, not Cyan — cyan on white fails contrast for anything under display size.
Midnight Indigo canvas. Cyan is the primary action. Glass mediates everything.
The platform lives in #1a2744 backgrounds with Deep Water chrome. Cyan Accent becomes the primary — and it passes contrast here. Every card that isn't primary chrome is glass: 6% white on 12px blur.
Inter, all the way down.
One family, six roles. Display and section weights lean heavy for emphasis. Body is set at 400 for readability. All labels are short, all-caps, 0.12em tracked — that's the voice of the product whispering what something is.
The type ramp
line 1.02 · tracking -0.035em
Marketing hero only
line 1.05 · tracking -0.028em
Section titles
line 1.15 · tracking -0.015em
Card titles, subsections
line 1.35
Card headers, list items
line 1.55
Ledes, intro paragraphs
line 1.65
Default running copy
tracking 0.12em
Tags, eyebrows, tile labels
Pairing patterns
Teams don't lose deals to a shortage of leads. They lose them to a Monday that never tells the truth.
Display-2 over Body-lg. The headline does the arguing; the sub qualifies the claim. Never tint or embellish the headline — tracking and weight do the work.
2m 14s
Display-2 metric, Body-sm note, Label tag above. Metrics set tight and heavy. Units ("s", "m", "%") stay at the same weight, never superscripted.
If a Monday brief tells a team leader something they already knew, we failed that week.
Heading-3 in a quote surface. White on Deep Water. Citation sits small, all-caps, at 0.1em tracking for the operator-to-operator tone.
The grid, the radius, the shadow.
Eight-point base for spacing. Five-step radius ramp — pill reserved for badges. Three elevation tiers (resting, hero, glow). Everything else is a mistake.
Spacing scale
8pt base · 9 stepsRadius ramp
Click any tile to copy valueElevation
Click tile · copy shadowQuiet, confident, never bouncy.
Motion earns its place by helping you read, not by performing. Two curves only — an ease-out for entrances, a standard for interactions. Keep durations tight: 200ms for response, 600ms for arrival. Anything longer feels slow; anything shorter feels jittery.
Signature motion patterns
Click card · copy motion specEntrance curve · cubic-bezier(0.16, 1, 0.3, 1)
Deceleration-heavy easing for anything arriving on screen — cards, heroes, scroll reveals. Reads as confident, not springy.
Interaction curve · cubic-bezier(0.4, 0, 0.2, 1)
Material "standard." Hover, press, focus, state-change. Symmetric response — in and out feel equivalent, which is what interaction demands.
Durations · 200 / 300 / 600 / 800
200ms interaction, 300ms layout, 600ms scroll-reveal, 800ms hero entrance. If it's longer than 800ms, it's a video — film it, don't animate it.
Reduced motion · prefers-reduced-motion
All non-essential motion collapses to instant state changes. Entrance reveals fade without translate; pulses freeze at rest state. Never strip meaning.
Lucide. Stroke-2. Tinted tiles.
We commit to Lucide. No mixing libraries, no custom glyphs, no emoji. Two placements: inline with copy (at 16px, current color) or inside a tinted tile (52px square, semantic color family).
Lineup · the 16 we use most
Tinted-tile pattern
Dashboard signatureButtons, inputs, badges. Both modes. Every state.
The kit the site and the platform share. Dark is the default (platform-first), light is the marketing twin. Same variant names, same token sources, different palettes.
Button · light (marketing)
Primary
Cyan · 1 per viewSecondary
Glass · nav + cardsGhost
Inline · ≤1 per rowButton · dark (platform)
Primary
Navy · 1 per viewSecondary
Outlined · navigationGhost
Text-only · footersInput · Badge · both modes
Numbers that name themselves.
Every metric we show on screen follows the same anatomy: a label that says what it measures, a tinted icon that makes it findable at a glance, a delta chip that says which direction it's moving, and a note that points at a next action.
Stat-tile anatomy
Number formatting
Time: "2m 14s" not "134 seconds." Currency: "$2.4M" not "$2,400,000." Percentages: whole numbers unless the decimal changes a decision.
Delta chips
Green = positive direction. Red = missed target. Amber = flag/count (e.g., "14 leaks"). Always show direction (arrow) plus magnitude.
Label vs. metric vs. note
Label is what it is. Metric is the number. Note is so what. If the note is empty, the tile shouldn't ship.
Tinted-icon family
Each metric class owns a tint: cyan = speed metrics, green = conversion metrics, purple = program metrics, amber = at-risk metrics. Don't cross the streams.
Three libraries, one eye.
We don't use stock. Three distinct photographic styles — each lives in its own lane and doesn't borrow from the others.
01 · Blueprint motif
Architectural drawings, grids, schematic renders. Hero backgrounds and section atmospherics.
02 · Agents at work
Real teams, real rooms. Photographed on-location — never posed. Use behind testimonial + case-study sections.
03 · Property & place
Architecture the agents actually sell. Used as testimonial backings, funnel-stage visual context, location markers.
Operator to operator. Never agency pitch.
Write like the team leader in the room. Diagnostic, specific, first-name. No "solutions," no "empowerment," no "unlock." Frameworks are named: CALM, WOW, POP, HHH, MAIT — always in caps, never translated down.
Do & Don't
Do write
- Your speed-to-lead last week was 6m 14s. Target is under 2m.
- Three agents missed contact rate. Their shared leak is first-touch voicemail.
- Monday brief: two tours booked off the Thursday follow-up sequence.
- We don't replace FUB. We make it tell the truth.
Don't write
- Unlock your team's potential with data-driven insights.
- Empower your agents with the tools they need to succeed.
- Boost performance without the complexity.
- Our platform seamlessly integrates with your existing workflows.
Forbidden words
If you catch one in shipping copy, pull it.Headline formulas
The rules that keep the brand honest.
Brand rules are also accessibility rules. Every color pair in the system has been measured — these are the pass/fail results, and they dictate what goes where.
Contrast matrix
Focus rings · visible, always
2px Cyan Accent outline with 2px offset. Identical on keyboard and click focus. Never set outline: none without a replacement.
Tap targets · 44 × 44 minimum
Iconbars and close buttons always pad out to 44px. Density adjustments never win over reachability.
Motion · reduced-motion respected
prefers-reduced-motion collapses entrances to fades and stops loops. Parallax, autoplay, pulsing — all disabled.
Color never carries meaning alone
Deltas pair color with an arrow. Status chips pair color with a dot. Red never stands alone to signal "bad."
Everything a creative needs to move.
One button per asset. Tokens for engineering, a Figma-ready JSON, and one-click ZIP packs of every logo, photograph, and brand asset — plus a print-optimized PDF of this document. Every photo and logo in this guide is also click-to-download.
tokens.css
Every color, radius, shadow, typography variable, and motion curve as CSS custom properties. Import once, use everywhere.
tokens.json
Flat JSON in Design Tokens W3C draft spec format. Imports cleanly into Tokens Studio for Figma and most modern pipelines.
.ase palette
Adobe Swatch Exchange reference. Opens in Illustrator, Photoshop, InDesign with every Elequate color named.
Voice & writing cheat sheet
Headline formulas, forbidden words, Do/Don't columns. Built to hand to any external writer.
Logo & icon pack
Every lockup and E-mark — Blueprint Blue and white variants — plus both favicons, bundled as PNGs in one ZIP.
Photography pack
All three libraries — blueprint motif, agents at work, property & place — plus the grid texture, in one ZIP.
Complete asset pack
Everything at once: logos, icons, favicons, all photography, textures, and product screenshots in a single ZIP.
Print this guide
Open a print-optimized view of this document. Save as PDF from the print dialog — sectioned, paginated, vendor-ready.