How TransactVault looks, sounds, and feels.

01

Brand essence

What TransactVault is, who it’s for, and what we’re replacing.

02

Voice

Five attributes that make a sentence sound like us.

1. Plainspoken

   Short sentences. Common words. We say “three years” instead of “long-term retention windows.” If a broker has to read it twice, it’s wrong.

   Write: Every plan includes three years of compliant storage.

   Not: All subscription tiers leverage best-in-class long-term retention infrastructure.

2. Quietly confident

   We don’t need to shout. The product is good, the price is honest, and the audit trail does the bragging. We state facts and let them land.

   Write: No sales calls, no surprises.

   Not: The most revolutionary, game-changing platform in real estate history.

3. Specific

   Numbers, names, places. “Antelope Valley brokerages.” “$149 / month.” “60-day export window.” Specifics build trust the way generalities can’t.

   Write: Switching from SkySlope saved us $6k a year.

   Not: Customers report meaningful savings.

4. Warm

   We like the people we serve. Brokers and TCs are the heroes of every story. We never condescend, never blame, never lecture.

   Write: Spend less time herding paperwork.

   Not: Stop wasting your time on inefficient manual processes.

5. Compliance-grounded

   Every claim should be traceable to something the product actually does. We don’t say “audit-ready” unless the export tool exists. If we mention DRE windows, we cover them.

   Write: One click exports every document with a manifest.

   Not: Streamlined audit workflows for the modern brokerage.

03

Tone by context

The voice stays constant; the tone shifts to fit the moment.

04

Words we use & avoid

A reach-for list and a never-list.

05

Messaging architecture

The hierarchy of what we say, in order.

06

Logo

The mark and the wordmark, and how they live together.

Primary mark

Vault Teal tile, rounded corners (rx = 7 of 32), four white circles, center diamond, lock cutout in Vault Teal.

TransactVault

Lockup

Mark + wordmark side-by-side. Transact is Inter 400, Vault is Inter 800. Both sit on the ink baseline.

TransactVault

Lockup, dark surface

On Ink (#0f172a) or photography. Wordmark switches to white; mark stays Vault Teal.

Wordmark construction

The wordmark is a single word with two weights. Transact sets in Inter 400 (light); Vault sets in Inter 800 (heavy). The contrast carries the meaning — the “vault” is what we’re selling. Letter-spacing is −0.01em.

Clear space & minimum size

Reserve a clear space equal to the height of the “V” in “Vault” on every side of the lockup. Minimum sizes:

• Digital, lockup: wordmark text no smaller than 14 px.
• Digital, mark only: 24 px square.
• Print, lockup: 18 mm wide.
• Print, mark only: 8 mm square.

Don’ts

1. Don’t set the wordmark all-caps (“TRANSACTVAULT”) or all-lowercase (“transactvault”). The casing carries the brand.
2. Don’t flip the weight contrast. Transact is always lighter than Vault.
3. Don’t replace the tile color with anything other than Vault Teal #0f766e or pure white (on dark surfaces).
4. Don’t add a stroke, shadow, gradient, glow, or bevel to the mark.
5. Don’t crop the rounded corners off the tile.
6. Don’t place the mark on a busy photograph — use a solid panel or scrim.
7. Don’t rotate, skew, or stretch the mark or wordmark.
8. Don’t recreate the wordmark in another typeface. Use the rendered SVG for print at any size.

07

Color system

Tokens straight from static/css/main.css. CMYK values are recommended print conversions — verify on a contract proof.

Brand

State

Neutrals

Usage rules

* CMYK values are recommended Pantone+ uncoated conversions. For critical print, run a Pantone match on Vault Teal (closest: Pantone 2237 C / 7484 U) and approve a contract proof.

08

Gradients

Three sanctioned gradients. No others without a brand review.

09

Typography

One family does the whole job.

Type scale

Rules of thumb

• Headlines (h1–h4) get letter-spacing: −0.015em; the hero gets −0.03em.
• Body line-height is 1.55; headline line-height is 1.15.
• Eyebrows are uppercase, 600, with letter-spacing: 0.08em.
• Numbers in stat cards and prices use font-variant-numeric: tabular-nums so columns align.
• Body copy never goes below 14 px in print or 13 px on screen.

10

Radius & shape

Soft corners are a brand signal — they keep the product calm.

Logo tile uses its own intrinsic radius (rx = 7 within a 32-unit viewBox, so 22% of the side). Don’t change it.

11

Spacing & layout

Everything snaps to a 4 px grid. Generous whitespace is a feature.

Containers

• --container — 72rem (1152px). The default content width: landing, pricing, dashboard, transactions list.
• --container-narrow — 56rem (896px). The reading width: hero copy, CTA banner, narrow sections.

Section rhythm

Every .section uses padding: var(--sp-9) var(--sp-5). Headings sit centered with .section-heading: title, lede, then content with a --sp-7 gap. This consistent rhythm is the calm.

12

Elevation & shadow

Three steps. Use them sparingly.

13

Motion

Movement should reassure, not perform.

• Default transition. 180ms cubic-bezier(.3, .7, .3, 1). Used for color, background, transform, box-shadow. Fast enough to feel responsive, eased enough to feel calm.
• Hover lift. transform: translateY(-1px) on buttons, translateY(-3px) on cards. Pair with the default shadow.
• Compliance celebration. The pop-in keyframe (scale 0.95 → 1, opacity 0 → 1) fires when the deal hits 100%. It’s the only celebratory animation in the product. Don’t add others.
• Progress bar. The compliance progress value transitions over 400ms cubic-bezier(.3,.7,.3,1).
• Reduced motion. Always respect prefers-reduced-motion: reduce — we kill every transition and animation when set. Brokers running long days deserve the choice.

14

Iconography

Where the product uses an icon, it uses a glyph.

TransactVault uses Unicode glyphs — not an icon library — on the marketing surface. They render at any size, ship in zero kilobytes, and never pixelate. When a vector icon is required (print, illustration), use Lucide at 1.5 px stroke, rounded line caps, and the current text color.

The check (✓) is reserved for compliance and confirmation. The cross (✕) is reserved for what we’re against on comparison strips and for errors. Don’t mix them with brand decoration.

15

Components in practice

A short tour of the components a flyer or brochure should imitate.

16

URL & email standards

Small details that compound across thousands of impressions.

The URL

The canonical written URL is transactvault.app. No protocol, no www, no trailing slash, all lowercase. This is what we print on flyers, type into emails, and read on the radio.

Inside HTML <a> attributes the protocol is required (https://transactvault.app). The rule above governs the visible string only.

Email addresses

All email addresses render in lowercase, always. The canonical contact is [email protected].

The wordmark in running copy

When typed in body copy, the company name is always TransactVault — one word, T and V capitalized, everything else lowercase. The url is different from the name on purpose:

• Brand name in copy: TransactVault
• URL on a flyer: transactvault.app
• Logo wordmark: rendered, never re-typed

17

Sample applications

Three examples of the brand applied. Use them as scaffolds.

Flyer (US Letter)

TransactVault For California brokerages

Switching from SkySlope

Transaction management that actually feels good to use.

Flat pricing. Three years of compliant storage. No sales calls.

• From $149/mo — everything included
• Live compliance score on every deal
• One-click DRE-ready export

Social card (1200 × 630)

Email signature

Renee Okafor
Broker / Owner · Lancaster Realty Group
[email protected] · (661) 555–0142
Powered by TransactVault · transactvault.app

18

Do’s & don’ts

A quick reference checklist.

19

Asset downloads

Everything a designer needs in one place.

• Logo, SVG

  The master file. Scales infinitely. Use this for print at any size.

  Download
• Brand book, PDF

  This page, print-ready. Hand it to outside designers and vendors.

  Download
• Color tokens, CSS

  The full set of design tokens as CSS custom properties.

  View source
• Inter font family

  Free under the SIL Open Font License. Pull from rsms.me or Google Fonts.

  rsms.me/inter

20

Versioning

When the brand moves, the book moves with it.

Questions, additions, or things that aren’t covered yet? Email [email protected] and we’ll get them into the next revision.